Zachęć klientów do wyboru opcji

Uwaga

Klasyczne szablony nie są dostępne w Sklepie z szablonami. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0, a darmowe klasyczne szablony Shopify nie są aktualizowane oprócz poprawek bezpieczeństwa.

Uwaga

Jeśli używasz darmowego szablonu Shopify, możesz skontaktować się z pomocą techniczną Shopify, aby uzyskać pomoc w zakresie tego tutoriala. Wymaga to 15 minut czasu projektowania. Aby dowiedzieć się więcej, zapoznaj się z tematem Pomoc techniczna w zakresie szablonów.

Uwaga

To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.

• Dowiedz się, jaka jest wersja architektury Twojego szablonu
• Przeglądaj dostosowania szablonu Online Store 2.0

Gdy klient odwiedza stronę produktu w sklepie online, domyślnie wybierany jest pierwszy dostępny wariant. Możesz użyć tego dostosowania, aby dezaktywować automatyczne wybieranie pierwszego dostępnego wariantu. Wówczas klient zostanie poproszony o ręczne wybranie wariantu przed jego wyświetleniem.

Uwaga

Ze względu na to, że to dostosowanie uniemożliwia domyślne wybranie wariantu, Twój szablon może nie pokazywać ceny produktu, dopóki klient nie wybierze wariantu. Jest to oczekiwane zachowanie, ponieważ dla produktów z wariantami nie jest prezentowana cena. Wyświetlana cena jest ustalana na podstawie wybranego wariantu.

Szablony z sekcjami i bez sekcji

Uwaga

Kroki tego tutoriala różnią się w zależności od tego, czy używasz szablonu z sekcjami czy bez sekcji. Szablon z sekcjami umożliwia przeciąganie i upuszczanie elementów w celu zmiany układu strony głównej, nie jest to możliwe w przypadku szablonu bez sekcji.

Aby ustalić, czy Twój szablon obsługuje sekcje, przejdź do strony Edytuj kod. Jeśli w katalogu Sekcje są pliki, używasz szablonu z sekcjami. Szablony bez sekcji zostały zatwierdzone przed październikiem 2016 roku i nie zawierają plików w katalogu*Sekcje*.

Jeśli używasz szablonu z sekcjami, kliknij przycisk Szablony z sekcjami i zastosuj się do instrukcji. Jeśli używasz starszego szablonu, niezawierającego sekcji, kliknij przycisk Szablony bez sekcji i zastosuj się do instrukcji.

Kroki dotyczące szablonów z sekcjami

Wybierz swój szablon

Kroki dla tego dostosowania różnią się w zależności od szablonu. Kliknij przycisk dla szablonu, zanim wykonasz poniższe instrukcje:

Boundless

Kroki dla szablonu Boundless

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Boundless:

Edytuj plik JavaScript swojego szablonu

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
3. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.
4. Znajdź kod initVariantSelectors. Poniżej wyszukaj następujący kod:

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

Dodaj następujący kod w nowej linii poniżej:

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;
    }
  }
}

Powinno to wyglądać tak:

// 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. Znajdź następującą linię kodu:

$(selectors.addToCartText).html(theme.strings.soldOut);

Istnieją dwa wystąpienia tej linii kodu; oba znajdują się w funkcji productVariantCallback. Zastąp tylko drugie wystąpienie poniższym ciągiem znaków:

$(selectors.addToCartText).html('Make a Selection');

1. Kliknij opcję Zapisz.

Uwaga

Niektóre wersje Boundless nie zawierają linii kodu do zastąpienia w ramach tego kroku. Jeśli nie możesz znaleźć kodu, przejdź do następnego kroku. Jeśli nie możesz znaleźć kodu, przejdź do następnego kroku.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.
2. Znajdź następujący kod:

{% assign current_variant = product.selected_or_first_available_variant %}

Zastąp go poprzez:

{% assign current_variant = product.selected_variant %}

1. Znajdź następujący kod i usuń go:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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 %}

Powinno to wyglądać tak:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję ... > Edytuj domyślną zawartość szablonu.
3. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.
4. Zastąp tekst Niedostępny wyrażeniem Make a selection.
5. Kliknij opcję Zapisz.

Debut

Kroki dla szablonu Debut

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Debut:

Edytuj plik JavaScript swojego szablonu

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
3. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.
4. Dodaj następujący kod na dole pliku:

(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. Znajdź kod _updatePrice: function(variant). Zastąp następujący kod:

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

poprzez:

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

Jeśli nie możesz znaleźć powyższego kodu, znajdź następujący kod:

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

Zastąp go poprzez:

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

1. Znajdź kod this.currentVariant = variant;

Dodaj następujący kod poniżej:

this._updatePaymentButton(variant);

Wynik powinien wyglądać tak:

this.currentVariant = variant;
this._updatePaymentButton(variant);

1. Znajdź kod _updateImages: function(variant). Zastąp następujący kod:

var currentVariantImage = this.currentVariant.featured_image || {};

poprzez:

if (this.currentVariant != undefined) {
  var currentVariantImage = this.currentVariant.featured_image || {};
}

1. Poniżej znajdź następujący kod:

if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
}

Zastąp go poprzez:

/* if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
} */

1. Znajdź kod _updateSKU: function(variant). Zastąp następujący kod:

if (variant.sku === this.currentVariant.sku) {
  return;
}

poprzez:

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

1. Znajdź kod _initVariants: function() {. Zastąp następujący kod:

if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
}

poprzez:

/* if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */

Uwaga

Ten kod musi zostać zastąpiony tylko w wersji Debut 17.5.0 i wyższej.

1. Znajdź następujący kod:

_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
    })
  );
},

Dodaj następujący kod w nowej linii poniżej powyższego kodu:

_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');
  }
},

Powinno to wyglądać tak:

_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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.
2. Znajdź następujący kod:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Zastąp go poprzez:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else %}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif %}

1. Znajdź następujący kod i usuń go:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Jeśli nie możesz znaleźć powyższego kodu, znajdź poniższy kod i usuń go:

{%- if variant == current_variant %} selected="selected" {%- endif -%}

1. Znajdź następujący kod:

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

Zastąp go poprzez:

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

Jeśli nie możesz znaleźć powyższego kodu, znajdź poniższy kod:

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

Zastąp go poprzez:

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

Uwaga

Niektóre wersje szablonu Debut nie zawierają linii kodu do zastąpienia w ramach tego kroku. Jeśli nie możesz znaleźć kodu, przejdź do następnego kroku.

1. Znajdź następujący kod:

{% unless current_variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Zastąp go poprzez:

{% 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. Znajdź następujący kod:

{% if section.settings.enable_payment_button %}
  {{ form | payment_button }}
{% endif %}

Zastąp go poprzez:

<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
  {% if section.settings.enable_payment_button %}
    {{ form | payment_button }}
  {% endif %}
</div>

1. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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 %}

Powinno to wyglądać tak:

{% 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. Kliknij opcję Zapisz.

Edytuj fragment kodu ceny produktu

Aby wyedytować fragment kodu ceny produktu:

1. W katalogu Fragmenty kliknij product-price.liquid.
2. Znajdź następujący kod:

{%- 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
-%}

Zastąp go poprzez:

{%- 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
-%}

Uwaga

Niektóre wersje szablonu Debut nie zawierają kodu do zastąpienia w ramach tego kroku. Jeśli nie możesz znaleźć kodu, przejdź do następnego kroku.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję ... > Edytuj domyślną zawartość szablonu.
3. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.
4. Zastąp tekst Niedostępny wyrażeniem Make a selection.
5. Kliknij opcję Zapisz.

Minimal

Kroki dla szablonu Minimal

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Minimal:

Edytuj plik JavaScript swojego szablonu

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
3. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.
4. Znajdź kod initProductVariant: function() {. Poniżej wyszukaj następujący kod:

// 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();
}

Dodaj następujący kod w nowej linii poniżej:

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;
    }
  }
}

Powinno to wyglądać tak:

// 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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.
2. Znajdź następujący kod:

{% assign variant = product.selected_or_first_available_variant %}

Zastąp go poprzez:

{% assign variant = product.selected_variant %}

1. Znajdź następujący kod i usuń go:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Znajdź wszystkie wystąpienia tego kodu:

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

Zastąp przez:

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

1. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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 %}

Powinno to wyglądać tak:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję ... > Edytuj domyślną zawartość szablonu.
3. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.
4. Zastąp tekst Niedostępny wyrażeniem Make a selection.
5. Kliknij opcję Zapisz.

Narrative

Kroki dla szablonu Narrative

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Narrative:

Edytuj plik JavaScript swojego szablonu

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
3. W katalogu Zasoby kliknij custom.js.
4. Dodaj następujący kod na dole pliku:

(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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.
2. Znajdź następujący kod:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Zastąp go poprzez:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else -%}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif -%}

1. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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 %}

Powinno to wyglądać tak:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję ... > Edytuj domyślną zawartość szablonu.
3. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.
4. Zastąp tekst Niedostępny wyrażeniem Make a selection.
5. Kliknij opcję Zapisz.

Simple

Kroki dla szablonu Simple

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Simple:

Edytuj plik JavaScript swojego szablonu

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
3. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.
4. Znajdź kod initProductVariant: function() {. Poniżej wyszukaj następujący kod:

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

Dodaj następujący kod w nowej linii poniżej:

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;
    }
  }
}

Powinno to wyglądać tak:

// 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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.
2. Znajdź następujący kod:

{% assign current_variant = product.selected_or_first_available_variant %}

Zastąp go poprzez:

{% assign current_variant = product.selected_variant %}

1. Znajdź następujący kod i usuń go:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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 %}

Powinno to wyglądać tak:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję ... > Edytuj domyślną zawartość szablonu.
3. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.
4. Zastąp tekst Niedostępny wyrażeniem Make a selection.
5. Kliknij opcję Zapisz.

Supply

Kroki dla szablonu Supply

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Supply:

Edytuj plik JavaScript swojego szablonu

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
3. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.
4. Znajdź kod initProductVariant: function() {. Poniżej wyszukaj następujący kod:

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

Dodaj następujący kod w nowej linii poniżej:

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;
    }
  }
}

Powinno to wyglądać tak:

// 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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.
2. Znajdź następujący kod:

{% assign variant = product.selected_or_first_available_variant %}

Zastąp go poprzez:

{% assign variant = product.selected_variant %}

1. Znajdź następujący kod i usuń go:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Znajdź wszystkie wystąpienia tego kodu:

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

Zastąp go poprzez:

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

1. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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 %}

Powinno to wyglądać tak:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję ... > Edytuj domyślną zawartość szablonu.
3. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.
4. Zastąp tekst Niedostępny wyrażeniem Make a selection.
5. Kliknij opcję Zapisz.

Venture

Kroki dla szablonu Venture

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Venture:

Edytuj plik JavaScript swojego szablonu

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
3. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.
4. Dodaj następujący kod na dole pliku:

(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. Znajdź następujący kod:

this.currentVariant = this._getVariantFromOptions();

Zastąp go poprzez:

this.currentVariant = this._getVariantFromOptions() || {};

1. Znajdź kod _updatePrice: function(variant). Zastąp następujący kod:

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

poprzez:

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

1. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.
2. Znajdź następujący kod:

{% assign current_variant = product.selected_or_first_available_variant %}

Zastąp go poprzez:

{% if product.variants.size > 1 %}
  {% assign current_variant = product.selected_variant %}
{% else %}
  {% assign current_variant = product.first_available_variant %}
{% endif %}

1. Znajdź następujący kod i usuń go:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Jeśli nie możesz znaleźć powyższego kodu, znajdź ten kod i usuń go:

{% if variant == current_variant %} selected="selected" {% endif %}

1. Znajdź wszystkie wystąpienia tego kodu:

{% unless current_variant.available %}

Zastąp go poprzez:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}

1. Znajdź następujący kod:

{% 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 %}

Zastąp go poprzez:

{% 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. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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 %}

Powinno to wyglądać tak:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję ... > Edytuj domyślną zawartość szablonu.
3. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.
4. Zastąp tekst Niedostępny wyrażeniem Make a selection.
5. Kliknij opcję Zapisz.

Kroki dotyczące szablonów bez sekcji

Dodaj monity do menu rozwijanych wariantów

Aby dodać monity do rozwijanych menu wariantów:

1. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.
2. Nadaj nazwę nowemu fragmentowi kodu pick-an-option.

1. W swoim nowym pliku fragmentu kodu wklej ten kod hostowany na GitHub.
2. Kliknij opcję Zapisz.
3. W katalogu Układ kliknij theme.liquid.
4. Znajdź tag zamykający </body> w dolnej części pliku. W nowej linii tuż nad tagiem zamykającym </body> wklej następujący kod:

{% render 'pick-an-option' %}

1. Kliknij opcję Zapisz.

2. Znajdź plik zawierający formularz dodawania do koszyka. Będzie mieć atrybut action ustawiony na /cart/add. Powinien się znajdować w jednym z tych czterech plików:

   • szablon product.liquid w ramach Szablonów
   • układ theme.liquid w ramach Układu
   • fragment kodu product.liquid w ramach Fragmentów kodu
   • fragment kodu single-product.liquid w ramach Fragmentów kodu

3. Znajdź ten kod wewnątrz formularza:

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

lub

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

Zastąp go poprzez:

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

1. Znajdź i zastąp następujący kod:
   • Minimal, Pop lub Supply: Jeśli używasz szablonu Minimal, Pop lub Supply, znajdź wszystkie wystąpienia tego kodu:

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

Zastąp przez:

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

• Inne darmowe szablony Shopify: Jeśli używasz innego szablonu Shopify, znajdź ten kod:

{% assign current_variant = product.selected_or_first_available_variant %}

Zastąp go poprzez:

{% assign current_variant = product.selected_variant %}

1. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję ... > Edytuj domyślną zawartość szablonu.
3. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.
4. Zastąp tekst Niedostępny wyrażeniem Make a selection.
5. Kliknij opcję Zapisz.