Search Results for: Turbo

585 search results for Turbo

Sort By

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Turbo Streams

            Copy Code

                            Show All Lines

                        53 lines
            |
            templates/product/show.html.twig
        
            {% extends 'product/productBase.html.twig' %}
        
            {% block productBody %}
        
                <turbo-frame id="product-info" target="_top" class="row pt-3 product-show">
        
                Show Lines

                                                    // ... lines 5 - 31
                            
                        <div class="p-3 mt-4 d-flex justify-content-between flex-wrap flex-lg-nowrap">
        
                            <div id="product-quick-stats">
        
                                <strong>{{ product.priceString|format_currency('USD') }}</strong>
        
                                <br>
        
                                <strong>{{ product.reviews|length }}</strong> Reviews
        
                                <br/>
        
                                <strong>{{ product.averageStars }}/5</strong><i class="fas fa-star ms-2"></i>
        
                            </div>
        
                            <div>
        
                                {{ include('product/_cart_add_controls.html.twig') }}
        
                            </div>
        
                        </div>
        
                Show Lines

                                                    // ... line 44
                            
                </turbo-frame>
        
                Show Lines

                                                    // ... lines 46 - 48
                            
                <h3>Reviews</h3>
        
                {{ include('product/_reviews.html.twig') }}
        
            {% endblock %}

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Targeting Links in or out of the Frame

            Copy Code

                        22 lines
            |
            templates/cart/_featuredSidebar.html.twig
        
            <turbo-frame id="cart-sidebar" target="_top">
        
                <div class="component-light product-show p-3 mb-5">
        
                    <h5 class="text-center">Featured Product!</h5>
        
                    <a href="{{ path('app_product', { id: featuredProduct.id }) }}">
        
                        <img
        
                            alt="{{ featuredProduct.name }}"
        
                            src="{{ asset('/uploads/products/'~featuredProduct.imageFilename) }}"
        
                            class="d-block"
        
                        >
        
                    </a>
        
                    <div class="pt-3">
        
                        <h6 class="d-flex justify-content-between mb-3">
        
                            <strong>{{ featuredProduct.name }}</strong>
        
                            {{ featuredProduct.priceString|format_currency('USD') }}
        
                        </h6>
        
                        {{ include('product/_cart_add_controls.html.twig') }}
        
                    </div>
        
                </div>
        
            </turbo-frame>

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Using a Full HTML Page to Populate a Frame

            Copy Code

                            Show All Lines

                        23 lines
            |
            templates/weather/index.html.twig
        
                Show Lines

                                                    // ... lines 1 - 2
                            
            {% block body %}
        
                <h1>The Weather!</h1>
        
                <turbo-frame id="weather_widget">
        
                    <a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
        
                    <script>
        
                    !function (d, s, id) {
        
                        var js, fjs = d.getElementsByTagName(s)[0];
        
                        if (!d.getElementById(id)) {
        
                            js = d.createElement(s);
        
                            js.id = id;
        
                            js.src = 'https://weatherwidget.io/js/widget.min.js';
        
                            fjs.parentNode.insertBefore(js, fjs);
        
                        }
        
                    }(document, 'script', 'weatherwidget-io-js');
        
                    </script>
        
                </turbo-frame>
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 21 - 23

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Turbo Frames Look for & Load the Matching Frame

            Copy Code

                        22 lines
            |
            templates/cart/_featuredSidebar.html.twig
        
            <turbo-frame id="cart-sidebar">
        
                <div class="component-light product-show p-3 mb-5">
        
                    <h5 class="text-center">Featured Product!</h5>
        
                    <a href="{{ path('app_product', { id: featuredProduct.id }) }}">
        
                        <img
        
                            alt="{{ featuredProduct.name }}"
        
                            src="{{ asset('/uploads/products/'~featuredProduct.imageFilename) }}"
        
                            class="d-block"
        
                        >
        
                    </a>
        
                    <div class="pt-3">
        
                        <h6 class="d-flex justify-content-between mb-3">
        
                            <strong>{{ featuredProduct.name }}</strong>
        
                            {{ featuredProduct.priceString|format_currency('USD') }}
        
                        </h6>
        
                        {{ include('product/_cart_add_controls.html.twig') }}
        
                    </div>
        
                </div>
        
            </turbo-frame>

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Popover!

            Copy Code

                            Show All Lines

                        87 lines
            |
            templates/main/homepage.html.twig
        
                Show Lines

                                                    // ... lines 1 - 59
                            
                                                        <turbo-frame loading="lazy" id="planet-card-{{ voyage.planet.id }}" target="_top" src="{{ path('app_planet_show_card', {
        
                                                            'id': voyage.planet.id,
        
                                                        }) }}">
        
                                                            <div class="p-10">
        
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        
                                                                   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        
                                                                   <path d="M12 3a9 9 0 1 0 9 9"></path>
        
                                                                </svg>
        
                                                            </div>
        
                                                        </turbo-frame>
        
                Show Lines

                                                    // ... lines 70 - 87

See Code Block in Script

Comment

Learn Symfony 6

30 Days with LAST Stack

More with fun Modals! Editing & Deleting

The deeper we go, the more confusig turbo-frames are... ...

VinniV

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

What about Turbo and Websocket in Symfony instead of ajax? ...

Axel

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Prefetching the Next Page

            Copy Code

                            Show All Lines

                        175 lines
            |
            assets/styles/app.css
        
                Show Lines

                                                    // ... lines 1 - 8
                            
            /*
        
            body.turbo-loading {
        
                opacity: .8;
        
            }
        
            */
        
            /*
        
            [data-turbo-preview] body {
        
                opacity: .2;
        
            }
        
            */
        
                Show Lines

                                                    // ... lines 19 - 175

See Code Block in Script

Comment

Learn Symfony 6

30 Days with LAST Stack

Turbo Stream Responses

... so let's think. What about a custom Turbo Stream? This is for Turbo 7, but should still be relevant: https://marcoroth.dev/posts/guide-to-custom-turbo-stream-actions The idea is: A) Create a custom stream action ...

weaverryan

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Modal Twig Component

Hey @ThierryGTH! > Thanks again for that great tutorial ! Really glad you enjoyed it! > Is it possible to trigger the same action of clicking the data-turbo-frame link but from an stimulus controller ...

weaverryan

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Fancier Toasts: Auto-close & Fading

... Nice! I'd add a `data-turbo-temporary` attribute to the notification message itself so it's not added to the page cache if the user leaves the page before the notification is closed/removed (it would cause a weird ...

tonysm

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

... failed: Module not found: "../../vendor/symfony/ux-turbo/assets/dist/turbo_controller.js" contains a reference to the file "@hotwired/stimulus". ``` After adding the line in packages json ``` "@symfony/ux-turbo ...

Xavier-V

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Listening & Publishing

... Ah... this helps a lot! The latest version of symfony/ux-turbo is 2.9! And the mercure stuff was moved into ux-turbo in 2.6.1. It sounds like you're coding along with our tutorial code. In that case, you should ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

The Delightful World of Vue

Encore, Symfony & API Platform

... or VueJS. Any of those frameworks are equally powerful and it really depends on personal choice as to what route to go for a project! But with the recent news about Symfony-ux, StimulusJS and Turbo, the entire universe ...

shadowc

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Adding a Custom Request Header Based on the Frame

Hey team! I was sceptical about stimulus and turbo at first, mostly because I spent a lot of time learning react to give my front end a better user experience, but after playing around with stimulus for a bit, I must ...

Tobias I.

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Live Components

Ryan, I read through the blog post and it seems close but I want to explain my situation a little more. LiveComponent #1 located in a Turbo Frame in column 1, lets you select a Category, Subcategory, and Group to find ...

Brandon

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Fantastic Modal UX with a Loading State

... the native close event so we can close everything. But.... (there's always one), how do you handle the following: Let's say the user clicks a link, modal with turbo frame opens but the loading time is longer then ...

webstack

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

... badges in real time with mercure and turbo streams from webhooks. Also, overriding any of the form templates and surrounding it in a turbo frame lets you have a modal anywhere that can load the crud forms for any entity ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

Thanks for the response Ryan, but still not working This is the current error now: ``` Module build failed (from ./node_modules/@symfony/stimulus-bridge/dist/webpack/loader.js): Error: The file "@symfony/ux-turbo ...

Xavier-V

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Toast Notifications

... server, that is just a normal link, right? You shouldn't need to do anything (write any custom JavaScript) - you can just allow the link to be a normal link and then, on click, Turbo will follow it. I feel I'm missing some ...

weaverryan

Read Full Comment

	{% extends 'product/productBase.html.twig' %}

	{% block productBody %}
	<turbo-frame id="product-info" target="_top" class="row pt-3 product-show">
Show Lines	// ... lines 5 - 31
	<div class="p-3 mt-4 d-flex justify-content-between flex-wrap flex-lg-nowrap">
	<div id="product-quick-stats">
	<strong>{{ product.priceString\|format_currency('USD') }}</strong>
	<br>
	<strong>{{ product.reviews\|length }}</strong> Reviews
	<br/>
	<strong>{{ product.averageStars }}/5</strong><i class="fas fa-star ms-2"></i>
	</div>
	<div>
	{{ include('product/_cart_add_controls.html.twig') }}
	</div>
	</div>
Show Lines	// ... line 44
	</turbo-frame>
Show Lines	// ... lines 46 - 48
	<h3>Reviews</h3>

	{{ include('product/_reviews.html.twig') }}
	{% endblock %}

	<turbo-frame id="cart-sidebar" target="_top">
	<div class="component-light product-show p-3 mb-5">
	<h5 class="text-center">Featured Product!</h5>
	<a href="{{ path('app_product', { id: featuredProduct.id }) }}">
	<img
	alt="{{ featuredProduct.name }}"
	src="{{ asset('/uploads/products/'~featuredProduct.imageFilename) }}"
	class="d-block"
	>
	</a>
	<div class="pt-3">
	<h6 class="d-flex justify-content-between mb-3">
	<strong>{{ featuredProduct.name }}</strong>

	{{ featuredProduct.priceString\|format_currency('USD') }}
	</h6>

	{{ include('product/_cart_add_controls.html.twig') }}
	</div>
	</div>
	</turbo-frame>

Show Lines	// ... lines 1 - 2
	{% block body %}
	<h1>The Weather!</h1>

	<turbo-frame id="weather_widget">
	<a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
	<script>
	!function (d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (!d.getElementById(id)) {
	js = d.createElement(s);
	js.id = id;
	js.src = 'https://weatherwidget.io/js/widget.min.js';
	fjs.parentNode.insertBefore(js, fjs);
	}
	}(document, 'script', 'weatherwidget-io-js');
	</script>
	</turbo-frame>
	{% endblock %}
Show Lines	// ... lines 21 - 23

	<turbo-frame id="cart-sidebar">
	<div class="component-light product-show p-3 mb-5">
	<h5 class="text-center">Featured Product!</h5>
	<a href="{{ path('app_product', { id: featuredProduct.id }) }}">
	<img
	alt="{{ featuredProduct.name }}"
	src="{{ asset('/uploads/products/'~featuredProduct.imageFilename) }}"
	class="d-block"
	>
	</a>
	<div class="pt-3">
	<h6 class="d-flex justify-content-between mb-3">
	<strong>{{ featuredProduct.name }}</strong>

	{{ featuredProduct.priceString\|format_currency('USD') }}
	</h6>

	{{ include('product/_cart_add_controls.html.twig') }}
	</div>
	</div>
	</turbo-frame>

Show Lines	// ... lines 1 - 59
	<turbo-frame loading="lazy" id="planet-card-{{ voyage.planet.id }}" target="_top" src="{{ path('app_planet_show_card', {
	'id': voyage.planet.id,
	}) }}">
	<div class="p-10">
	<svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
	<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
	<path d="M12 3a9 9 0 1 0 9 9"></path>
	</svg>
	</div>
	</turbo-frame>
Show Lines	// ... lines 70 - 87

Show Lines	// ... lines 1 - 8
	/*
	body.turbo-loading {
	opacity: .8;
	}
	*/
	/*
	[data-turbo-preview] body {
	opacity: .2;
	}
	*/
Show Lines	// ... lines 19 - 175