Få dine kunder til at vælge en valgmulighed

Når en kunde besøger en produktside i din webshop, vælges den første tilgængelige variant som standard. Du kan bruge tilpasningen Få dine kunder til at vælge en valgmulighed for at deaktivere det automatiske valg af den første tilgængelige variant. På denne måde bliver kunden bedt om at vælge en variant manuelt, før der vises en variant.

Hvis du bruger tilpasningen Få dine kunder til at vælge en valgmulighed, vil dit tema muligvis ikke vise en produktpris, før kunden har valgt en variant. Produkter med varianter har ikke en tilgængelig pris, og den pris, der vises, afhænger af den variant, der vælges.

Vælg en valgmulighed

Temaer med og uden sektioner

Trin for temaer med afsnit

Vælg dit tema

Trinnene til denne tilpasning varierer afhængigt af dit tema. Klik på knappen for dit tema, inden du følger vejledningen nedenfor:

Boundless

Trin for Boundless

Følg disse trin for at anvende tilpasningen til Boundless:

Rediger dit temas JavaScript-fil

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

  2. Find det tema, du vil redigere, og klik på knappen for at åbne handlingsmenuen. Klik derefter på Rediger kode.

  3. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

  4. Find koden initVariantSelectors. Find følgende kode nedenfor:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

Tilføj følgende kode på en ny linje nedenfor:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Koden bør se nogenlunde således ud:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}
  1. Find følgende linje kode:
$(selectors.addToCartText).html(theme.strings.soldOut);

Der er to forekomster af denne kodelinje, som begge findes i productVariantCallback-funktionen. Erstat kun det andet eksempel med:

$(selectors.addToCartText).html('Make a Selection');
  1. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

  1. Klik på product-template.liquid i mappen Afsnit.
  2. Find følgende kode:
{% assign current_variant = product.selected_or_first_available_variant %}

Udskift den med:

{% assign current_variant = product.selected_variant %}
  1. Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
  1. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:
{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Koden bør se nogenlunde således ud:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}
  1. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

  3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

  4. Erstat teksten Ikke tilgængelig med Foretag et valg.

  5. Klik på Gem.

Debut

Trin for Debut

Følg disse trin for at anvende tilpasningen til Debut:

Rediger dit temas JavaScript-fil

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

  2. Find det tema, du vil redigere, og klik på knappen for at åbne handlingsmenuen. Klik derefter på Rediger kode.

  3. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

  4. Tilføj følgende kode nederst i filen:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();
  1. Find koden _updatePrice: function(variant). Udskift følgende kode:
if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
}

med:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
} */

Hvis du ikke kan finde den ovenstående kode, skal du finde følgende kode:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

Udskift den med:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */
  1. Find koden this.currentVariant = variant;

Tilføj følgende kode nedenfor:

this._updatePaymentButton(variant);

Resultatet bør se nogenlunde således ud:

this.currentVariant = variant;
this._updatePaymentButton(variant);
  1. Find koden _updateImages: function(variant). Udskift følgende kode:
var currentVariantImage = this.currentVariant.featured_image || {};

med:

if (this.currentVariant != undefined) {
  var currentVariantImage = this.currentVariant.featured_image || {};
}
  1. Find følgende kode lige herunder:
if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
}

Udskift den med:

/* if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
} */
  1. Find koden _updateSKU: function(variant). Udskift følgende kode:
if (variant.sku === this.currentVariant.sku) {
  return;
}

med:

if (this.currentVariant != undefined ) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }
}
  1. Find koden _initVariants: function() {. Udskift følgende kode:
if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
}

med:

/* if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
  1. Find følgende kode:
_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

Tilføj følgende kode på en ny linje under ovenstående kode:

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

Koden bør se nogenlunde således ud:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},
  1. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

  1. Klik på product-template.liquid i mappen Afsnit.
  2. Find følgende kode:
{%- assign current_variant = product.selected_or_first_available_variant -%}

Udskift den med:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else %}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif %}
  1. Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Hvis du ikke kan finde den ovenstående kode, skal du finde denne kode og slette den:

{%- if variant == current_variant %} selected="selected" {%- endif -%}
  1. Find følgende kode:
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

Udskift den med:

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

Hvis du ikke kan finde den ovenstående kode, skal du finde følgende kode:

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

Udskift den med:

{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
  1. Find følgende kode:
{% unless current_variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Udskift den med:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% elsif current_variant.available %}
  {{ 'products.product.add_to_cart' | t }}
{% else %}
  {{ 'products.product.sold_out' | t }}
{% endif %}
  1. Find følgende kode:
{% if section.settings.enable_payment_button %}
  {{ form | payment_button }}
{% endif %}

Udskift den med:

<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
  {% if section.settings.enable_payment_button %}
    {{ form | payment_button }}
  {% endif %}
</div>
  1. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:
{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Koden bør se nogenlunde således ud:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}
  1. Klik på Gem.

Rediger dit produktpriskodestykke

Sådan redigerer du kodestykket for produktprisen:

  1. Klik på product-price.liquid i mappen Kodestykker.
  2. Find følgende kode:
{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Udskift den med:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  elsif product.title
    assign compare_at_price = product.compare_at_price
    assign price = product.price
    assign available = product.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

  3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

  4. Erstat teksten Ikke tilgængelig med Foretag et valg.

  5. Klik på Gem.

Minimal

Trin for Minimal

Følg disse trin for at anvende tilpasningen til Minimal:

Rediger dit temas JavaScript-fil

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

  2. Find det tema, du vil redigere, og klik på knappen for at åbne handlingsmenuen. Klik derefter på Rediger kode.

  3. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

  4. Find koden initProductVariant: function() {. Find følgende kode nedenfor:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

Tilføj følgende kode på en ny linje nedenfor:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Koden bør se nogenlunde således ud:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}
  1. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

  1. Klik på product-template.liquid i mappen Afsnit.
  2. Find følgende kode:
{% assign variant = product.selected_or_first_available_variant %}

Udskift den med:

{% assign variant = product.selected_variant %}
  1. Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
  1. Find alle forekomster af denne kode:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Erstat med:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
  1. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:
{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Koden bør se nogenlunde således ud:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}
  1. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

  3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

  4. Erstat teksten Ikke tilgængelig med Foretag et valg.

  5. Klik på Gem.

Narrative

Trin for Narrative

Følg disse trin for at anvende tilpasningen til Narrative:

Rediger dit temas JavaScript-fil

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

  2. Find det tema, du vil redigere, og klik på knappen for at åbne handlingsmenuen. Klik derefter på Rediger kode.

  3. Klik på custom.js i mappen Aktiver.

  4. Tilføj følgende kode nederst i filen:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();
  1. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

  1. Klik på product-template.liquid i mappen Afsnit.
  2. Find følgende kode:
{%- assign current_variant = product.selected_or_first_available_variant -%}

Udskift den med:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else -%}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif -%}
  1. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:
{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Koden bør se nogenlunde således ud:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}
  1. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

  3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

  4. Erstat teksten Ikke tilgængelig med Foretag et valg.

  5. Klik på Gem.

Simple

Trin for Simple

Følg disse trin for at anvende tilpasningen til Simple:

Rediger dit temas JavaScript-fil

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

  2. Find det tema, du vil redigere, og klik på knappen for at åbne handlingsmenuen. Klik derefter på Rediger kode.

  3. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

  4. Find koden initProductVariant: function() {. Find følgende kode nedenfor:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

Tilføj følgende kode på en ny linje nedenfor:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Koden bør se nogenlunde således ud:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}
  1. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

  1. Klik på product-template.liquid i mappen Afsnit.
  2. Find følgende kode:
{% assign current_variant = product.selected_or_first_available_variant %}

Udskift den med:

{% assign current_variant = product.selected_variant %}
  1. Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
  1. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:
{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Koden bør se nogenlunde således ud:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}
  1. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

  3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

  4. Erstat teksten Ikke tilgængelig med Foretag et valg.

  5. Klik på Gem.

Supply

Trin for Supply

Følg disse trin for at anvende tilpasningen til Supply:

Rediger dit temas JavaScript-fil

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

  2. Find det tema, du vil redigere, og klik på knappen for at åbne handlingsmenuen. Klik derefter på Rediger kode.

  3. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

  4. Find koden initProductVariant: function() {. Find følgende kode nedenfor:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

Tilføj følgende kode på en ny linje nedenfor:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Koden bør se nogenlunde således ud:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}
  1. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

  1. Klik på product-template.liquid i mappen Afsnit.
  2. Find følgende kode:
{% assign variant = product.selected_or_first_available_variant %}

Udskift den med:

{% assign variant = product.selected_variant %}
  1. Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
  1. Find alle forekomster af denne kode:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Udskift den med:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
  1. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:
{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Koden bør se nogenlunde således ud:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}
  1. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

  3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

  4. Erstat teksten Ikke tilgængelig med Foretag et valg.

  5. Klik på Gem.

Venture

Trin for Venture

Følg disse trin for at anvende tilpasningen til Venture:

Rediger dit temas JavaScript-fil

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

  2. Find det tema, du vil redigere, og klik på knappen for at åbne handlingsmenuen. Klik derefter på Rediger kode.

  3. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

  4. Tilføj følgende kode nederst i filen:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();
  1. Find følgende kode:
this.currentVariant = this._getVariantFromOptions();

Udskift den med:

this.currentVariant = this._getVariantFromOptions() || {};
  1. Find koden _updatePrice: function(variant). Udskift følgende kode:
if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

med:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */
  1. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

  1. Klik på product-template.liquid i mappen Afsnit.
  2. Find følgende kode:
{% assign current_variant = product.selected_or_first_available_variant %}

Udskift den med:

{% if product.variants.size > 1 %}
  {% assign current_variant = product.selected_variant %}
{% else %}
  {% assign current_variant = product.first_available_variant %}
{% endif %}
  1. Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Hvis du ikke kan finde den ovenstående kode, skal du finde denne kode og slette den:

{% if variant == current_variant %} selected="selected" {% endif %}
  1. Find alle forekomster af denne kode:
{% unless current_variant.available %}

Udskift den med:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}
  1. Find følgende kode:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Udskift den med:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% else %}
  {% unless current_variant.available or product.variants.size == 1 and variant.available %}
    {{ 'products.product.sold_out' | t }}
  {% else %}
    {{ 'products.product.add_to_cart' | t }}
  {% endunless %}
{% endif %}
  1. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:
{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Koden bør se nogenlunde således ud:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}
  1. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

  3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

  4. Erstat teksten Ikke tilgængelig med Foretag et valg.

  5. Klik på Gem.

Trin for temaer uden sektioner

Tilføj prompter i dine variantrullemenuer

  1. Klik på Opret et nyt kodestykke i mappen Kodestykker.
  2. Navngiv dit nye kodestykke pick-an-option.
  3. I dit nye kodestykke skal du indsætte denne kode er hosted på GitHub.
  4. Klik på Gem.
  5. I mappen Layout skal du klikke på theme.liquid.
  6. Find det afsluttende </body>-tag tæt på bunden af filen. Indsæt følgende kode på en ny linje lige over det afsluttende </body>-tag:
{% render 'pick-an-option' %}
  1. Klik på Gem.
  2. Find filen, der indeholder Læg i indkøbskurven-formularen. Den vil have en action-attribut, der er indstillet til /cart/add. Den skal være i en af disse fire filer:

    • product.liquid-skabelonen under Skabeloner
    • theme.liquid-layoutet under Layout
    • product.liquid-kodestykket under Kodestykker
    • single-product.liquid-kodestykket under Kodestykker
  3. Find denne kode inde i formularen:

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Du kan også finde denne kode i formularen:

<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Erstat koden med følgende kodeblok:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Hvis du bruger Minimal, Pop eller Supply, skal du findealle forekomster af denne kode:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Erstat koden med følgende kodeblok:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

Hvis du bruger et andet ældre Shopify-tema, skal du finde denne kode:

{% assign current_variant = product.selected_or_first_available_variant %}

Erstat koden med følgende kodeblok:

{% assign current_variant = product.selected_variant %}

Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

  3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

  4. Erstat teksten Ikke tilgængelig med Foretag et valg.

  5. Klik på Gem.

Kan du ikke finde de svar, du leder efter? Vi er her for at hjælpe.