yournextstore
1.0.0
demo.yournextstore.com?
Apoyamos oficialmente la versión actual de LTS: 20 al momento de escribir. YNS debería trabajar en las versiones 18, 20 y 22. Si está utilizando una de esas versiones y encuentra un problema, ¡denuncértelo!
Siga las instrucciones para su sistema operativo que se encuentra aquí: nodejs.org/en/download
Apoyamos oficialmente PNPM versión 9, pero haremos todo lo posible para mantenerlo compatible con NPM e hilo.
La forma más fácil de instalar PNPM es a través de Node.js CorePack. Dentro de la carpeta con YNS, ejecute estos comandos:
corepack enable
corepack installAlternativamente, siga las instrucciones para su sistema operativo que se encuentra aquí: PNPM.IO/Installation
YNS está muy integrado con Stripe, por lo que necesita una cuenta de rayas para usar su próxima tienda. Siga las instrucciones de Stripe para crear una cuenta.
Es importante recordar que Stripe funciona en dos modos diferentes: modo de prueba y modo de producción . Para fines de desarrollo y pruebas locales, debe usar el modo de prueba . De esta manera, Stripe nunca cobrará dinero real, y puede usar credenciales de prueba especiales, como números de tarjeta de crédito y números BLIK para completar los pagos. Para obtener información más detallada, consulte la documentación de Stripe en docs.stripe.com/testing.
Una vez que esté listo para vender sus productos a clientes reales, debe cambiar el modo de prueba al modo de producción en Stripe y generar nuevas credenciales.
Consejo
Este paso requerirá una verificación adicional de Stripe, por lo que le sugerimos que comience el proceso de inmediato.
Para que YNS funcione, deberá definir algunas variables ambientales. Para el desarrollo y las pruebas locales, puede crear un archivo .env vacío y copiar el contenido de .env.example en él.
Para establecer variables ENV en la producción, deberá consultar la documentación de su proveedor de alojamiento elegido.
ENABLE_EXPERIMENTAL_COREPACK - solo 1NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - clave publicable desde stripe.STRIPE_SECRET_KEY - clave secreta de stripe.STRIPE_CURRENCY : esto se utiliza para determinar la moneda de su tienda. Actualmente, solo se permite una sola moneda, y debería ser un código ISO de tres letras (por ejemplo, usd ).NEXT_PUBLIC_URL : opcional en Vercel, la dirección de su tienda sin la barra de corte, es decir, https://demo.yournextstore.com . Al construir por primera vez, debe configurarla en cualquier URL válida, es decir http://localhost:3000 .NEXT_PUBLIC_UMAMI_WEBSITE_ID - ID de sitio web de Umami para análisisNEXT_PUBLIC_NEWSLETTER_ENDPOINT - Vista previa : el punto final para el formulario de boletín en el futuro. Debe aceptar solicitudes de publicación con un JSON { email: string } y return json { status: number } .STRIPE_WEBHOOK_SECRET - Vista previa : Stripe Webhook Secret para manejar eventos de Stripe. Lea más a continuación.ENABLE_STRIPE_TAX - Vista previa : Establezca en cualquier valor (es decir, 1 ) para habilitar el impuesto de rayas en YNS. Lea más a continuación.NEXT_PUBLIC_LANGUAGE - La ubicación de la tienda (es decir, en-US ) Después de seguir los pasos anteriores, ejecute pnpm install para instalar las dependencias requeridas y luego ejecute pnpm dev para iniciar el servidor de desarrollo en su máquina. Su próxima tienda estará disponible en Localhost: 3000
Su próxima tienda obtiene todos los productos, precios, descripciones y categorías de Stripe. Entonces, si ya conoces a Stripe, ¡te sentirás como en casa!
Debe agregar productos al tablero de rayas para mostrar en YNS. Después de iniciar sesión, haga clic más en la barra lateral izquierda y seleccione Catálogo de productos . También puede usar el enlace directo:
Luego, haga clic en Agregar producto y complete toda la información requerida:
Además, su próxima tienda utiliza metadatos del producto para proporcionar más información de contexto sobre los productos. Puede especificar los siguientes campos de metadatos:
| Campo | Requerido | Descripción |
|---|---|---|
slug | Sí | La babosa del producto se usa para URL. Debe ser único excepto las variantes. |
category | No | La categoría de productos utilizada para agrupar productos. |
order | No | El pedido de productos utilizado para clasificar productos. Los números más bajos se muestran primero. |
variant | No | La variante de la variante del producto. Lea a continuación para más detalles. |
Ahora debería ver todos los productos agregados en su próxima tienda.
Su próxima tienda admite variantes simples de productos. Para crear un producto con variantes, debe agregar múltiples productos para rayar con el mismo campo de metadatos slug . YNS utiliza el campo de metadatos variant para distinguir entre diferentes variantes del mismo producto. Por ejemplo, si tiene una camiseta en múltiples tamaños, puede crear tres productos con la slug de t-shirt y valores variant de small , medium y large .
Las variantes se muestran en la página del producto. Las variantes pueden tener diferentes precios, descripciones e imágenes. Es importante tener en cuenta que la category debe ser la misma para todas las variantes del mismo producto para la mejor experiencia de navegación.
Nota
En el futuro, planeamos agregar la posibilidad de editar productos y variantes dentro de un tablero de administración incorporado. Si tiene alguna idea o sugerencia, ¡háganoslo saber!
Su próxima tienda utiliza Stripe Webhooks para manejar eventos de Stripe. Actualmente, el punto final se utiliza para revalidar automáticamente la página CART y crear transacciones fiscales (si está habilitada). Para configurar Webhooks, siga los documentos de Stripe. Los pasos exactos dependen de si ha activado Stripe Workbench en su cuenta de Stripe: docs.stripe.com/webhooks#add-a-webhook-endpoint.
El punto final para el webhook es https://{YOUR_DOMAIN}/api/stripe-webhook . El único evento requerido es payment_intent.succeeded . Cuando el webhook se configure en Stripe, establezca la variable de entorno STRIPE_WEBHOOK_SECRET en la clave secreta creada por Stripe.
Nota
En el futuro, planeamos agregar más eventos al webhook para mejorar la experiencia del usuario.
Su próxima tienda viene con una vista previa de Stripe Tax Support. Para habilitarlo, establezca la variable de entorno ENABLE_STRIPE_TAX en cualquier valor (es decir, 1 ).
Para que esta característica funcione, debe establecer su configuración de impuestos en el tablero de rayas: tablboard.stripe.com/register/tax. Cuando se habilitan y configuran, los impuestos se calcularán automáticamente y se agregarán al precio total del producto en función de:
Advertencia
Esta característica todavía está en la etapa inicial, y podría haber casos de borde que no son compatibles. Estamos trabajando activamente en ello, así que si encuentra algún problema o tiene alguna sugerencia, ¡háganoslo saber!
Para implementar en VERCEL, haga clic en el siguiente botón, configure su repositorio de GitHub y variables de entorno, y haga clic en Implementar . Asegúrese de establecer la variable ENABLE_EXPERIMENTAL_COREPACK en 1 .
Descripción Próximamente.
Para implementar en Docker, siga estos pasos:
pnpm run docker:build .pnpm run docker:run . YNS evoluciona cada día, y buscamos activamente comentarios sobre qué mejorar. Si tiene alguna pregunta o problema, no dude en ponerse en contacto con nosotros en nuestro servidor Discord.
structuredClone para pasar datos de los componentes del servidor al cliente. ¿Por qué? Solo se pueden pasar directamente ciertos tipos de datos del servidor al cliente. Los datos de Stripe SDK a menudo contienen instancias de clase. Para trabajar en torno a esto, usamos structuredClone para eliminarlos y pasar objetos viejos simplemente al cliente.
