Εμφάνιση κανόνων ποσότητας και τιμολόγησης βάσει όγκου στο κατάστημά σας

Μπορείτε να εμφανίσετε κανόνες ποσότητας και τιμολόγηση βάσει όγκου για τον κατάλογο B2B στο κατάστημά σας, ενημερώνοντας το θέμα του καταστήματός σας στην πιο πρόσφατη έκδοση.

Αν δεν θέλετε να αλλάξετε ή να ενημερώσετε το θέμα σας, τότε μπορείτε να προσθέσετε τον ακόλουθο κώδικα στο θέμα σας για να εμφανίσετε κανόνες ποσότητας και τιμολόγηση βάσει όγκου.

Σε αυτή τη σελίδα

Σημαντικές επισημάνσεις για την προσθήκη κανόνων ποσότητας και τιμολόγησης βάσει όγκου στον κώδικα του θέματός σας

Πριν προσθέσετε κανόνες ποσότητας και τιμολόγηση βάσει όγκου στον κώδικα του θέματός σας, εξετάστε τις ακόλουθες σημαντικές επισημάνσεις:

Αυτός είναι ένας οδηγός εκμάθησης για προχωρημένους. Αν δεν αισθάνεστε άνετα με την ανάγνωση και την επεξεργασία του κώδικα του θέματος, τότε μπορείτε να συνεργαστείτε με έναν προγραμματιστή ή να προσλάβετε έναν Shopify Partner.
Πριν κάνετε ενημερώσεις στα αρχεία του θέματός σας, βεβαιωθείτε ότι θα δημιουργήσετε ένα αντίγραφο του θέματός σας για να έχετε ένα αντίγραφο ασφαλείας.
Οι κανόνες ποσότητας για τον κατάλογο B2B υποστηρίζονται σε δωρεάν θέματα του Shopify, έκδοσης 8.0.0 ή μεταγενέστερης. Η τιμολόγηση βάσει όγκου υποστηρίζεται στην έκδοση 11.0.0 ή σε μεταγενέστερη.

Ποσότητα προϊόντος στο καλάθι

Η τιμή της ποσότητας μιας παραλλαγής προϊόντος στο καλάθι μπορεί να εμφανιστεί στη σελίδα του προϊόντος ή στην ενότητα επιλεγμένων προϊόντων. Η τιμή μπορεί να ανακτηθεί χρησιμοποιώντας το Liquid.

Προσθήκη κώδικα Liquid για την ποσότητα προϊόντος στο καλάθι

Μπορείτε να προσθέσετε κώδικα στα ακόλουθα αρχεία του θέματός σας για να υποστηρίξετε την ποσότητα στο καλάθι:

main-product.liquid ή σε αντίστοιχο αρχείο
featured-product.liquid ή σε αντίστοιχο αρχείο

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στην ενότητα Διαδικτυακό κατάστημα > Θέματα.
Βρείτε το θέμα που θέλετε να επεξεργαστείτε, κάντε κλικ στο κουμπί ... για να ανοίξετε το μενού ενεργειών και, στη συνέχεια, κάντε κλικ στην επιλογή Επεξεργασία κώδικα.
Ανοίξτε το αρχείο που θέλετε να επεξεργαστείτε.
Δημιουργήστε μια νέα γραμμή στο κάτω μέρος του αρχείου και προσθέστε τον ακόλουθο κώδικα:

{% 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>

Κάντε κλικ στην επιλογή Αποθήκευση.

Προσθήκη κώδικα Javascript για την ποσότητα στο καλάθι

Όταν αλλάζει η ποσότητα μιας παραλλαγής στο καλάθι, η τιμή που εμφανίζεται στη σελίδα του προϊόντος ή στην ενότητα επιλεγμένων προϊόντων πρέπει να ενημερωθεί. Η ενημερωμένη τιμή μπορεί να ανακτηθεί χρησιμοποιώντας κώδικα Javascript.

Μπορείτε να προσθέσετε κώδικα στο αρχείο theme.js ή σε αντίστοιχο αρχείο.

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στην ενότητα Διαδικτυακό κατάστημα > Θέματα.
Βρείτε το θέμα που θέλετε να επεξεργαστείτε, κάντε κλικ στο κουμπί ... για να ανοίξετε το μενού ενεργειών και, στη συνέχεια, κάντε κλικ στην επιλογή Επεξεργασία κώδικα.
Ανοίξτε το αρχείο theme.js.
Δημιουργήστε μια νέα γραμμή στο κάτω μέρος του αρχείου και προσθέστε τον ακόλουθο κώδικα:

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;
  });

Κάντε κλικ στην επιλογή Αποθήκευση.

Κανόνες ποσότητας

Οι κανόνες ποσότητας μιας παραλλαγής προϊόντος μπορούν να εμφανιστούν στη σελίδα του προϊόντος ή στην ενότητα επιλεγμένων προϊόντων. Οι κανόνες μπορούν να ανακτηθούν χρησιμοποιώντας το Liquid.

Προσθήκη κώδικα Liquid για τους κανόνες ποσότητας

Μπορείτε να προσθέσετε κώδικα στα ακόλουθα αρχεία του θέματός σας για να υποστηρίξετε τους κανόνες ποσότητας:

main-product.liquid ή σε αντίστοιχο αρχείο
featured-product.liquid ή σε αντίστοιχο αρχείο

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στην ενότητα Διαδικτυακό κατάστημα > Θέματα.
Βρείτε το θέμα που θέλετε να επεξεργαστείτε, κάντε κλικ στο κουμπί ... για να ανοίξετε το μενού ενεργειών και, στη συνέχεια, κάντε κλικ στην επιλογή Επεξεργασία κώδικα.
Ανοίξτε το αρχείο που θέλετε να επεξεργαστείτε.
Δημιουργήστε μια νέα γραμμή στο κάτω μέρος του αρχείου και, στη συνέχεια, προσθέστε τον ακόλουθο κώδικα:

{% 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>

Κάντε κλικ στην επιλογή Αποθήκευση.

Προσθήκη κώδικα Javascript για τους κανόνες ποσότητας

Κάθε παραλλαγή ενός προϊόντος μπορεί να έχει το δικό της σύνολο κανόνων ποσότητας. Αφού επιλεγεί μια διαφορετική παραλλαγή, οι κανόνες ποσότητας που εμφανίζονται σε μια σελίδα προϊόντος ή στην ενότητα επιλεγμένων προϊόντων πρέπει να ενημερωθούν. Η ενημερωμένη τιμή μπορεί να ανακτηθεί χρησιμοποιώντας κώδικα Javascript.

theme.js ή σε αντίστοιχο αρχείο
en.default.json

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στην ενότητα Διαδικτυακό κατάστημα > Θέματα.
Βρείτε το θέμα που θέλετε να επεξεργαστείτε, κάντε κλικ στο κουμπί ... για να ανοίξετε το μενού ενεργειών και, στη συνέχεια, κάντε κλικ στην επιλογή Επεξεργασία κώδικα.
Ανοίξτε το αρχείο theme.js.
Δημιουργήστε μια νέα γραμμή στο κάτω μέρος του αρχείου και, στη συνέχεια, προσθέστε τον ακόλουθο κώδικα:

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;
  });

Κάντε κλικ στην επιλογή Αποθήκευση.

Τιμολόγηση βάσει όγκου

Προσθήκη κώδικα Liquid για την τιμολόγηση βάσει όγκου

Μπορείτε να προσθέσετε κώδικα στα ακόλουθα αρχεία του θέματός σας για να εμφανίσετε την τιμολόγηση βάσει όγκου:

main-product.liquid ή σε αντίστοιχο αρχείο
featured-product.liquid ή σε αντίστοιχο αρχείο

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στην ενότητα Διαδικτυακό κατάστημα > Θέματα.
Βρείτε το θέμα που θέλετε να επεξεργαστείτε, κάντε κλικ στο κουμπί ... για να ανοίξετε το μενού ενεργειών και, στη συνέχεια, κάντε κλικ στην επιλογή Επεξεργασία κώδικα.
Ανοίξτε το αρχείο που θέλετε να επεξεργαστείτε.
Δημιουργήστε μια νέα γραμμή στο κάτω μέρος του αρχείου και, στη συνέχεια, προσθέστε τον ακόλουθο κώδικα:

{%- 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 -%}

Κάντε κλικ στην επιλογή Αποθήκευση.

Προσθήκη κώδικα Javascript για την τιμολόγηση βάσει όγκου

Μπορείτε να προσθέσετε κώδικα στο ακόλουθο αρχείο του θέματός σας για να εμφανίσετε την τιμολόγηση βάσει όγκου:

theme.js

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στην ενότητα Διαδικτυακό κατάστημα > Θέματα.
Βρείτε το θέμα που θέλετε να επεξεργαστείτε, κάντε κλικ στο κουμπί ... για να ανοίξετε το μενού ενεργειών και, στη συνέχεια, κάντε κλικ στην επιλογή Επεξεργασία κώδικα.
Ανοίξτε το αρχείο theme.js.
Δημιουργήστε μια νέα γραμμή στο κάτω μέρος του αρχείου και, στη συνέχεια, προσθέστε τον ακόλουθο κώδικα:

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');
        }
      }
    },
  );
}

Κάντε κλικ στην επιλογή Αποθήκευση.

Προσθήκη τοπικών ρυθμίσεων

Για να διασφαλίσετε ότι οι κανόνες ποσότητας και η τιμολόγηση βάσει όγκου εμφανίζονται σε όλες τις μεταφρασμένες εκδόσεις του διαδικτυακού σας καταστήματος, μπορείτε να προσθέσετε τοπικές ρυθμίσεις προσθέτοντας τις ακόλουθες συμβολοσειρές μετάφρασης JSON στο αρχείο σας en.default.json.

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στην ενότητα Διαδικτυακό κατάστημα > Θέματα.
Βρείτε το θέμα που θέλετε να επεξεργαστείτε, κάντε κλικ στο κουμπί ... για να ανοίξετε το μενού ενεργειών και, στη συνέχεια, κάντε κλικ στην επιλογή Επεξεργασία κώδικα.
Ανοίξτε το αρχείο en.default.json.
Δημιουργήστε μια νέα γραμμή στο κάτω μέρος του αρχείου και, στη συνέχεια, προσθέστε τον ακόλουθο κώδικα:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}

Κάντε κλικ στην επιλογή Αποθήκευση.