Code to make site widget appear when button clicked (+ $5 tip!)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

This is probably incredibly easy, but my understanding of coding is slim-to-none :).

The objective is to have the widget (currently triggered by the gift button on the lower left of this page) to be triggered by using a link on the "sign me up" button instead. I want to hide the floating widget and instead have it only populate based on the button click (I can hide the floating button within the app). Currently, the code is causing the page to refresh immediately after the widget is launched.

Page: https://shoprollick.com/pages/rewards

And here is an example of a page where this works correctly (by clicking the "access your raw choc rewards" button): https://www.elementsforlife.co.uk/pages/raw-chocolate-rewards#

I use a third party page builder to create the page, which requires a link for the button vs html.

Any help would be SO greatly appreciated. I've spent way too long trying to get this to work correctly.

i have posted a solution, could you check it?
Chlegou 8 months ago
i have updated my bounty, please check it.
Chlegou 8 months ago
awarded to Chlegou
Tags
shopify

Crowdsource coding tasks.

1 Solution


As you said, solution is really simple, but common even for real developpers,

the href="" is empty, which makes it refresh the webpage

to fix it, put # mark in it.

so to resume, this is the solution:

<a id="s-57e64dde-0848-4b1b-9440-7a1fe5d81a84" style="display:block;" class="shg-btn " data-st-intent="st:core:home" data-activator="#" href="#">SIGN ME UP</a>

For a better solution, you coul get rid of href, so the webpage never scroll up like it does. this is it without href :

<a id="s-57e64dde-0848-4b1b-9440-7a1fe5d81a84" style="display:block;" class="shg-btn " data-st-intent="st:core:home" data-activator="#">SIGN ME UP</a>

EDIT:

you might deleted a styling css code of the .shg-btn class after i solved the bounty, because when i played with it, it was working perfectly, this what could happened.

anyway, you could:

1- create a new styling css code of the .shg-btn class. (put anything you want in it, from color to hovering action).

2- use theme default style. i looked around in the website for a designed button, and i implemented it's classes. i used the "read more" button for that. i find it here:

link: https://shoprollick.com/blogs/news

this code is running and solving the issue:

<a id="s-57e64dde-0848-4b1b-9440-7a1fe5d81a84" style="display:block;" class="shg-btn spr-button-primary button-wrapper" data-st-intent="st:core:home" data-activator="#">SIGN ME UP</a>

if you choose solution (1), use the old code, just add the css you want for the desired class only

javascript:; would also work as a dummy href value that does nothing
clkwan 8 months ago
Ahhh thank you so much! Are you able to help me format it to look like the button? The link works but the formatting is gone. https://shoprollick.com/pages/rewards
Kelly 8 months ago
Hey just wanted to say you have one of the most beautiful websites I've ever seen
BrianSantoso 8 months ago
@clkwan, yes, javascript:; could be an answer, but it is discouraged by Google. canceling the href attribute, will make perform as normal tag, and with CSS we could take care of the rest designing the tag. But sometimes we need to stick with it, if default styles are defined with .a[href] so we keep the href to keep default styling. since it wasn't the case, i got rid of it ;)
Chlegou 8 months ago
@brainSantoso, yes, both websites are good! i liked them both. nice and clean design.
Chlegou 8 months ago
@kelly, i have updated the bounty, please check the EDIT section.
Chlegou 8 months ago
@Chlegou thank you so much! I went with option 2 and it's working perfectly. I really appreciate your help! And @BrianSantoso, thanks very much for your kind words! Luckily Shopify makes site-building easy for someone as clueless about coding as me haha.
Kelly 8 months ago
@Kelly, thanks for the tip! :) whenever you need help, just ask for it ;)
Chlegou 8 months ago
@Chlegou will do! So glad I found this resource!
Kelly 8 months ago
yes Bountify is really helpful, powerful, and useful for quick help ;) if you want to get in touch, you could email me directly from my profile.
Chlegou 8 months ago
@Chlegou great, thank you! Will do :).
Kelly 8 months ago