Search Results | SymfonyCasts

682 search results

Sort By

Code

Learn JS

Symfony UX: Turbo

Entity Broadcast

            Copy Code

                            Show All Lines

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

                                                    // ... lines 19 - 27

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Broadcasting Frontend Changes on Entity Update/Remove

            Copy Code

                            Show All Lines

                        33 lines
            |
            templates/broadcast/Review.stream.html.twig
        
                Show Lines

                                                    // ... lines 1 - 19
                            
            {% block update %}
        
                <turbo-stream action="replace" target="product-review-{{ entity.id }}">
        
                    <template>
        
                        {{ include('product/_review.html.twig', {
        
                            review: entity
        
                        }) }}
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 29 - 33

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Broadcasting Frontend Changes on Entity Update/Remove

            Copy Code

                            Show All Lines

                        40 lines
            |
            templates/broadcast/Review.stream.html.twig
        
                Show Lines

                                                    // ... lines 1 - 29
                            
            {% block remove %}
        
                <turbo-stream action="replace" target="product-review-{{ id }}">
        
                    <template>
        
                        {{ include('product/_review.html.twig', {
        
                            review: entity,
        
                            isRemoved: true
        
                        }) }}
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Toast Notifications

            Copy Code

                            Show All Lines

                        38 lines
            |
            templates/product/_reviews.html.twig
        
                Show Lines

                                                    // ... lines 1 - 6
                            
            <turbo-frame id="product-reviews-form">
        
                Show Lines

                                                    // ... line 8
                            
            {% for flash in app.flashes('review_success') %}
        
                {{ include('_toast.html.twig', {
        
                    title: 'Success!',
        
                    body: flash
        
                }) }}
        
            {% endfor %}
        
                Show Lines

                                                    // ... lines 15 - 36
                            
            </turbo-frame>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Toast Notifications

            Copy Code

                            Show All Lines

                        49 lines
            |
            templates/broadcast/Review.stream.html.twig
        
            {% block create %}
        
                Show Lines

                                                    // ... lines 2 - 18
                            
                <turbo-stream action="append" target="product-{{ entity.product.id }}-toasts">
        
                    <template>
        
                        {{ include('_toast.html.twig', {
        
                            title: 'New Review!',
        
                            body: 'A new review was just posted for this product'
        
                        }) }}
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 28 - 49

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Smartly Updating Elements for all Users

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 6
                            
            <turbo-stream action="append" target="product-{{ product.id }}-review-list">
        
                <template>
        
                    {{ include('product/_review.html.twig', {
        
                        review: newReview,
        
                    }) }}
        
                </template>
        
            </turbo-stream>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Visually Highlighting new Items that Pop onto the Page

            Copy Code

                            Show All Lines

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

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

See Code Block in Script

Comment

Learn JS

Symfony UX: Turbo

Turbo Stream for Instant Review Update

What is better solution taking into account server load (Mercure Hub)? Users subscribe for one topic "product reviews" so that Mercure Pushes information to all of them and Turbo, based on frame ID, decides if do something with it or not - like shown in tutorial…

Tomasz-I

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Running the Mercure Service in the symfony Binary

…the Symfony Local Web Server I had no problems using the Mercure hub and I had nothing to configure. But I want to use/test Turbo Streams in a "real" project with my team. And in the team we are not using the symfony server…

TristanoMilano

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Processing Streams by Hand for Fun & Profit

            Copy Code

                            Show All Lines

                        103 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html lang="en-US">
        
                <head>
        
                Show Lines

                                                    // ... lines 4 - 13
                            
                </head>
        
                <body>
        
                Show Lines

                                                    // ... lines 16 - 69
                            
                        <div id="flash-container" data-turbo-cache="false">
        
                        {% for flash in app.session.flashBag.get('success') %}
        
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
        
                                {{ flash }}
        
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        
                                  <span aria-hidden="true"></span>
        
                                </button>
        
                            </div>
        
                        {% endfor %}
        
                        </div>
        
                Show Lines

                                                    // ... lines 81 - 100
                            
                </body>
        
            </html>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Turbo Streams

            Copy Code

                        6 lines
            |
            templates/product/reviews.stream.html.twig
        
            <turbo-stream action="update" target="product-quick-stats">
        
                <template>
        
                    Will this <strong>really</strong> work???
        
                </template>
        
            </turbo-stream>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Streams: Reusing Templates

            Copy Code

                            Show All Lines

                        49 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">
        
                                {{ include('product/_quickStats.html.twig') }}
        
                            </div>
        
                            <div>
        
                                {{ include('product/_cart_add_controls.html.twig') }}
        
                            </div>
        
                        </div>
        
                Show Lines

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

                                                    // ... lines 42 - 46
                            
                {{ include('product/_reviews.html.twig') }}
        
            {% endblock %}

See Code Block in Script

Comment

Learn Symfony 5

Symfony 5: Mastering Doctrine Relations

Hey Ilya, Thank you for your interest in SymfonyCasts tutorials! This course should be the next after "Symfony UX: Turbo" that is releasing right now. I think this should happen in about 2 weeks. Thank you for your patience! Cheers!

Victor

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Frame Redirecting and Clearing the Snapshot Cache

            Copy Code

                            Show All Lines

                        45 lines
            |
            templates/product/_cart_add_controls.html.twig
        
            <turbo-frame id="add-to-cart-controls">
        
            {{ form_start(addToCartForm, {
        
                attr: { class: 'cart-add-controls d-flex align-items-center justify-content-baseline' }
        
            }) }}
        
                {% if addToCartForm.color is defined %}
        
                Show Lines

                                                    // ... lines 6 - 25
                            
                {% endif %}
        
                Show Lines

                                                    // ... lines 27 - 34
                            
            {{ form_end(addToCartForm) }}
        
            <div>
        
                {{ form_errors(addToCartForm) }}
        
                {% if addToCartForm.color is defined %}
        
                    {{ form_errors(addToCartForm.color) }}
        
                {% endif %}
        
                {{ form_errors(addToCartForm.quantity) }}
        
            </div>
        
            </turbo-frame>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Redirecting the Full Page from a Frame

            Copy Code

                            Show All Lines

                        27 lines
            |
            templates/_modal.html.twig
        
            <div
        
                class="modal fade"
        
                tabindex="-1"
        
                aria-hidden="true"
        
                data-modal-form-target="modal"
        
            >
        
                <div class="modal-dialog">
        
                    <div class="modal-content">
        
                Show Lines

                                                    // ... lines 9 - 14
                            
                        <turbo-frame
        
                            class="modal-body"
        
                            src="{{ modalSrc }}"
        
                            id="{{ id }}"
        
                            loading="lazy"
        
                            data-turbo-form-redirect="true"
        
                        >
        
                            {{ modalContent|default('Loading...') }}
        
                        </turbo-frame>
        
                    </div>
        
                </div>
        
            </div>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Lazy Modal & Big Cleanup

            Copy Code

                            Show All Lines

                        104 lines
            |
            src/Controller/ProductAdminController.php
        
                Show Lines

                                                    // ... lines 1 - 81
                            
                    return $this->renderForm('product_admin/edit.html.twig', [
        
                        'product' => $product,
        
                        'form' => $form,
        
                        'formTarget' => $request->headers->get('Turbo-Frame', '_top')
        
                    ]);
        
                }
        
                Show Lines

                                                    // ... lines 89 - 104

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

turbo-frame inside a Modal

            Copy Code

                            Show All Lines

                        34 lines
            |
            templates/_modal.html.twig
        
            <div
        
                class="modal fade"
        
                tabindex="-1"
        
                aria-hidden="true"
        
                data-modal-form-target="modal"
        
            >
        
                Show Lines

                                                    // ... lines 7 - 14
                            
                        <turbo-frame
        
                            class="modal-body"
        
                            data-modal-form-target="modalBody"
        
                            data-action="submit->modal-form#submitForm"
        
                            src="{{ modalSrc }}"
        
                        >
        
                            {{ modalContent|default('Loading...') }}
        
                        </turbo-frame>
        
                Show Lines

                                                    // ... lines 23 - 32
                            
            </div>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

turbo-frame inside a Modal

            Copy Code

                            Show All Lines

                        15 lines
            |
            templates/product_admin/new.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="container mt-4">
        
                <a href="{{ path('product_admin_index') }}"><i class="fas fa-caret-left"></i> Back to list</a>
        
                <h1 class="mt-3">Create new Product</h1>
        
                <turbo-frame id="product-info" target="_top">
        
                    {{ include('product_admin/_form.html.twig') }}
        
                </turbo-frame>
        
            </div>
        
            {% endblock %}

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Frame-Powered Inline Editing

            Copy Code

                            Show All Lines

                        53 lines
            |
            templates/product/show.html.twig
        
                Show Lines

                                                    // ... lines 1 - 16
                            
                        <h1>
        
                            {{ product.name }}
        
                            {% if is_granted('ROLE_ADMIN') %}
        
                                <a
        
                                    href="{{ path('product_admin_edit', {
        
                                        id: product.id
        
                                    }) }}"
        
                                    class="btn btn-sm btn-secondary"
        
                                    data-turbo-frame="product-info"
        
                                >Edit</a>
        
                            {% endif %}
        
                        </h1>
        
                Show Lines

                                                    // ... lines 29 - 53

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Frame Loading Animations

            Copy Code

                            Show All Lines

                        66 lines
            |
            templates/checkout/checkout.html.twig
        
                Show Lines

                                                    // ... lines 1 - 10
                            
                    <div class="row">
        
                        <aside class="col-12 col-lg-4">
        
                            <turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
        
                                Loading...
        
                            </turbo-frame>
        
                        </aside>
        
                Show Lines

                                                    // ... lines 18 - 66

See Code Block in Script

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

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

Show Lines	// ... lines 1 - 19
	{% block update %}
	<turbo-stream action="replace" target="product-review-{{ entity.id }}">
	<template>
	{{ include('product/_review.html.twig', {
	review: entity
	}) }}
	</template>
	</turbo-stream>
	{% endblock %}
Show Lines	// ... lines 29 - 33

Show Lines	// ... lines 1 - 29
	{% block remove %}
	<turbo-stream action="replace" target="product-review-{{ id }}">
	<template>
	{{ include('product/_review.html.twig', {
	review: entity,
	isRemoved: true
	}) }}
	</template>
	</turbo-stream>
	{% endblock %}

Show Lines	// ... lines 1 - 6
	<turbo-frame id="product-reviews-form">
Show Lines	// ... line 8
	{% for flash in app.flashes('review_success') %}
	{{ include('_toast.html.twig', {
	title: 'Success!',
	body: flash
	}) }}
	{% endfor %}
Show Lines	// ... lines 15 - 36
	</turbo-frame>

	{% block create %}
Show Lines	// ... lines 2 - 18
	<turbo-stream action="append" target="product-{{ entity.product.id }}-toasts">
	<template>
	{{ include('_toast.html.twig', {
	title: 'New Review!',
	body: 'A new review was just posted for this product'
	}) }}
	</template>
	</turbo-stream>
	{% endblock %}
Show Lines	// ... lines 28 - 49

	<!DOCTYPE html>
	<html lang="en-US">
	<head>
Show Lines	// ... lines 4 - 13
	</head>
	<body>
Show Lines	// ... lines 16 - 69
	<div id="flash-container" data-turbo-cache="false">
	{% for flash in app.session.flashBag.get('success') %}
	<div class="alert alert-success alert-dismissible fade show" role="alert">
	{{ flash }}
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
	<span aria-hidden="true"></span>
	</button>
	</div>

	{% endfor %}
	</div>
Show Lines	// ... lines 81 - 100
	</body>
	</html>

	<turbo-stream action="update" target="product-quick-stats">
	<template>
	Will this <strong>really</strong> work???
	</template>
	</turbo-stream>

	{% 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">
	{{ include('product/_quickStats.html.twig') }}
	</div>
	<div>
	{{ include('product/_cart_add_controls.html.twig') }}
	</div>
	</div>
Show Lines	// ... line 40
	</turbo-frame>
Show Lines	// ... lines 42 - 46
	{{ include('product/_reviews.html.twig') }}
	{% endblock %}

	<turbo-frame id="add-to-cart-controls">
	{{ form_start(addToCartForm, {
	attr: { class: 'cart-add-controls d-flex align-items-center justify-content-baseline' }
	}) }}
	{% if addToCartForm.color is defined %}
Show Lines	// ... lines 6 - 25
	{% endif %}
Show Lines	// ... lines 27 - 34
	{{ form_end(addToCartForm) }}

	<div>
	{{ form_errors(addToCartForm) }}
	{% if addToCartForm.color is defined %}
	{{ form_errors(addToCartForm.color) }}
	{% endif %}
	{{ form_errors(addToCartForm.quantity) }}
	</div>
	</turbo-frame>

	<div
	class="modal fade"
	tabindex="-1"
	aria-hidden="true"
	data-modal-form-target="modal"
	>
	<div class="modal-dialog">
	<div class="modal-content">
Show Lines	// ... lines 9 - 14
	<turbo-frame
	class="modal-body"
	src="{{ modalSrc }}"
	id="{{ id }}"
	loading="lazy"
	data-turbo-form-redirect="true"
	>
	{{ modalContent\|default('Loading...') }}
	</turbo-frame>
	</div>
	</div>
	</div>

Show Lines	// ... lines 1 - 81

	return $this->renderForm('product_admin/edit.html.twig', [
	'product' => $product,
	'form' => $form,
	'formTarget' => $request->headers->get('Turbo-Frame', '_top')
	]);
	}
Show Lines	// ... lines 89 - 104

Show Lines	// ... lines 1 - 4
	{% block body %}
	<div class="container mt-4">
	<a href="{{ path('product_admin_index') }}"><i class="fas fa-caret-left"></i> Back to list</a>
	<h1 class="mt-3">Create new Product</h1>

	<turbo-frame id="product-info" target="_top">
	{{ include('product_admin/_form.html.twig') }}
	</turbo-frame>
	</div>
	{% endblock %}

Show Lines	// ... lines 1 - 16
	<h1>
	{{ product.name }}
	{% if is_granted('ROLE_ADMIN') %}
	<a
	href="{{ path('product_admin_edit', {
	id: product.id
	}) }}"
	class="btn btn-sm btn-secondary"
	data-turbo-frame="product-info"
	>Edit</a>
	{% endif %}
	</h1>
Show Lines	// ... lines 29 - 53

Show Lines	// ... lines 1 - 10
	<div class="row">
	<aside class="col-12 col-lg-4">
	<turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
	Loading...
	</turbo-frame>
	</aside>

Show Lines	// ... lines 18 - 66