Mağazanızda adet kurallarını ve toplu alım bazlı fiyatlandırmayı gösterme

Bu sayfanın yazdırılma zamanı: Apr 27, 2024. Geçerli sürüm için https://help.shopify.com/tr/manual/b2b/theme-code/quantity-pricing adresini ziyaret edin.

B2B kataloğu için adet kuralları, ücretsiz Shopify temaların 8.0.0 veya sonraki sürümlerinde, toplu alım bazlı fiyatlandırma ise 11.0.0 veya sonraki sürümlerinde desteklenmektedir. Mağazanızda adet kurallarını ve toplu alım bazlı fiyatlandırmayı göstermek istiyorsanız mağazanızın temasını en son sürüme güncelleyebilirsiniz.

Temanızı değiştirmek veya güncellemek istemiyorsanız adet kurallarını ve toplu alım bazlı fiyatlandırmayı göstermek için temanıza aşağıdaki kodu ekleyebilirsiniz. Tema dosyalarınızda güncelleme yapmadan önce yedekleme oluşturmak için temanızı çoğaltın.

Bu sayfada

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

  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 ve ardından Kodu düzenle'ye tıklayın.
  3. Düzenlemek istediğiniz dosyayı açın.
  4. 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>
  1. Kayıtyap ' a 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:

  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 ve ardından Kodu düzenle'ye tıklayın.
  3. theme.js dosyasını açın.
  4. 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;
  });
  1. Kayıtyap ' a 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:

  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 ve ardından Kodu düzenle'ye tıklayın.
  3. Düzenlemek istediğiniz dosyayı açın.
  4. 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>
  1. Kayıtyap ' a 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:

  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 ve ardından Kodu düzenle'ye tıklayın.
  3. theme.js dosyasını açın.
  4. 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;
  });
  1. Kayıtyap ' a 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:

  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 ve ardından Kodu düzenle'ye tıklayın.
  3. Düzenlemek istediğiniz dosyayı açın.
  4. 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 -%}
  1. Kayıtyap ' a 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:

  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 ve ardından Kodu düzenle'ye tıklayın.
  3. theme.js dosyasını açın.
  4. 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');
        }
      }
    },
  );
}
  1. Kayıtyap ' a 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:

  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 ve ardından Kodu düzenle'ye tıklayın.
  3. en.default.json dosyasını açın.
  4. 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"
    }
  }
}
  1. Kayıtyap ' a tıklayın.

Shopify ile satış yapmaya hazır mısınız?

Ücretsiz olarak dene