nextjs shopify
1.0.0
Demostración en vivo en: cabeza sin cabeza.milindros
Aprenda cómo comenzar con este builder + next.js + shopify Ejemplo con esta guía de video paso a paso aquí:
Requisitos previos
Esta guía asumirá que tiene el siguiente software instalado:
Ya debería tener una cuenta de Shopify y una tienda creada antes de comenzar también.
Introducción
Después de seguir esta guía, tendrá
Antes de comenzar, diríjase a Builder.io y cree una cuenta.
Dirígete a la página de configuración de tu organización y crea una clave privada, copie la clave para el siguiente paso.
A continuación, crearemos una copia del proyecto de inicio y crearemos un nuevo espacio para que su contenido viva.
En el ejemplo a continuación, reemplace <private-key> con la clave que copió en el paso anterior y cambie <space-name> a algo que sea significativo para usted, ¡no se preocupe, puede cambiarla más tarde!
git clone https://github.com/BuilderIO/nextjs-shopify.git
cd nextjs-shopify
unzip builder
npm install --global "@builder.io/cli"
builder create --key "<private-key>" --name "<space-name>" --debug
Nota: Si solo está interesado en usar este iniciador para una página de destino con Shopify, use este comando en su lugar:
unzip builder-landing-page-only
builder create --key "<private-key>" --name "<space-name>" --input builder-landing-page-only --debug
Si este fue un éxito, debe ser recibido con un mensaje que incluya una clave de API pública para su espacio de constructor recién acuñado.
Nota: Este comando también publicará un contenido de SRIVETR BUERDER.IO CMS desde el directorio ./Builder a su nuevo espacio cuando se cree.
____ _ _ _ _ _ _
| __ ) _ _ (_) | | __ | | ___ _ __ (_) ___ ___ | | (_)
| _ | | | | | | | | / _ ` | / _ | ' __| | | / _ / __| | | | |
| |_) | | |_| | | | | | | (_| | | __/ | | _ | | | (_) | | (__ | | | |
|____/ __,_| |_| |_| __,_| ___| |_| (_) |_| ___/ ___| |_| |_|
|████████████████████████████████████████| shopify-product | 0/0
|████████████████████████████████████████| product-page: writing generic-template.json | 1/1
|████████████████████████████████████████| shopify-collection | 0/0
|████████████████████████████████████████| collection-page: writing generic-collection.json | 1/1
|████████████████████████████████████████| page: writing homepage.json | 2/2
Your new space "next.js shopify starter" public API Key: 012345abcdef0123456789abcdef0123Copie la clave API pública ("012345ABCDEF0123456789ABCDEF0123" en el ejemplo anterior) para el siguiente paso.
Este proyecto de inicio utiliza archivos DotenV para configurar las variables de entorno. Abra los archivos .env.Development y .env.Production en su editor de texto favorito, y establezca el valor de BUILDER_PUBLIC_KEY en la clave pública que acaba de copiar. Puede ignorar las otras variables por ahora, las estableceremos más tarde.
+ BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
- BUILDER_PUBLIC_KEY=
SHOPIFY_STOREFRONT_API_TOKEN=
SHOPIFY_STORE_DOMAIN=Cree una aplicación personalizada para su tienda Shopify. Si aún no tiene una tienda Shopify, puede crear una tienda de desarrollo.
Al crear la aplicación privada, tendrá que establecer una serie de permisos para que Builder pueda recuperar su inventario de Shopify. Para esto, presione Storefront API en la pestaña Configuración y elija todos los siguientes permisos:
Luego, en la pestaña API Credentials , haga clic en install :
Y copie el token de acceso generado.
Acceda a su espacio recién creado seleccionándolo en la lista de espacios en su organización.
Debe ser recibido por un modal que solicite varios acceso de su tienda (desde la vista previa) y el dominio de su tienda, esto permitirá que Builder.io se comunique con la API de su tienda:
¡Complete las teclas requeridas y presione "Conecte su aplicación personalizada Shopify"!
Abre .env.develogment y .env.production nuevamente, pero esta vez establece las otras dos claves de Shopify.
BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
+ SHOPIFY_STOREFRONT_API_TOKEN=c11b4053408085753bd76a45806f80dd
- SHOPIFY_STOREFRONT_API_TOKEN=
+ SHOPIFY_STORE_DOMAIN=dylanbuilder.myshopify.com
- SHOPIFY_STORE_DOMAIN=La parte difícil ha terminado, todo lo que tienes que hacer es iniciar el proyecto ahora.
npm install
npm run dev Esto iniciará un servidor en http://localhost:3000 .
Ahora que tenemos todo configurado, comenzando a construir y publicar páginas en Builder.io, para una demostración sobre la construcción de algo similar a la página de inicio de la demostración, siga los pasos en este breve video
Puede implementar este código en cualquier lugar que desee: puede encontrar muchas opciones de implementación para Next.js aquí. Las siguientes opciones admiten instalaciones de un clic y son muy fáciles de comenzar con:
