Challenge #1 of 1

On our cart page, we have a <turbo-frame id="cart-summary"> that renders a short list of the items in our cart. This works great! But now, in our base layout, we want to render a link on our sidebar that, on click, loads this "cart summary" into the sidebar:

<turbo-frame id="sidebar">
    <!-- ... -->

    <a href="{{ path('app_cart') }}">Show Cart Summary</a>
</turbo>

Unfortunately, when we try this, we get an error because the turbo-frame looks for a sidebar frame on the cart page. How could me modify the cart page to get this to work?

/*
 * Renders the Cart Summary in the cart-summary turbo frame
 */
public function showCartSummary(Request $request): Response
{
    $frameId = $request->headers->get('Turbo-Frame', 'cart-summary');

    return $this->render('cartSummary.html.twig', [
        'frameId' => $frameId,
    ]);
}

/*
 * Renders the Cart Summary in the cart-summary turbo frame
 */
public function showCartSummary(Request $request): Response
{
    $frameId = $request->headers->get('Turbo-Frame', '_top');

    return $this->render('cartSummary.html.twig', [
        'frameId' => $frameId,
    ]);
}

/*
 * Renders the Cart Summary in the cart-summary turbo frame
 */
public function showCartSummary(Request $request): Response
{
    $frameId = $request->headers->get('Turbo-Frame', 'sidebar');

    return $this->render('cartSummary.html.twig', [
        'frameId' => $frameId,
    ]);
}

Rewatch Video

TRACK

JavaScript Frameworks & Tools >

COURSE

Symfony UX: Turbo >

CHAPTER

Frame Redirecting & Dynamic Frame Targets

Challenge #1 of 1