Tuto : Comment ajouter un formulaire de commande à votre boutique Shopify

vignette
Voulez-vous créer un bon de commande sur votre boutique Shopify ?

Vous listerez les produits qui appartiennent à une collection à l’intérieur d’un tableau, un produit par rangée avec une boîte de quantité. Vos clients peuvent ajouter au panier tous les produits de ce tableau qui n’ont pas leur boîte de quantité mise à zéro en un seul clic sur un seul bouton.

L’ajout d’un bon de commande à votre site Web vous permet de recueillir des commandes et aide à augmenter vos ventes.

Dans cet article, nous vous montrerons comment créer un bon de commande simple dans Shopify.

Vous pouvez ajouter votre bon de commande à une page régulière, telle que /pages/order-page, ou à une page de collection, telle que /collections/whosale.

Ajouter un bon de commande à une page régulière
À partir de votre administrateur Shopify, allez dans Boutique en ligne > Thèmes.


Trouvez le thème que vous voulez modifier, puis cliquez sur Actions > Modifier le code.
Dans la partie gauche, sous Modèles, cliquez sur Ajouter un nouveau modèle. Créez un nouveau modèle de  » page  » appelé  » order-form  » :

Remplacez le contenu de votre nouveau modèle de page.order.form.liquid par le contenu suivant

{% paginate collection.products by 100 %}

 
<form action=« /cart » method=« post »>
{% if collection.products_count > 0 %}
<div>
<h1>{% if template contains ‘page’ %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
<input type=« submit » value=« Add to the cart » />
</div>
{% else %}
<h1>{% if template contains ‘page’ %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
{% endif %}
 
{% if template contains ‘page’ and page.content.size > 0 %}
<div class=« rte »>
{{ page.content }}
</div>
{% elsif collection.description.size > 0 %}
<div class=« rte »>
{{ collection.description }}
</div>
{% endif %}
 
{% if collection.products_count > 0 %}
 
<table>
<tbody>
{% for product in collection.products %}
{% if product.available %}
{% for variant in product.variants %}
{% if variant.available %}
<tr class=« {% cycle ‘pure-table-odd’,  » %} »>
<td>
<a href=« {{ variant.url | collection }} »>
<img src=« {{ variant.image | default: product.featured_image | img_url: ‘small’ }} » alt=« {{ variant.title | escape }} » />
</a>
</td>
<td>
<a href=« {{ variant.url | collection }} »>
{{ product.title }}{% unless variant.title contains ‘Default’ %} {{ variant.title }}{% endunless %}{% unless variant.sku == blank %} {{ variant.sku }}{% endunless %}
</a>
</td>
<td>
{{ variant.price | money }}
</td>
<td style=« text-align:right; »>
<input name=« updates[{{ variant.id }}] » onfocus=« this.select() » class=« quantity field » min=« 0 » {% unless variant.inventory_management == blank or variant.inventory_policy == ‘continue’ %} max=« {{ variant.inventory_quantity }} » {% endunless %} type=« text » value=« 0 » tabindex=« 1 » />
</td>
</tr>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</tbody>
</table>
<div>
<input type=« submit » value=« Add to the cart » />
</div>
{% else %}
<p>There are no products in this view.</p>
{% endif %}
 
</form>
 
{% endpaginate %}
 
{% if collection.products_count > 0 %}
<script>
jQuery(function($) {
$(‘table .quantity:first’).focus();
$(‘[max]’).change(function() {
var max = parseInt($(this).attr(‘max’), 10);
var value = parseInt($(this).val(), 10) || 0;
if (value > max) {
alert(‘We only have ‘ + max + ‘ of this item in stock’);
$(this).val(max);
}
});
});
</script>
{% endif %}
 
Choisissez la collection à utiliser dans votre bon de commande. Une fois que vous avez décidé quelle collection utiliser, prenez note de sa poignée, et tout en haut de votre modèle, ajoutez cette ligne de code :

Remplacez your-collection-handle-here avec votre liste de collection.

Alors économisez.

Créez une nouvelle page sous Pages.

Après avoir créé votre page, faites défiler jusqu’à la section Template, et sélectionnez « page.order-form » dans le menu déroulant. Sauvegardez ensuite votre page.

C’est fini pour vous. Rendez-vous sur votre page à l’avant de votre magasin pour tester les choses.
Ajouter un bon de commande à une page de collecte
À partir de votre administrateur Shopify, allez dans Boutique en ligne > Thèmes.
Trouvez le thème que vous voulez modifier, puis cliquez sur Actions > Modifier le code.
Dans la partie gauche, sous Modèles, cliquez sur Ajouter un nouveau modèle. Créez un nouveau modèle pour le  » recouvrement  » appelé  » order-form  » :

 

Remplacez le contenu de votre nouveau modèle collection.order.form.liquid par le contenu suivant

Choisissez la collection à utiliser dans votre bon de commande.
Une fois que vous avez choisi la collection à utiliser, naviguez jusqu’à cette collection dans l’admin de votre magasin, puis faites défiler jusqu’à la section Template, et sélectionnez « collection.order-form » dans le menu déroulant. Sauvegardez votre collection.

C’est fini pour vous. Rendez-vous sur votre page de collection sur la devanture de votre magasin pour tester les choses.

Poster un Commentaire

Laisser un commentaire

  S’abonner  
Notifier de