Nous allons voir dans ce tutoriel comment mettre à jour les variantes sur shopify en cliquant sur les images associées

Ce sytème est très utiles pour que les clients voient directement le changement de variantes au clic sur l’image correspondante. Cela permet également d’éviter au client de se tromper.

Rentrons directement dans le vif du sujet

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 !

Si cela ne fonctionne pas, c’est que votre thème n’a pas Jquery de chargé. Dans ce cas rendez-vous dans Layout – theme.liquid et avant la fermeture du </head> collez ce bout de code:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>

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

Source: https://github.com/carolineschnapp/make-image-change-variant

ps: ce code ne fonctionne pas avec tous les thèmes

Bon tuto à tous 🙂

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 votes]

🤗 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 16 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 🙂

  5. Bonjour, comment faire pour le theme jumpstart ? merci

    1. Hello, logiquement c’est générique

  6. hello, tout d’abord merci pour ton taf, le site est une mine d’info !
    Parcontre j’ai un probleme avec ce tuto, il ne fonctionne pas chez moi avec le theme DEBUT, du coup, j’ai essayé avec le lien en premier commentaire, j’ai tout suivi à la lettre et idem. quelqu un aurait la solution ?

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 Protéger le contenu de ton site ?

Speedecom te propose l'Application Shopify Speed Defender !
Elle va te permettre de protéger ton site des copieurs et protéger tes contenus, tes médias et même empêcher les raccourcis claviers et l'affichage du code source ;) !

N'hésite pas à la tester elle est Gratuite pendant 3 jours

Tester Speed Defender

Envie de Booster ton taux de conversion ?

Speedecom a 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

Tester Speed Bundle

Besoin d'un developpeur ?

Si tu as un besoin particulier sur ta boutique,
n'hésite pas à me contacter et à regarder mes prestations !

Consulter mes prestations