commercejs nextjs demo store
1.0.0
Una tienda de demostración de comercio electrónico completa de alta fidelidad construida utilizando Commerce.js SDK y Next.js con implementación en vivo para Netlify.
Nota
Este ReadMe lo guiará para que se ponga en funcionamiento con una plantilla de comercio electrónico completa. Hemos configurado esta plantilla para que usted se implementa un solo clic directamente en Netlify. Alternativamente, puede implementar manualmente en su elección de la plataforma de alojamiento.
Para obtener un tutorial detallado completo sobre la construcción de esta aplicación de comercio electrónico Jamstack, dirígete aquí.
yarn global add @chec/cli Ahora que ha instalado CHEC CLI a nivel mundial, podrá acceder a la lista de chec [COMMANDS] , uno de los cuales se registra para una cuenta chec. ¡Sigamos adelante y configuremos eso!
# Open the Chec registration page in your browser
chec registerSiga el resto del recorrido para configurar los detalles de su comerciante. Alternativamente, puede ir aquí para registrarse para obtener una cuenta chec.
La implementación de un solo clic le permite conectar Netlify a su cuenta de GitHub para clonar el repositorio commercejs-nextjs-demo-store e implementarla automáticamente. Asegúrese de ir a Netlify y regístrese para obtener una cuenta antes de hacer clic en el botón Implementar.
Al hacer clic en el botón anterior, se navegará a la página de implementación directa de Netlify con el repositorio del proyecto aprobado como parámetros en la URL. Haga clic en el botón Conectar a GitHub , nombre su repositorio e ingrese esta clave pública en la entrada de la clave pública CHEC . Tenga en cuenta que con el fin de ponerlo en funcionamiento con una vista previa de implementación en vivo de la tienda de demostración, le proporcionamos la clave pública de nuestra cuenta de comerciante de demostración. Ahora, guarde e implementa su sitio.
Tenga en cuenta que la compilación inicial fallará si ingresa en su clave pública en lugar de la clave de comerciante de demostración proporcionada. El despliegue de un solo clic está destinado a fines de presentación para girar una implementación rápida. El uso de su cuenta comercial significaría que necesitaría tener los datos apropiados, como múltiples activos y categorías asociadas con sus productos. Si desea utilizar su cuenta comercial, siga los pasos de configuración del manual a continuación.
La configuración manual implica clonar el repositorio en su entorno local, sembrar los datos de muestra proporcionados en su cuenta chec e implementarse para netlify.
Paso 1. Clonar las dependencias de reposio e instalar
# Clone the repository locally, optionally rename the repo, change into the directory
git clone https://github.com/chec/commercejs-nextjs-demo-store.git chec-store
# Change into the directory and install dependencies
cd chec-store && yarnPaso 2. Configure sus variables de entorno
Reemplace la muestra .env.example Dotenv File en la raíz del proyecto para almacenar su cheC public_key y su secret_key .
# Copy from source file to destination file .env
cp .env.example .env Puede acceder a su tecla API en la configuración de su tablero de cheC, luego navegar a la pestaña Desarrollar para copiar su clave pública y la clave secreta. Reemplace el NEXT_PUBLIC_CHEC_PUBLIC_KEY proporcionado con el suyo y complete su CHEC_SECRET_KEY en el archivo .env . La clave secreta es necesaria para que el script de semillas tenga el permiso adecuado para sembrar los datos de la muestra en /seeds en su cuenta chec. Elimine la clave secreta una vez que se sembran los datos.
# .env
# Fill in your public key and secret key
NEXT_PUBLIC_CHEC_PUBLIC_KEY =
CHEC_API_URL = https://api.chec.io
# Secret key is used with chec/seeder to access your Chec account to seed it with sample data
CHEC_SECRET_KEY =
NODE_ENV =Este archivo está destinado a no comprometerse con el control de la fuente y también se ocultará en los navegadores de archivos.
Paso 3. Sembra los datos necesarios para alimentar su tienda CHEC e iniciar su entorno de desarrollo (necesario para la configuración inicial).
# Seed data in /seeds into your Chec account
yarn seed
# Run your development environment on http://localhost:3000
yarn devAhora diríjase a http: // localhost: 3000 Después de comenzar su desarrollo, ¡su sitio ahora debe estar poblado con los datos de la muestra!
Si está reemplazando los productos o categorías de muestra, puede personalizar sus propias categorías imágenes en `público/imágenes/colección. Vea más información sobre la personalización de datos a continuación.
Paso 5. Haga los cambios necesarios que necesite y envíe el código a un repositorio en GitHub o su elección de plataforma.
Paso 6. Implemente su sitio
Asegúrese de registrarse para obtener una cuenta de Netlify e iniciar sesión en ella. Haga clic en el nuevo sitio del botón GIT y dé acceso para seleccionar su repositorio. Su configuración de compilación se completan automáticamente para su netlify.toml en la plantilla. Para ingresar sus variables de entorno, haga clic en Mostrar avanzado y luego nueva variable y complete la entrada de clave como NEXT_PUBLIC_CHEC_PUBLIC_KEY y la entrada de valor con su clave pública. Puede acceder a su tecla API en su tablero de cheC en Configuración, luego navegue a la pestaña Desarrollador para copiar su clave pública
¡Ahora adelante y haga clic en el "Sitio de implementación" para ver su sitio en vivo!
Este comando descargará este proyecto de ejemplo de GitHub e inicializarlo en su máquina. Será libre de editar el código descargado y jugar con Commerce.js después.
Paso 1. Instale el chec cli
npm install -g @chec/cli
# or
yarn add -g @chec/cliPaso 2. Cree una tienda de demostración
chec demo-store
Cuando se le solicite que elija una tienda de demostración de la lista, elija "CommerceJS-Nextjs-Demo-store". Este comando también sembrará algunos datos de muestra en su cuenta chec. Para obtener más información, consulte la documentación de chec cli.
Debido a que este proyecto es una tienda completa que muestra un diseño personalizado y un flujo de usuario, hay ciertas advertencias con las que se encontrará si personaliza sus datos en el tablero de cheC. Un Gotcha está con los datos de categorías en la interfaz de usuario: las imágenes de características de categorías se agregan en la API CHEC como meta datos. Si agrega nuevos o editar los datos de las categorías de muestras sembradas, puede personalizar la imagen de la función Categorías reemplazando sus activos de imagen en public/images/collection . Los nombres de archivo deberán seguir siendo los mismos. Si planea cambiar los nombres de archivos o agregar nuevas categorías, deberá agregar nuevos meta datos. La aplicación esperará la siguiente configuración del inventario para construir y representar los componentes, por lo que si desea personalizar con su inventario en el backend, asegúrese de que usted:
public/images/collection con sus propias imágenesEsta tienda de demostración utiliza una gama de características proporcionadas por Commerce.js y alimentada por el tablero de cheC.
El carrito de compras utiliza la API del carrito Commerce.js. Los carros se persisten por hasta 30 días, y Commerce.js recuerda automáticamente los carros para los visitantes.
Commerce.js proporciona muchas herramientas para optimizar las implementaciones de pago. El pago en esta tienda de demostración utiliza:
Commerce.js proporciona funcionalidad incorporada para admitir inicios de sesión del cliente sin ningún código del lado del servidor. Esta tienda de demostración presenta una página de inicio de sesión del cliente existente y proporciona detalles sobre pedidos anteriores. La información del cliente también se utiliza para utilizar previamente el pago con los detalles conocidos del cliente.
Esta tienda de demostración está configurada con la "puerta de enlace de prueba" cheC de la caja, que proporciona una opción de pago útil mientras prueba su tienda. Además, el soporte de elementos de stripe se incluye si Stripe está configurado en el tablero de cheC.
Commerce.js <> Documentación de integración de rayas
Debe habilitar Stripe en el tablero de cheC siguiendo las instrucciones proporcionadas. Puede agregar sus teclas Sandbox para Stripe y usar una tecla API pública Sandbox CHEC para probar con Stripe. Tanto la tecla CHEC Public API como la tecla "Publicable" Stripe están configuradas en el archivo .env . Consulte el paso dos de "Configuración manual y implementación de Netlify"
Bifurca este proyecto para personalizar y extender la demostración como desee. Aquí hay algunas ideas de lo que puede hacer e instrucciones que puede tomar comercio electrónico.
