Personalized checkout and custom promotions with Shopify Scripts
It works properly on my PC.
And how it looks on mobile iPhone/Android.
Theme version Dawn 5.0.0
How jQuery file included :
My js code in custom section:
<script type="application/javascript" async>
const
$container = $(document).find(".loop-container"),
$texts = $container.find(".js-text-slider"),
$images = $container.find(".js-image-slider"),
$buttons = $container.find(".js-button-slider"),
$toggles = $container.find(".js-toggle-item");
hideAll();
$texts.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$buttons.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$images.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).removeClass("hidden");
}
});
$toggles.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).addClass("active");
}
});
function toggleSliderClick(toggle) {
let index = toggle.attr("loop-index") - 1;
resetActiveToggles();
toggle.addClass("active");
hideAll();
$texts.eq(index).show();
$buttons.eq(index).show();
$images.eq(index).removeClass("hidden");
}
function resetActiveToggles() {
$toggles.removeClass("active");
}
function hideAll() {
$texts.hide();
$buttons.hide();
$images.addClass("hidden");
}
$toggles.each(function () {
$(this).unbind("click").on("click", function (event) {
event.preventDefault();
toggleSliderClick($(this));
});
});
</script>
Solved! Go to the solution
This is an accepted solution.
Well, thanks everyone for help. I`ve found the solution by myself. Added full CDN path from 3.7.1 jQuery version. Didn't change anything in it and it works 😃
Hi @nagrebeckiy ,
I think you can use
<script>
$(document).ready(function(){
if (jQuery) {
const
$container = $(document).find(".loop-container"),
$texts = $container.find(".js-text-slider"),
$images = $container.find(".js-image-slider"),
$buttons = $container.find(".js-button-slider"),
$toggles = $container.find(".js-toggle-item");
hideAll();
$texts.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$buttons.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$images.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).removeClass("hidden");
}
});
$toggles.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).addClass("active");
}
});
function toggleSliderClick(toggle) {
let index = toggle.attr("loop-index") - 1;
resetActiveToggles();
toggle.addClass("active");
hideAll();
$texts.eq(index).show();
$buttons.eq(index).show();
$images.eq(index).removeClass("hidden");
}
function resetActiveToggles() {
$toggles.removeClass("active");
}
function hideAll() {
$texts.hide();
$buttons.hide();
$images.addClass("hidden");
}
$toggles.each(function () {
$(this).unbind("click").on("click", function (event) {
event.preventDefault();
toggleSliderClick($(this));
});
});
}
}
</script>
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
This is an accepted solution.
Well, thanks everyone for help. I`ve found the solution by myself. Added full CDN path from 3.7.1 jQuery version. Didn't change anything in it and it works 😃
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024