Müşterilerin bir seçenek seçmesini sağlayın

Dikkat

Vintage temalar Theme Store'da bulunmaz. Vintage temalar, Shopify'ın Online Store 2.0 temalarında yer alan özellikleri içermez ve Shopify'ın ücretsiz vintage temaları, güvenlik düzeltmelerinin dışında güncelleme almaz.

Not

Shopify'ın ücretsiz bir temasını kullanıyorsanız bu eğitimle ilgili yardım almak için Shopify Destek ekibiyle iletişime geçebilirsiniz. 15 dakikalık bir tasarım süresi gerekir. Shopify Tasarım Politikası hakkında daha fazla bilgi edinin.

Not

Bu özelleştirme, vintage Shopify temaları içindir ve Online Store 2.0 temalarına uygulanmaz.

• Temanızın mimari sürümünü öğrenin
• Online Store 2.0 tema özelleştirmelerini keşfedin

Müşteri online mağazanızdaki bir ürün sayfasını ziyaret ettiğinde varsayılan olarak, kullanılabilir ilk varyasyon seçilir. Kullanılabilir ilk varyasyonu otomatik olarak seçme özelliğini devre dışı bırakmak için Müşterilerin bir seçenek seçmesini sağlayın kişiselleştirmesini kullanabilirsiniz. Bunu yaptığınızda, bir varyasyon gösterilmeden önce müşteriden manuel olarak bir varyasyon seçmesi istenir.

Müşterilerin bir seçenek seçmesini sağlayın kişiselleştirmesini kullanırsanız temanız, müşteriniz bir varyasyon seçinceye kadar ürün fiyatını göstermeyebilir. Varyasyonları olan ürünlerin öne çıkan bir fiyatı yoktur ve gösterilen fiyat, seçilen varyasyona göre belirlenir.

Bölümlere ayrılmış ve ayrılmamış temalar

Not: Bu eğitimin adımları bölümlere ayrılmış tema bir tema mı yoksa bölümlere ayrılmamış bir tema mı kullandığınıza bağlı olarak değişiklik gösterir. Bölümlere ayrılmış temada, ana sayfanızın düzenini değiştirmeniz için öğeleri sürükleyip bırakabilirsiniz. Bu işlemi bölümlere ayrılmamış temada yapamazsınız.

Temanızın, bölümleri destekleyip desteklemediğini öğrenmek için temanızın Kodu düzenle sayfasına gidin. Bölümler dizininde dosyalar varsa bu, bölümlendirilmiş bir tema kullandığınız anlamına gelir. Bölümlendirilmemiş temalar Ekim 2016'dan önce kullanıma sunulmuştur ve Bölümler dizininde bu temaların dosyaları yoktur.

Bölümlendirilmiş bir tema kullanıyorsanız Sectioned themes (Bölümlendirilmiş temalar) düğmesine tıklayın ve talimatları izleyin. Daha eski ve bölümlendirilmemiş bir tema kullanıyorsanız Non-sectioned themes (Bölümlendirilmemiş temalar) düğmesine tıklayın ve talimatları izleyin.

Bölümlere ayrılmış temalar için adımlar

Temanızı seçme

Bu özelleştirmeye yönelik adımlar, temanıza göre değişiklik gösterir. Aşağıdaki talimatları uygulamadan önce temanıza ilişkin düğmeye tıklayın:

Boundless

Boundless için adımlar

Özelleştirmeyi Boundless'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
3. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. initVariantSelectors kodunu bulun. Hemen sonrasında aşağıdaki kodu göreceksiniz:

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

Aşağıdaki kodu, aşağıya yeni bir satıra ekleyin:

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

Şu şekilde gözükmelidir:

// 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. Aşağıdaki kod satırını bulun:

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

Bu kod satırının iki örneği vardır ve ikisi de productVariantCallback işlevinde bulunur. Yalnızca ikinci örneği şununla değiştirin:

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

1. Kayıtyap ' a tıklayın.

Not

Bazı Boundless sürümleri bu adımda değiştirilecek kod satırını içermez. Kodu bulamazsanız bir sonraki adıma geçin.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{% assign current_variant = product.selected_or_first_available_variant %}

Bunu şununla değiştirin:

{% assign current_variant = product.selected_variant %}

1. Aşağıdaki kodu bulun ve silin:

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

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

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

Şu şekilde gözükmelidir:

{% 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. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Müşteri bir ürün seçmeden önce ürünlerin Kullanım dışı olarak gösterilmesini önlemek için Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

Adımlar:

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Öğeleri filtrele arama çubuğunda, Kullanım dışı çevirisini görüntülemek için kullanım dışı yazmaya başlayın.
4. Kullanım dışı metnini Bir seçim yapın ifadesiyle değiştirin.
5. Kayıtyap ' a tıklayın.

Debut

Debut için adımlar

Özelleştirmeyi Debut'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
3. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. Aşağıdaki kodu dosyanın en altına ekleyin:

(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. _updatePrice: function(variant) kodunu bulun. Şu kodun yerine:

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

Şunu yazın:

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

Yukarıdaki kodu bulamazsanız aşağıdaki kodu bulmayı deneyin:

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

Bunu şununla değiştirin:

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

1. Kodu bulun this.currentVariant = variant;

Aşağıdaki kodu altına ekleyin:

this._updatePaymentButton(variant);

Sonuç şu şekilde gözükmelidir:

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

1. _updateImages: function(variant) kodunu bulun. Şu kodun yerine:

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

Şunu yazın:

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

1. Hemen altında, aşağıdaki kodu bulun:

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

Bunu şununla değiştirin:

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

1. _updateSKU: function(variant) kodunu bulun. Şu kodun yerine:

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

Şunu yazın:

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

1. _initVariants: function() { kodunu bulun. Şu kodun yerine:

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

Şunu yazın:

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

Not

Bu kodun, yalnızca Debut 17.5.0 ve sonraki sürümlerde değiştirilmesi gerekir.

1. Aşağıdaki kodu bulun:

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

Yukarıdaki kodun altına, yeni bir satıra aşağıdaki kodu ekleyin:

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

Şu şekilde gözükmelidir:

_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. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

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

Bunu şununla değiştirin:

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

1. Aşağıdaki kodu bulun ve silin:

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

Yukarıdaki kodu bulamazsanız aşağıdaki kodu bulun ve silin:

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

1. Aşağıdaki kodu bulun:

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

Bunu şununla değiştirin:

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

Yukarıdaki kodu bulamazsanız aşağıdaki kodu bulmayı deneyin:

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

Bunu şununla değiştirin:

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

Not

Bazı Debut sürümleri bu adımda değiştirilecek kod satırını içermez. Kodu bulamazsanız bir sonraki adıma geçin.

1. Aşağıdaki kodu bulun:

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

Bunu şununla değiştirin:

{% 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. Aşağıdaki kodu bulun:

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

Bunu şununla değiştirin:

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

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

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

Şu şekilde gözükmelidir:

{% 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. Kayıtyap ' a tıklayın.

Ürün fiyatı parçacığınızı düzenleme

Ürün fiyatı parçacığınızı düzenlemek için:

1. Parçacıklar dizininde product-price.liquid seçeneğine tıklayın.
2. Aşağıdaki kodu bulun:

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

Bunu şununla değiştirin:

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

Not

Bazı Debut sürümleri bu adımda değiştirilecek kod satırını içermez. Kodu bulamazsanız bir sonraki adıma geçin.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Müşteri bir ürün seçmeden önce ürünlerin Kullanım dışı olarak gösterilmesini önlemek için Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

Adımlar:

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Öğeleri filtrele arama çubuğunda, Kullanım dışı çevirisini görüntülemek için kullanım dışı yazmaya başlayın.
4. Kullanım dışı metnini Bir seçim yapın ifadesiyle değiştirin.
5. Kayıtyap ' a tıklayın.

Minimal

Minimal için adımlar

Özelleştirmeyi Minimal'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
3. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. initProductVariant: function() { kodunu bulun. Hemen sonrasında aşağıdaki kodu göreceksiniz:

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

Aşağıdaki kodu, aşağıya yeni bir satıra ekleyin:

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

Şu şekilde gözükmelidir:

// 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. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{% assign variant = product.selected_or_first_available_variant %}

Bunu şununla değiştirin:

{% assign variant = product.selected_variant %}

1. Aşağıdaki kodu bulun ve silin:

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

1. Şu kodun tüm örneklerini bulun:

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

Şununla değiştirin:

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

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

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

Şu şekilde gözükmelidir:

{% 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. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Müşteri bir ürün seçmeden önce ürünlerin Kullanım dışı olarak gösterilmesini önlemek için Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

Adımlar:

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Öğeleri filtrele arama çubuğunda, Kullanım dışı çevirisini görüntülemek için kullanım dışı yazmaya başlayın.
4. Kullanım dışı metnini Bir seçim yapın ifadesiyle değiştirin.
5. Kayıtyap ' a tıklayın.

Narrative

Narrative için adımlar

Özelleştirmeyi Narrative'e uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
3. Assets (Öğeler) dizininde custom.js seçeneğine tıklayın.
4. Aşağıdaki kodu dosyanın en altına ekleyin:

(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. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

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

Bunu şununla değiştirin:

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

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

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

Şu şekilde gözükmelidir:

{% 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. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Müşteri bir ürün seçmeden önce ürünlerin Kullanım dışı olarak gösterilmesini önlemek için Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

Adımlar:

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Öğeleri filtrele arama çubuğunda, Kullanım dışı çevirisini görüntülemek için kullanım dışı yazmaya başlayın.
4. Kullanım dışı metnini Bir seçim yapın ifadesiyle değiştirin.
5. Kayıtyap ' a tıklayın.

Simple

Simple için adımlar

Özelleştirmeyi Simple'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
3. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. initProductVariant: function() { kodunu bulun. Hemen sonrasında aşağıdaki kodu göreceksiniz:

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

Aşağıdaki kodu, aşağıya yeni bir satıra ekleyin:

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

Şu şekilde gözükmelidir:

// 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. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{% assign current_variant = product.selected_or_first_available_variant %}

Bunu şununla değiştirin:

{% assign current_variant = product.selected_variant %}

1. Aşağıdaki kodu bulun ve silin:

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

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

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

Şu şekilde gözükmelidir:

{% 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. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Müşteri bir ürün seçmeden önce ürünlerin Kullanım dışı olarak gösterilmesini önlemek için Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

Adımlar:

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Öğeleri filtrele arama çubuğunda, Kullanım dışı çevirisini görüntülemek için kullanım dışı yazmaya başlayın.
4. Kullanım dışı metnini Bir seçim yapın ifadesiyle değiştirin.
5. Kayıtyap ' a tıklayın.

Supply

Supply için adımlar

Özelleştirmeyi Supply'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
3. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. initProductVariant: function() { kodunu bulun. Hemen sonrasında aşağıdaki kodu göreceksiniz:

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

Aşağıdaki kodu, aşağıya yeni bir satıra ekleyin:

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

Şu şekilde gözükmelidir:

// 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. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{% assign variant = product.selected_or_first_available_variant %}

Bunu şununla değiştirin:

{% assign variant = product.selected_variant %}

1. Aşağıdaki kodu bulun ve silin:

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

1. Şu kodun tüm örneklerini bulun:

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

Bunu şununla değiştirin:

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

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

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

Şu şekilde gözükmelidir:

{% 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. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Müşteri bir ürün seçmeden önce ürünlerin Kullanım dışı olarak gösterilmesini önlemek için Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

Adımlar:

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Öğeleri filtrele arama çubuğunda, Kullanım dışı çevirisini görüntülemek için kullanım dışı yazmaya başlayın.
4. Kullanım dışı metnini Bir seçim yapın ifadesiyle değiştirin.
5. Kayıtyap ' a tıklayın.

Venture

Venture için adımlar

Özelleştirmeyi Venture'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
3. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. Aşağıdaki kodu dosyanın en altına ekleyin:

(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. Aşağıdaki kodu bulun:

this.currentVariant = this._getVariantFromOptions();

Bunu şununla değiştirin:

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

1. _updatePrice: function(variant) kodunu bulun. Şu kodun yerine:

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

Şunu yazın:

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

1. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{% assign current_variant = product.selected_or_first_available_variant %}

Bunu şununla değiştirin:

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

1. Aşağıdaki kodu bulun ve silin:

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

Yukarıdaki kodu bulamazsanız aşağıdaki kodu bulun ve silin:

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

1. Şu kodun tüm örneklerini bulun:

{% unless current_variant.available %}

Bunu şununla değiştirin:

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

1. Aşağıdaki kodu bulun:

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

Bunu şununla değiştirin:

{% 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. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

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

Şu şekilde gözükmelidir:

{% 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. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Müşteri bir ürün seçmeden önce ürünlerin Kullanım dışı olarak gösterilmesini önlemek için Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

Adımlar:

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Öğeleri filtrele arama çubuğunda, Kullanım dışı çevirisini görüntülemek için kullanım dışı yazmaya başlayın.
4. Kullanım dışı metnini Bir seçim yapın ifadesiyle değiştirin.
5. Kayıtyap ' a tıklayın.

Bölümlere ayrılmamış temalar için adımlar

Varyasyon açılan menülerinize komutlar ekleyin.

1. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.
2. Yeni parçacığınızı pick-an-option olarak adlandırın.
3. Yeni parçacık dosyanıza, GitHub'da barındırılan bu kodu yapıştırın.
4. Kayıtyap ' a tıklayın.
5. Düzen dizininde theme.liquid seçeneğine tıklayın.
6. Dosyanın alt taraflarındaki kapatma </body> etiketini bulun. Kapatma </body> etiketinin tam üzerindeki yeni satıra aşağıdaki kodu yapıştırın:

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

1. Kayıtyap ' a tıklayın.

2. Sepete ekle formunu içeren dosyayı bulun. Bu dosyanın /cart/add olarak ayarlanmış bir action özelliği olacaktır. Bu, şu dört dosyadan birinde olmalıdır:

   • Şablonlar bölümündeki product.liquid şablonu
   • Düzen bölümündeki theme.liquid düzeni
   • Snippets (Parçacıklar) bölümündeki product.liquid parçacığı
   • Snippets (Parçacıklar) bölümündeki single-product.liquid parçacığı

3. Formun içinde şu kodu bulun:

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

Alternatif olarak, formun içinde şu kodu bulun:

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

Kodu, aşağıdaki kod bloğuyla değiştirin:

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

Minimal, Pop veya Supply'ı kullanıyorsanız aşağıdaki kodun geçtiği tüm örnekleri bulun:

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

Kodu, aşağıdaki kod bloğuyla değiştirin:

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

Diğer herhangi bir vintage Shopify temasını kullanıyorsanız aşağıdaki kodu bulun:

{% assign current_variant = product.selected_or_first_available_variant %}

Kodu, aşağıdaki kod bloğuyla değiştirin:

{% assign current_variant = product.selected_variant %}

Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Müşteri bir ürün seçmeden önce ürünlerin Kullanım dışı olarak gösterilmesini önlemek için Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

Adımlar:

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Öğeleri filtrele arama çubuğunda, Kullanım dışı çevirisini görüntülemek için kullanım dışı yazmaya başlayın.
4. Kullanım dışı metnini Bir seçim yapın ifadesiyle değiştirin.
5. Kayıtyap ' a tıklayın.