Ajouter une option d’emballage cadeau à la page de votre panier

Cette page a été imprimée le Apr 01, 2023. Pour la dernière version, allez à https://help.shopify.com/fr/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-gift-wrap-option.

Vous pouvez offrir un service d’emballage cadeau à vos clients à la page du panier de votre boutique en ligne. Pour ceux qui souhaitent que leur commande soit emballée, vous pouvez facturer un tarif forfaitaire ou un certain montant par produit.

Avertissement : cette personnalisation ne convient pas aux styles de paniers coulissants ou pop-up, et ne fonctionne que pour une page de panier (à l'URL your-store.com/cart). Si vous utilisez un panier coulissant ou pop-up, vous devrez configurer votre style de panier sur Page dans l'éditeur de thème. Ajoutez un produit au panier dans l'aperçu du thème, puis cliquez sur l'onglet Page du panier dans l'éditeur de thème afin de voir vos paramètres de panier.

Créer un emballage cadeau en tant que produit

Tout d’abord, vous devez créer votre option d’emballage cadeau en tant que produit :

Depuis votre interface administrateur Shopify, allez à Produits.
Cliquez sur Ajouter un produit.
Créez un produit « emballage cadeau » comme vous le feriez pour n’importe quel autre produit :

Vous pouvez utiliser votre description de produit pour décrire les matériaux utilisés pour l'emballage cadeau des articles.
Donnez à votre produit « emballage cadeau » le prix que vous voulez facturer pour le service. Si vous souhaitez qu'il soit gratuit, configurez le prix sur 0.
Vous pouvez importer une image du produit pour montrer à vos clients à quoi ressemblera leur commande une fois emballée.
Vérifiez que votre produit « emballage cadeau » inclut le stock, ou ajustez les paramètres de manière à ce que Shopify ne procède pas au suivi des stocks. Si votre boutique possède plusieurs emplacements, décochez la case Suivre la quantité afin d'empêcher Shopify de suivre les stocks du produit « emballage cadeau ».

Cliquez sur Save (Enregistrer).

Créer un menu

Ensuite, créez un menu pointant vers votre produit « emballage cadeau » :

Depuis votre interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Navigation.

Depuis l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Navigation.

Depuis l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Navigation.

Cliquez sur Ajouter un menu.
Nommez votre menu Gift wrapping, afin que l'ancre qui lui est attribuée soit gift-wrapping.
Ajoutez le produit « emballage cadeau » au menu :
Cliquez sur Enregistrer le menu.

Créer un extrait de code

Pour créer un extrait de code pour l’option d’emballage cadeau :

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 Actions, puis cliquez sur Modifier le code.

Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Dans l'application Shopify, appuyez sur Boutique.
Dans la section Canaux de vente, appuyez sur Boutique en ligne.
Appuyez sur Gérer les thèmes.
Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
Nommez votre extrait gift-wrapping et cliquez sur Créer un extrait. Votre fichier d'extrait s'ouvrira dans l'éditeur de code.
À cette étape, vous devez coller du code dans votre nouveau fichier d'extrait gift-wrapping. Le code à coller dépend de la façon dont vous souhaitez facturer le service d’emballage cadeau à vos clients :

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }}
      please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we have more than one gift-wrap item in the cart.
  {% elsif gift_wraps_in_cart > 1 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

### Add a charge that is multiplied by the number of products in the order

With this option, if there are three products in the order, then the gift wrap charge will be multiplied by three. Paste the following code and **Save**:

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }} per
      item, please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %} {% assign items_in_cart = cart.item_count | minus:
gift_wraps_in_cart %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: {{ items_in_cart }} }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we don't have the right amount of gift-wrap items in the cart.
  {% elsif gift_wraps_in_cart > 0 and gift_wraps_in_cart != items_in_cart %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

Inclure l'extrait dans votre modèle de panier

Pour inclure l’extrait gift-wrapping (emballage cadeau) à votre modèle de panier :

Dans le répertoire Sections, cliquez sur cart-template.liquid. Si votre thème ne possède pas de cart-template.liquid, cliquez sur cart.liquid dans le répertoire Modèles.
Recherchez la balise de fermeture </form> dans le code. Sur une nouvelle ligne juste au-dessus de la balise de fermeture </form>, collez le code suivant :

{% render 'gift-wrapping' %}

Cliquez sur Save (Enregistrer).

Ajouter une option d’emballage cadeau à la page de votre panier

Créer un emballage cadeau en tant que produit

Créer un menu

Créer un extrait de code

Inclure l'extrait dans votre modèle de panier

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