Pagalba
Prisijungti

Kiekio taisyklių ir kiekio kainodaros rodymas Jūsų parduotuvėje

Savo parduotuvėje galite rodyti B2B katalogo kiekio taisykles ir kiekio kainodarą, atnaujinę parduotuvės temą į naujausią versiją.

Jei nenorite keisti ar atnaujinti savo temos, galite į temą įtraukti toliau nurodytą kodą, kad būtų rodomos kiekio taisyklės ir kiekio kainodara.

Šiame puslapyje

Svarstymai dėl kiekio taisyklių ir kiekio kainodaros įtraukimo į temos kodą

Prieš įtraukdami kiekio taisykles ir kiekio kainodarą į savo temos kodą, peržiūrėkite šiuos svarstymus:

  • Tai yra pažengusiems skirta mokomoji medžiaga. Jei nesijaučiate užtikrintai skaitydami ir redaguodami temos kodą, galite dirbti su programuotoju arba pasamdyti „Shopify“ partnerį.
  • Prieš atlikdami temos failų atnaujinimus, būtinai dubliuokite savo temą, kad sukurtumėte atsarginę kopiją.
  • B2B katalogo kiekio taisyklės palaikomos nemokamose „Shopify“ temose, 8.0.0 arba naujesnėje versijoje. Kiekio kainodara palaikoma 11.0.0 arba naujesnėje versijoje.

Produkto krepšelio kiekis

Produkto varianto krepšelio kiekio vertė gali būti rodoma produkto puslapyje arba specialaus produkto skiltyje. Vertę galima gauti naudojant „Liquid“.

Pridėti „Liquid“ produkto krepšelio kiekio kodą

Galite įtraukti kodą į šiuos savo temos failus, kad palaikytumėte krepšelio kiekį:

  • main-product.liquid arba lygiavertį failą
  • featured-product.liquid arba lygiavertį failą

Žingsniai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Internetinė parduotuvė > Temos.

  2. Raskite temą, kurią norite redaguoti, spustelėkite mygtuką ..., kad atidarytumėte veiksmų meniu, ir tada spustelėkite Redaguoti kodą.

  3. Atidarykite failą, kurį norite redaguoti.

  4. Sukurkite naują eilutę failo apačioje ir pridėkite šį kodą:

{% 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. Spustelėkite Išsaugoti.

Pridėti „Javascript“ krepšelio kiekio kodą

Kai pasikeičia varianto krepšelio kiekis, produkto puslapyje arba specialaus produkto skiltyje rodoma vertė turi būti atnaujinta. Atnaujintą vertę galima gauti naudojant „Javascript“ kodą.

Galite pridėti kodą į theme.js failą arba lygiavertį.

Žingsniai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Internetinė parduotuvė > Temos.

  2. Raskite temą, kurią norite redaguoti, spustelėkite mygtuką ..., kad atidarytumėte veiksmų meniu, ir tada spustelėkite Redaguoti kodą.

  3. Atidarykite theme.js failą.

  4. Sukurkite naują eilutę failo apačioje ir pridėkite šį kodą:

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. Spustelėkite Išsaugoti.

Kiekio taisyklės

Produkto varianto kiekio taisyklės gali būti rodomos produkto puslapyje arba specialaus produkto skiltyje. Taisykles galima gauti naudojant „Liquid“.

Pridėti „Liquid“ kiekio taisyklių kodą

Galite įtraukti kodą į šiuos savo temos failus, kad palaikytumėte kiekio taisykles:

  • main-product.liquid arba lygiavertį failą
  • featured-product.liquid arba lygiavertį failą

Žingsniai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Internetinė parduotuvė > Temos.

  2. Raskite temą, kurią norite redaguoti, spustelėkite mygtuką ..., kad atidarytumėte veiksmų meniu, ir tada spustelėkite Redaguoti kodą.

  3. Atidarykite failą, kurį norite redaguoti.

  4. Sukurkite naują eilutę failo apačioje, o tada pridėkite šį kodą:

{% 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. Spustelėkite Išsaugoti.

Pridėti „Javascript“ kiekio taisyklių kodą

Kiekvienas produkto variantas gali turėti savo kiekio taisyklių rinkinį. Pasirinkus kitą variantą, produkto puslapyje arba specialaus produkto skiltyje rodomos kiekio taisyklės turi būti atnaujintos. Atnaujintą vertę galima gauti naudojant „Javascript“ kodą.

  • theme.js arba lygiavertį failą
  • en.default.json

Žingsniai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Internetinė parduotuvė > Temos.

  2. Raskite temą, kurią norite redaguoti, spustelėkite mygtuką ..., kad atidarytumėte veiksmų meniu, ir tada spustelėkite Redaguoti kodą.

  3. Atidarykite theme.js failą.

  4. Sukurkite naują eilutę failo apačioje, o tada pridėkite šį kodą:

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. Spustelėkite Išsaugoti.

Kiekio kainodara

Pridėti „Liquid“ kiekio kainodaros kodą

Galite įtraukti kodą į šiuos savo temos failus, kad būtų rodoma kiekio kainodara:

  • main-product.liquid arba lygiavertį failą
  • featured-product.liquid arba lygiavertį failą

Žingsniai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Internetinė parduotuvė > Temos.

  2. Raskite temą, kurią norite redaguoti, spustelėkite mygtuką ..., kad atidarytumėte veiksmų meniu, ir tada spustelėkite Redaguoti kodą.

  3. Atidarykite failą, kurį norite redaguoti.

  4. Sukurkite naują eilutę failo apačioje, o tada pridėkite šį kodą:

{%- 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. Spustelėkite Išsaugoti.

Pridėti „Javascript“ kiekio kainodaros kodą

Galite įtraukti kodą į šį savo temos failą, kad būtų rodoma kiekio kainodara:

  • theme.js

Žingsniai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Internetinė parduotuvė > Temos.

  2. Raskite temą, kurią norite redaguoti, spustelėkite mygtuką ..., kad atidarytumėte veiksmų meniu, ir tada spustelėkite Redaguoti kodą.

  3. Atidarykite theme.js failą.

  4. Sukurkite naują eilutę failo apačioje, o tada pridėkite šį kodą:

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. Spustelėkite Išsaugoti.

Pridėti lokales

Norėdami užtikrinti, kad kiekio taisyklės ir kiekio kainodara būtų rodomos visose išverstose Jūsų internetinės parduotuvės versijose, galite pridėti lokales, įtraukdami šias JSON vertimo eilutes į savo en.default.json failą.

Žingsniai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Internetinė parduotuvė > Temos.

  2. Raskite temą, kurią norite redaguoti, spustelėkite mygtuką ..., kad atidarytumėte veiksmų meniu, ir tada spustelėkite Redaguoti kodą.

  3. Atidarykite en.default.json failą.

  4. Sukurkite naują eilutę failo apačioje, o tada pridėkite šį kodą:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Spustelėkite Išsaugoti.