▼
Streaming live at 10am (PST)

How to get collection items with JS in embed

Design help Custom code
#1

Hi, I need help to understand how I can get collection items to be able to get data without placing collection into the structure.

The problem is that I have set the collection gem and each gem has an image gallery. On homepage is shown latest gem from the artist with description, and two images. The first image will be on top and second on the side next to the description. For now, I have set the first image as cover a and second should be the second image from the gallery. (at this moment there is full image gallery)

I have tried to place collections to structure btw. item gallery need to be nested collection as is not accessible from the original collection. This makes my life harder, anyway, as embed code from the nested collection doesn’t have access to variables created in embed from the parent collection. It makes my life even harder. So I have decided that the best way will be to grab collection to be able to work with collection items and their data. Store them to variables and use them (render) in places I need.

I know that is a long explanation but I want to make it as clear as possible.

Questions
1. Is there a way I can grab collection based on its ID and store it in a variable?
– If yes can someone post a snippet or image with an example?

2. Is there a way how to link embedHTML on the same page be able to share or access variables from each other? (top-bottom)?

Here is a collection ID if someone will need it for tests :wink:
COLLECTION ID: 5f7ae0fdc6adaf11ac0d8454

Thanks for any advice, tip for publication with examples in detail how it works as I didn’t found proper documentation (if I have missed some advanced sources please share it)

PS: styling is not done, I need functionality first :wink:

Here is my site Read-Only: VISIT PAGE
(how to share your site Read-Only link)

#2

@Stan - the one way I’m aware of to get collection data on the front-end is to place collection values into custom HTML like this:

image
image791×622 43.9 KB

You could make a data-attribute for every value you are looking to store and grab those values with JS. But if I’m understanding you correctly you want to do this without having the collection actually on the page? If that is the case, I don’t believe this approach would work as the collection has to be used on the page in order to insert those fields. Plus, it sounds like you want to recursively go through referenced collections, which as you said adds some degree of difficulty to this.

Unfortunately, Webflow does not offer Ajax endpoints which you might be able to use on page load to grab collection information, the only other way as far as I’m aware is to do this on the back-end via the API, but I’m not sure if you want to go down that road.’

What is your overall goal? Maybe there is another way to approach this?

Thanks,

Sam

#3

hi @sam-g thanks for your answer. I know about standard fields in collection embeds. They hold only value but when I store this value(s) into variable in embed ( in collection) I can’t reach variables anywhere else. Or can I? Does Webflow support e.g JS modules? I cant find any documentation with these informations.

These limitations brought me to idea of array from HTMLCollection to solve this issue as API new Webflow is not accessible from project it self. It will be really easy if I’ll be able only grab image URL from CMS item multi-image field, but again I can’t as is not accessible (or I don’t know how this works in Webflow) globally, mean grab variable from other embed HTML.

About data-attribute: If I will add some value to collection item it will generate identical value for each item because of the loop over these elements. Am I right?

I will spend now some time to try solve this problem with different JS methods. But if you know where I can learn advance usage of Webflow I will appreciate any source. Webflow University is great to start using this platform but is mainly about basics of CSS and HTML. I’m missing advanced topic to be able to use whole webflow potential.

Thank you again

#4

I have one simple question, how ID attribute actually works in Webflow collection item? I know what id is for and how I should use it, but if I will add in Webflow collection item an element and give this element ID each rendered element from collection has in DOM identicalid. ? This is not valid code and should not pass validation. So, how is ID works when Webflow allows multiple identical ID’s on the same page? How to get a specific element by ID or whatever from the collection. What I’m missing? Still can’t find any official Webflow documentation to be able to get answers and understanding from the source.

EDIT: or is there a way I can add some number value and Webflow will increase it automatically with each iteration. Something like ID: iterated-item-${i}?

#5

I have solved my problem with a bit of JS. As add custom unique id to collection items , filter out what I don’t need, render where I need it and delete the rest.

I don’t know if this is a best solution but for now I can move to other parts. If you will have any Idea how improve this code just let me know. You can visit demo page to see it and play with it.

const mainImg = document.getElementById("latest-main-image");

const collectionList = document.getElementById("item-gallery");
let thumbGallery = document.querySelectorAll(".latest-thumb");

const thumbsArr = [...thumbGallery]; // create an array to iterate thru

// add unique id to each image 
thumbsArr.forEach((item,i)=>{
item.setAttribute("id", `thumb-${i+1}`)
filter(item)
})

function filter(item){
//grab `div` parent of image
    const wrapper = item.parentNode
//console.log(wrapper)
   if(item.id === "thumb-1"){
    mainImg.appendChild(thumbsArr[0])
}else if(item.id === "thumb-2"){
     item.style.display = "block";
} else {
// item.remove() // it removes images but will keep parent `div` 
wrapper.remove() // this remove image and parent `div`

}}
1 Like