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

Attention

Les thèmes vintage ne sont pas disponibles dans la Boutique des thèmes. Ces thèmes ne disposent pas des fonctionnalités incluses dans les thèmes Online Store 2.0 de Shopify, et les thèmes vintage gratuits de Shopify ne reçoivent pas d’autres mises à jour que des correctifs de sécurité.

Remarque

Si vous utilisez un thème gratuit de Shopify, vous pourrez peut-être contacter l’assistance de Shopify pour obtenir de l’aide par rapport à ce tutoriel. La conception de cette partie nécessite 15 minutes. Pour plus d’informations, voir Assistance par rapport aux thèmes.

Remarque

Cette personnalisation est faite pour les thèmes vintage de Shopify, et ne s’applique pas aux thèmes Online Store 2.0.

• Découvrez la version de l'architecture de votre thème
• Explorez les personnalisations de thème Online Store 2.0

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.

Conseil

Le thème Supply et le thème Venture de Shopify comprennent déjà un paramètre Afficher le message de quantité restante. Vous pouvez activer ce paramètre depuis l’éditeur de thème.

Debut

É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 Actions > 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).

Modifier product-template.liquid ou featured-product.liquid

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>

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `{{ current_variant.inventory_quantity }}` in your `<p>` tags.

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 = '';
}

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.

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).

Brooklyn / Simple / Minimal

Étapes pour Brooklyn, Simple et 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 Actions > 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).

Modifier product-template.liquid ou featured-product.liquid

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

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>

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `{{current_variant.inventory_quantity }}` in your `<p>` tags.

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

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.

1. Cliquez sur Save (Enregistrer).

Boundless

É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 Actions > 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).

Modifier product-template.liquid ou featured-product.liquid

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

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).

Narrative

É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 Actions > 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).

Modifier product-template.liquid ou featured-product.liquid

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

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

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.

1. Cliquez sur Save (Enregistrer).