Aide
Se connecter

Ajouter un sélecteur de date de livraison à votre panier

Vous pouvez inclure un calendrier sur votre page de panier, qui permet aux clients de spécifier une date de livraison pour leur commande.

Sélecteur de date de livraison

Sur cette page

Inclure jQuery dans votre fichier theme.liquid

Pour que cette personnalisation fonctionne, certains thèmes exigent qu’une balise de script pour jQuery soit ajoutée au fichier de mise en page theme.liquid. Si vous utilisez un thème Shopify gratuit, vous devrez peut-être suivre l’étape suivante :

  1. Dans le répertoire Mise en page, cliquez sur theme.liquid.

  2. Repérez la balise de fermeture </head> dans le code. Sur une nouvelle ligne au-dessus de la balise de fermeture </head>, collez le code suivant :

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Cliquez sur Enregistrer.

Créer un extrait de date de livraison

Pour créer un extrait pour votre sélecteur de date de livraison :

Ordinateur de bureau

  1. Depuis votre 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 d’actions, puis sur Modifier le code.

  3. Dans le répertoire Extraits, cliquez sur Ajouter un nouvel extrait :

  4. Créez l’extrait :

  5. Nommez votre extrait delivery-date.

  6. Cliquez sur Créer un extrait. Le nouveau fichier d’extrait s’ouvrira dans l’éditeur de code.

  7. Dans votre nouvel extrait delivery-date.liquid, collez le code suivant :

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>


<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
  </p>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. Cliquez sur Enregistrer.
Mobile

  1. Depuis l’application Shopify, appuyez sur l’icône Menu.

  2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

  3. Appuyez sur Gérer les thèmes.

  4. Recherchez le thème que vous souhaitez modifier, appuyez sur le bouton … pour ouvrir le menu d’actions, puis sur Modifier le code.

  5. Dans le répertoire Extraits, appuyez sur Ajouter un nouvel extrait :

  6. Créez l’extrait :

  7. Nommez votre extrait delivery-date.

  8. Appuyez sur Créer un extrait. Le nouveau fichier d’extrait s’ouvrira dans l’éditeur de code.

  9. Dans votre nouvel extrait delivery-date.liquid, collez le code suivant :

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>


<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
  </p>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. Appuyez sur Enregistrer.

Inclure l’extrait dans votre page de panier

Pour inclure l’extrait de date de livraison dans votre page de panier :

  1. Dans le répertoire Sections, cliquez sur main-cart-items.liquid.

  2. Repérez la balise de fermeture </form> dans le code. Sur une nouvelle ligne au-dessus de la balise de fermeture </form>, collez le code suivant :

{% render 'delivery-date' %}
  1. Cliquez sur Enregistrer.

Vous disposez maintenant d’un champ de saisie de la date de livraison sur votre page de panier. Lorsque vous cliquez à l’intérieur du champ de texte, un calendrier s’affiche :

Sélecteur de date de livraison

Le sélecteur de date utilisé dans cette personnalisation est un widget de la bibliothèque jQuery UI.