Mağazanızda adet kurallarını ve hacim bazlı fiyatlandırmayı görüntüleme

Mağaza temanızı en son sürüme güncelleyerek B2B kataloğunuzda adet kuralları ve hacim bazlı fiyatlandırma bilgilerini gösterebilirsiniz.

Temanızı değiştirmek veya güncellemek istemiyorsanız adet kurallarını ve hacim bazlı fiyatlandırmayı görüntülemek için temanıza aşağıdaki kodu ekleyebilirsiniz.

Bu sayfada

Tema koduna adet kuralları ve hacim bazlı fiyatlandırma eklerken dikkat edilmesi gerekenler

Tema kodunuza adet kuralları ve hacim bazlı fiyatlandırma eklemeden önce aşağıdaki hususları gözden geçirin:

Bu, ileri düzey bir eğitimdir. Tema kodunu okuma veya düzenleme konusunda yeterince bilgi sahibi değilseniz bir geliştiriciyle veya Shopify İş Ortağı ile çalışabilirsiniz.
Tema dosyalarınızda güncelleme yapmadan önce yedekleme oluşturmak için temanızı çoğaltın.
B2B kataloğuyla ilgili adet kuralları yalnızca ücretsiz Shopify temalarının 8.0.0 veya sonraki sürümlerde desteklenir. Hacim bazlı fiyatlandırma 11.0.0 veya sonraki sürümlerde desteklenir.

Ürün sepetindeki adet

Ürün varyasyonunun sepet adedi değeri, ürün sayfasında veya öne çıkan ürün bölümünde görüntülenebilir. Bu değer Liquid kullanılarak alınabilir.

Liquid ürün sepeti adet kodu ekleme

Sepet adedini desteklemek için temanızdaki aşağıdaki dosyalara kod ekleyebilirsiniz:

main-product.liquid veya eş değeri
featured-product.liquid veya eş değeri

Adımlar:

Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Düzenlemek istediğiniz dosyayı açın.
Dosyanın altında yeni bir satır oluşturun ve aşağıdaki kodu ekleyin:

{% comment %} Cart quantity {% endcomment %}
<span id="CartQuantity-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {{ cart | line_items_for: product | sum: 'quantity' }}
    {{- 'products.product.quantity.in_cart' | t: quantity: cart_qty -}}
</span>

Kaydet'e tıklayın.

Javascript sepet adedi kodu ekleme

Bir varyasyonun sepet adedi değiştiğinde ürün sayfasında gösterilen değer veya öne çıkarılan ürün bölümü güncellenmelidir. Güncellenen değer, Javascript kodu kullanılarak alınabilir.

theme.js veya eş değer bir dosyaya kodu ekleyebilirsiniz.

Adımlar:

Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
theme.js dosyasını açın.
Dosyanın altında yeni bir satır oluşturun ve aşağıdaki kodu ekleyin:

let productUrl =
  document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;

// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
  .then((response) => response.text())
  .then((responseText) => {
    // Replace the current HTML in DOM with the updated HTML

    const updatedHtml = new DOMParser().parseFromString(
      responseText,
      'text/html',
    );

    // Update the cart quantity
    const currentCartQuantity = document.querySelector(
      `#CartQuantity-${sectionId}`,
    );
    const updatedCartQuantity = updatedHtml.querySelector(
      `#CartQuantity-${sectionId}`,
    );
    currentCartQuantity.innerHTML = updatedCartQuantity.innerHTML;
  });

Kaydet'e tıklayın.

Adet kuralları

Ürün varyasyonunun adet kuralları, ürün sayfasında veya öne çıkan ürün bölümünde görüntülenebilir. Kurallar Liquid kullanılarak alınabilir.

Liquid adet kuralları kodu ekleme

Adet kurallarını desteklemek için temanızda bulunan aşağıdaki dosyalara kod ekleyebilirsiniz:

main-product.liquid veya eş değeri
featured-product.liquid veya eş değeri

Adımlar:

Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Düzenlemek istediğiniz dosyayı açın.
Dosyanın altında yeni bir satır oluşturun ve ardından aşağıdaki kodu ekleyin:

{% comment %} Quantity rules {% endcomment %}
<div id="QuantityRules-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
        <span>
        {{- 'products.product.quantity.multiples_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.increment -}}
        </span>
    {%- endif -%}
    {%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
        <span>
        &nbsp;-&nbsp;
        {{- 'products.product.quantity.minimum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.min -}}
        </span>
    {%- endif -%}
    {%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
        <span>
        &nbsp;-&nbsp;
        {{- 'products.product.quantity.maximum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.max -}}
        </span>
    {%- endif -%}
</div>

Kaydet'e tıklayın.

Javascript adet kuralları kodunu ekleme

Bir ürünün her varyasyonu kendi adet kurallarına sahip olabilir. Farklı bir varyasyon seçildikten sonra ürün sayfasında veya önerilen ürün bölümünde gösterilen adet kuralları güncellenmelidir. Güncellenen değer, Javascript kodu kullanılarak alınabilir.

theme.js veya eş değeri
en.default.json

Adımlar:

Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
theme.js dosyasını açın.
Dosyanın altında yeni bir satır oluşturun ve ardından aşağıdaki kodu ekleyin:

let productUrl =
  document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;
// `variantId` is set to the current variant's id. Replace this value with the updated variant's id

// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
  .then((response) => response.text())
  .then((responseText) => {
    // Replace the current HTML in DOM with the updated HTML

    const updatedHtml = new DOMParser().parseFromString(
      responseText,
      'text/html',
    );

    // Update the quantity rules
    const currentQuantityRules = document.querySelector(
      `#QuantityRules-${sectionId}`,
    );
    const updatedQuantityRules = updatedHtml.querySelector(
      `#QuantityRules-${sectionId}`,
    );
    currentQuantityRules.innerHTML = updatedQuantityRules.innerHTML;
  });

Kaydet'e tıklayın.

Toplu alım bazlı fiyatlandırma

Liquid toplu alım bazlı fiyatlandırma kodu ekleme

Toplu alım bazlı fiyatlandırma için temanızda bulunan aşağıdaki dosyalara kod ekleyebilirsiniz:

main-product.liquid veya eş değeri
featured-product.liquid veya eş değeri

Adımlar:

Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Düzenlemek istediğiniz dosyayı açın.
Dosyanın altında yeni bir satır oluşturun ve ardından aşağıdaki kodu ekleyin:

{%- if product.quantity_price_breaks_configured? -%}
  <div class="volume-pricing-note">
    <span>{{ 'products.product.volume_pricing.note' | t }}</span>
  </div>
  <volume-pricing class="parent-display" id="Volume-{{ section.id }}">
    {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
      <span class="caption-large">{{ 'products.product.volume_pricing.title' | t }}</span>
      <ul class="list-unstyled no-js-hidden">
        <li>
          <span>{{ product.selected_or_first_available_variant.quantity_rule.min }}+</span>
          {%- assign price = product.selected_or_first_available_variant.price
            | money_with_currency
          -%}
          <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}">
            {{ 'sections.quick_order_list.each' | t: money: price -}}
          </span>
        </li>
        {%- for price_break in product.selected_or_first_available_variant.quantity_price_breaks -%}
          {%- assign price_break_price = price_break.price | money_with_currency -%}
          <li class="{%- if forloop.index >= 3 -%}show-more-item hidden{%- endif -%}">
            <span>
              {{- price_break.minimum_quantity -}}
              <span aria-hidden="true">+</span></span
            >
            {%- assign price = price_break.price | money_with_currency -%}
            <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: price_break_price }}">
              {{ 'sections.quick_order_list.each' | t: money: price -}}
            </span>
          </li>
        {%- endfor -%}
      </ul>
      {%- if product.selected_or_first_available_variant.quantity_price_breaks.size >= 3 -%}
        <show-more-button>
          <button
            class="button-show-more link underlined-link no-js-hidden"
            id="Show-More-{{ section.id }}"
            type="button"
          >
            <span class="label-show-more label-text"
              ><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t }}
            </span>
          </button>
        </show-more-button>
      {%- endif -%}
    {%- endif -%}
  </volume-pricing>
{%- endif -%}

Kaydet'e tıklayın.

Javascript toplu alım bazlı fiyatlandırma kodu ekleme

Toplu alım bazlı fiyatlandırmayı göstermek için temanızdaki aşağıdaki dosyaya kod ekleyin:

theme.js

Adımlar:

Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
theme.js dosyasını açın.
Dosyanın altında yeni bir satır oluşturun ve ardından aşağıdaki kodu ekleyin:

if (!customElements.get('show-more-button')) {
  customElements.define(
    'show-more-button',
    class ShowMoreButton extends HTMLElement {
      constructor() {
        super();
        const button = this.querySelector('button');
        button.addEventListener('click', (event) => {
          this.expandShowMore(event);
          const nextElementToFocus = event.target
            .closest('.parent-display')
            .querySelector('.show-more-item');
          if (
            nextElementToFocus &&
            !nextElementToFocus.classList.contains('hidden') &&
            nextElementToFocus.querySelector('input')
          ) {
            nextElementToFocus.querySelector('input').focus();
          }
        });
      }
      expandShowMore(event) {
        const parentDisplay = event.target
          .closest('[id^="Show-More-"]')
          .closest('.parent-display');
        const parentWrap = parentDisplay.querySelector('.parent-wrap');
        this.querySelectorAll('.label-text').forEach((element) =>
          element.classList.toggle('hidden'),
        );
        parentDisplay
          .querySelectorAll('.show-more-item')
          .forEach((item) => item.classList.toggle('hidden'));
        if (!this.querySelector('.label-show-less')) {
          this.classList.add('hidden');
        }
      }
    },
  );
}

Kaydet'e tıklayın.

Yerel ayarlar ekleme

Adet kurallarını ve toplu alım bazlı fiyatlandırmanın online mağazanızın çevirisi yapılmış tüm sürümlerinde gösterilmesini sağlamak için en.default.json dosyasına aşağıdaki JSON çeviri dizelerini ekleyebilirsiniz.

Adımlar:

Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
en.default.json dosyasını açın.
Dosyanın altında yeni bir satır oluşturun ve ardından aşağıdaki kodu ekleyin:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}

Kaydet'e tıklayın.