Liquid, JavaScript, themes, sales channels
Hey!
I'm new to JavaScript but I took my time and implemented a simple "Info Button" to showcase the delivery time in my shop.
This is the code:
$('.deliverytime-sec').click(function() {
$(this).toggleClass("show");
$('.showtext').toggleClass("showtext-active");
});
On Chrome (Desktop/Mobile) this works great without any problem. Though if I test it on Safari sometimes the button doesn't fire the event. Nothing happens.
I've googled quite a bit and tried to use "touchstart" but that didn't work and resulted in the button not working at all.
I've also assigned the "a" tag to the element and gave it "cursor: pointer;"
Hi TLKHH,
Which version of Safari are you testing on?
Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g. <div>) and which also don't have event listeners directly attached to the elements themselves.
Reference: MDN Web Docs
If that’s the case for you, you can view all the workarounds and examples for this bug here.
For advanced theme customizations, you can also reach out to Shopify experts who are experienced industry professionals that have extensive knowledge about creating, updating, and perfecting Shopify themes.
To hire a designer or developer to help out with theme customizations, please visit the Shopify Experts Marketplace.
To learn more visit the Shopify Help Center or the Community Blog.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024