Ajouter un sélecteur de date de livraison à 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 par rapport à 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 inclure un calendrier à votre page de panier pour permettre aux clients de préciser une date de livraison pour leur commande.

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.

Inclure jQuery à votre theme.liquid

Pour que cette personnalisation fonctionne, certains thèmes nécessitent l’ajout d’une balise de script pour jQuery au fichier de mise en page theme.liquid. Si vous utilisez Boundless, Debut 17.2.0 ou une version plus récente, Express, Narrative ou Venture, vous devriez peut-être suivre les étapes ci-après :

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

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

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

1. Cliquez sur Save (Enregistrer).

Créer un extrait de date de livraison

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 Extraits, cliquez sur Ajouter un nouvel extrait :

4. Créez l'extrait :

   1. Nommez votre extrait delivery-date.
   2. Cliquez sur Créer un extrait. Le nouveau fichier d’extrait s’ouvre dans l’éditeur de code.

5. 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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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 week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

1. Cliquez sur Save (Enregistrer).

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 Extraits, cliquez sur Ajouter un nouvel extrait :

6. Créez l'extrait :

   1. Nommez votre extrait delivery-date.
   2. Cliquez sur Créer un extrait. Le nouveau fichier d’extrait s’ouvre 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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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 week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

1. Cliquez sur Save (Enregistrer).

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 Extraits, cliquez sur Ajouter un nouvel extrait :

6. Créez l'extrait :

   1. Nommez votre extrait delivery-date.
   2. Cliquez sur Créer un extrait. Le nouveau fichier d’extrait s’ouvre 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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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 week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

1. Cliquez sur Save (Enregistrer).

Insérer l’extrait dans la page de votre panier

Pour insérer l’extrait de date de livraison dans la page de votre panier :

1. Dans le répertoire Sections, cliquez sur cart-template.liquid. Si votre thème ne possède pas ce fichier, 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 'delivery-date' %}

1. Cliquez sur Save (Enregistrer).

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

Le sélecteur de date utilisé dans cette personnalisation est un widget de la bibliothèque jQuery pour interface utilisateur. Cet article de blog explique comment désactiver des dates spécifiques dans le calendrier du sélecteur de date.