Forever Scroll with Turbo Frames

Hey @Sameone

Can you explain a bit more your problem? What exactly did you change?

Cheers!

Hi,
when using "Turbo Frames":
If we click to display the details of a mix, the route "/browse" cannot display the data because it is a hyperlink
There will be no redirect from the "/browse" route to the "/mix/url_of_mix" route.

Hey @Sameone!

You're totally right! In the video, I had forgotten to add a target="_top" to the turbo-frame, which forces all links inside to behave like normal links. We DO have a note about this in the video - https://symfonycasts.com/screencast/symfony-doctrine/forever-scroll?playAt=254 - but somehow I forgot to put that note in the text! I'll add that now :).

Cheers!

I have one more question, let's say i want to open the details in new tab, i read somewehere that i can put _blank instead of _top which should work but it doesn't. Is there other solution?

Hey @Stanislaw!

Back from a vacation - sorry for the slow reply! So, doing this doesn't work?

<a href="..." target="_blank">

I would be very surprised by that...

Or do you mean this?

<turbo-frame target="_blank">

If so, I don't think (though I have never tested) that this works. But I would expect the <a target="_blank"> idea to work. Let me know what you find :).

Cheers!

Hey Jared,

Thank you for your feedback! We're really happy to hear it was useful for you :)

Cheers!

Hey @Frederic_H-F,

Thanks for kind words! And sorry, but that course is not out yet, so keep an eye on new courses.

PS while waiting, you can check "ManyToMany" chapters here: https://symfonycasts.com/screencast/doctrine-relations it is a bit older (Symfony5), but the main idea is pretty same =)

Cheers!

Hey JnahDev,

Super-secret for now, but we're working on "Go Pro with Doctrine Queries" with the latest Symfony version :) It should be started releasing in a month or so

Cheers!

Hey excentrist!

I'm shooting for January - I definitely want to get the Doctrine relations tutorial out!

Cheers!

Hi roenfeldt!

Excellent question! SEO is complex, but I can fairly confidently say no: turbo frames will NOT negatively impact SEO. In fact, I believe they're designed with this in mind.

Why? Let's look at an example:

<turbo-frame id="featured-product">
    ...
  
    <a href="/products/blow-up-sofa-couch">See More</a>
</turbo-frame>

You and I understand that, thanks to Turbo Frames, when we click the See More link, it will only load inside of THIS turbo-frame. So, at first, it might seem like you have some potential content that a search engine crawler will never see!

But the beauty of Turbo-Frames is that the link URL - /products/blow-up-sofa-couch - is a REAL URL to a REAL, full page. So if a crawler crawls your page and see this <a> tag, it will look like a perfectly normal <a> tag. And when they follow the link, they will load (and index) the full page that renders when you go to /products/blow-up-sofa/couch. Turbo Frames are a nice bit of magic, but they fall back to real, functional, boring pages.

The only potential spot where SEO could be affected is if you use a "lazy" frame (where it starts empty and then loads after page load or once the item becomes visible). But, most crawlers are good now at letting some JavaScript load, and any application that uses JavaScript to load content a few ms later would share this problem.

Let me know if this helps!

Cheers!

Hey Ryan,

That makes a lot of sense, thank you for clarifying that out for me.

Hey Seb,

Yes, in this case, we embedded a turbo-frame containing the HTML of the subsequent pages into the main turbo-frame, which contains the first page results

Cheers!

Hey Diego,

I think it's a pity.
A better solution might be this: https://github.com/thoughtbot/hotwire-example-template/tree/hotwire-example-pagination.

What do you think ?

Why would it be better? I'm asking because I don't see any downsides in Ryan's approach

Bit late to this conversation but I just followed this example and it works great, however because of the nesting I'm having layout issues. I'm using bootstrap and have a grid (using flexbox) which has up to 3 columns. If the number of items per page is not divisible by 3 then I get a blank space in the grid when the next turbo frame is populated.

I tried display:contents on the turbo-frames but that seems to prevent turbo from triggering the frame to load.

I think maybe this is a downside. Is there a different way to do this?

Hey Jvh,

Hmm, it depends on your specific layout I suppose. I think you should match the number of results with your Flex layout. If you return items per page - you should make 5 flex columns. I suppose it should work also with 3, 6, 9 and so on items per page for 3 flex columns markup, i.e. it must be a multiple of 3. That's probably all I can advise you, otherwise try to lear more about Flex markup more, unfortunately, we don't have a screencast about it yet.

P.s. also try to analyze your specific rendered markup in the Chrome web debug toolbar - it may give you some clues with sizes and positions.

Cheers!