Change the markup position for story items (list items)
Closed this issue · 9 comments
I see that the ul element and its list items are generated inside the story wrapper. However, is it possible for these elements to be generated in the footer instead, while the thumbnails for each story is still being generated in the header?
What do you mean? Can you please explain bit more?
In the header where the container with the preview of the stories appear, the list elements with all the story items are generated in that same container as well (makes sense). But I would like to be able to have those list items in the footer instead, so that when clicking on a story, the modal fetches the list items from the footer to show. This is to avoid having all the DOM generated in the header and prevent possible SEO issues (or so I've been told). I'm trying to test this with the markup.sample.html file but it seems like it's part of the createStoryViewer function where this modal functionality is defined. Hope I explained myself clearer. Is there a workaround for this? Also thank you for responding so quickly!
So, you want to
- generate them inside your html footer and embed them in html head
- generate them in footer and also embed them in footer
Which one do you want?
Basically I need the <div class="story> containers in the header (where it should be shown in the frontend), and the <ul class="items"> containers in the footer, and the modal should still work as usual when I click the story thumbnails in the header. Is that what you meant by your option 1?
1)You can generate them anywhere you want.
const element = document.querySelector("#stories");
const stories = Zuck(element, options);
Above code runs only when dom rich to it. If you put it inside footer, that's when zuck start to generate stories.
2) Basically I need the <div class="story> containers in the header (where it should be shown in the frontend), and the <ul class="items"> containers in the footer, and the modal should still work as usual when I click the story thumbnails in the header.
Did you try that?
const element = document.querySelector("#stories");
const stories = Zuck(element, options);
This generates the whole DOM for the stories, but I need the generated DOM to be separated. Like I said the story thumbnails in the header where I want them to be displayed, and the list items in the footer so that Google does not read elements that are not being displayed on page load.
Did you try that? I tried adding the markup manually with the help of the markup.sample.html file by placing the ul elements in the footer but as expected it gives console errors, because Javascript now does not know where those story items are since they are now in a different place. So I'm looking for a workaround to make the stories look for its story items in the footer. Any ideas how this can be achieved?
I see. You put uls in footer. Then include zuck initiate script after the uls.
const element = document.querySelector("#stories");
const stories = Zuck(element, options);
Put above / your code after ul elements. (inside footer)
That should solve this. If not, tell me. It's js include script placement problem. Not specific to zuck. This can be deducted from your mention about console error.
If you get it to work, tell me. 👈. Or get new errors, also tell me. 🙂.
Thank you very much for your suggestion, but that does not work. The zuck initiate script does the job of getting the #stories element and injecting all the markup into it. Which does not resolve the issue, since the story items ul is still being generated inside of it. There either should be an option available to tell the script the location of the story items; or manually placing the expected markup in the header and the ul elements in the footer, and somehow let the script know where to find these list items. You have an idea of a different approach?
please, I can't see your console errors or your template, so support is limited. Maybe try posting them? I can't give a working answer without your template and looking at console errors.