Tuto Mettre à jour les variantes sur shopify en cliquant sur les images correspondantes

Rendez vous dans Online store -> Actions -> Edit CSS/HTML -> Layout-> product.liquid

Ensuite copiez le code ci-dessous tout en bas du fichier

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
(function($) { 
 var variantImages = {},
 thumbnails,
 variant,
 variantImage,
 optionValue;
 {% for variant in product.variants %}
 variant = {{ variant | json }};
 if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
 variantImage = variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
 variantImages[variantImage] = variantImages[variantImage] || {};
 {% for option in product.options %}
 {% assign option_value = variant.options[forloop.index0] %}
 {% assign option_key = 'option-' | append: forloop.index0 %}
 if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
 variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
 }
 else {
 var oldValue = variantImages[variantImage][{{ option_key | json }}];
 if ( oldValue !== null && oldValue !== {{ option_value | json }} ) {
 variantImages[variantImage][{{ option_key | json }}] = null;
 }
 }
 {% endfor %}
 }
 {% endfor %}
 $(function() {
 thumbnails = $('img[src*="/products/"]').not(':first');
 if (thumbnails.size()) {
 thumbnails.bind('click', function() {
 var image = $(this).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
 if (typeof variantImages[image] !== 'undefined') {
 {% for option in product.options %}
 optionValue = variantImages[image]['option-{{ forloop.index0 }}'];
 if (optionValue !== null && $('.single-option-selector:eq({{ forloop.index0 }}) option').filter(function() { return $(this).text() === optionValue }).length) {
 $('.single-option-selector:eq({{ forloop.index0 }})').val(optionValue).trigger('change');
 }
 {% endfor %}
 }
 });
 }
 });
})(jQuery);
</script> 
{% endif %}

Il ne vous reste plus qu’a tester tout ca !

Je rappelle que ce code n’est pas de moi cette fois ci 😉

Vous souhaitez me remercier et m’encourager à continuer mes tutos?

Alors n’hésitez pas à me faire un petit don même minime car c’est l’intention qui compte 😉

Je veux faire un don

9 commentaires sur “Tuto Mettre à jour les variantes sur shopify en cliquant sur les images correspondantes

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*