Created
December 20, 2019 14:52
-
-
Save klich3/7ac74f01081cd2bdaf0a679af24958a0 to your computer and use it in GitHub Desktop.
[SOLUTION] Shopify (cascade) + Langify -> product sliders
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Al usar Langify en Shopify, la app traduce todo incluido los js | |
con eso crea conflicto en la pagina de productos en el theme CASCADE. | |
Provocando que deje de funcionar los sliders tanto en version DESKTOP | |
como en version MOBILE. | |
Para solventar el fallo añadimos este script en archivo | |
/assets/theme.min.js | |
*/ | |
var isProduct = document.body.classList.contains('template-product'); | |
/*ly85064 = default lang ENG you can check language code | |
in console using this code -> langify.helper.getSelectedLanguage() | |
*/ | |
if(!/ly85064/.test(langify.helper.getSelectedLanguage()) && isProduct) | |
{ | |
window.theme.mobileFlickity('[data-mobile-flickity]'); | |
var productThumbs = $('[data-product-single-thumbnail]'); | |
var productThumbnailHolder = $('[data-product-thumbnails]'); | |
var productFeaturedImage = $('[data-product-featured-image]'); | |
var productFeaturedImageWrapper = $('[data-feature-product-wrapper]'); | |
productThumbs.off("click"); | |
productThumbs.click(function(e) | |
{ | |
e.preventDefault(); | |
var item = $(e.currentTarget); | |
var thumbHeight = productThumbs.height(); | |
var thumbsHolderHeight = productThumbnailHolder.height(); | |
var img_url = item.attr("href"); | |
var padding = item.data("aspectratio") + "%"; | |
productFeaturedImage.attr( | |
"src", | |
"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" | |
); | |
productFeaturedImage.attr("srcset", ""); | |
productFeaturedImage.attr("data-src", img_url); | |
productFeaturedImage.removeClass("lazyloaded").addClass("lazyload"); | |
productFeaturedImageWrapper.css("padding-top", padding); | |
productThumbs.removeClass("active"); | |
item.addClass("active"); | |
var scrollY = item.position().top + | |
productThumbnailHolder.scrollTop() - | |
(thumbsHolderHeight + thumbHeight) / 2; | |
productThumbnailHolder.animate({ | |
scrollTop: scrollY | |
}); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment