Affichez les règles de quantité et la tarification basée sur le volume dans votre boutique

Cette page a été imprimée le Apr 28, 2024. Pour la dernière version, allez à https://help.shopify.com/fr/manual/b2b/theme-code/quantity-pricing.

Les règles de quantité pour le catalogue B2B sont prises en charge sur les thèmes gratuits de Shopify, la version 8.0.0 ou une version ultérieure, et la tarification basée sur le volume est prise en charge sur la version 11.0.0 ou ultérieure. Si vous souhaitez afficher les règles de quantité et la tarification basée sur le volume dans votre boutique, vous pouvez mettre à jour le thème de votre boutique pour passer à 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 afin d’afficher les règles de quantité et la tarification basée sur le volume. Avant de mettre à jour vos fichiers de thème, assurez-vous de dupliquer votre thème pour créer une copie de sauvegarde.

Sur cette page

Quantité de panier du produit

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

Ajouter un code Liquid de quantité de panier du produit

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

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

Étapes :

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  3. Ouvrez le fichier que vous souhaitez modifier.
  4. Créez une nouvelle ligne au bas 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>
  1. Cliquez sur Enregistrer.

Ajouter un code de quantité de panier Javascript

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

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

Étapes :

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  3. Ouvrez le fichier theme.js.
  4. Créez une nouvelle ligne au bas 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;
  });
  1. 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 en vedette. Les règles peuvent être récupérées à l’aide de Liquid.

Ajouter du code de règles de quantité Liquid

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

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

Étapes :

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  3. Ouvrez le fichier que vous souhaitez modifier.
  4. Créez une nouvelle ligne au bas 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>
  1. Cliquez sur Enregistrer.

Ajouter du code de règles de quantité JavaScript

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

  • theme.js ou équivalent
  • en.default.json

Étapes :

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  3. Ouvrez le fichier theme.js.
  4. Créez une nouvelle ligne au bas 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;
  });
  1. Cliquez sur Enregistrer.

Prix de volume

Ajouter un code de tarification basée sur le volume Liquid

Vous pouvez ajouter du code aux fichiers suivants dans votre thème pour afficher une tarification au volume :

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

Étapes :

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  3. Ouvrez le fichier que vous souhaitez modifier.
  4. Créez une nouvelle ligne au bas 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 -%}
  1. Cliquez sur Enregistrer.

Ajouter un code de tarification basée sur le volume Javascript

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

  • theme.js

Étapes :

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  3. Ouvrez le fichier theme.js.
  4. Créez une nouvelle ligne au bas 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');
        }
      }
    },
  );
}
  1. Cliquez sur Enregistrer.

Ajouter des paramètres régionaux

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

Étapes :

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  3. Ouvrez le fichier en.default.json.
  4. Créez une nouvelle ligne au bas 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"
    }
  }
}
  1. Cliquez sur Enregistrer.

Prêt(e) à développer votre entreprise grâce Shopify Plus ?

Entrer en contact