Vendre sur les sites Gatsby avec Ecwid

Gatsby est un framework populaire pour les développeurs, que vous pouvez utiliser pour construire un site Web rapide, attrayant et adapté au référencement. Si votre site est créé avec Gatsby, ou si vous envisagez d'utiliser cet outil de génération de sites statiques, et que vous prévoyez de vendre des produits en ligne, vous pouvez facilement ajouter le commerce électronique Ecwid à n'importe quelle page de votre site à l'aide de l'extension Ecwid. Vous pouvez ajouter toute une boutique ou vous pouvez ajouter des produits individuels sous forme de boutons Acheter.

Ecwid est une plateforme de commerce électronique qui vous permet de démarrer votre entreprise en ligne en quelques étapes. Pour vous inscrire, vous n'aurez besoin que d'une adresse e-mail. En plus de vendre sur votre site web Gatsby, vous pouvez utiliser un large éventail de canaux de vente avec Ecwid, notamment Facebook, Instagram et les marchés (en anglais).

Vous pouvez utiliser les instructions suivantes vous-même, si vous construisez le site web par vous-même, ou les fournir à votre développeur de site web.

Installer l'extension

Avant de pouvoir commencer à ajouter Ecwid à votre site Gatsby, vous devez installer une extension Ecwid spéciale.

Pour installer l'extension :

Ouvrez l'interface en lignes de commande de Gatsby et ajoutez l'extension en tant que dépendance du projet en exécutant la commande suivante :

npm install @ecwid/gatsby-plugin-ecwid

Assurez-vous que vous avez préalablement configuré votre environnement de développement et créé un site Web.
Ajoutez une extension à votre site dans votre fichier gatsby-config.js.

C'est tout ! Vous avez ajouté l'extension à votre site web Gatsby.

Vous pouvez désormais ajouter des boutons de vitrine ou Acheter à n'importe quelle page de votre site statique.

Ajouter le commerce électronique Ecwid

Dans l'extension, deux composants sont disponibles :

ProductBrowser — le composant pour ajouter votre vitrine
BuyNowButton — le composant pour ajouter des boutons Acheter

Ajouter une vitrine

Vous pouvez ajouter votre vitrine Ecwid complète à n'importe quelle page de votre site web Gatsby à l'aide du composant d'extensionProductBrowser. Les clients pourront ainsi parcourir votre boutique et consulter tous les produits que vous avez créés et activés dans votre administration Ecwid.

Pour ajouter une vitrine :

Choisissez une page de votre site où vous voulez ajouter la boutique. Trouvez le fichier .js de cette page et ouvrez-le.
Vous pouvez également créer une nouvelle page pour votre boutique (par exemple, src/pages/store.js).

Ajoutez les lignes suivantes au fichier de la page :


import {ProductBrowser} from '@ecwid/gatsby-plugin-ecwid'

export default function Store() {
  return (
    <>
      <ProductBrowser
        storeId="13433173"
      />
    </>
  )
}

Remplacez 13433173 par l'ID de votre boutique.

Enregistrez le fichier.

La page de votre boutique sera disponible à l'adresse http://localhost:8000 (par exemple : http://localhost:8000/store).

Ajouter un bouton Acheter

Les boutons Acheter vous permettent d'ajouter des produits individuels avec des boutons d'achat et une option de paiement à votre site web. Vous pouvez utiliser cette option si vous ne souhaitez pas ajouter de vitrine complète ou si vous voulez présenter certains produits sur d'autres pages du site (par exemple, dans un blog).

Pour ajouter un bouton Acheter :

Choisissez une page de votre site où vous voulez ajouter le bouton Acheter. Trouvez le fichier .js de cette page et ouvrez-le.
Vous pouvez également créer une nouvelle page (par exemple, src/pages/blog.js).
Choisissez un endroit de votre page où vous souhaitez qu'un bouton Acheter soit affiché et ajoutez les lignes suivantes au fichier de la page :
```
import {BuyNowButton} from '@ecwid/gatsby-plugin-ecwid'

export default function Store() {
  return (
    <>
      <BuyNowButton
        storeId="13433173"
        productId="102852327"
        isShowPrice={false}
      />
    </>
  )
}
```
Remplacez 13433173 par l'ID de votre boutique et 102852327 par l'ID de produit de celui auquel vous voulez ajouter un bouton Acheter.
Enregistrez le fichier.

La page avec votre bouton Acheter sera disponible à l'adresse http://localhost:8000 (par exemple : http://localhost:8000/blog).

Publier votre site web

Une fois que vous avez terminé de créer et de peaufiner un site web Gatsby, avec votre boutique Ecwid et/ou votre ou vos boutons Acheter, en local sur votre ordinateur, il est temps de le publier.

Gatsby vous permet de construire, de prévisualiser et d'héberger votre site web gratuitement sur Gatsby Cloud. Il aura un domaine gatsbyjs.io. Si vous souhaitez utiliser un autre domaine, vous pouvez toujours en connecter un personnalisé.

Plus d'informations sur le déploiement et l'hébergement de votre site Gatsby →