Base de connaissances
Guides
Académie
Tutoriels vidéo
Appuyez sur la touche échap pour quitter :
Articles consultés récemment :

Sommaire

Vendre sur les sites Next.js avec Ecwid

Next.js est un framework populaire pour les développeurs, que vous pouvez utiliser pour construire un site web rapide, attrayant et convivial au design unique. Si votre site est créé avec Next.js, 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 Next.js, vous pouvez utiliser un large éventail de canaux de vente avec Ecwid, comme Facebook, Instagram et les marchés.

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 le commerce électronique Ecwid à votre site Next.js, vous devez installer une extension Ecwid spéciale.

Pour installer l'extension :

  1. Ouvrez votre terminal et allez dans le répertoire du site web. Pour cela, utilisez une commande 'cd' et le nom du répertoire, par exemple, cd mon-siteweb.
    Assurez-vous que vous avez préalablement configuré votre environnement de développement et créé la structure initiale du site Next.js.
  2. Exécutez la commande suivante :

    npm install @ecwid/nextjs-ecwid-plugin

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

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 Next.js à 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 :

  1. Choisissez une page de votre site où vous voulez ajouter la boutique. Trouvez le fichier .jsx de cette page dans le répertoire /app/ et ouvrez-le avec votre éditeur de texte.
    Pour créer une nouvelle page pour votre boutique, créez un nouveau chemin avec le fichier page.jsx (par exemple,  /store/page.jsx) dans le répertoire /app/.
  2. Ajoutez les lignes suivantes au fichier de la page :
    
    'use client'
     
    import {ProductBrowser} from '@ecwid/nextjs-ecwid-plugin'
    
    export default function Store() {
      return (
        <>
          <ProductBrowser
            storeId="13433173"
          />
        </>
      )
    }
    Remplacez 13433173 par l'ID de votre boutique.
  3. Enregistrez le fichier.

La page de votre boutique sera disponible à l'adresse http://localhost:3000 (par exemple : http://localhost:3000/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 :

  1. Choisissez une page de votre site où vous voulez ajouter le bouton Acheter. Trouvez le fichier .jsx de cette page dans le répertoire /app/ et ouvrez-le avec votre éditeur de texte.
    Vous pouvez aussi créer une nouvelle page (par exemple, /blog/page.jsx).
  2. 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 :
    
    'use client'
    
    import {BuyNowButton} from '@ecwid/nextjs-ecwid-plugin'
    
    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.
  3. Enregistrez le fichier.

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

Publier votre site web

Une fois que vous avez terminé de créer et de peaufiner un site web Next.js, avec votre boutique Ecwid et/ou votre ou vos boutons Acheter, en local sur votre ordinateur, il est temps de le publier. Ainsi, les clients peuvent enfin accéder au site sur le web et acheter vos produits. Vous pouvez utiliser n'importe quel fournisseur d'hébergement pour cela.

Pour déployer votre projet, vous pouvez utiliser un service spécial. Une autre option consiste à exporter le projet comme ensemble de fichiers html/css/js et à les téléverser sur un serveur.

Articles connexes

Ecwid pour les sites Gatsby
Extension Ecwid pour les générateurs de sites statiques WordPress

Cet article vous a-t-il été utile ?

Génial ! Merci pour vos commentaires !

Merci pour vos commentaires !

Nous sommes désolés ! Que s'est-il passé ?
Utilisateurs qui ont trouvé cela utile : 3 sur 3
10
Nous utilisons des cookies et des technologies similaires pour garder vos préférences en mémoire, mesurer l'efficacité de nos campagnes et analyser des données anonymisées afin d'améliorer les performances de notre site. En choisissant « Accepter », vous acceptez l'utilisation de cookies.
Accepter les cookies Refuser