nextjs shopify
1.0.0
Demo hidup di: headless.builders
Pelajari cara memulai dengan pembangun ini + selanjutnya.
Prasyarat
Panduan ini akan menganggap bahwa Anda memiliki perangkat lunak berikut yang diinstal:
Anda seharusnya sudah memiliki akun Shopify dan toko yang dibuat sebelum memulai juga.
Perkenalan
Setelah mengikuti panduan ini, Anda akan memiliki
Sebelum kita mulai, pergilah ke builder.io dan buat akun.
Buka halaman Pengaturan Organisasi Anda dan buat kunci pribadi, salin kunci untuk langkah berikutnya.
Selanjutnya, kami akan membuat salinan proyek starter, dan membuat ruang baru untuk kontennya untuk tinggal.
Dalam contoh di bawah ini, ganti <private-key> dengan kunci yang Anda salin di langkah sebelumnya, dan ubah <space-name> menjadi sesuatu yang bermakna bagi Anda-jangan khawatir, Anda dapat mengubahnya nanti!
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
Catatan: Jika Anda hanya tertarik menggunakan starter ini untuk halaman arahan dengan Shopify menggunakan perintah ini sebagai gantinya:
unzip builder-landing-page-only
builder create --key "<private-key>" --name "<space-name>" --input builder-landing-page-only --debug
Jika ini sukses, Anda harus disambut dengan pesan yang mencakup kunci API publik untuk ruang builder.io Anda yang baru dicetak.
Catatan: Perintah ini juga akan menerbitkan beberapa konten pembangun starter.io CMS dari direktori ./builder ke ruang baru Anda saat dibuat.
____ _ _ _ _ _ _
| __ ) _ _ (_) | | __ | | ___ _ __ (_) ___ ___ | | (_)
| _ | | | | | | | | / _ ` | / _ | ' __| | | / _ / __| | | | |
| |_) | | |_| | | | | | | (_| | | __/ | | _ | | | (_) | | (__ | | | |
|____/ __,_| |_| |_| __,_| ___| |_| (_) |_| ___/ ___| |_| |_|
|████████████████████████████████████████| 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: 012345abcdef0123456789abcdef0123Salin kunci API publik ("012345ABCDEF0123456789ABCDEF0123" dalam contoh di atas) untuk langkah berikutnya.
Proyek starter ini menggunakan file dotenv untuk mengonfigurasi variabel lingkungan. Buka file .env.development dan .env.production di editor teks favorit Anda, dan atur nilai BUILDER_PUBLIC_KEY ke kunci publik yang baru saja Anda salin. Anda dapat mengabaikan variabel lain untuk saat ini, kami akan mengaturnya nanti.
+ BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
- BUILDER_PUBLIC_KEY=
SHOPIFY_STOREFRONT_API_TOKEN=
SHOPIFY_STORE_DOMAIN=Buat aplikasi khusus untuk toko Shopify Anda. Jika Anda belum memiliki toko Shopify, Anda dapat membuat toko pengembangan.
Saat membuat aplikasi pribadi, Anda harus menetapkan sejumlah izin sehingga pembangun dapat mengambil inventaris Shopify Anda. Untuk pers ini pada Storefront API di tab Konfigurasi dan pilih semua izin berikut:
Kemudian di tab API Credentials , klik install :
Dan salin token akses yang dihasilkan.
Akses ruang Anda yang baru dibuat dengan memilihnya dari daftar spasi di organisasi Anda.
Anda harus disambut oleh modal yang meminta berbagai Toke akses etalase Anda (dari langkah pratinjau) dan domain toko Anda, ini akan memungkinkan builder.io berkomunikasi dengan API toko Anda:
Isi tombol yang diperlukan dan tekan "Hubungkan Aplikasi Kustom Shopify Anda"!
Buka .env.development dan .env.production lagi, tetapi kali ini mengatur dua kunci Shopify lainnya.
BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
+ SHOPIFY_STOREFRONT_API_TOKEN=c11b4053408085753bd76a45806f80dd
- SHOPIFY_STOREFRONT_API_TOKEN=
+ SHOPIFY_STORE_DOMAIN=dylanbuilder.myshopify.com
- SHOPIFY_STORE_DOMAIN=Bagian yang sulit sudah berakhir, yang harus Anda lakukan adalah memulai proyek sekarang.
npm install
npm run dev Ini akan memulai server di http://localhost:3000 .
Sekarang kami memiliki semua pengaturan, mulailah membangun dan menerbitkan halaman di builder.io, untuk demo membangun sesuatu yang mirip dengan beranda demo, ikuti langkah -langkah dalam video pendek ini
Anda dapat menggunakan kode ini di mana pun Anda suka - Anda dapat menemukan banyak opsi penempatan untuk Next.js di sini. Opsi berikut mendukung instalasi satu klik dan sangat mudah untuk memulai:
