Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Shopify
Code

Travailler avec les produits de Shopify: Un panier d'achat Ajax

by
Difficulty:BeginnerLength:ShortLanguages:

French (Français) translation by New Lune (you can also view the original English article)

Rendre votre magasin Shopify plus intuitif est un excellent moyen de convertir plus de ventes et d'obtenir un nombre d'articles plus important par check-out. Combiné à l'affichage de vos produits dans une liste simple, nous pouvons rendre l'expérience de l'ajout au panier aussi simple que d'un simple clic, sans avoir besoin de naviguer vers la page de la liste des produits.

Cette modification peut fonctionner dans une grille ou affichage de la liste et n'a vraiment besoin que de quelques changements pour le faire fonctionner, plus il est facilement extensible. Alors commençons et maximisons la monétisation de votre magasin!

La liste des collections terminées

What you will be creating - the collection view with add to cart ajax buttons

Voici un exemple de ce que vous pouvez créer avec cette modification. Nous avons un magasin qui vend des pièces commémoratives, et pour la facilité d'utilisation de l'utilisateur peut sélectionner la quantité de chaque pièce et ajouter au panier sans quitter la page.

Ceci est réalisé via un appel AJAX écrit en JavaScript qui envoie une demande à l'API Shopify. Essentiellement, le navigateur est capable de soumettre le formulaire via une demande de fond et de garder l'utilisateur sur la page.

Modification du thème

Pour faire ceci, nous avons besoin de modifier le thème Shopify, alors connectez-vous à votre admin et allez dans Online Store, puis la section Themes (ou pour un raccourci, appuyez sur G W T).

Click on the to Edit HTMLCSS

Maintenant, cliquez sur le bouton ... sur votre thème et choisissez Edit HTML/CSS. À l'intérieur de cette section, regardez à gauche et cliquez sur le dossier snippets, puis ajoutez un nouvel extrait.

Create your snippet ajaxify-cart

Appelez votre extrait ajaxify-cart et cliquez sur Create snippet.

Ouvrez maintenant ce fichier, sélectionnez tout et copiez-collez le contenu dans l'extrait ajaxify-cart.liquid qui vient d'être créé.

Adding Ajaxify Cart

Assurez-vous d'enregistrer vos modifications avant de quitter. Si vous souhaitez modifier le texte du panier ajaxify, vous pouvez regarder à changer les chaînes dans ce fichier comme addToCartBtnLabel. Pour plus d'informations sur la configuration, lisez le fichier readme du panier ajaxify.

Maintenant, dans votre dossier layouts, cliquez sur le fichier theme.liquid. Trouvez la balise end </body> dans l'éditeur et assurez-vous d'ajouter les éléments suivants n'importe où avant:

Cela inclura l'extrait ajaxify-cart que vous venez d'ajouter à toutes les pages afin que le code soit disponible lorsque nous l'appelons à l'étape suivante.

Example of how to add the ajaxify-cart tag

Vous pouvez inclure l'ajaxify-cart et d'autres extraits dans la balise <body> </body> comme indiqué ci-dessus.

Assurez-vous d'avoir enregistré votre fichier theme.liquid avant de quitter la fenêtre.

Ajout de quantité

Maintenant que vous avez la base pour le panier ajax mis en place, nous pouvons ajouter quelques modifications supplémentaires pour utiliser plus de fonctionnalités de l'API Shopify.

Ajoutons un champ de quantité au formulaire en modifiant le thème de la liste de produits. Regardez vos fichiers d'extraits de thème pour trouver le formulaire pour ajouter au panier; vous pouvez le modifier comme suit:

Maintenant enregistrez le fichier et jetez un coup d'oeil dans le navigateur, et vous aurez également un champ de quantité sur votre formulaire.

Testez-le

Visitez votre boutique et allez sur n'importe quel produit, et si tout est allé comme au plan, le bouton ajouter au panier avec le champ de quantité va maintenant ajouter au panier sans rafraîchir la page.

Adding a product to the cart without refreshing the page

Si cela ne fonctionne pas, vérifiez les étapes précédentes et consultez la console d'erreur des outils de développement Web de votre navigateur pour voir s'il y a des erreurs signalées.

Afficher vos produits dans une liste

Pour afficher votre collection dans une liste, nous aurons besoin de CSS pour que cela se produise. Modifiez le fichier css de votre thème et ajoutez ce qui suit pour y parvenir.

Note: N'oubliez pas que certains thèmes peuvent différer du thème que nous avons utilisé, qui est le thème du Pacifique, mais adapter ce savoir à votre thème, sachez que le principe de base est d'ajouter un float: left; combiné avec des réglages de largeur.

Pour réagir au travail sur mobile et sur ordinateur de bureau, vous devrez utiliser des requêtes média telles que les suivantes pour effacer le flotteur:

Fabrication d'un affichage d'ajout au panier uniquement pour certains critères

Disons, par exemple, que vous voulez juste afficher les boutons à l'intérieur des collections, et non sur votre page d'accueil. Cela peut être fait facilement en ajoutant un conditionnel à votre fichier de modèle liquide.

Ouvrez votre modèle et ajoutez le conditionnel suivant où vous souhaitez que le bouton ajouter au panier s'affiche, par exemple à l'intérieur de la disposition de la liste de produits où nous avons ajouté la quantité. Ajoutez le conditionnel {% if collection.title %} comme dans le code suivant:

Vous pouvez spécifier n'importe quel critère à la place du {% if collection.title %} si vous préférez vérifier une autre valeur, par exemple si le produit est en stock ou quelle catégorie ou quelles étiquettes il a appliqués.

Finalisation de l'affichage

Vous pouvez modifier le CSS de votre thème pour modifier l'affichage du panier ajax et le tordre au contenu de votre cœur. Certaines classes utiles à modifier sont .cart-count et #cart-count a:first.

Pour spécifier la valeur ajoutée au panier, vous pouvez également modifier le lien pour afficher le panier avec les classes #gocart p a, #cart et .checkout em.

Pour modifier le nombre total d'éléments, consultez la classe .item-count.

En outre, à la fin de l'extrait ajaxify-cart.liquid sont les couleurs suivantes que vous pouvez modifier.

Modifiez l'alignement, les marges et le rembourrage en fonction de votre thème et obtenez le meilleur affichage possible pour vos utilisateurs finaux.

Mobile de support adapté

N'oubliez pas de vérifier les résolutions mobiles pour voir comment fonctionne le panier ajax. Vous devrez peut-être ajouter quelques requêtes média pour qu'il s'affiche correctement sur tous les écrans.

Comme mentionné précédemment, vous pouvez utiliser les conditionals de médias suivants pour vérifier cela:

Conclusion

Vous avez maintenant un composant de panier ajaxifié sur votre boutique, ce qui signifie que le flux de travail d'achat est un peu simplifié pour l'utilisateur final. Espérons que cela se traduira par plus de conversions. En combinaison avec l'affichage de vos produits dans une liste avec le paramètre de quantité, la probabilité d'un ordre plus important a augmenté quelque peu.

Pour les sites offrant des consommables souvent achetés et ceux qui tentent d'offrir un large éventail d'achats multiples en un seul contrôle, le panier ajaxify fonctionne très bien.

À l'avenir, vous pouvez ajouter d'autres éléments ajax à votre site. Si tel est le cas, votre premier point de référence sera l'API Shopify—et, en mettant de côté la source fournie pour le panier (ajaxify-cart.liquid) pour examiner de plus près comment les appels sont effectués.

Une compréhension de base de JavaScript et AJAX serait nécessaire pour ce faire, mais ne vous inquiétez pas si vous êtes un nouvel arrivant—il est vraiment très élémentaire en effet.

Tout le traitement d'un appel AJAX peut être trouvé dans la section $.ajax du fichier, et plus d'informations sur la façon dont cela fonctionne peuvent être trouvés sur le site Web jQuery.

J'espère que vous apprécierez de modifier vos magasins et d'augmenter vos ventes avec ces nouveaux concepts!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.