Sélectionner des variantes en cliquant sur leurs images

Remarque

Si vous utilisez un thème gratuit de Shopify, vous pourrez peut-être contacter l’assistance de Shopify pour obtenir de l’aide par rapport à ce tutoriel. La conception de cette partie nécessite 15 minutes. Pour plus d’informations, voir Assistance par rapport aux thèmes.

Remarque

Cette personnalisation est faite pour les thèmes vintage de Shopify, et ne s’applique pas aux thèmes Online Store 2.0.

• Découvrez la version de l'architecture de votre thème
• Explorez les personnalisations de thème Online Store 2.0

Normalement, les variantes sont sélectionnées à partir d'un menu déroulant. Mais vous souhaiterez peut-être que vos clients soient en mesure de les sélectionner en cliquant sur leur image.

Attention

* Cette solution ne fonctionne pas dans les thèmes Boundless, Express ou Narrative. Si vous utilisez le thème Brooklyn, la solution fonctionne, mais vous devrez définir le type de sélecteur sur liste déroulante sur votre page de produit. * Chaque image de variante doit être unique pour que cette solution fonctionne. * La plupart des thèmes mettent à jour l’image principale lorsqu’une variante avec une image est sélectionnée. La mise à jour ne se produit jamais dans les deux sens, car si la modification de l’image principale met automatiquement à jour la sélection d’une variante, les acheteurs risquent d’ajouter la mauvaise variante à leur panier. Procédez donc avec prudence au moment d’appliquer cette personnalisation à votre boutique.

Pour sélectionner des variantes de produit en cliquant sur une image de variante :

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

1. Ouvrez le fichier theme.js ou theme.js.liquid votre dossier Ressources.

2. Au bas du fichier, collez le code suivant :

const selectVariantByClickingImage = {
  // Create variant images from productJson object
  _createVariantImage: function (product) {
    const variantImageObject = {};
    product.variants.forEach((variant) => {
      if (
        typeof variant.featured_image !== 'undefined' &&
        variant.featured_image !== null
      ) {
        const variantImage = variant.featured_image.src
          .split('?')[0]
          .replace(/http(s)?:/, '');
        variantImageObject[variantImage] =
          variantImageObject[variantImage] || {};
        product.options.forEach((option, index) => {
          const optionValue = variant.options[index];
          const optionKey = `option-${index}`;
          if (
            typeof variantImageObject[variantImage][optionKey] === 'undefined'
          ) {
            variantImageObject[variantImage][optionKey] = optionValue;
          } else {
            const oldValue = variantImageObject[variantImage][optionKey];
            if (oldValue !== null && oldValue !== optionValue) {
              variantImageObject[variantImage][optionKey] = null;
            }
          }
        });
      }
    });
    return variantImageObject;
  },
  _updateVariant: function (event, id, product, variantImages) {
    const arrImage = event.target.src
      .split('?')[0]
      .replace(/http(s)?:/, '')
      .split('.');
    const strExtention = arrImage.pop();
    const strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/, '');
    const strNewImage = `${arrImage.join('.')}.${strRemaining}.${strExtention}`;
    if (typeof variantImages[strNewImage] !== 'undefined') {
      product.variants.forEach((option, index) => {
        const optionValue = variantImages[strNewImage][`option-${index}`];
        if (optionValue !== null && optionValue !== undefined) {
          const selects = document.querySelectorAll('#'+ id + ' [class*=single-option-selector]');
          const options = selects[index].options;
          for (let option, n = 0; (option = options[n]); n += 1) {
            if (option.value === optionValue) {
              selects[index].selectedIndex = n;
              selects[index].dispatchEvent(new Event('change'));
              break;
            }
          }
        }
      });
    }
  },
  _selectVariant: function() {
    const productJson = document.querySelectorAll('[id^=ProductJson-');
    if (productJson.length > 0) {
      productJson.forEach((product) => {
        const sectionId = product.id.replace("ProductJson-", "shopify-section-");
        const thumbnails = document.querySelectorAll('#'+ sectionId + ' img[src*="/products/"]');
        if (thumbnails.length > 1) {
          const productObject = JSON.parse(product.innerHTML);
          const variantImages = this._createVariantImage(productObject);
          // need to check variants > 1
          if (productObject.variants.length > 1) {
            thumbnails.forEach((thumbnail) => {
              thumbnail.addEventListener('click', (e) =>
                this._updateVariant(e, sectionId, productObject, variantImages),
              );
            });
          }
        }
      });
    }
  },
};
if (document.readyState !== 'loading') {
  selectVariantByClickingImage._selectVariant();
} else {
  document.addEventListener(
    'DOMContentLoaded',
    selectVariantByClickingImage._selectVariant(),
  );
}

1. Cliquez sur Save (Enregistrer).

Conseil

Cette personnalisation ne fonctionnera pas avec tous les thèmes. Si elle ne fonctionne pas avec votre thème, vous pouvez engager un(e) Expert(e) Shopify pour qu’il/elle vous aide à implémenter cette solution. En savoir plus sur le recrutement d’un expert Shopify.