Welcome to Day 13! We're going to tap the breaks on Stimulus and Turbo and only work with Symfony and Twig today. Our goal is to add pagination and column sorting to this list. I like to add pagination with Pagerfanta. I love this…

In Review.stream.html.twig, we have the ability to publish turbo streams automatically whenever a review is created, updated or removed. That's pretty cool. Unrelated to this, I haven't mentioned it yet, but our site has a review admin area! You can…

…let's learn how to do this. It's a fascinating example of the power of Turbo events. So here's the plan: at various times while the old page is leaving and the new page is entering, we're going to add some CSS…

…Stack! We've accomplished a lot during the first 26 days with just three letters of LAST Stack: Asset Mapper, Stimulus, and Turbo. Today we crack the code on the L of LAST Stack: Live components. Live components let us take a Twig component... then…

Okay, so if we don't want to cheat and use the internal restore action with a Turbo visit, how else can we solve our problem? Well, there's really only one option. Let me reopen my network tools. Right now, when we successfully submit…

Something isn't right. We can click this "edit" link to inline-load the product form into the Turbo Frame. But when we save, something weird happens. Watch the console closely down here. Whoa! It was fast, but it looked the Ajax request failed! And…

…yes, once again, run: yarn upgrade @hotwired/turbo This time I get beta version 8, which is actually the release I was waiting for. This changes how JavaScript is handled inside frames, which will be important for what we're about to do. But for…

…The reviews section is still weird - but that's ok. Scroll up. Yes! Our Turbo Stream updated the area with the real data! That is so cool! Now we need to fix the reviews area... because showing a filled-in form with a disabled button.…

…those full page refreshes are gone. So Turbo just works. There's no build system to get in the way, and that's beautiful. In practice, this works because a new JavaScript file is being loaded called turbo_controller.js. Filter the network calls to…

…checkout steps — if your app lets humans type things, congrats, you’re in Form Land. And even though front-ends today might be buzzing with Ajax, Turbo, and fancy JavaScript libraries, the core job is still the same old classic: grab some data, check it…

…like the first approach. And by using Stimulus - as well as another tool we'll talk about in a few minutes called Turbo - we can create highly-interactive apps that look and feel as responsive as a single page app. We have an entire tutorial…

…match a whole new paradigm. It stands for Live Components, AssetMapper, Stimulus, and Turbo. It's a front-end stack that'll let us build a truly rich user interface - like a single-page application, with modals and AJAX everywhere - but entirely with Symfony, Twig...…

…Our goal is simple but bold! I want to be able to trigger a toast notification from any template or from a Turbo Stream. Start by creating a new template partial: _toast.html.twig. I'll paste in a structure that's from Bootstrap's…

…taken right before the new page is "swapped in". Thanks to our new fade out functionality... it means that snapshots are taken when the page has the turbo-loading class! In other words, snapshots are taken when the page has low opacity! Thanks to this…

…Vue or some other frontend framework Laziness: loading controllers lazily By the end, you'll be able to build anything on your site with Stimulus. And once you have, you'll be ready to give your app a SPA (single page app) feel with Turbo!

…extra padding with modal:m-0 and modal:p-0: Next, make the edit link target the modal frame. This lives in _row.html.twig. I'll break this onto multiple lines.... then add data-turbo-frame="modal": Moment of truth. Refresh. And... darn it…

…and I think this weirdness is isolated to the popover behavior. Instead, we'll add a way to disable the transitions on a frame. On the homepage, search for turbo-frame. Here it is. Add a new attribute called data-skip-transition: I totally made…

…Ah, here's the problem. When we submitted the add to cart form into the frame, our controller redirected and the turbo frame followed that redirect. This request is the POST to /cart... and this is the Ajax request for the redirect. That response does…

…let's use this. Remove all of this modal stuff... and then move the event.preventDefault() and Turbo.visit() to the end of the method... because we're going to reverse the if logic to keep things clean. If the fetchResponse did not succeed or…

…disabled form to give us the exact effect we want. Scroll up, log out, then go to the registration form. This form does not live in a Turbo frame. But it still gets the new submit behavior! Yup, with just a few lines of code…