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ğerifeatured-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ğerifeatured-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>
-
{{- '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>
-
{{- '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ğerien.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ğerifeatured-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.