Laguntza
Hasi saioa

Zure dendan kantitate-arauak eta bolumenaren araberako prezioak bistaratzea

Zure dendan B2B katalogorako kantitate-arauak eta bolumenaren araberako prezioak bistara ditzakezu, zure dendako gaia azken bertsiora eguneratuz.

Zure gaia aldatu edo eguneratu nahi ez baduzu, honako kode hau gehi diezaiokezu gaiari kantitate-arauak eta bolumenaren araberako prezioak bistaratzeko.

Orri honetan

Zure gaiaren kodeari kantitate-arauak eta bolumenaren araberako prezioak gehitu aurretik kontuan hartu beharrekoak

Zure gaiaren kodeari kantitate-arauak eta bolumenaren araberako prezioak gehitu aurretik, berrikusi kontuan hartu beharreko hauek:

  • Hau tutorial aurreratua da. Gaiaren kodea irakurtzen eta editatzen moldatzen ez bazara, garatzaile batekin lan egin dezakezu edo Shopify-ko bazkide bat kontratatu.
  • Zure gaiaren fitxategietan eguneratzeak egin aurretik, ziurtatu zure gaia bikoizten duzula segurtasun-kopia bat sortzeko.
  • B2B katalogorako kantitate-arauak doako Shopify gaietan daude onartuta, 8.0.0 bertsiotik aurrera. Bolumenaren araberako prezioak 11.0.0 bertsiotik aurrera daude onartuta.

Produktuaren kantitatea saskian

Produktu-aldaera baten saskiko kantitatearen balioa produktuaren orrian edo nabarmendutako produktuaren atalean bistara daiteke. Balioa Liquid erabiliz lor daiteke.

Gehitu produktuaren saskiko kantitatearen Liquid kodea

Zure gaiko honako fitxategi hauetan kodea gehi dezakezu saskiko kantitatea onartzeko:

  • main-product.liquid edo baliokidea
  • featured-product.liquid edo baliokidea

Urratsak:

  1. Shopify-ko administratzailean, joan Sareko denda atalera.

  2. Bilatu editatu nahi duzun gaia, egin klik Horizontal menu botoian ekintzen menua irekitzeko eta, ondoren, egin klik Editatu kodea aukeran.

  3. Ireki editatu nahi duzun fitxategia.

  4. Sortu lerro berri bat fitxategiaren amaieran eta gehitu honako kode hau:

{% 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. Egin klik Gorde botoian.

Gehitu saskiko kantitatearen Javascript kodea

Aldaera baten saskiko kantitatea aldatzen denean, produktuaren orrian edo nabarmendutako produktuaren atalean bistaratutako balioa eguneratu egin behar da. Eguneratutako balioa Javascript kodea erabiliz lor daiteke.

Kodea theme.js fitxategian edo baliokidean gehi dezakezu.

Urratsak:

  1. Shopify-ko administratzailean, joan Sareko denda atalera.

  2. Bilatu editatu nahi duzun gaia, egin klik Horizontal menu botoian ekintzen menua irekitzeko eta, ondoren, egin klik Editatu kodea aukeran.

  3. Ireki theme.js fitxategia.

  4. Sortu lerro berri bat fitxategiaren amaieran eta gehitu honako kode hau:

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. Egin klik Gorde botoian.

Kantitate-arauak

Produktu-aldaera baten kantitate-arauak produktuaren orrian edo nabarmendutako produktuaren atalean bistara daitezke. Arauak Liquid erabiliz lor daitezke.

Gehitu kantitate-arauen Liquid kodea

Zure gaiko honako fitxategi hauetan kodea gehi dezakezu kantitate-arauak onartzeko:

  • main-product.liquid edo baliokidea
  • featured-product.liquid edo baliokidea

Urratsak:

  1. Shopify-ko administratzailean, joan Sareko denda atalera.

  2. Bilatu editatu nahi duzun gaia, egin klik Horizontal menu botoian ekintzen menua irekitzeko eta, ondoren, egin klik Editatu kodea aukeran.

  3. Ireki editatu nahi duzun fitxategia.

  4. Sortu lerro berri bat fitxategiaren amaieran eta, ondoren, gehitu honako kode hau:

{% 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. Egin klik Gorde botoian.

Gehitu kantitate-arauen Javascript kodea

Produktu baten aldaera bakoitzak bere kantitate-arauen multzoa izan dezake. Beste aldaera bat hautatu ondoren, produktuaren orrian edo nabarmendutako produktuaren atalean bistaratutako kantitate-arauak eguneratu egin behar dira. Eguneratutako balioa Javascript kodea erabiliz lor daiteke.

  • theme.js edo baliokidea
  • en.default.json

Urratsak:

  1. Shopify-ko administratzailean, joan Sareko denda atalera.

  2. Bilatu editatu nahi duzun gaia, egin klik Horizontal menu botoian ekintzen menua irekitzeko eta, ondoren, egin klik Editatu kodea aukeran.

  3. Ireki theme.js fitxategia.

  4. Sortu lerro berri bat fitxategiaren amaieran eta, ondoren, gehitu honako kode hau:

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. Egin klik Gorde botoian.

Bolumenaren araberako prezioak

Gehitu bolumenaren araberako prezioen Liquid kodea

Zure gaiko honako fitxategi hauetan kodea gehi dezakezu bolumenaren araberako prezioak bistaratzeko:

  • main-product.liquid edo baliokidea
  • featured-product.liquid edo baliokidea

Urratsak:

  1. Shopify-ko administratzailean, joan Sareko denda atalera.

  2. Bilatu editatu nahi duzun gaia, egin klik Horizontal menu botoian ekintzen menua irekitzeko eta, ondoren, egin klik Editatu kodea aukeran.

  3. Ireki editatu nahi duzun fitxategia.

  4. Sortu lerro berri bat fitxategiaren amaieran eta, ondoren, gehitu honako kode hau:

{%- 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. Egin klik Gorde botoian.

Gehitu bolumenaren araberako prezioen Javascript kodea

Zure gaiko honako fitxategi honetan kodea gehi dezakezu bolumenaren araberako prezioak bistaratzeko:

  • theme.js

Urratsak:

  1. Shopify-ko administratzailean, joan Sareko denda atalera.

  2. Bilatu editatu nahi duzun gaia, egin klik Horizontal menu botoian ekintzen menua irekitzeko eta, ondoren, egin klik Editatu kodea aukeran.

  3. Ireki theme.js fitxategia.

  4. Sortu lerro berri bat fitxategiaren amaieran eta, ondoren, gehitu honako kode hau:

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. Egin klik Gorde botoian.

Gehitu eskualdeko ezarpenak

Kantitate-arauak eta bolumenaren araberako prezioak zure sareko dendaren itzulitako bertsio guztietan bistaratzen direla ziurtatzeko, eskualdeko ezarpenak gehi ditzakezu honako JSON itzulpen-kate hauek gehituta zure en.default.json fitxategian.

Urratsak:

  1. Shopify-ko administratzailean, joan Sareko denda atalera.

  2. Bilatu editatu nahi duzun gaia, egin klik Horizontal menu botoian ekintzen menua irekitzeko eta, ondoren, egin klik Editatu kodea aukeran.

  3. Ireki en.default.json fitxategia.

  4. Sortu lerro berri bat fitxategiaren amaieran eta, ondoren, gehitu honako kode hau:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Egin klik Gorde botoian.