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

Mağazanızın temasını en son sürüme güncelleyerek B2B kataloğunuza yönelik adet kurallarını ve hacim bazlı fiyatlandırmayı mağazanızda görüntüleyebilirsiniz.

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

Bu sayfada

Adet kurallarını ve hacim bazlı fiyatlandırmayı tema kodunuza eklemeyle ilgili dikkat edilmesi gerekenler

Adet kurallarını ve hacim bazlı fiyatlandırmayı tema kodunuza eklemeden önce aşağıdaki hususları gözden geçirin:

Bu, ileri düzey bir eğitimdir. Tema kodunu okuma ve düzenleme konusunda rahat değilseniz bir geliştiriciyle çalışabilir veya bir Shopify İş Ortağı ile anlaşabilirsiniz.
Tema dosyalarınızda güncelleme yapmadan önce, yedek bir kopya oluşturmak için temanızı çoğalttığınızdan emin olun.
B2B kataloğuna yönelik adet kuralları, 8.0.0 veya sonraki sürümlerdeki ücretsiz Shopify temalarında desteklenir. Hacim bazlı fiyatlandırma ise 11.0.0 veya sonraki sürümlerde desteklenir.

Sepetteki ürün adedi

Bir ürün varyasyonunun sepetteki adet 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 adedi kodunu ekleme

Sepetteki adedi 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öneticinizden Online Mağaza > Temalar bölümüne gidin.
Düzenlemek istediğiniz temayı bulun, ... düğmesine tıklayarak işlemler menüsünü açın ve ardından Kodu düzenle'ye tıklayın.
Düzenlemek istediğiniz dosyayı açın.
Dosyanın en 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 kodunu ekleme

Bir varyasyonun sepetteki adedi değiştiğinde, ürün sayfasında veya öne çıkan ürün bölümünde görüntülenen değerin güncellenmesi gerekir. Güncellenen değer, Javascript kodu kullanılarak alınabilir.

theme.js dosyasına veya eşdeğerine kod ekleyebilirsiniz.

Adımlar:

Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.
Düzenlemek istediğiniz temayı bulun, ... düğmesine tıklayarak işlemler menüsünü açın ve ardından Kodu düzenle'ye tıklayın.
theme.js dosyasını açın.
Dosyanın en 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ı

Bir ü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ı kodunu ekleme

Adet kurallarını 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öneticinizden Online Mağaza > Temalar bölümüne gidin.
Düzenlemek istediğiniz temayı bulun, ... düğmesine tıklayarak işlemler menüsünü açın ve ardından Kodu düzenle'ye tıklayın.
Düzenlemek istediğiniz dosyayı açın.
Dosyanın en 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 varyasyonunun kendi adet kuralları olabilir. Farklı bir varyasyon seçildikten sonra, ürün sayfasında veya öne çıkan ürün bölümünde görüntülenen adet kurallarının güncellenmesi gerekir. Güncellenen değer, Javascript kodu kullanılarak alınabilir.

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

Adımlar:

Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.
Düzenlemek istediğiniz temayı bulun, ... düğmesine tıklayarak işlemler menüsünü açın ve ardından Kodu düzenle'ye tıklayın.
theme.js dosyasını açın.
Dosyanın en 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.

Hacim bazlı fiyatlandırma

Liquid hacim bazlı fiyatlandırma kodunu ekleme

Hacim bazlı fiyatlandırmayı görüntülemek 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öneticinizden Online Mağaza > Temalar bölümüne gidin.
Düzenlemek istediğiniz temayı bulun, ... düğmesine tıklayarak işlemler menüsünü açın ve ardından Kodu düzenle'ye tıklayın.
Düzenlemek istediğiniz dosyayı açın.
Dosyanın en 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 hacim bazlı fiyatlandırma kodunu ekleme

Hacim bazlı fiyatlandırmayı görüntülemek için temanızdaki aşağıdaki dosyaya kod ekleyebilirsiniz:

theme.js

Adımlar:

Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.
Düzenlemek istediğiniz temayı bulun, ... düğmesine tıklayarak işlemler menüsünü açın ve ardından Kodu düzenle'ye tıklayın.
theme.js dosyasını açın.
Dosyanın en 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 ayar ekleme

Adet kurallarının ve hacim bazlı fiyatlandırmanın, online mağazanızın çevrilmiş tüm sürümlerinde görüntülenmesini sağlamak için en.default.json dosyanıza aşağıdaki JSON çeviri dizelerini ekleyerek yerel ayarlar ekleyebilirsiniz.

Adımlar:

Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.
Düzenlemek istediğiniz temayı bulun, ... düğmesine tıklayarak işlemler menüsünü açın ve ardından Kodu düzenle'ye tıklayın.
en.default.json dosyasını açın.
Dosyanın en 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.