Streaming live at 10am (PST)

Problem making HTML embed area 'clickable'


#1

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)


#2

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?


#3

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!


#4

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?


#5

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


#6

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


#7

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!


#8

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!


#9

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.


#10

You da man!!

Thanks once again, Alex


#11

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