next shopify storefront

? Siguiente tienda Shopify

Un carrito de compras construido con TypeScript, Tailwind CSS, UI sin cabeza, Next.js, React.js, Shopify Hydrogen React, ... y Shopify Storefront Graphql API.

Tutoriales

• ¿Cómo organizo un proyecto Sostenible Next.js?
• ¿Cómo manejo los datos modulares de TypeSafe en Next.js?
• ¿Cómo interactúo de manera segura con la API GraphQL en Next.js?
• ¿Cómo implemento el selector de variantes dinámicas para Shopify en Next.js?

Experiencia

Estas son mis experiencias cuando he estado trabajando en este proyecto:

• Diseñando y construyendo la tienda desde cero.
• Creación de servicios públicos siguientes para obtener datos modulares a prueba de seguridad.
• Crear utilidades de Shopify para simplificar la selección de variantes.
• Uso de GraphQL Zeus para interactuar con la API de la tienda.
• Uso de Shopify Hydrogen para implementar características de la tienda.
• Usando CSS y UI sin cabeza para construir la interfaz de usuario de la tienda.
• Uso de Next.js para regeneración estática incremental.
• Uso del próximo SEO para implementar la optimización de motores de búsqueda.
• Uso de TypeScript para crear de forma segura los ganchos y componentes React.
• Uso de React Use ganchos para acelerar el desarrollo de componentes.
• Usando Swiper para crear controles deslizantes hermosos, tocables y receptivos.
• Usando Eslint, más bonito para seguir las mejores prácticas de JS.

Si le gusta este proyecto, presione el botón de la estrella para marcarlo ️

Demostración

Puede visitar aquí para ver la demostración: https://next-shopify-storefront.vercel.app/

Instalación

Clonar el código fuente en su computadora.

git clone https://github.com/maxvien/next-shopify-storefront.git

Instale las dependencias del proyecto.

npm install

Uso

Primero, debe establecer las siguientes variables de entorno en el archivo .env o sus plataformas de implementación.

• NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION

Puede seguir la documentación de la API de Shopify Storefront GraphQL para obtener información de la API de la tienda.

Desarrollar

Desarrolle el proyecto en modo de desarrollo.

npm run dev

Construir

Construya el proyecto en modo de producción.

npm run build

Comenzar

Inicie el proyecto en modo de producción.

npm run start

Hilas

Analice el código para encontrar problemas con eslint y prettier .

npm run lint

Solucionar automáticamente problemas.

npm run fix

Extensiones de Código de Visual Studio

Para acelerar su productividad, puede instalar estas extensiones:

• Eslint
• Más bonito
• Visual Studio Intellicode
• Viento de cola CSS IntelliSense
• Soporte de idiomas postcss

Proyectos relacionados

• Shopify Data Faker • Una herramienta de desarrollo de Shopify para generar datos de almacenamiento ficticio.
• Bootstrap Shopify Temo • Un tema gratuito de Shopify construido con Bootstrap, BEM, Liquid, Sass, Esnext, Tema Tools, ... y Webpack.
• Next Shopify Storefront (V2) • Un carrito de compras construido con TypeScript, Emotion, Next.js, React.js, React Consult, Shopify Storefront GraphQL API, ... y UI de material.
• Next Shopify Storefront (V1) • Un carrito de compras construido con TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront Graphql API, ... y UI de material.

Historia de la estrella