Popup with collection items

Hi everyone!

I would like to know if someone has had a similar situation and can help me. I’m working on a catalog website. It is not an online store. I have data in collections and I want that when clicking on the button of a certain product, a pop up opens and the user can request a quote indicating the details of his order in a form. Is there a possibility to use parameters in the URL to do this? Do you recommend a better option? I really want to use Webflow in this website but Im finding some limitations with this specific type of website.

https://preview.webflow.com/preview/tuspantuflas?utm_source=tuspantuflas&preview=ef43a5b2c0c163036725e0024a9943ad

Thanks for your support!

You can do what you want to do. Place your pop up modal into the first collection. You will need to delete the collection in bd-popup-contacto and add, that element to your first collection list.
Then you will be able to use the dynamic content linked with it.

hope that helps
Jeremy

Hi @jbleroux! Thanks for your support! I really appreciate that you took the time to record a video with the explanation! However, I’ve followed step by step but it looks that popup displays the same image when the button is pressed. Do you know a way to avoid that?

Regards!!

I see what you are saying. I never noticed that. Because the close button wasn’t working I never bothered checking past the first one. I wonder if an image or field can only be linked to one element at a time. Try adding another element in the collection specifically for that image.
for instance add an image for the modal img.

I can’t test that because there is no way to create collection items in the preview. But that would be the first thing I would try.

let me know how it goes

Thank you @jbleroux . I have read in other threads and apparently it’s something more complicated. I have found some code solutions that I can not implement in my site because I am not a developer. I did not want, but I think that for this occasion I will have to work with Wordpress . Any way, I really appreciate your support.

Hmm that doesn’t make much sense to me not being able to work. You are creating a div block and hiding it. That is all a popup modal is. A collection item can be crafted in so many ways. The only issue I can see is multiple fields trying to populate the same information.

I’ll have to create a test.

I was wrong it can be done and the solution was almost there. thanks to @Samuli and an based on https://www.youtube.com/watch?v=Fue_IP9k6wQ this older video from Anna that uses Interactions 1.0. Basically I missed an important step and that was setting the interaction to only affect sibling elements. Without doing this the modal windows were stacking on top of eachother and that is why the image and information appeared the same.

Here you see it in action

so you don’t need to use word press you can customize your modal and use webflow CMS without any code.

always
Jeremy

3 Likes

@jbleroux Your video is amazing. I tried to do exactly the same thing with my pop up modal and collection list. I put now my modal wrapper inside the Collection Item. But now my pop up is not even showing up anymore and I think I miss a specific small step in order to make it finally work.

Could you please have a look?

Read only: https://preview.webflow.com/preview/jennifers-first-project-4ebd02?utm_medium=preview_link&utm_source=designer&utm_content=jennifers-first-project-4ebd02&preview=8ee83454ce587eedd7db5d1338cc915e&pageId=5ea289e5777920649cd53370&mode=preview

Published: https://jennifers-first-project-4ebd02.webflow.io/about/team

Hello, has anyone solved this. I am also encountering the same issues as @jjen. @jbleroux when I change the Animation effect parameters to “sibling elements” the modal disappears entirely…

I’d be so grateful for any additional insight or suggestions.

Thank you!

2 Likes

Hi Lindsay,

I was having the same problem and this fixed it for me. You need to make sure your custom modal is on the same children level as the trigger that opens it. Give it a shot.