Search Results | SymfonyCasts

687 search results

Sort By

Comment

Learn JS

Symfony UX: Turbo

Manual Visits with Turbo

…This IS what I would do, however, in 99% of the cases when I needed to do a manual visit in Turbo. But you mentioned: > The routes are created using data from an ajax response Ok, so you basically have a situation where you…

weaverryan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

How Turbo Drive Works

…then Turbo wouldn't be active and each "click" on your site would be a normal full page refresh, and so that would work perfectly too. And third, in case it helps you be more confident, Turbo (as Turbolinks) has been around for *years* and…

weaverryan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Running the Mercure Service in the symfony Binary

…at the moment :). However, we cover the mechanics of Mercure pretty well in this tutorial. The biggest difference would be that you would want to publish some JSON information to Mercure instead of turbo-stream HTML. Then, in JavaScript/React, you would read this JSON…

weaverryan

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Smartly Updating Elements for all Users

            Copy Code

                        13 lines
            |
            templates/product/_reviews_list.html.twig
        
            <turbo-frame id="product-{{ product.id }}-review">
        
            {% for review in product.reviews %}
        
                <div class="component-light my-3 p-3">
        
                    <p><i class="fas fa-user-circle me-2"></i>{{ review.owner.email }} <i class="fas fa-star ms-4"></i> {{ review.stars }}/5</p>
        
                    <div>
        
                        {{ review.content }}
        
                    </div>
        
                </div>
        
            {% else %}
        
                <p>This product has not been reviewed yet!</p>
        
            {% endfor %}
        
            </turbo-frame>

See Code Block in Script

Comment

Learn JS

Symfony UX: Turbo

Turbo Stream for Instant Review Update

…information about new notifications, new surveys, new configuration (new menu item) etc. Now we are sure we will add Turbo for the web part and the idea of pushing new information and configuration to the website client is a great topic to consider. Thank you!

Tomasz-I

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

…of a "single page app" feel. At first, you are probably wondering (as I did) something like: > How? If Turbo changes clicks/submits to Ajax calls... but those requests STILL return the same full HTML page, how is that "faster"? The answer (or at…

weaverryan

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Publishing Mercure Updates in PHP

            Copy Code

                            Show All Lines

                        128 lines
            |
            src/Controller/ProductController.php
        
                Show Lines

                                                    // ... lines 1 - 20
                            
            class ProductController extends AbstractController
        
            {
        
                Show Lines

                                                    // ... lines 23 - 71
                            
                /**
        
                 * @Route("/product/{id}/reviews", name="app_product_reviews")
        
                 */
        
                public function productReviews(Product $product, CategoryRepository $categoryRepository, Request $request, EntityManagerInterface $entityManager, HubInterface $mercureHub)
        
                {
        
                Show Lines

                                                    // ... lines 77 - 82
                            
                    if ($request->isMethod('POST')) {
        
                Show Lines

                                                    // ... lines 84 - 85
                            
                        $update = new Update(
        
                            'product-reviews',
        
                            '<turbo-stream action="update" target="product-quick-stats"><template>QUICK STATS CHANGED!</template></turbo-stream>'
        
                        );
        
                        $mercureHub->publish($update);
        
                Show Lines

                                                    // ... lines 91 - 109
                            
                    }
        
                Show Lines

                                                    // ... lines 111 - 117
                            
                }
        
                Show Lines

                                                    // ... lines 119 - 126
                            
            }

See Code Block in Script

Code

Learn JS

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

Comment

Learn Symfony 5

API Platform 2 Part 2: Security

Logout & Passing API Data to JS on Page Load

…the login page... or pop up a login modal (if you're using a frontend framework) or whatever is appropriate. For others, we talked about how to handle this with Turbo Frames just a few days ago https://symfonycasts.com/screencast/turbo/login-redirect Cheers!

weaverryan

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Lazy Modal & Big Cleanup

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 31
                            
                /**
        
                 * @Route("/new", name="product_admin_new", methods={"GET","POST"})
        
                 */
        
                public function new(Request $request): Response
        
                {
        
                Show Lines

                                                    // ... lines 37 - 55
                            
                    return $this->renderForm('product_admin/' . $template, [
        
                        'product' => $product,
        
                        'form' => $form,
        
                        'formTarget' => $request->headers->get('Turbo-Frame', '_top')
        
                    ]);
        
                }
        
                Show Lines

                                                    // ... lines 63 - 105

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

turbo-frame inside a Modal

            Copy Code

                        25 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">
        
                        <div class="modal-header">
        
                            <h5 class="modal-title">{{ modalTitle }}</h5>
        
                            <button type="button" class="btn-close"
        
                                    data-bs-dismiss="modal"
        
                                    aria-label="Close"></button>
        
                        </div>
        
                        <turbo-frame
        
                            class="modal-body"
        
                            src="{{ modalSrc }}"
        
                            id="{{ id }}"
        
                        >
        
                            {{ modalContent|default('Loading...') }}
        
                        </turbo-frame>
        
                    </div>
        
                </div>
        
            </div>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Frame Redirecting & Dynamic Frame Targets

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 61
                            
                /**
        
                 * @Route("/{id}/edit", name="product_admin_edit", methods={"GET","POST"})
        
                 */
        
                public function edit(Request $request, Product $product): Response
        
                {
        
                Show Lines

                                                    // ... lines 68 - 82
                            
                    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

Frame-Powered Inline Editing

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 2
                            
            {% block productBody %}
        
                <div class="row pt-3 product-show">
        
                    <turbo-frame id="product-info" target="_top">
        
                    <div class="col-4">
        
                        <img
        
                            alt="{{ product.name }}"
        
                            src="{{ asset('/uploads/products/'~product.imageFilename) }}"
        
                            class="d-block"
        
                        >
        
                        <div class="p-2">
        
                            <small>brought to you by </small>
        
                            <small class="d-inline">{{ product.brand }}</small>
        
                        </div>
        
                    </div>
        
                    <div class="col-8 px-3">
        
                        <h1>
        
                            {{ product.name }}
        
                            {% if is_granted('ROLE_ADMIN') %}
        
                                <a
        
                                    href="{{ path('product_admin_edit', {
        
                                        id: product.id
        
                                    }) }}"
        
                                    class="btn btn-sm btn-secondary"
        
                                >Edit</a>
        
                            {% endif %}
        
                        </h1>
        
                        <div>
        
                            {{ product.description }}
        
                        </div>
        
                        <div class="p-3 mt-4 d-flex justify-content-between flex-wrap flex-lg-nowrap">
        
                            <div>
        
                                <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>
        
                    </div>
        
                    </turbo-frame>
        
                </div>
        
                Show Lines

                                                    // ... lines 47 - 54

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Frame-Powered Inline Editing

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 3
                            
                <turbo-frame id="product-info" target="_top" class="row pt-3 product-show">
        
                    <div class="col-4">
        
                        <img
        
                            alt="{{ product.name }}"
        
                            src="{{ asset('/uploads/products/'~product.imageFilename) }}"
        
                            class="d-block"
        
                        >
        
                        <div class="p-2">
        
                            <small>brought to you by </small>
        
                            <small class="d-inline">{{ product.brand }}</small>
        
                        </div>
        
                    </div>
        
                    <div class="col-8 px-3">
        
                        <h1>
        
                            {{ product.name }}
        
                            {% if is_granted('ROLE_ADMIN') %}
        
                                <a
        
                                    href="{{ path('product_admin_edit', {
        
                                        id: product.id
        
                                    }) }}"
        
                                    class="btn btn-sm btn-secondary"
        
                                >Edit</a>
        
                            {% endif %}
        
                        </h1>
        
                        <div>
        
                            {{ product.description }}
        
                        </div>
        
                        <div class="p-3 mt-4 d-flex justify-content-between flex-wrap flex-lg-nowrap">
        
                            <div>
        
                                <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>
        
                    </div>
        
                </turbo-frame>
        
                Show Lines

                                                    // ... lines 45 - 52

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Frame-Powered Inline Editing

            Copy Code

                            Show All Lines

                        18 lines
            |
            templates/product_admin/edit.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>
        
                <turbo-frame id="product-info" target="_top">
        
                    <div class="d-flex justify-content-between">
        
                        <h1 class="mt-3">Edit Product</h1>
        
                        {{ include('product_admin/_delete_form.html.twig') }}
        
                    </div>
        
                    {{ include('product_admin/_form.html.twig', {'button_label': 'Update'}) }}
        
                </turbo-frame>
        
            </div>
        
            {% endblock %}

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Review this Product... in a turbo-frame!

            Copy Code

                        29 lines
            |
            templates/product/_reviews.html.twig
        
            <turbo-frame id="product-review">
        
            {% for review in product.reviews %}
        
                <div class="component-light my-3 p-3">
        
                    <p><i class="fas fa-user-circle me-2"></i>{{ review.owner.email }} <i class="fas fa-star ms-4"></i> {{ review.stars }}/5</p>
        
                    <div>
        
                        {{ review.content }}
        
                    </div>
        
                </div>
        
            {% else %}
        
                <p>This product has not been reviewed yet!</p>
        
            {% endfor %}
        
            <hr>
        
            {% if reviewForm|default(false) %}
        
                <h4>Post your own review</h4>
        
                {{ form_start(reviewForm, {
        
                    'action': path('app_product_reviews', { id: product.id })
        
                }) }}
        
                    {{ form_row(reviewForm.stars) }}
        
                    {{ form_row(reviewForm.content) }}
        
                    <button class="btn btn-primary" formnovalidate>Add Review</button>
        
                {{ form_end(reviewForm) }}
        
            {% elseif not is_granted('ROLE_USER') %}
        
                <p><a href="{{ path('app_login') }}">Log in</a> to post your review</p>
        
            {% endif %}
        
            </turbo-frame>

See Code Block in Script

Code

Learn JS

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

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 JS

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

Comment

Expanding Code Blocks

…just into the code highlighting stuff for blog posts with shell scripts/source code. Expanding is not needed by me. And, by the way, many, many thanks for your great videos. Currently I’m into Stimulus, looking forward to Turbo. Keep on that great work.

tracer

Read Full Comment

	<turbo-frame id="product-{{ product.id }}-review">
	{% for review in product.reviews %}
	<div class="component-light my-3 p-3">
	<p><i class="fas fa-user-circle me-2"></i>{{ review.owner.email }} <i class="fas fa-star ms-4"></i> {{ review.stars }}/5</p>
	<div>
	{{ review.content }}
	</div>
	</div>
	{% else %}
	<p>This product has not been reviewed yet!</p>
	{% endfor %}
	</turbo-frame>

Show Lines	// ... lines 1 - 20
	class ProductController extends AbstractController
	{
Show Lines	// ... lines 23 - 71
	/**
	* @Route("/product/{id}/reviews", name="app_product_reviews")
	*/
	public function productReviews(Product $product, CategoryRepository $categoryRepository, Request $request, EntityManagerInterface $entityManager, HubInterface $mercureHub)
	{
Show Lines	// ... lines 77 - 82
	if ($request->isMethod('POST')) {
Show Lines	// ... lines 84 - 85
	$update = new Update(
	'product-reviews',
	'<turbo-stream action="update" target="product-quick-stats"><template>QUICK STATS CHANGED!</template></turbo-stream>'
	);
	$mercureHub->publish($update);
Show Lines	// ... lines 91 - 109
	}
Show Lines	// ... lines 111 - 117
	}
Show Lines	// ... lines 119 - 126
	}

	{% 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 %}

Show Lines	// ... lines 1 - 31
	/**
	* @Route("/new", name="product_admin_new", methods={"GET","POST"})
	*/
	public function new(Request $request): Response
	{
Show Lines	// ... lines 37 - 55

	return $this->renderForm('product_admin/' . $template, [
	'product' => $product,
	'form' => $form,
	'formTarget' => $request->headers->get('Turbo-Frame', '_top')
	]);
	}
Show Lines	// ... lines 63 - 105

	<div
	class="modal fade"
	tabindex="-1"
	aria-hidden="true"
	data-modal-form-target="modal"
	>
	<div class="modal-dialog">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ modalTitle }}</h5>
	<button type="button" class="btn-close"
	data-bs-dismiss="modal"
	aria-label="Close"></button>
	</div>
	<turbo-frame
	class="modal-body"
	src="{{ modalSrc }}"
	id="{{ id }}"
	>
	{{ modalContent\|default('Loading...') }}
	</turbo-frame>
	</div>
	</div>
	</div>

Show Lines	// ... lines 1 - 61

	/**
	* @Route("/{id}/edit", name="product_admin_edit", methods={"GET","POST"})
	*/
	public function edit(Request $request, Product $product): Response
	{
Show Lines	// ... lines 68 - 82
	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 - 2
	{% block productBody %}
	<div class="row pt-3 product-show">
	<turbo-frame id="product-info" target="_top">
	<div class="col-4">
	<img
	alt="{{ product.name }}"
	src="{{ asset('/uploads/products/'~product.imageFilename) }}"
	class="d-block"
	>
	<div class="p-2">
	<small>brought to you by </small>
	<small class="d-inline">{{ product.brand }}</small>
	</div>
	</div>
	<div class="col-8 px-3">
	<h1>
	{{ product.name }}
	{% if is_granted('ROLE_ADMIN') %}
	<a
	href="{{ path('product_admin_edit', {
	id: product.id
	}) }}"
	class="btn btn-sm btn-secondary"
	>Edit</a>
	{% endif %}
	</h1>
	<div>
	{{ product.description }}
	</div>
	<div class="p-3 mt-4 d-flex justify-content-between flex-wrap flex-lg-nowrap">
	<div>
	<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>
	</div>
	</turbo-frame>
	</div>
Show Lines	// ... lines 47 - 54

Show Lines	// ... lines 1 - 3
	<turbo-frame id="product-info" target="_top" class="row pt-3 product-show">
	<div class="col-4">
	<img
	alt="{{ product.name }}"
	src="{{ asset('/uploads/products/'~product.imageFilename) }}"
	class="d-block"
	>
	<div class="p-2">
	<small>brought to you by </small>
	<small class="d-inline">{{ product.brand }}</small>
	</div>
	</div>
	<div class="col-8 px-3">
	<h1>
	{{ product.name }}
	{% if is_granted('ROLE_ADMIN') %}
	<a
	href="{{ path('product_admin_edit', {
	id: product.id
	}) }}"
	class="btn btn-sm btn-secondary"
	>Edit</a>
	{% endif %}
	</h1>
	<div>
	{{ product.description }}
	</div>
	<div class="p-3 mt-4 d-flex justify-content-between flex-wrap flex-lg-nowrap">
	<div>
	<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>
	</div>
	</turbo-frame>
Show Lines	// ... lines 45 - 52

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>
	<turbo-frame id="product-info" target="_top">
	<div class="d-flex justify-content-between">
	<h1 class="mt-3">Edit Product</h1>
	{{ include('product_admin/_delete_form.html.twig') }}
	</div>

	{{ include('product_admin/_form.html.twig', {'button_label': 'Update'}) }}
	</turbo-frame>
	</div>
	{% endblock %}

	<turbo-frame id="product-review">
	{% for review in product.reviews %}
	<div class="component-light my-3 p-3">
	<p><i class="fas fa-user-circle me-2"></i>{{ review.owner.email }} <i class="fas fa-star ms-4"></i> {{ review.stars }}/5</p>
	<div>
	{{ review.content }}
	</div>
	</div>
	{% else %}
	<p>This product has not been reviewed yet!</p>
	{% endfor %}

	<hr>

	{% if reviewForm\|default(false) %}
	<h4>Post your own review</h4>
	{{ form_start(reviewForm, {
	'action': path('app_product_reviews', { id: product.id })
	}) }}
	{{ form_row(reviewForm.stars) }}
	{{ form_row(reviewForm.content) }}

	<button class="btn btn-primary" formnovalidate>Add Review</button>
	{{ form_end(reviewForm) }}
	{% elseif not is_granted('ROLE_USER') %}
	<p><a href="{{ path('app_login') }}">Log in</a> to post your review</p>
	{% endif %}
	</turbo-frame>

	<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>

	<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>