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

Merci de me laisser une petite note 😉
[Note moyenne: 0 sur 0]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 12 commentaires

    1. Hello, ok merci de ton retour qui pourra en aider plus d’un sur ce thème 😉

  1. j’arrive pas a le placer sur brooklyn, sais tu si l’autre technique passe?

    1. Hello, comment ca tu n’arrive pas à le placer ?

      1. en clair je les placer a l’endroit où tu l’indique et sur brooklyn ca ne fonctionne pas. à tu une idèe?

        je me suis mal exprimé excuse moi.

        cdlmt,

        Michael.

  2. vraiment super génial ces tutos. mille merci mec

    1. Hello, de rien et merci pour le message 😉

  3. il n y a pas de section « product liquid » dans layout. j’ai (avec le theme supply) giftcard/password/theme

    1. va dans >boutique en ligne > ensuite ton thème il y a un bouton actions > clique et il y a modifier le code > ensuite au lieux de chercher le product.liquid, tape le dans la barre de recherche et tu fais comme il a dit copier coller tout simplement !

      au top

  4. Waou au top !
    Par contre pourquoi c’est pas de base dans le code cette action ???
    je sors de 10 ans de prestashop et ce genre de détails est en natif !
    1h que je cherche a comment faire cette manipulation …

    Un grand merci a toi 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier

Tu aimes mes Tutos & mes Articles ?

Alors n'hésites pas à m'encourager à continuer ce Blog !


Je donne 1e à Dgeo Dev

Envie de Booster ton taux de conversion ?

J'ai créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

En savoir plus