Afficher le stock restant d’une variante sur les pages de produit

Cette page a été imprimée le Sep 14, 2024. Pour la dernière version, allez à https://help.shopify.com/fr/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-remaining-quantity.

Vous pouvez ajouter un message sur la page de produit ou dans la section des produits vedettes pour indiquer le nombre d’articles qu’il vous reste lorsque le stock d’une variante de produit est bas. Pour que ce message s’affiche, vous devez activer le suivi des stocks du produit en question.

Les étapes de cette personnalisation varient selon votre thème. Cliquez sur le bouton de votre thème et suivez les instructions.

Étapes pour Debut

Modifier theme.liquid

  1. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur le bouton … > Modifier le code.
  3. Dans le répertoire Mise en page, ouvrez theme.liquid.
  4. Recherchez la balise de fermeture </head> dans le code. Sur une nouvelle ligne juste au-dessus de la balise de fermeture </head>, collez le code suivant : 
<script>
  var variantStock = {};
</script>
  1. Cliquez sur Save (Enregistrer).

  1. Dans le répertoire Sections, ouvrez product-template.liquid ou featured-product.liquid :

    • Ouvrez product-template.liquid pour ajouter cette fonctionnalité aux pages de produit.
    • Ouvrez featured-product.liquid pour ajouter cette fonctionnalité à la section des produits vedettes sur la page d’accueil.

  2. Recherchez {% form 'product'. Au-dessus de cette balise, ajoutez le code suivant :

<div class="inventoryWrapper">
  {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure {{ current_variant.inventory_quantity }} dans vos balises <p>.

  1. Au bas du fichier, ajoutez le code suivant : 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Cliquez sur Save (Enregistrer).

Modifier theme.js.liquid ou theme.js

Les modifications que vous devez apporter à ces fichiers dépendent de la version de Debut que vous utilisez.

Debut 17.8.0 et versions antérieures

  1. Ouvrez theme.js.liquid ou theme.js.
  2. Recherchez theme.Product = (function(). Sous this.selectors = {, ajoutez le code suivant : 
inventoryHtml: '.inventoryWrapper',
  1. Dans le même fichier, recherchez _updateAddToCart: function(evt) {. Ajoutez le code suivant directement dessous : 
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
  1. Recherchez if (variant.available) {. Avant l'énoncé } else {, ajoutez le code suivant : 
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
      inventoryWrapper.innerHTML = inventoryHtml;
    } else {
      inventoryWrapper.innerHTML = '';
}

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure ${variantStock[variant.id]} dans vos balises <p>.

  1. Cliquez sur Save (Enregistrer).

Debut 17.9.0 et versions ultérieures

  1. Ouvrez theme.js.liquid ou theme.js.
  2. Recherchez theme.Product = (function(). Sous this.selectors = {, ajoutez le code suivant : 
inventoryHtml: '.inventoryWrapper',
  1. Dans le même fichier, recherchez _setProductState: function(evt) {. Ajoutez le code suivant directement dessous : 
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
  1. Dans la même fonction, recherchez if (!variant) {. Après l'accolade de fermeture }, ajoutez le code suivant : 
else {
  if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
    const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
    inventoryWrapper.innerHTML = inventoryHtml;
  } else {
    inventoryWrapper.innerHTML = '';
  }
}

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure ${variantStock[variant.id]} dans vos balises <p>.

  1. Cliquez sur Save (Enregistrer).

Étapes pour Brooklyn

Modifier theme.liquid

  1. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur le bouton … > Modifier le code.
  3. Dans le répertoire Mise en page, ouvrez theme.liquid.
  4. Recherchez la balise de fermeture </head> dans le code. Sur une nouvelle ligne juste au-dessus de la balise de fermeture </head>, collez le code suivant : 
<script>
  var variantStock = {};
</script>
  1. Cliquez sur Save (Enregistrer).

  1. Dans le répertoire Sections, ouvrez product-template.liquid ou featured-product.liquid :

    • Ouvrez product-template.liquid pour ajouter cette fonctionnalité aux pages de produit.
    • Ouvrez featured-product.liquid pour ajouter cette fonctionnalité à la section des produits vedettes sur la page d’accueil.

  2. Recherchez {% form 'product'. Au-dessus de cette balise, ajoutez le code suivant :

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure {{current_variant.inventory_quantity }} dans vos balises <p>.

  1. Au bas du fichier, ajoutez le code suivant : 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Cliquez sur Save (Enregistrer).

Modifier theme.js.liquid ou theme.js

  1. Ouvrez theme.js.liquid ou theme.js.
  2. Recherchez theme.Product = (function(). Sous this.selectors = {, ajoutez le code suivant : 
inventoryHtml: '.inventoryWrapper',
  1. Dans le même fichier, recherchez if (variant.available) {. Avant l'énoncé } else {, ajoutez le code suivant : 
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure ${variantStock[variant.id]} dans vos balises <p>.

  1. Cliquez sur Save (Enregistrer).

Étapes pour Simple

Modifier theme.liquid

  1. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur le bouton … > Modifier le code.
  3. Dans le répertoire Mise en page, ouvrez theme.liquid.
  4. Recherchez la balise de fermeture </head> dans le code. Sur une nouvelle ligne juste au-dessus de la balise de fermeture </head>, collez le code suivant : 
<script>
  var variantStock = {};
</script>
  1. Cliquez sur Save (Enregistrer).

  1. Dans le répertoire Sections, ouvrez product-template.liquid ou featured-product.liquid :

    • Ouvrez product-template.liquid pour ajouter cette fonctionnalité aux pages de produit.
    • Ouvrez featured-product.liquid pour ajouter cette fonctionnalité à la section des produits vedettes sur la page d’accueil.

  2. Recherchez {% form 'product'. Au-dessus de cette balise, ajoutez le code suivant :

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure {{current_variant.inventory_quantity }} dans vos balises <p>.

  1. Au bas du fichier, ajoutez le code suivant : 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Cliquez sur Save (Enregistrer).

Modifier theme.js.liquid ou theme.js

  1. Ouvrez theme.js.liquid ou theme.js.
  2. Recherchez theme.Product = (function(). Sous this.selectors = {, ajoutez le code suivant : 
inventoryHtml: '.inventoryWrapper',
  1. Dans le même fichier, recherchez if (variant.available) {. Avant l'énoncé } else {, ajoutez le code suivant : 
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure ${variantStock[variant.id]} dans vos balises <p>.

  1. Cliquez sur Save (Enregistrer).

Étapes pour Minimal

Modifier theme.liquid

  1. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur le bouton … > Modifier le code.
  3. Dans le répertoire Mise en page, ouvrez theme.liquid.
  4. Recherchez la balise de fermeture </head> dans le code. Sur une nouvelle ligne juste au-dessus de la balise de fermeture </head>, collez le code suivant : 
<script>
  var variantStock = {};
</script>
  1. Cliquez sur Save (Enregistrer).

  1. Dans le répertoire Sections, ouvrez product-template.liquid ou featured-product.liquid :

    • Ouvrez product-template.liquid pour ajouter cette fonctionnalité aux pages de produit.
    • Ouvrez featured-product.liquid pour ajouter cette fonctionnalité à la section des produits vedettes sur la page d’accueil.

  2. Recherchez {% form 'product'. Au-dessus de cette balise, ajoutez le code suivant :

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure {{current_variant.inventory_quantity }} dans vos balises <p>.

  1. Au bas du fichier, ajoutez le code suivant : 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Cliquez sur Save (Enregistrer).

Modifier theme.js.liquid ou theme.js

  1. Ouvrez theme.js.liquid ou theme.js.
  2. Recherchez theme.Product = (function(). Sous this.selectors = {, ajoutez le code suivant : 
inventoryHtml: '.inventoryWrapper',
  1. Dans le même fichier, recherchez if (variant.available) {. Avant l'énoncé } else {, ajoutez le code suivant : 
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure ${variantStock[variant.id]} dans vos balises <p>.

  1. Cliquez sur Save (Enregistrer).

Étapes pour Boundless

Modifier theme.liquid

  1. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur le bouton … > Modifier le code.
  3. Dans le répertoire Mise en page, ouvrez theme.liquid.
  4. Recherchez la balise de fermeture </head> dans le code. Sur une nouvelle ligne juste au-dessus de la balise de fermeture </head>, collez le code suivant : 
<script>
  var variantStock = {};
    </script>
  1. Cliquez sur Save (Enregistrer).

  1. Dans le répertoire Sections, ouvrez product-template.liquid ou featured-product.liquid :

    • Ouvrez product-template.liquid pour ajouter cette fonctionnalité aux pages de produit.
    • Ouvrez featured-product.liquid pour ajouter cette fonctionnalité à la section des produits vedettes sur la page d’accueil.

  2. Recherchez {% form 'product'. Au-dessus de cette balise, ajoutez le code suivant :

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure {{current_variant.inventory_quantity }} dans vos balises <p>.

  1. Au bas du fichier, ajoutez le code suivant : 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Cliquez sur Save (Enregistrer).

Modifier theme.js.liquid ou theme.js

  1. Ouvrez le fichier ‘theme.js.liquid’ *ou *‘theme.js’.
  2. Recherchez theme.Product = (function(). Sous var selectors = {, ajoutez le code suivant : 
inventoryHtml: '.inventoryWrapper',
  1. Dans le même fichier, recherchez $(selectors.SKU, this.$container).html(variant.sku);. Ajoutez le code suivant directement dessous : 
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure ${variantStock[variant.id]} dans vos balises <p>.

  1. Cliquez sur Save (Enregistrer).

Étapes pour Narrative

Modifier theme.liquid

  1. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur le bouton … > Modifier le code.
  3. Dans le répertoire Mise en page, ouvrez theme.liquid.
  4. Recherchez la balise de fermeture </head> dans le code. Sur une nouvelle ligne juste au-dessus de la balise de fermeture </head>, collez le code suivant : 
<script>
      var variantStock = {};
    </script>
  1. Cliquez sur Save (Enregistrer).

  1. Dans le répertoire Sections, ouvrez product-template.liquid ou featured-product.liquid :

    • Ouvrez product-template.liquid pour ajouter cette fonctionnalité aux pages de produit.
    • Ouvrez featured-product.liquid pour ajouter cette fonctionnalité à la section des produits vedettes sur la page d’accueil.

  2. Recherchez {% include 'product-form' %}. Au-dessus de cette balise, ajoutez le code suivant :

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
      {% endif %}
</div>

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure {{current_variant.inventory_quantity }} dans vos balises <p>.

  1. Au bas du fichier, ajoutez le code suivant : 
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. Cliquez sur Save (Enregistrer).

Modifier custom.js

  1. Ouvrez custom.js.
  2. Au bas du fichier, ajoutez le code suivant : 
var sections = window.theme.sections;
    var inventorySelectorHtml = '.inventoryWrapper';
    var productExtension = {
      init: function() {
          this.on('variant_change_successful', this._updateInventory.bind(this));
          this.on('variant_change_undefined', this._removeInventory.bind(this));
      },
      _removeInventory: function() {
    $(inventorySelectorHtml, this.container).html('');
      },
      _updateInventory: function(event, instance, product, variant) {
    if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      $(inventorySelectorHtml, this.container).html(`<p>Stock: ${variantStock[variant.id]}</p>`);
    } else {
      $(inventorySelectorHtml, this.container).html('');
    }
  }
};
    sections.extend('product-template', productExtension);
    sections.extend('featured-product', productExtension);

Le code ci-dessus génère la sortie suivante : Stock: x. Vous pouvez modifier le libellé en ajustant le contenu des balises <p>. N’oubliez pas d'inclure ${variantStock[variant.id]} dans vos balises <p>.

  1. Cliquez sur Save (Enregistrer).

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement