Le référentiel Saleor-Storefront est DEPRECATED
Nous avons décidé de construire une nouvelle vitrine à partir de zéro, sans conception sophistiquée, en nous concentrant uniquement sur les meilleures pratiques pour la construction de devantures de commerces. Le nouveau projet, appelé React-Storefront, utilise Next.js comme fondation et vent arrière pour l'apparence. Vous pouvez le trouver ici: https://github.com/saleor/react-storefront.
Saleor Storefront
Remarque: Ce projet est une démonstration sur la façon dont Saleor peut être utilisé. Il n'est pas prêt à être un démarreur, mais plutôt montrer comment différents cas peuvent être gérés et pourraient être utilisés comme livre de recettes. Il y aura des changements de rupture et le code évolue constamment, alors utilisez à vos propres risques.
Une vitrine d'application à une page à Saleor, PWA, PWA, PWA.
Caractéristiques
- Store de commerce électronique sans tête construite avec GraphQL, client Apollo, React, Next.js et TypeScript
- Mode hors ligne (bêta)
- Intégration de l'API GraphQL Saleor GraphQL
- Expérience d'application à une seule page
- Intégration de la passerelle de paiement Braintree
Démo
Voir la démo publique de Saleor Storefront!
Ou lancez la démo sur une instance Heroku gratuite.
Commencer
Ces instructions vous procureront une copie du projet opérationnel sur votre machine locale à des fins de développement et de test.
Condition préalable
- Node.js 14.16
- Une instance de vente de Saleor.
Pour exécuter la vitrine, vous devez définir la variable d'environnement NEXT_PUBLIC_API_URI pour pointer de l'API Saleor GraphQL. Si vous exécutez Saleor localement, avec les paramètres par défaut, NEXT_PUBLIC_API_URI est défini sur: http://localhost:8000/graphql/ . Pour le modifier, créez un fichier .env.local et ajoutez-le là ou définissez une variable Env à l'aide de la commande export .
Installation
Clone le référentiel:
git clone https://github.com/mirumee/saleor-storefront.git
Entrez dans le répertoire du projet:
En utilisant une version stable
Pour utiliser la version officielle de l'écurie, passe à une balise de version:
Voir la liste de toutes les sorties ici: https://github.com/mirumee/saleor-storefront/releases/
Utilisation de la version de développement
Si vous souhaitez utiliser la dernière version de développement, vérifiez la branche master :
Installez les dépendances NPM:
Exécutez le serveur de développement:
Allez sur http://localhost:3000 pour accéder à la vitrine.
Construire
Pour compiler l'application Run:
Pour compiler l'application et exporter la vitrine vers l'exécution statique HTML:
Pour compiler l'application et l'exécuter en mode de production avec le prochain serveur Exécuter:
Afin d'activer Apollo Devtools dans la version de production, définissez la variable environnementale
NEXT_PUBLIC_ENABLE_APOLLO_DEVTOOLS=true
Tests de cyprès
Si vous souhaitez exécuter des tests Cypress, assurez-vous que toutes les dépendances (y compris Cypress ) sont installées en exécutant la commande d'installation.
Les variables d'environnement suivantes doivent être définies afin de pouvoir exécuter correctement les tests:
-
API_URI - Adresse API GraphQL. -
STATIC_URL - URL de destination des fichiers statiques, par exemple. Seau S3 -
CYPRESS_USER_NAME - Nom d'utilisateur (e-mail) pour l'utilisateur Storefront . -
CYPRESS_USER_PASSWORD - Pour l'utilisateur mentionné ci-dessus.
Si vous exécutez la vitrine du point de vue du conteneur Docker , vous pouvez exécuter des tests à l'aide des commandes suivantes:
Mode sans tête:
Mode UI Cypress:
Si vous souhaitez exécuter des tests sur votre environnement de développement local, utilisez les commandes suivantes:
Mode sans tête:
Mode UI Cypress:
Création de nouveaux composants
Tous les nouveaux composants doivent suivre les directives de conception atomique et être placés dans le répertoire src/@next/components .
La structure des fichiers peut être générée à l'aide de plop :
Modification de la vitrine
À partir du poteau de spectre
Fichiers importants
- Saleor-StoreFront / Config / Next / config.base.js - Fichier de configuration de base next.js qui contient des ajustements personnalisés WebPack.
- Peut changer le nom de l'application (affichée lorsqu'il est installé sur mobile)
- Saleor-StoreFront / SRC / Pages / App .TSX - Fichier de points d'entrée principale. Rendez le composant, l'apollo-client et autres dans le fichier root div dans index.html ci-dessus. Contient également la section Head - vous pouvez modifier le titre de vitrine ici.
- Saleor-StoreFront / Src / Core / Config.ts - Contrôle le nombre de produits affichés par page, le courrier électronique de prise en charge, les fournisseurs de passerelles, les médias sociaux et quelques méta.
- Peut modifier le courrier électronique de support
- Peut changer les produits affichés par page
- Peut changer les fournisseurs de passerelle
- Peut changer les liens de médias sociaux affichés dans le pied de page
- Peut modifier certaines méta-options
- Saleor-Storefront / SRC / Images / - détient toutes les images pour le logo, le chariot, le favicon, etc.
- Peut modifier le logo de vitrines, FAVICON ou ajouter de nouvelles images ici.
- Saleor-StoreFront / SRC / GlobalStyles / SCSS / Variables.SCSS - Contient des styles de base comme les couleurs, la taille de la police, la largeur du conteneur, les points d'arrêt des médias et plus encore.
- Saleor-StoreFront / SRC / @ Next / GlobalStyles / - contient plus de styles de base, de thèmes, de médias et de constantes.
- Saleor-StoreFront / Src / Views / - Ce dossier contrôle les vues, ou ce qui est affiché pour chaque page. La plupart des vues ont un fichier nommé "page.tsx" qui contrôle la disposition de la page et un fichier nommé "View.tsx" qui appelle la requête et rend le composant avec les données.
- Peut ajouter une autre vue à la vitrine ici. Nécessite l'ajout d'un itinéraire (voir les routes ci-dessous).
- Saleor-StoreFront / SRC / @ Next / Pages / - Deuxième place pour modifier / ajouter différentes pages. Il s'agit du répertoire recommandé pour ajouter de nouvelles pages.
- Saleor-StoreFront / Src / Paths.ts - Ce dossier contient tous les chemins. Voici où vous en ajoutez un nouveau.
- Saleor-StoreFront / SRC / Pages / - Ce dossier contient des fichiers qui sont traduits par le routage suivant.js. Voici où vous ajoutez un nouvel itinéraire.
- Exporter un nouveau chemin dans les chemins.
- À l'intérieur des pages, créez un nouveau fichier avec le nom de Correnspond sur votre itinéraire souhaité (en savoir plus ici sur les routes imbriquées). Importez votre vue dans le fichier d'itinéraire créé End Exportez-le comme une exportation par défaut.
- Pour créer un lien vers votre nouveau
import Link from "next/link" et utilisez le nouveau chemin que vous avez créé dans Paths.ts (assurez-vous de l'importer)
- Saleor-StoreFront / Src / App / App.TSX - Ceci est le composant principal qui rend le, (expliqué ci-dessous) et quelques autres composants.
Ajout d'une passerelle de paiement
- Saleor-StoreFront / Src / Core / Config.ts - Ajoutez un nouveau nom de fournisseur de passerelle ici.
- Saleor-StoreFront / SRC / @ Next / Components / Organismes / - Créez ici un nouveau dossier pour le nouveau composant de passerelle de paiement.
- Saleor-storefront/Src/@next/components/organisms/paymentgatewayslist/paymentgatewayslist.tsx - Importez un nouveau composant de passerelle, créez un nouveau boîtier de commutateur pour gérer votre composant de passerelle.
Recevoir des e-mails de confirmation
- Définissez la variable d'environnement Email_URL pour Saleor Core.
- Utilisation de Docker - Ajoutez un e-mail_url comme nouvelle variable environnementale à la fois à l'API et au service de travail suivant le format ici.
- Les problèmes de transmission des e-mails fonctionnent?
- Gmail
- Vérifiez que "l'accès aux applications moins sécurisé" est activé. Sous "Gérer votre compte Google"> Accédez à l'onglet Sécurité. Par défaut, le paramètre est désactivé pour des raisons de sécurité.
- Si vous utilisez 2FA, assurez-vous de définir un mot de passe d'application et utilisez-le à la place de votre mot de passe de connexion normal.
À canaux multiples
- Définir la variable d'environnement [Saleor_Channel_Slug]. - Valeur par défaut:
default-channel .
Licence
Ce projet est sous licence en vertu de la licence de clause BSD-3 - voir le fichier de licence pour plus de détails
Fabriqué avec ❤️ par le commerce Saleor
[email protected]
