Affichage des règles de quantité et de la tarification basée sur la quantité sur votre boutique

Vous pouvez afficher les règles de quantité et la tarification basée sur la quantité de votre catalogue B2B sur votre boutique en mettant à jour le thème de votre boutique vers la dernière version.

Si vous ne souhaitez pas modifier ou mettre à jour votre thème, vous pouvez ajouter le code suivant à votre thème pour afficher les règles de quantité et la tarification basée sur la quantité.

Sur cette page

Points à prendre en compte pour l’ajout des règles de quantité et de la tarification basée sur la quantité au code de votre thème

Avant d’ajouter les règles de quantité et la tarification basée sur la quantité au code de votre thème, examinez les points suivants :

Il s’agit d’un tutoriel avancé. Si vous n’êtes pas à l’aise avec la lecture et la modification du code de thème, vous pouvez collaborer avec un développeur ou engager un Partenaire Shopify.
Avant d’apporter des modifications aux fichiers de votre thème, veillez à dupliquer votre thème pour créer une copie de sauvegarde.
Les règles de quantité pour les catalogues B2B sont prises en charge sur les thèmes Shopify gratuits de version 8.0.0 ou ultérieure. La tarification basée sur la quantité est prise en charge à partir de la version 11.0.0.

Quantité du produit dans le panier

La valeur de la quantité dans le panier d’une variante de produit peut être affichée sur la page de produit ou dans la section de produit vedette. La valeur peut être extraite à l’aide de Liquid.

Ajouter le code Liquid pour la quantité du produit dans le panier

Vous pouvez ajouter du code aux fichiers suivants de votre thème pour prendre en charge la quantité dans le panier :

main-product.liquid ou équivalent
featured-product.liquid ou équivalent

Étapes :

Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton ... pour ouvrir le menu d’actions, puis sur Modifier le code.
Ouvrez le fichier que vous souhaitez modifier.
Créez une nouvelle ligne à la fin du fichier, et ajoutez le code suivant :

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

Cliquez sur Enregistrer.

Ajouter le code Javascript pour la quantité dans le panier

Lorsque la quantité dans le panier d’une variante change, la valeur affichée sur la page de produit ou dans la section de produit vedette doit être mise à jour. La valeur mise à jour peut être extraite à l’aide de code Javascript.

Vous pouvez ajouter du code au fichier theme.js ou à un fichier équivalent.

Étapes :

Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton ... pour ouvrir le menu d’actions, puis sur Modifier le code.
Ouvrez le fichier theme.js.
Créez une nouvelle ligne à la fin du fichier, et ajoutez le code suivant :

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

Cliquez sur Enregistrer.

Règles de quantité

Les règles de quantité d’une variante de produit peuvent être affichées sur la page de produit ou dans la section de produit vedette. Les règles peuvent être extraites à l’aide de Liquid.

Ajouter le code Liquid pour les règles de quantité

Vous pouvez ajouter du code aux fichiers suivants de votre thème pour prendre en charge les règles de quantité :

main-product.liquid ou équivalent
featured-product.liquid ou équivalent

Étapes :

Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton ... pour ouvrir le menu d’actions, puis sur Modifier le code.
Ouvrez le fichier que vous souhaitez modifier.
Créez une nouvelle ligne à la fin du fichier, puis ajoutez le code suivant :

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

Cliquez sur Enregistrer.

Ajouter le code Javascript pour les règles de quantité

Chaque variante d’un produit peut avoir son propre ensemble de règles de quantité. Une fois qu’une autre variante est sélectionnée, les règles de quantité affichées sur une page de produit ou dans une section de produit vedette doivent être mises à jour. La valeur mise à jour peut être extraite à l’aide de code Javascript.

theme.js ou équivalent
en.default.json

Étapes :

Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton ... pour ouvrir le menu d’actions, puis sur Modifier le code.
Ouvrez le fichier theme.js.
Créez une nouvelle ligne à la fin du fichier, puis ajoutez le code suivant :

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

Cliquez sur Enregistrer.

Tarification basée sur la quantité

Ajouter le code Liquid pour la tarification basée sur la quantité

Vous pouvez ajouter du code aux fichiers suivants de votre thème pour afficher la tarification basée sur la quantité :

main-product.liquid ou équivalent
featured-product.liquid ou équivalent

Étapes :

Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton ... pour ouvrir le menu d’actions, puis sur Modifier le code.
Ouvrez le fichier que vous souhaitez modifier.
Créez une nouvelle ligne à la fin du fichier, puis ajoutez le code suivant :

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

Cliquez sur Enregistrer.

Ajouter le code Javascript pour la tarification basée sur la quantité

Vous pouvez ajouter du code au fichier suivant de votre thème pour afficher la tarification basée sur la quantité :

theme.js

Étapes :

Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton ... pour ouvrir le menu d’actions, puis sur Modifier le code.
Ouvrez le fichier theme.js.
Créez une nouvelle ligne à la fin du fichier, puis ajoutez le code suivant :

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

Cliquez sur Enregistrer.

Ajouter des paramètres régionaux

Pour vous assurer que les règles de quantité et la tarification basée sur la quantité s’affichent sur toutes les versions traduites de votre boutique en ligne, vous pouvez ajouter des paramètres régionaux en ajoutant les chaînes de traduction JSON suivantes à votre fichier en.default.json.

Étapes :

Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton ... pour ouvrir le menu d’actions, puis sur Modifier le code.
Ouvrez le fichier en.default.json.
Créez une nouvelle ligne à la fin du fichier, puis ajoutez le code suivant :

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

Cliquez sur Enregistrer.