next shopify starter
1.0.0
Demo en vivo • Ver más entrantes • Sígueme en Twitter
Esta es una tienda de comercio electrónico totalmente funcional que utiliza CSS Next.js + Tailwind en la parte delantera y aprovecha la API de Shopify Storefront para interactuar con su backend de Shopify. Puedes ver una demostración en vivo aquí.
Utilizamos GraphQL para consultar nuestros datos de Shopify y almacenar la información del carrito en LocalStorage para persistir en la sesión de usuario. Finalmente, usamos Shopify Checkout para que el usuario compre los artículos. Puedes ver este juego en la tienda de ejemplo. Sí, la tienda es funcional y puedes comprar las pegatinas. ?
| De oficina | Móvil |
 |  |
| Listados | Carro |
 |  |
Por defecto, la tienda está configurada para consultar y mostrar todos los productos en una colección. Puede extender esto para consultar múltiples colecciones o toda su tienda.
Las consultas GRAPHQL están codificadas para extraer el número máximo de productos/variantes/imágenes establecidas en 250 por Shopify. Hice esto para mantener las cosas simples. La paginación habría complicado las consultas y 250 artículos son suficientes para la mayoría de los casos de uso.
Si necesita paginación, deberá realizar un seguimiento del campo del cursor y seguir consultando los datos hasta que obtenga todos los elementos.
Cree un archivo .env.local en el directorio raíz. Necesita agregar estas 4 variables:
NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_COLLECTION=
NEXT_PUBLIC_LOCAL_STORAGE_NAME=
Next_public_shopify_store_front_access_token y next_public_shopify_store_domain (será algo así como Domain_name.myshopify.com) para acceder a la API Shopify Storefront (asegúrese de haberlo configurado en su tienda Shopify. Vea los documentos para obtener más información.
Next_public_shopify_collection es el nombre de la colección en la que desea obtener y Next_public_local_storage_name es el nombre de la clave en la que sus usuarios almacenarán la información de su carrito. El nombre exacto no es tan importante, aunque le sugiero que lo haga único, por lo que es menos probable que se enfrente con otros objetos almacenados. Algo como YourStorenameshopifyStore donde su nombre de Shopify es el nombre de su tienda Shopify será suficiente.
Cambie en el directorio del proyecto y ejecute el siguiente comando:
yarn && yarn dev
Puede actualizar los metadatos de su sitio en el archivo next.config.js.
env: {
siteTitle: 'Your Company',
siteDescription: 'Your company description.',
siteKeywords: 'your company keywords',
siteUrl: 'https://doggystickers.xyz',
siteImagePreviewUrl: '/images/main.jpg',
twitterHandle: '@your_handle'
}
Puede actualizar la paleta de colores en el archivo tailwind.config.js.
colors: {
palette: {
lighter: '',
light: '',
primary: '',
dark: '',
},
},
Actualice el archivo manifest.json y los iconos en la carpeta pública/imágenes/iconos.
Puede usar herramientas gratuitas en línea como https://realfavicongenerator.net/ para generar rápidamente todos los diferentes tamaños de iconos y el archivo favicon.ico.
Puede implementar esto utilizando cualquier número de servicios. Vercel y Netlify son los que prefiero y muy fáciles de configurar y sincronizar con su repositorio de GitHub.
La tienda se inspiró en la impresionante tienda de botes de Gatsby, así como en innumerables otros desarrolladores mucho más capaces que yo, que publicó su increíble trabajo de forma gratuita.
He abierto este código bajo la licencia del MIT con la esperanza de que si esto ayuda a las personas a navegar por las tiendas de comercio electrónico Jamstack como la tienda Gatsby Swag lo hacía cuando comencé.
Si lo encontraste útil y quieres mostrar tu agradecimiento, ¿puedes comprarme un café?
¡También puedes comprar algunas pegatinas para perros en la tienda! ?
