Vælg varianter ved at klikke på billederne

Bemærk

Hvis du bruger et gratis tema fra Shopify, kan du muligvis kontakte Shopify Support for at få hjælp til denne vejledning. Det kræver 15 minutters designtid. Få mere at vide under Support til temaer.

Bemærk

Denne tilpasning er for ældre Shopify-temaer og gælder ikke for Online Store 2.0-temaer.

• Find dit temas arkitekturversion
• Se Online Store 2.0-tematilpasninger

Varianter vælges normalt via en rullemenu. Du ønsker muligvis at give dine kunder mulighed for at vælge en produktvariant ved at klikke på et variants billede.

Advarsel

• Denne løsning virker ikke med temaerne Boundless, Express eller Narrative. Hvis du bruger temaet Brooklyn, vil løsningen virke, men du skal indstille vælgertypen til Rullemenu på produktsiden.
• Alle variantbilleder skal være unikke, hvis denne løsning skal virke.
• De fleste temaer opdaterer hovedbilledet, når der vælges en variant med et billede. Opdateringen sker dog aldrig i begge retninger, da ændring af hovedbilledet automatisk opdaterer et variantvalg. Dette kan forvirre shoppere til at lægge den forkerte variant i indkøbskurven. Derfor bør du udvise forsigtighed, når du anvender denne tilpasning på din butik.

Vælg produktvarianter ved at klikke på et variantbillede:

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

2. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger kode.

iPhone

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger kode.

Android

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger kode.

1. Åbn theme.js eller theme.js.liquid-filen i mappen Aktiver.

2. Indsæt nedenstående kode i bunden af filen:

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. Klik på Gem.

Tip

Denne tilpasning virker ikke med alle temaer. Hvis den ikke virker med dit tema, kan du ansætte en Shopify-ekspert til at hjælpe dig med at implementere denne løsning.