Descarga demo store - Descarga del código fuente demo store

demo store

Otras categorias

1.0.0

Descargar

Tienda de demostración de la capa de comercio

Esta tienda de demostración es una solución de comercio electrónico completamente estática (con capacidad SSR) impulsada por Commerce Layer. La tienda tiene todas las funciones y está en pleno funcionamiento, sin necesidad de servicios de terceros. Puedes personalizar fácilmente el tuyo propio con diferentes niveles de personalización. Sigue leyendo para aprender más.

El proyecto Demo Store consta de dos repositorios, este es la plantilla de GitHub.

¿Qué es la capa de comercio?

Commerce Layer es una API de comercio multimercado y un sistema de gestión de pedidos que le permite agregar capacidades de compras globales a cualquier sitio web, aplicación móvil, chatbot, dispositivo portátil, de voz o de IoT, con facilidad. Componga su pila con las mejores herramientas que ya domina y ama. Haga que cualquier experiencia se pueda comprar, en cualquier lugar, a través de una API increíblemente rápida, segura y de nivel empresarial.

Tabla de contenido

Características
como funciona
Empezando
Personalización
Desplegar
¿Necesitar ayuda?
Solución de problemas
Licencia

Características

Decidimos crear la Tienda de demostración eliminando todos los servicios de terceros que normalmente se utilizan para crear una experiencia integral de sitio web de comercio electrónico (CMS, búsqueda, PIM, etc.).

Todo lo relacionado con el contenido se almacena como archivos JSON. Para crear su propia tienda de demostración, deberá crear estos archivos manualmente o mediante scripts.

La tienda de demostración viene con:

un motor de búsqueda integrado con búsqueda de facetas impulsado por fuse.js
una gestión completa del catálogo de productos con taxonomías y taxones
gestión de variantes de un solo producto
Capacidades multilingües para facilitar las ventas internacionales.
todo el amplio conjunto de funciones proporcionadas de fábrica por las API de Commerce Layer (listas de precios en múltiples divisas, modelos de inventario que admiten múltiples ubicaciones de existencias y estrategias de cumplimiento, pasarelas de pago específicas del mercado, opciones de entrega y cuentas de operador, etc.)

La integración con Commerce Layer se logra aprovechando algunas de nuestras herramientas de desarrollo de código abierto, específicamente:

la biblioteca de autenticación JS
el SDK de JavaScript
los componentes de reacción
el carrito alojado
el pago alojado

como funciona

El proyecto Demo Store consta de dos repositorios que puede aprovechar para crear su propia tienda, según la cantidad de personalización que necesite agregar:

demo-store
Esta es una plantilla de GitHub que utiliza el demo-store-core que se menciona a continuación como un submódulo de git. Si está satisfecho con las funciones y la apariencia de la tienda de demostración de Commerce Layer, le sugerimos que siga este camino. No tendrá que preocuparse por todo el código fuente y podrá concentrarse solo en sus datos y contenido. Además de eso, obtendrás actualizaciones gratuitas casi sin riesgo simplemente ejecutando:
```
git submodule update --remote
npm install
```
demo-store-core
Este repositorio contiene el código fuente. Si necesita personalizar completamente su tienda (comportamiento, UI, UX, etc.), solo tiene que bifurcar este repositorio y crear el suyo propio. Esta es también la manera de contribuir.
️ Tenga en cuenta que si sigue este camino y comienza a desviarse demasiado del código fuente original, corre el riesgo de perder todas las actualizaciones futuras o no poder replicarlas.

Empezando

Si no tiene experiencia con Commerce Layer, puede comenzar creando una cuenta (¡es gratis!) y siguiendo el tutorial de incorporación.

Importante

Tenga en cuenta que para configurar una tienda de demostración necesita una organización correctamente configurada con al menos algunos productos y un mercado.

Si prefiere comenzar desde cero, puede crear una nueva organización y usar los siguientes comandos para configurar un proyecto similar a una tienda de demostración de Commerce Layer.

Configurando tu organización

Una vez creada la organización, es necesario crear dos clientes API: un canal de ventas y una integración .

Si aún no lo ha hecho, instale la CLI de Commerce Layer y dos de sus complementos: el complemento de siembra y el complemento de importaciones:

npm install -g @commercelayer/cli

commercelayer plugins:install seeder
commercelayer plugins:install imports

Ahora puede iniciar sesión en su cliente API de integración desde la CLI:

commercelayer applications:login 
  --clientId Oy5F2TbPYhOZsxy1tQd9ZVZ... 
  --clientSecret 1ZHNJUgn_1lh1mel06gGDqa... 
  --organization my-awesome-organization 
  --alias cli-admin

Construyendo tu tienda

Una vez que su organización esté configurada, para construir su tienda debe seguir algunos pasos simples... ¡comencemos!

1. Crea un nuevo repositorio

Cualquiera que sea la ruta que elijas, primero que nada, debes crear un nuevo repositorio para tu tienda:

Si decidió conservar la plantilla demo-store solo necesita hacer clic en "Usar esta plantilla" en la página de inicio del repositorio en GitHub y luego ejecutar:

git clone < your-repository-url > my-new-project
cd my-new-project
git submodule update --init
npm install

cp ./demo-store-core/packages/website/.env.sample.submodule .env.local

cp -r ./demo-store-core/packages/website/data/json ./data/json

Si decidió bifurcar el repositorio demo-store-core puede ejecutar esto en su lugar:

git clone < your-repository-url > my-new-project
cd my-new-project
npm install

cp ./packages/website/.env.sample ./packages/website/.env.local

2. Establecer las variables de entorno.

Edite .env.local y complete toda la información que falta:

 # this is the 'sales channel' client id
NEXT_PUBLIC_CL_CLIENT_ID =er34TWFcd24RFI8KJ52Ws6q...

3. Sembrar los datos

Este paso es opcional. Si ya tiene una organización configurada correctamente en su cuenta de Commerce Layer, puede omitirla.

El siguiente script completará su organización con todos los recursos que necesita para crear un comercio electrónico multimercado con Commerce Layer (los que estamos usando para nuestra tienda de demostración).

npm run seeder:seed -ws --if-present

Si el comando anterior se ejecuta sin errores, vaya al paso 4. De lo contrario, aún puede inicializar su organización con datos de muestra utilizando la CLI ejecutando lo siguiente:

commercelayer seeder:seed -b custom -n demo_store_full -u ./demo-store-core/packages/setup/

4. Elige los países donde vas a vender

El archivo json/countries.json contiene una lista de países disponibles para tu comercio electrónico. Puedes cambiarlo con tu editor preferido. Sólo asegúrese de reemplazar todos los resultados de "market": xxx con los mercados relacionados de su organización. Puede obtener la lista de sus mercados desde el panel de administración de Commerce Layer o ejecutando este comando:

npm run markets -ws --if-present

5. Véalo en acción

npm run dev

# http://localhost:3000/

Administrar actualizaciones

Siempre puede encontrar el código más reciente de demo-store-core en su rama main .

Para actualizar su tienda de demostración con los últimos cambios, simplemente puede ejecutar:

git submodule update --remote
npm install

A veces puede suceder que una nueva versión principal contenga cambios importantes. En este caso, al actualizar a la última versión, su tienda de demostración podría dejar de funcionar y deberá resolver manualmente todos los problemas siguiendo las notas de la versión.

Si lo desea, puede recibir una notificación de GitHub tan pronto como se publique una nueva versión.

Personalización

Cuando utiliza nuestra plantilla de Tienda de demostración, puede personalizar tres elementos principales: datos de contenido, configuraciones regionales y archivos de configuración.

️ Mejoraremos continuamente nuestra Tienda de demostración para agregar nuevas funciones y optimizar las existentes. Cuando actualiza a la última versión, la compilación podría fallar. Eche un vistazo a las notas de la versión para comprender cómo solucionarlo actualizando sus archivos personalizados.

archivos de datos JSON

Como se mencionó anteriormente, nuestra Tienda de demostración se basa en un conjunto de datos que se almacenan como archivos JSON, para desvincularlos de cualquier servicio de terceros. Para construir tu tienda tendrás que crear y administrar estos archivos.

Los archivos JSON se encuentran en data/json/ , pero puede elegir una posición diferente cambiando la variable de entorno NEXT_PUBLIC_JSON_DATA_FOLDER .

Los archivos de definición de tipo se encuentran en packages/types/src/json/ . Estamos utilizando zod para la validación del esquema. Eche un vistazo a estos archivos para comprender qué estructura debe seguir.

Cuando hayas terminado con todos los cambios podrás comprobar si todo está correcto ejecutando:

 npm run test:data

Archivos de datos locales

Nuestra tienda de demostración es un sitio web multilingüe. Cuando creó sus datos en el paso anterior, probablemente notó que algunos campos estaban localizados. Puede agregar nuevos idiomas o cambiar las traducciones existentes.

Los archivos JSON de configuración regional se encuentran en data/locales/ , pero puede elegir una posición diferente cambiando la variable de entorno NEXT_PUBLIC_LOCALES_DATA_FOLDER .

Haga lo siguiente para comenzar a personalizar las configuraciones regionales:

cp -r ./demo-store-core/packages/website/data/locales ./data/locales

 # .env.local
NEXT_PUBLIC_LOCALES_DATA_FOLDER =../../../data/locales/

Archivos de configuración

Los archivos de configuración se encuentran en config/ , pero puede elegir una posición diferente cambiando la variable de entorno NEXT_PUBLIC_CONFIG_FOLDER .

Hay tres archivos de configuración que puede administrar:

general.config.js
Este archivo contiene la configuración general.
facets.config.js
Este es el archivo de configuración de facetas. Puede elegir el orden en que se muestran en el panel de filtro, su apariencia y las reglas de clasificación de sus valores.
variants.config.js
Este es el archivo de configuración de variantes. Puedes elegir el orden en el que se muestran en la página de detalles del producto y su apariencia.

Haga lo siguiente para comenzar a personalizar la configuración:

cp -r ./demo-store-core/packages/website/config ./config

 # .env.local
NEXT_PUBLIC_CONFIG_FOLDER =../../../config/

Variables de entorno adicionales

Hay algunas variables de entorno que puede utilizar para personalizar su tienda. Para obtener una lista y una descripción exhaustivas, puede consultar el archivo adicional-env.d.ts.

Desplegar

Puedes implementar la Tienda de demostración donde prefieras. Sólo necesitas:

Configure todas las variables de entorno en el sistema que usará para ejecutar la compilación, según sus necesidades.
Decida si desea optar por la generación de sitios estáticos o la representación del lado del servidor.

La Demo Store está diseñada para ser SSG ante todo, pero puedes cambiar a SSR en un instante. Probamos algunas formas de implementarlo (por ejemplo, usando GitHub Workflow, Netlify, Vercel, etc.) y puede encontrar más información al respecto aquí. Si lo hizo de manera diferente o utilizó otros servicios y desea compartir los pasos con la comunidad, únase a la discusión y ¡gracias de antemano!

Generación de sitios estáticos

Para crear e implementar la tienda de demostración:

Establezca la siguiente variable de entorno en consecuencia:
```
 NEXT_PUBLIC_DATA_FETCHING =ssg
```
Ejecute npm run build para crear una compilación de producción optimizada estáticamente de su aplicación.
Copie la carpeta demo-store-core/packages/website/out a su alojamiento estático preferido.

Representación del lado del servidor

La Tienda de demostración se puede implementar en cualquier proveedor de alojamiento que admita Node.js. Para hacer eso:

Establezca la siguiente variable de entorno en consecuencia:
```
 NEXT_PUBLIC_DATA_FETCHING =ssr
```
Ejecute npm run build para crear una compilación de producción optimizada de su aplicación.
Ejecute npm start para iniciar el servidor Node.js en modo de producción.

¿Necesitar ayuda?

Únase a la comunidad Discord de Commerce Layer.
Abrir una nueva discusión de preguntas y respuestas
Envíenos un ping en Bluesky, X (anteriormente Twitter) o LinkedIn.
¿Hay algún error? Cree un problema en este repositorio.

Solución de problemas

P. Incluso si cambié NEXT_PUBLIC_JSON_DATA_FOLDER , NEXT_PUBLIC_LOCALE_DATA_FOLDER o NEXT_PUBLIC_CONFIG_FOLDER , el sitio web todavía hace referencia a archivos anteriores.
R. Estas variables de entorno se utilizan como alias en Webpack. A partir de Webpack 5, se introdujo el almacenamiento en caché para compilaciones más rápidas. Cambiar estas variables de entorno no invalidará el caché de Webpack. Tienes que eliminar la carpeta .next manualmente o ejecutando:
```
 # update the path if needed
rm -rf demo-store-core/packages/website/.next/
```