Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Pressé? Accédez au didacticiel technique ou à la démonstration en direct.

Les événements de 2020 ont totalement accéléré l’omniprésence du e-commerce dans nos vies.

Cela change la façon dont nous achetons les biens et services que nous utilisons à un rythme qui aurait été difficile à imaginer il n’y a pas si longtemps.

Qu’il s’agisse d’acheter des objets publicitaires auprès de nos entreprises de technologie préférées ou de remplir une ordonnance, le Web a besoin d’outils pour offrir une expérience dynamique où les consommateurs peuvent facilement trouver ce qu’ils recherchent et effectuer tout aussi facilement l’achat.

Dans cet article, j’explorerai comment l’un de ces outils, React, peut aider les développeurs à créer ces expériences de commerce électronique de haute qualité.

je ne vais pas simplement raconter vous que React peut fournir une UX dynamique, je vais également spectacle vous en créant une boutique Next.js dans un didacticiel pas à pas :

  • Créer une nouvelle application avec Next.js

  • Ajouter des produits à l’application React

  • Intégration d’un panier

  • Définir des produits dans Snipcart

  • Configuration d’un récapitulatif de panier et d’un aperçu du panier

Nous voulons tous construire des projets e-commerce qui se démarquent. Voyons comment React peut vous aider.

Construire une expérience e-commerce dynamique

Le cœur d’une expérience d’achat est de pouvoir fournir des informations dynamiques aux clients de votre site. Cela inclut à la fois les informations sur le produit de ce que vous essayez de vendre ainsi que la façon dont cela se rapporte au client réel.

Les bits dynamiques des produits en e-commerce

Lorsque vous traitez avec des produits, en particulier des biens physiques, vous pouvez avoir une quantité limitée de produits à vendre réellement. Cela signifie que votre expérience d’achat doit être en mesure de maintenir à jour le nombre d’articles restants « en stock ».

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

En associant cela à la complexité de plusieurs personnes qui vérifient simultanément, il est essentiel que vous puissiez suivre cette quantité en temps réel, sinon vous pourriez vous retrouver dans des situations où vous finirez par survendre un produit.

Le prix peut également être un facteur largement dynamique. Certains peuvent le simplifier, où le prix d’un article sera toujours un montant fixe, mais vous pouvez trouver un cas d’utilisation où vous souhaitez modifier ce prix ou proposer une promotion pour pousser vos produits.

La page du produit doit refléter le coût que vous facturez finalement au client. Bien qu’un prix mis en cache puisse être involontaire, vous pourriez rapidement perdre la confiance d’un client s’il voit un prix bas, pour finir par se voir facturer un montant différent.

Offrir une expérience de commerce électronique personnalisée aux clients

Il existe différents niveaux de personnalisation que nous pouvons offrir aux clients qui visitent notre site Web. Afficher des recommandations de produits personnalisées est un excellent moyen d’aider ces visiteurs à découvrir des produits dont ils ne connaissent peut-être pas l’existence.

Mais à un niveau de base, le cœur de toute expérience d’achat qui ne se limite pas à un seul flux de commande de produit est de pouvoir ajouter des articles à un panier et de permettre aux clients de gérer ce panier.

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Le panier peut inclure le nombre de produits que quelqu’un souhaite acheter, les produits qu’il souhaite acheter, le coût total de tous ces articles et les frais d’expédition en fonction de l’adresse fournie.

Ces détails, ainsi que les informations sur le produit, se prêtent tous à la nécessité de fournir une expérience très dynamique pour aider vos clients tout au long de leur parcours de paiement.

E-commerce dans le monde de React

Les piles technologiques dans le monde du commerce électronique sont plus traditionnellement soutenues par des serveurs. Compte tenu de la nature hautement dynamique, les développeurs doivent s’assurer que les informations personnalisées sont fournies avec précision au client à chaque chargement de page.

Expériences dynamiques dans React

Dans le monde de React, les solutions typiques consistent à servir une application statique à un navigateur et à l’hydrater avec des requêtes côté client pour offrir une expérience dynamique.

Sans le savoir du visiteur, l’application sera pendant une fraction de seconde non personnalisée ou même vide. Une fois le JavaScript et les demandes de serveur suivantes chargées, la page sera mise à jour avec toutes les informations dynamiques nécessaires.

Semblable à une solution traditionnelle « serveur », le rendu côté serveur (SSR) est également une option avec React, mais vous perdez les avantages de servir une application statique directement depuis le stockage avec un CDN devant elle.

Création de sites Web de commerce électronique rapides et évolutifs

Fournir une application Web résiliente devrait être un élément essentiel de toute solution, mais c’est encore plus essentiel dans le commerce électronique.

Assurez-vous que votre application Web est disponible et fonctionnelle avec une devise réelle. Ce sont de vrais dollars perdus en temps d’arrêt si quelqu’un ne peut pas parcourir vos offres de produits ou acheter ces produits.

C’est ce qui a donné naissance à Jamstack, qui apporte des fonctionnalités dynamiques ainsi que les avantages d’une application statique.

Bénéficier du e-commerce sur la Jamstack

Nous pouvons fournir ce premier octet au navigateur de manière statique à partir d’un CDN, ce qui nous offre d’énormes avantages tels que des chargements de page rapides, une évolutivité infinie et une faible facture d’hébergement.

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Exemple de la façon dont un CDN distribue les requêtes

Chaque seconde, chaque milliseconde, compte lors de la diffusion d’une application de commerce électronique. Le taux de conversion est fortement corrélé au temps qu’il faut pour qu’une page se charge dans le navigateur de quelqu’un.

Il est également important de pouvoir étendre votre magasin aux masses. Vous ne voulez pas que votre page de produit vers le bas lorsque votre nouvelle collection devient virale. C’est de l’argent perdu et un client perdu qui pourrait ne pas revenir en raison de sa mauvaise expérience d’achat.

Tirer parti de React avec le commerce électronique

Et c’est là que React entre en jeu. React est une bibliothèque puissante qui nous donne la possibilité de créer des expériences dynamiques dans le navigateur.

Nous pouvons fournir une page complètement statique au navigateur, puis charger les parties dynamiques avec ces mêmes demandes côté client pour fournir des données de produit en temps réel et une expérience d’achat personnalisée.

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Chargement et mise à jour du contenu dynamique dans le navigateur

Cela devient encore plus facile avec des frameworks comme Next.js et Gatsby. Les deux outils permettent aux développeurs de compiler statiquement l’intégralité de l’application, en étant capable de fournir la majorité du contenu d’une page avec cette première requête, mais ensuite de superposer tout ce qui doit être extrêmement précis.

Par exemple, la plupart des détails d’un produit ne changeront probablement pas. Bien sûr, nous pouvons mettre à jour la copie et corriger les erreurs, mais celles-ci ne sont pas essentielles à une expérience d’achat en temps réel.

Nous pouvons compiler statiquement ces détails pour utiliser des outils tels que les systèmes de gestion de contenu (CMS) qui stockent ces informations où nous les extrairions ensuite dans un cadre comme Next.js pour les afficher. Si ces détails changent, nous pouvons déclencher une nouvelle version qui sortira et récupérera les dernières informations à afficher sur notre page.

Pour fournir les détails dynamiques, comme un prix à jour d’un produit ou un calcul de taxe précis, nous pouvons faire des demandes côté client aux API qui garantiront que nous affichons toujours la bonne valeur. Avec cela, nous tirons parti du meilleur des deux mondes, offrant une expérience rapide avec des détails dynamiques en temps réel.

Création d’une boutique e-commerce avec Next.js et Snipcart

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Maintenant que nous comprenons les avantages de créer des magasins de commerce électronique avec React, voyons comment nous pouvons les créer.

Nous allons utiliser Next.js pour lancer rapidement une nouvelle application React où nous pouvons gérer et afficher nos produits.

J’ai aussi mentionné Gatsby plus tôt, tu te souviens ? Eh bien, l’équipe Snipcart a récemment élaboré une recette de commerce électronique pour ce framework React alternatif. Vous pouvez lire à ce sujet ici.

Nous allons ensuite ajouter Snipcart, qui fournira notre expérience de panier d’achat, nous permettant ainsi de fournir aux gens un moyen d’acheter nos produits.

Ce dont vous aurez besoin pour commencer

Avant de commencer, nous supposerons que vous avez déjà créé un compte Snipcart gratuit. Si vous n’avez pas de compte, vous pouvez vous inscrire ici. C’est toujours gratuit en mode « Test ».

Vous aurez également besoin d’une compréhension de base de JavaScript et de React. Bien que la plupart de ce que vous ferez inclue du HTML brut, nous travaillerons dans une application React en utilisant Next.js.

Étape 0 : Création d’une nouvelle application React avec Next.js

Nous utiliserons Next.js pour créer notre application React. Pour ce faire, nous pouvons utiliser npm pour créer rapidement une nouvelle application avec le modèle Next.js par défaut.

Tout d’abord, accédez au répertoire de votre terminal dans lequel vous souhaitez créer votre nouvelle application et exécutez :

npx create-next-app next-snipcart-store

Vous pouvez éventuellement remplacer next-snipcart-store avec le nom du répertoire dans lequel vous voulez créer ce projet.

Cela créera un nouveau projet Next.js et installera les dépendances. Une fois terminé, vous pouvez accéder à ce répertoire et exécuter la commande de développement pour démarrer le serveur.

cd next-snipcart-store
npm run dev
Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Créer une nouvelle application Next.js

Et une fois terminé, vous pouvez maintenant ouvrir le projet sur http://localhost:3000 !

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Suivez le commit dans GH !

Étape 1 : Ajouter des produits à votre nouvelle application React

Pour commencer à ajouter nos produits à l’application, la première chose dont nous avons besoin est une liste de produits.

Créons un nouveau fichier à la racine de notre projet pour stocker ces informations sur le produit que nous pouvons utiliser dans toute l’application.

Créez un nouveau fichier appelé products.json et à l’intérieur de ce fichier, ajoutez simplement un tableau vide :

Lors de la configuration de nos produits, nous avons besoin de quelques attributs de base :

  • Titre : le nom convivial du produit

  • ID : un identifiant unique pour ce produit

  • Description: une brève note sur ce qu’est le produit

  • Prix ​​: le coût de l’article

Nous pouvons créer notre premier produit en ajoutant un nouvel objet à l’intérieur de notre tableau vide avec les éléments suivants :

{
  "title": "Snipcart Logo Sticker",
  "id": "sticker_logo",
  "description": "Show off your Snipcart support with a logo sticker!",
  "price": "2.00"
}

Voici à quoi devrait ressembler notre fichier à ce stade :

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Pour utiliser ce fichier, nous pouvons accéder à notre fichier de page d’accueil et l’importer.

Ouvrez le pages/index.js et ajoutez l’instruction import suivante en haut du fichier :

import products from '../products.json';

Avec nos produits importés, nous pouvons maintenant les utiliser pour les afficher sur la page.

À l’intérieur de

, Next.js inclut des liens par défaut sur Next.js. Nous allons les supprimer et les remplacer par nos propres liens.

Remplacez la grille par ce qui suit :

{products.map(product => { return (

{ product.title }

{ product.description }

${ product.price }

); })}

Ici, nous parcourons le products tableau que nous avons importé. Nous créons un nouveau

pour chaque produit qui comprend un className qui emprunte les styles par défaut Next.js pour une carte.

A l’intérieur de notre

, nous incluons des détails sur notre produit comme le titre et le prix, ainsi que l’ajout d’un bouton que nous pouvons utiliser pour ajouter l’article à notre panier.

Si nous sauvegardons le fichier et ouvrons notre navigateur, nous pouvons maintenant voir notre premier produit.

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Ajoutons un deuxième produit.

Nous pouvons ajouter un autre objet à notre tableau de projet pour notre deuxième produit :

{
  "title": "Snipcart Logo Sticker Pack",
  "id": "sticker_logo_pack",
  "description": "Get a pack of 3 Snipcart logo stickers.",
  "price": "4.00"
}

Et si nous sauvegardons et rechargeons notre page, nous voyons notre deuxième produit.

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Enfin, généralement, lorsque nous voulons vendre un produit, nous voulons montrer une image de ces produits afin que nos clients puissent voir à quoi ressemble le produit.

Ajoutons deux fichiers image à notre projet. Sous le répertoire public, créez un dossier appelé « images » et ajoutez-y vos fichiers image, un pour chaque produit.

J’inclus deux images, une pour un seul autocollant et une pour un paquet d’autocollants.

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Remarque : si vous souhaitez utiliser les mêmes fichiers image, vous pouvez les télécharger depuis le Dépôt Git avec cette démo.

A l’intérieur de notre products.json fichier, nous voulons maintenant ajouter ces fichiers image afin que nous puissions les récupérer dans notre application.

Sous « Snipcart Logo Sticker », ajoutez la propriété suivante :

"image": "/images/sticker-single.jpg"

Et sous « Snipcart Logo Sticker Pack », ajoutez :

"image": "/images/sticker-3pack.jpg"

Puis, de retour à l’intérieur pages/index.js, au-dessus du titre de notre produit, ajoutez :

{`Preview

Et si nous sauvegardons et rechargeons la page, nous voyons que nous avons nos images, mais elles sont énormes !

Pour corriger la taille des images, vous pouvez ouvrir styles/global.css et ajouter la règle suivante :

Et maintenant nous avons notre page avec nos deux produits !

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Suivez le commit sur GH !

Étape 2 : ajouter un panier Snipcart à votre application React

La première partie de l’intégration de Snipcart comprend l’importation de quelques fichiers à partir du CDN public de Snipcart.

À l’intérieur de pages/index.js, le modèle Next.js par défaut est fourni avec un composant qui nous permet d’ajouter des balises et des scripts supplémentaires au de notre page.

À l’intérieur du composant, ajoutez les éléments suivants :



Cela va dire au navigateur de démarrer une connexion aux deux sous-domaines de Snipcart, ce qui améliorera les performances. Nous incluons également un fichier CSS qui contient les styles Snipcart pour le panier.

Ensuite, en bas du fichier, juste après le

, ajoutez ce qui suit :
%MINIFYHTML7b08e71f1ab34b0ec3eaedc9647c9bbc10%

Here, we’re including the Snipcart script that will provide all of our shopping cart's functionality. We’re also including a hidden

where we need to specify our API key from our account.

To find the API key, inside of your Snipcart account, navigate to your account settings, find the API Keys page, and then copy the Public Test API Key under Credentials.

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Copiez cette valeur et remplacez [YOUR-API-KEY] dans l'extrait ci-dessus avec votre clé :

À ce stade, si nous sauvegardons et rechargeons la page, nous ne devrions remarquer aucune différence.

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Suivez le commit dans GH !

Étape 3 : Configuration des produits à ajouter au panier Snipcart

Afin de permettre aux gens d'ajouter nos produits à leur panier, nous devons ajouter quelques attributs à nos boutons de produits.

Mettons à jour notre bouton Ajouter au panier comme suit :

Avec ces attributs, Snipcart peut regarder de manière dynamique nos produits et être en mesure de connaître les détails de chacun d'eux. De plus, comme nous ajoutons le sélecteur de classe, Snipcart peut désormais transformer nos boutons en boutons fonctionnels nous permettant d'ajouter réellement nos articles au panier.

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Comme nous pouvons le voir, Snipcart sait exactement quel produit nous avons ajouté à notre panier en regardant les attributs sur notre bouton !

Suivez le commit dans GH !

De la même manière que nous configurons nos produits pour les ajouter facilement à notre panier Snipcart, nous pouvons créer un lien qui permet à nos clients de visiter cette page de panier. Nous pouvons également afficher un coût total à jour afin que nos clients sachent toujours combien ils cherchent à dépenser.

Pour ce faire, nous allons profiter de la description existante sur la page à l'intérieur de

.

Remplaçons cette balise de paragraphe par :

Tout d'abord, nous ajoutons un nouveau lien comprenant des sélecteurs de classe, qui indiquera à Snipcart que nous souhaitons utiliser notre lien comme conteneur pour notre résumé de panier. Nous lui disons également que nous voulons que ce lien ouvre notre panier.

À l'intérieur, nous ajoutons une étiquette de « Cart ».

À côté de cela, nous incluons un avec ses propres sélecteurs de classe qui permettront à Snipcart de mettre à jour dynamiquement cette valeur avec le total actuel du panier de notre client.

Si vous remarquez, nous incluons 0,00 $ à l'intérieur de notre . Cela permettra à notre page d'afficher une valeur avant le chargement de JavaScript pour éviter les changements de mise en page lorsque cela est possible.

Enfin, pendant que nous y sommes, mettons à jour le titre de la page à l'intérieur du

tag à quelque chose qui reflète notre magasin.

Je vais le mettre à jour vers "Snipcart Store":

Snipcart Store

Si nous actualisons la page, nous pouvons voir notre titre mis à jour. Mais si nous ajoutons l'un des produits au panier et fermons le panier, nous pouvons voir le coût total mis à jour de notre panier. Nous pouvons même cliquer sur notre lien Panier, qui ouvrira de nouveau notre panier !

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Suivez le commit dans GH !

Prochaines étapes

Hébergement et déploiement de votre boutique

Il existe une variété d'options disponibles pour l'hébergement et le déploiement de votre application Next.js. Vercel, l'équipe qui gère Next.js, est livré avec de nombreuses fonctionnalités "prêtes à l'emploi" qui vous permettent d'héberger et de déployer facilement une application Next.js.

Si vous envisagez d'utiliser un autre fournisseur statique, tel que Netlify, vous souhaiterez configurer le script de génération du projet pour exporter l'application compilée en tant que fichiers statiques. Pour ce faire, vous pouvez mettre à jour votre script de construction à l'intérieur de package.json être:

Désormais, chaque fois qu'un build est exécuté, vous aurez des fichiers statiques disponibles dans le out annuaire.

Configuration et gestion de vos produits

Si vous avez suivi, vous avez peut-être utilisé les exemples de produits de la démo. À ce stade, vous pouvez mettre à jour les produits dans products.json pour inclure les produits que votre magasin propose réellement.

Pour une solution plus avancée, vous pouvez ingérer les informations sur le produit à partir d'une source externe comme un CMS personnalisé !

Personnaliser votre boutique

Pour cette procédure pas à pas, nous avons utilisé à peu près tous les styles déjà intégrés dans le modèle Next.js par défaut. Cela pourrait ne pas ressembler exactement à votre marque ou à la façon dont vous imaginez votre magasin.

Avec Next.js, nous pouvons utiliser la plupart des solutions CSS, y compris le CSS standard, pour personnaliser notre page comme nous le souhaitons, qu'il s'agisse simplement de mettre à jour les boutons pour qu'ils soient un peu plus jolis ou de renommer complètement le magasin.

Faire vivre votre magasin

Dans notre configuration, nous avons utilisé une clé API de test pour nous assurer que notre panier fonctionnait comme prévu. Cela nous permet de traiter les transactions comme nous le ferions dans le monde réel.

Afin de mettre votre boutique en ligne, vous devez d'abord vous assurer que les paiements sont configurés avec votre compte Snipcart.

Une fois que vous êtes prêt à partir, vous pouvez mettre à jour votre compte en mode Live, ce qui vous permettra de commencer à vendre vos produits dans le monde !

Démo en direct et dépôt GitHub

Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

Essayez la démo en direct ici

Pensées de clôture

Le commerce électronique est un espace compliqué, nécessitant un contenu hautement dynamique qui s'adaptera aux clients visitant nos magasins.

Avec React et Next.js, nous pouvons fournir une application statique qui sera capable de survivre à de gros afflux de trafic lorsqu'un produit devient viral, tout en étant capable de fournir une expérience interactive pour que les gens achètent nos produits.

En utilisant Snipcart, nous pouvons offrir en toute confiance une expérience d'achat adaptée à notre offre de produits et personnalisée à chaque client. Snipcart nous permet de gérer l'intégralité du flux de paiement dans le navigateur, ce qui permet aux utilisateurs d'effectuer un paiement rapidement et en toute sécurité.

En tirant parti de ces outils, nous pouvons apporter les expériences dynamiques nécessaires dans le monde du commerce électronique au Web statique.


Si vous avez apprécié cet article, veuillez prendre une seconde pour le partager sur Twitter. Vous avez des commentaires, des questions ? Frappez la section ci-dessous!



Ecommerce: Un guide pour réagir au commerce électronique [Live Demo Shop & Tutorial]

#guide #pour #réagir #commerce #électronique #Live #Demo #Shop #Tutorial