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

Attention

Les thèmes vintage ne sont pas disponibles dans Theme Store. Les thèmes vintage 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, à l’exception des correctifs de sécurité.

Remarque

Si vous utilisez un thème gratuit de Shopify, vous pouvez contacter l’assistance Shopify pour obtenir de l’aide avec ce tutoriel. La conception de cette partie nécessite 15 minutes. En savoir plus sur la politique en matière de conception de Shopify.

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 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 :

1. Depuis votre interface administrateur Shopify, allez à Produits.

2. Cliquez sur Ajouter un produit.

3. 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 ».

1. Cliquez sur Save (Enregistrer).

Créer un menu

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

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Contenu > Menus.

2. Cliquez sur Ajouter un menu.

3. Nommez votre menu Gift wrapping, afin que l'ancre qui lui est attribuée soit gift-wrapping.

4. Ajoutez le produit « emballage cadeau » au menu :

   1. Cliquez sur Ajouter un élément de menu et saisissez un nom pour le lien menant à l'emballage cadeau en tant que produit.
   2. Dans le champ Lien, sélectionnez Produits, puis sélectionnez le produit « emballage cadeau » dans le menu déroulant.
   3. Cliquez sur Ajouter.

5. Cliquez sur Enregistrer le menu.

iPhone

1. Dans l’application Shopify, appuyez sur le bouton …
2. Appuyez sur Contenu > Menus.
3. Cliquez sur Ajouter un menu.
4. Nommez votre menu Gift wrapping, afin que l'ancre qui lui est attribuée soit gift-wrapping.

5. Ajoutez le produit « emballage cadeau » au menu :

   1. Cliquez sur Ajouter un élément de menu et saisissez un nom pour le lien menant à l'emballage cadeau en tant que produit.
   2. Dans le champ Lien, sélectionnez Produits, puis sélectionnez le produit « emballage cadeau » dans le menu déroulant.
   3. Cliquez sur Ajouter.

6. Cliquez sur Enregistrer le menu.

Android

1. Dans l’application Shopify, appuyez sur le bouton …
2. Appuyez sur Contenu > Menus.
3. Cliquez sur Ajouter un menu.
4. Nommez votre menu Gift wrapping, afin que l'ancre qui lui est attribuée soit gift-wrapping.

5. Ajoutez le produit « emballage cadeau » au menu :

   1. Cliquez sur Ajouter un élément de menu et saisissez un nom pour le lien menant à l'emballage cadeau en tant que produit.
   2. Dans le champ Lien, sélectionnez Produits, puis sélectionnez le produit « emballage cadeau » dans le menu déroulant.
   3. Cliquez sur Ajouter.

6. Cliquez sur Enregistrer le menu.

Créer un extrait de code

Bureau

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. Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
4. Nommez votre extrait gift-wrapping et cliquez sur Créer un extrait. Votre fichier d'extrait s'ouvrira dans l'éditeur de code.
5. À 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 :

iPhone

1. Dans l’application Shopify, appuyez sur le bouton …
2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
3. Appuyez sur Manage themes (Gérer les thèmes).
4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
5. Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
6. Nommez votre extrait gift-wrapping et cliquez sur Créer un extrait. Votre fichier d'extrait s'ouvrira dans l'éditeur de code.
7. À 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 :

Android

1. Dans l’application Shopify, appuyez sur le bouton …
2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
3. Appuyez sur Manage themes (Gérer les thèmes).
4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
5. Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
6. Nommez votre extrait gift-wrapping et cliquez sur Créer un extrait. Votre fichier d'extrait s'ouvrira dans l'éditeur de code.
7. À 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 :

Ajouter un tarif forfaitaire pour l’emballage cadeau

Collez le code suivant et cliquez sur Enregistrer :

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

Ajouter un montant à multiplier par le nombre de produits inclus dans la commande

Avec cette option, si la commande contient trois produits, l’emballage cadeau est facturé trois fois. Collez le code suivant et cliquez sur Enregistrer :

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

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

2. 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' %}

1. Cliquez sur Save (Enregistrer).