El repositorio de Saleor-Storefront está DEPRECATED
Hemos decidido construir una nueva tienda a partir de cero, sin un diseño elegante, centrándonos únicamente en las mejores prácticas para construir escaparates de comercio. El nuevo proyecto, llamado React-StoreFront, usa Next.js como su base y viento de cola para el aspecto. Puede encontrarlo aquí: https://github.com/saleor/react-storefront.
Escaparates de ventas
Nota: Este proyecto es una demostración sobre cómo se puede utilizar Valeor. No está listo para ser un iniciador, sino que muestra cómo se pueden manejar diferentes casos y podrían usarse como un libro de recetas. Habrá cambios de ruptura y el código evoluciona constantemente, así que use bajo su propio riesgo.
Una tienda de aplicaciones de una sola página con PWA, PWA, para Saleor.
Características
- Storefront de comercio electrónico sin cabeza construido con GraphQL, Apollo Client, React, Next.js y TypeScript
- Modo fuera de línea (beta)
- Integración de API de Saleor GraphQL
- Experiencia de aplicación de una sola página
- Integración de la pasarela de pago de Braintree
Manifestación
¡Vea la demostración pública de Saleor Storefront!
O lanza la demostración en una instancia de Heroku gratis.
Empezando
Estas instrucciones le darán una copia del proyecto en funcionamiento en su máquina local para fines de desarrollo y prueba.
Requisitos previos
- Node.js 14.16
- Una instancia ejecutada de vendedor.
Para ejecutar la tienda, debe establecer la variable de entorno NEXT_PUBLIC_API_URI para apuntar a la API de Saleor GraphQL. Si está ejecutando Saleor localmente, con la configuración predeterminada, NEXT_PUBLIC_API_URI se establece en: http://localhost:8000/graphql/ . Para cambiarlo, cree un archivo .env.local y agregue allí o establezca una variable ENV usando el comando export .
Instalación
Clon el repositorio:
git clone https://github.com/mirumee/saleor-storefront.git
Ingrese el directorio del proyecto:
Usando la liberación estable
Para usar la versión estable oficial, consulte una etiqueta de lanzamiento:
Vea la lista de todos los lanzamientos aquí: https://github.com/mirumee/saleor-storefront/releases/
Uso de la versión de desarrollo
Si desea utilizar la última versión de desarrollo, consulte la rama master :
Instalar dependencias de NPM:
Ejecute el servidor de desarrollo:
Vaya a http://localhost:3000 para acceder a la tienda.
Construir
Para compilar la aplicación Ejecutar:
Para compilar la aplicación y exportar escaparate a la ejecución de HTML estática:
Para compilar la aplicación y ejecutarla en modo de producción con el siguiente servidor ejecutado:
Para habilitar Apollo DevTools en la versión de producción, establezca la variable ambiental
NEXT_PUBLIC_ENABLE_APOLLO_DEVTOOLS=true
Pruebas de ciprés
Si desea ejecutar pruebas de Cypress, asegúrese de que todas las dependencias (incluido Cypress ) se instalen ejecutando el comando de instalación.
Se requiere que las siguientes variables de entorno se establezcan para poder ejecutar pruebas correctamente:
-
API_URI - Dirección API GraphQL. -
STATIC_URL - URL de destino de archivos estáticos, por ejemplo. Cubo s3 -
CYPRESS_USER_NAME - UserName (correo electrónico) para el usuario Storefront . -
CYPRESS_USER_PASSWORD : para el usuario mencionado anteriormente.
Si está ejecutando la tienda desde la perspectiva del contenedor Docker , puede ejecutar pruebas utilizando los siguientes comandos:
Modo sin cabeza:
Modo Cypress UI:
Si desea ejecutar pruebas contra su entorno de desarrollo local, use los siguientes comandos:
Modo sin cabeza:
Modo Cypress UI:
Creación de nuevos componentes
Todos los componentes nuevos deben seguir las pautas de diseño atómico y colocarse en el directorio src/@next/components .
La estructura de archivos se puede generar utilizando plop :
Modificación de la tienda
Desde Spectrum Post
Archivos importantes
- Saleor -storefront/config/next/config.base.js - archivo de configuración base next.js que contiene ajustes personalizados de Webpack.
- Puede cambiar el nombre de la aplicación (que se muestra cuando se instala en dispositivos móviles)
- Saleor -storefront/src/pages/ app .tsx - archivo principal de punto de entrada. Renderiza el componente, Apollo-Client y otros a la raíz div en el archivo index.html anterior. Contiene también la sección principal: puede cambiar el título de tienda aquí.
- Saleor -storefront/src/core/config.ts : controla el número de productos que se muestran por página, correo electrónico de soporte, proveedores de puerta de enlace, redes sociales y algo de meta.
- Puede cambiar el correo electrónico de soporte
- Puede cambiar los productos que se muestran por página
- Puede cambiar los proveedores de puerta de enlace
- Puede cambiar los enlaces de las redes sociales que se muestran en el pie de página
- Puede cambiar algunas meta opciones
- Saleor -Storrefront/Src/Images/ - contiene todas las imágenes para logotipo, carrito, favicon, etc.
- Puede cambiar el logotipo de la tienda, Favicon o agregar nuevas imágenes aquí.
- Saleor -Storrefront/SRC/GlobalStyles/SCSS/Variables.SCSS : contiene estilos base como colores, tamaño de fuente, ancho de contenedores, puntos de interrupción de medios y más.
- Saleor -Storefront/Src/@Next/GlobalStyles/ - contiene más estilos básicos, temas, medios y constantes.
- Saleor -Storrefront/SRC/Views/ - Esta carpeta controla las vistas o lo que se muestra para cada página. La mayoría de las vistas tienen un archivo llamado "Page.tsx" que controla el diseño de la página y un archivo llamado "View.tsx" que llama a la consulta y representa el componente con los datos.
- Puede agregar otra vista a la tienda aquí. Requiere agregar una ruta (ver rutas a continuación).
- Saleor -Storrefront/Src/@Next/Pages/ - Segundo lugar para modificar/agregar páginas diferentes. Este es el directorio recomendado para agregar nuevas páginas.
- Saleor -Storrefront/SRC/Paths.ts : esta carpeta contiene todas las rutas. Aquí es donde agrega uno nuevo.
- Saleor -storefront/src/pages/ - Esta carpeta contiene archivos que se traducen al enrutamiento Next.js. Aquí es donde agrega una nueva ruta.
- Exportar una nueva ruta en Paths.ts
- Páginas interiores, cree un nuevo archivo con el nombre de Correnspond a su ruta deseada (lea más aquí sobre rutas anidadas). Importe su vista en el archivo de ruta creado end Exportarlo como una exportación predeterminada.
- Para vincular a su nuevo
import Link from "next/link" y use una nueva ruta que creó en Paths.ts (asegúrese de importarlo)
- Saleor -storefront/src/app/app.tsx : este es un componente principal que hace que (explicado a continuación) y un par de otros componentes.
Agregar una pasarela de pago
- Saleor -storefront/src/core/config.ts - agregue el nuevo nombre del proveedor de puerta de enlace aquí.
- Saleor -storefront/src/@next/components/organiss/ - crea una nueva carpeta para el nuevo componente de pasarela de pago aquí.
- Saleor-storefront/src/@next/Components/organisms/paymentgatewayslist/paymentgatewayslist.tsx - Importar un nuevo componente de puerta de enlace, crear una nueva caja de interruptor para manejar el componente de su puerta de enlace.
Recibir correos electrónicos de confirmación
- Establezca la variable de entorno Email_URL para el núcleo de venta.
- Uso de Docker: agregue ELECT_URL como nuevo entorno variable tanto a la API como al servicio de trabajadores después del formato aquí.
- ¿Problemas para que funcionen los correos electrónicos?
- Gmail
- Verifique que se encienda el "acceso a la aplicación menos seguro". En "Administrar su cuenta de Google"> Vaya a la pestaña de seguridad. Por defecto, la configuración está desactivada por razones de seguridad.
- Si usa 2FA, asegúrese de configurar una contraseña de la aplicación y usarla en lugar de su contraseña de inicio de sesión normal.
Multicanal
- Establecer [Saleor_channel_slug] Variable de entorno. - Valor predeterminado:
default-channel .
Licencia
Este proyecto tiene licencia bajo la licencia de cláusula BSD-3: consulte el archivo de licencia para obtener más detalles
Hecho a mano con ❤️ por Saleor Commerce
[email protected]
