Custom Code on Button Click

Design help Animations & Interactions
1

Hello everyone :wave:

Ran into an issue that I can’t seem to solve and was hoping someone could think of a creative work-around.

My CrossFit client would like to implement SugarWOD onto the site (custom code is below). However, the issue is the code creates a popup. I would like this popup to come up when someone clicks the “WOD” button in the navigation.

However, I tried creating a popup model with the custom code embed inside and this just creates a double popup – forcing the user to click out twice.

The other solution I tried was to just place the code on a separate page (which works) but when the user closes the popup the page is blank.

There are no other options within SugarWOD to create any other code.

Was wondering if someone could think of a solution for this.

Will buy you some coffee for a clean solution!

Custom Code

Here is my public share link:
https://preview.webflow.com/preview/crossfitconquest?utm_medium=preview_link&utm_source=dashboard&utm_content=crossfitconquest&preview=0da4f0f0c869895245706eeffcc836c3&mode=preview

2

Hey @DougSirkoch, can you also share the published link? Since it’s custom code I can’t really check in the read-only.

But anyway, I notice in the code:

    label: "WOD",
    toggleClass: "sugarwod-toggle",
    openOnPageLoad: "yes",
}

You can see openOnPageLoad: "yes", have you tried replacing it with openOnPageLoad: "no"?

3

Hello @dennyhartanto!

Thank you for taking a look.

Here is the published link: https://crossfitconquest.webflow.io/

I also tried changing the code from openOnPageLoad: “yes” to “no” and it simply makes the popup not load at all – unless I am doing something wrong here. But I tried it in a popup and as a new page.

4 
toggleClass: "sugarwod-toggle",

I can’t find an element with class="sugarwood-toggle". Im assuming that only a button with that class can trigger the popup. That’s what you’re looking for right?

5

@dennyhartanto I suppose. I am open to any clean and UX friendly way to get this accomplished. I just don’t want the use to end up on a blank page or have to exit our of two popups.

6

@DougSirkoch sure. Have you tried adding a button with this class sugarwood-toggle, otherwise can you try that?

7

Could you explain a little more?

Are you saying to add that to the code? And if so could you show me where/how – I am not strong with code.

Or are you saying create a button/interaction combo within webflow called “sugarwood-toogle”?

Thanks for the clarification

8

Yeap, just add a button element and add a class “sugarwood-toogle”.

Screen Shot 2020-05-17 at 00.47.16
Screen Shot 2020-05-17 at 00.47.161259×897 90.8 KB

Also, I don’t see the code embedded anywhere. You can add the code in the page settings:

Screen Shot 2020-05-17 at 00.48.20
Screen Shot 2020-05-17 at 00.48.20760×965 23.9 KB

In the field

Im just taking a guess based on the script code :slight_smile:

9

@dennyhartanto

I was able to get the code to work, and it is almost appears to be working as intended. The only issue is when you click the “WOD” button in the Nav, it will display the plugin and then close immediately.

Could you check my interactions and see if I need to add something?

10

@Hector_Munoz_Huerta, this doesn’t happen to me, though. This is the plug-in popup, right?

Screen Shot 2020-05-18 at 01.26.59
Screen Shot 2020-05-18 at 01.26.591798×971 49.8 KB

11

Here is what I am seeing – I am only clicking once https://www.loom.com/share/1d801542829f4ee684ad90438eaa0533

12

Im not sure what’s going on really. You can see it working well on my end and its tough to troubleshoot without also facing the issue.

Maybe try to clear your cache/hard refresh? ctrl+shift+r or cmd+shift+r (mac)

Or just use incognito mode.

13

It seems to have stabilized itself, because now the issue isn’t showing either… This may be the fix!!!