Search Results | SymfonyCasts

682 search results

Sort By

Code

Learn Symfony 6

Doctrine, Symfony 6 & the Database

Forever Scroll with Turbo Frames

            Copy Code

                            Show All Lines

                        54 lines
            |
            templates/vinyl/browse.html.twig
        
                Show Lines

                                                    // ... lines 1 - 2
                            
            {% block body %}
        
                Show Lines

                                                    // ... lines 4 - 27
                            
                    <turbo-frame id="mix-browse-list">
        
                        <div class="row">
        
                            {% for mix in pager %}
        
                Show Lines

                                                    // ... lines 31 - 45
                            
                            {% endfor %}
        
                Show Lines

                                                    // ... lines 47 - 48
                            
                        </div>
        
                    </turbo-frame>
        
                Show Lines

                                                    // ... lines 51 - 52
                            
            {% endblock %}

See Code Block in Script

Comment

Learn JS

Symfony UX: Turbo

3rd Party JavaScript Widgets

Hi @weaverryan! any experience with integrating zopim/zendesk chat widget in a project using turbo? I have been trying different approached, but no luck so far :(

Strahil-R

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

…just wondering if there is some way to keep the existing Turbo frame content instead of replacing it with a temporary loading icon etc until new frame content is rendered? For example My Mercure Turbo Stream returns a frame so that I can render the…

Dave B.

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Reloading When JS/CSS Changes

Simply out of curiosity, why isn't the behavior behind the data-turbo-track="reload" attribute something that's done by default? Isn't this something you always want checked? Why is it optional?

Ewald V.

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Adding a Custom Request Header Based on the Frame

Hey again shadowc ! Just a small update: this is now supported in Turbo 7.1.0 - here are the docs :) https://turbo.hotwired.dev/handbook/frames#promoting-a-frame-navigation-to-a-page-visit Cheers!

weaverryan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Multiple Updates in one Stream

…Gee! Thanks for the post! I think Turbo Streams (and frames) are still so new that there are undoubtedly better ways to do certain things - I was pushing things pretty far, but mostly thinking of the "best ways that *I* could think of doing something"..…

weaverryan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Processing Streams by Hand for Fun & Profit

…a bug? After adding the data-turbo-cache="false" attribute, if you click 10 times to go to the you-won page and then click the BACK button and try clicking on the counter button again, the turbo stream flash message is no longer rendering.

Nick-F

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Prevent a turbo-frame from Rendering

…have changed since this video, but turbo:before-fetch-request now fires on whatever element that triggers it, not on document. Here's the docs: turbo:before-fetch-request fires before Turbo issues a network request to fetch the page. Access the requested location with…

Nick-F

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

CSS Page Transitions

…> but a video on integrating Swup with Turbo would be awesome It's not that you would integrate Swup WITH Turbo... more that you would take advantage of the "pausable" rendering in order to do Swup-like transitions in Turbo (taking inspiration from Swup).…

weaverryan

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Entity Broadcast

            Copy Code

                            Show All Lines

                        25 lines
            |
            templates/broadcast/Review.stream.html.twig
        
            {% block create %}
        
                <turbo-stream action="update" target="product-{{ product.id }}-quick-stats">
        
                    <template>
        
                        {{ include('product/_quickStats.html.twig') }}
        
                    </template>
        
                </turbo-stream>
        
                <turbo-stream action="append" target="product-{{ product.id }}-review-list">
        
                    <template>
        
                        {{ include('product/_review.html.twig', {
        
                            review: newReview,
        
                            isNew: true
        
                        }) }}
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 17 - 25

See Code Block in Script

Comment

Learn JS

Symfony UX: Turbo

Running the Mercure Service in the symfony Binary

Hi team! Are you going to publish a demo of mercure without using symfony turbo in this course? Some reactjs example using api platform? Thanks!

JuanLuisGarciaBorrego

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Smartly Updating Elements for all Users

            Copy Code

                            Show All Lines

                        12 lines
            |
            templates/product/reviews.stream.html.twig
        
                Show Lines

                                                    // ... lines 1 - 6
                            
            <turbo-stream action="replace" target="product-{{ product.id }}-review-list">
        
                <template>
        
                    {{ include('product/_reviews_list.html.twig') }}
        
                </template>
        
            </turbo-stream>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Multiple Updates in one Stream

            Copy Code

                        12 lines
            |
            templates/product/reviews.stream.html.twig
        
            <turbo-stream action="update" target="product-quick-stats">
        
                <template>
        
                    {{ include('product/_quickStats.html.twig') }}
        
                </template>
        
            </turbo-stream>
        
            <turbo-stream action="replace" target="product-review">
        
                <template>
        
                    {{ include('product/_reviews.html.twig') }}
        
                </template>
        
            </turbo-stream>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Multiple Updates in one Stream

            Copy Code

                            Show All Lines

                        37 lines
            |
            templates/product/_reviews.html.twig
        
            <turbo-frame id="product-review">
        
                Show Lines

                                                    // ... lines 2 - 18
                            
            {% if reviewForm|default(false) %}
        
                Show Lines

                                                    // ... lines 20 - 28
                            
            {% elseif not is_granted('ROLE_USER') %}
        
                <p><a href="{{ path('app_login') }}" data-turbo-frame="_top">Log in</a> to post your review</p>
        
            {% else %}
        
                <div class="alert alert-success">
        
                    Thanks for your "real" review you "human" ?!
        
                </div>
        
            {% endif %}
        
            </turbo-frame>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Multiple Updates in one Stream

            Copy Code

                            Show All Lines

                        41 lines
            |
            templates/product/_reviews.html.twig
        
            <turbo-frame id="product-review">
        
                Show Lines

                                                    // ... lines 2 - 18
                            
            {% if reviewForm|default(false) %}
        
                Show Lines

                                                    // ... lines 20 - 28
                            
            {% elseif not is_granted('ROLE_USER') %}
        
                <p><a href="{{ path('app_login') }}" data-turbo-frame="_top">Log in</a> to post your review</p>
        
            {% else %}
        
                <div class="alert alert-success">
        
                    Thanks for your "real" review you "human" ?!
        
                </div>
        
                <a href="{{ path('app_product_reviews', {
        
                    id: product.id
        
                }) }}">Love the product *that* much? Add another review!</a>
        
            {% endif %}
        
            </turbo-frame>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Streams: Reusing Templates

            Copy Code

                        6 lines
            |
            templates/product/reviews.stream.html.twig
        
            <turbo-stream action="update" target="product-quick-stats">
        
                <template>
        
                    {{ include('product/_quickStats.html.twig') }}
        
                </template>
        
            </turbo-stream>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Full Page Redirect from a Frame

            Copy Code

                            Show All Lines

                        31 lines
            |
            assets/controllers/modal-form_controller.js
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            export default class extends Controller {
        
                Show Lines

                                                    // ... lines 6 - 8
                            
                connect() {
        
                    this.boundBeforeFetchResponse = this.beforeFetchResponse.bind(this);
        
                    document.addEventListener('turbo:before-fetch-response', this.boundBeforeFetchResponse);
        
                }
        
                Show Lines

                                                    // ... lines 13 - 31

See Code Block in Script

Comment

Learn Symfony 5

Symfony 5 Security: Authenticators

…tutorial - so it's right after Turbo. My guess would be about 3 weeks - it won't be significantly delayed because it's definitely happening after Turbo (I'm mostly not sure because I don't know yet exactly how long Turbo will go). So…

weaverryan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Frame Loading Animations

Just a quick note: I don't need `display:block;` on `turbo-frame` with Firefox 90.0 (64 bits) on Linux Mint 20.2. Good job, keep going, I love it!

Thomas-A

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Frame Loading Animations

            Copy Code

                            Show All Lines

                        36 lines
            |
            templates/cart/_featuredSidebar.html.twig
        
                Show Lines

                                                    // ... lines 1 - 17
                            
                        {% if showDescription %}
        
                            {{ featuredProduct.description }}
        
                        {% else %}
        
                            {{ featuredProduct.description|u.truncate(25)|trim }}...
        
                            <a
        
                                data-turbo-frame="cart-sidebar"
        
                                class="frame-loading-hide"
        
                                href="{{ path('_app_cart_product_featured', {
        
                                description: true,
        
                            }) }}">(read more)</a>
        
                            <span class="frame-loading-show fas fa-spinner fa-spin"></span>
        
                        {% endif %}
        
                Show Lines

                                                    // ... lines 31 - 36

See Code Block in Script

Show Lines	// ... lines 1 - 2
	{% block body %}
Show Lines	// ... lines 4 - 27
	<turbo-frame id="mix-browse-list">
	<div class="row">
	{% for mix in pager %}
Show Lines	// ... lines 31 - 45
	{% endfor %}
Show Lines	// ... lines 47 - 48
	</div>
	</turbo-frame>
Show Lines	// ... lines 51 - 52
	{% endblock %}

	{% block create %}
	<turbo-stream action="update" target="product-{{ product.id }}-quick-stats">
	<template>
	{{ include('product/_quickStats.html.twig') }}
	</template>
	</turbo-stream>

	<turbo-stream action="append" target="product-{{ product.id }}-review-list">
	<template>
	{{ include('product/_review.html.twig', {
	review: newReview,
	isNew: true
	}) }}
	</template>
	</turbo-stream>
	{% endblock %}
Show Lines	// ... lines 17 - 25

Show Lines	// ... lines 1 - 6
	<turbo-stream action="replace" target="product-{{ product.id }}-review-list">
	<template>
	{{ include('product/_reviews_list.html.twig') }}
	</template>
	</turbo-stream>

	<turbo-frame id="product-review">
Show Lines	// ... lines 2 - 18
	{% if reviewForm\|default(false) %}
Show Lines	// ... lines 20 - 28
	{% elseif not is_granted('ROLE_USER') %}
	<p><a href="{{ path('app_login') }}" data-turbo-frame="_top">Log in</a> to post your review</p>
	{% else %}
	<div class="alert alert-success">
	Thanks for your "real" review you "human" ?!
	</div>
	{% endif %}
	</turbo-frame>

Show Lines	// ... lines 1 - 4
	export default class extends Controller {
Show Lines	// ... lines 6 - 8
	connect() {
	this.boundBeforeFetchResponse = this.beforeFetchResponse.bind(this);
	document.addEventListener('turbo:before-fetch-response', this.boundBeforeFetchResponse);
	}
Show Lines	// ... lines 13 - 31

Show Lines	// ... lines 1 - 17
	{% if showDescription %}
	{{ featuredProduct.description }}
	{% else %}
	{{ featuredProduct.description\|u.truncate(25)\|trim }}...

	<a
	data-turbo-frame="cart-sidebar"
	class="frame-loading-hide"
	href="{{ path('_app_cart_product_featured', {
	description: true,
	}) }}">(read more)</a>
	<span class="frame-loading-show fas fa-spinner fa-spin"></span>
	{% endif %}
Show Lines	// ... lines 31 - 36