Problem making HTML embed area 'clickable'

Hi

I’ve integrated Shopify Buy Buttons into my Webflow site by embedding HTML code as recommended by Alex Nichol.

Have a look at the Gifts page of the site. What I’m trying to do is to make each item area trigger a sliding modal window on click (as per Steven Persson’s tutorial). My problem is that the HTML Snippet area embedded inside the Link Block is not active/clickable. I assumed the Link Block container settings would override those of its contents.

I’ve tried various workarounds but was unsuccessful. Any ideas?

Cheers


Here is my public share link: https://preview.webflow.com/preview/online-shop-test?preview=e0dc1f2d50b3f32b087ea8af7c712256
(how to access public share link)

1 Like

Could you explain a little further about what you are trying to achieve? There currently doesn’t seem to be any interaction assigned to those elements that would cause a modal to appear.

What Did you want to appear in a modal?

Hi Alex

Thanks for getting back. The modal window functionality is all in the page’s custom code:

I created different code snippets for each item and renamed the webflow elements accordingly. I’ve tested it by creating -info- buttons for each item and it works fine:

…and this is the result when clicking on the -info- button:

Now I’d like to do away with the -info- button and have the whole item (or at least the area covered by the html snippet) act as a button.

Hope this is clear. If not, just let me know and I’ll try again!

Sorry about the delay!

Looking at it a little closer. It seems that the JS on the page it targeting these 3 classes “.item-block” “.modal-background” and “.modal-close-link”

Based on the preview you provided modal-background and modal-close-link aren’t in use.

Is there a reason for using JS and not interactions for this?

Hi Alex

Thanks for getting back.

modal-background is what slides down when < i > is clicked, i.e. translucent black background plus item info.

modal-close-link is triggered by the < x > in the item info and it makes modal-background slide back out of sight.

My problem is not getting the modal window to work – that’s working fine. I’d just like to do away with the < i > and make the whole area covered by an item (see screenshot) act as a ‘close’ button. Any ideas?

Many thanks

I’m not sure about the JS. But you can create this with two interaction.
Here is an example
http://shopify-hockey-catalog.webflow.io/

The first item uses a Shopify Buy button on the card and the modal that appears if you click anyway in the card.

The other products use the title and learn more buttons.

https://preview.webflow.com/preview/shopify-hockey-catalog?preview=218991d916e983b99a978fdf08b47b20

Great stuff… many thanks, Alex, this is spot on!

Loading times seem pretty fast too compared to my version, so thumbs up on that count too!

For the life of me, I can’t figure out how to edit the paragraph and heading inside the modal window!

I assumed that changing the Display Setting from < None > to < Block > would make the modal window visible.

Got to the images via the Settings tab but can’t get at the text. Help!

Assuming you are talking about my example? The modal is set to display: none opacity: 0 and is translated up 100%.

This is done to get the move in effect on the interaction.

To speed up the process on updating the modal I created a combo class called “show” add it to the modal you want to edit and it should appear.

You da man!!

Thanks once again, Alex

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.