commercejs nextjs demo store
1.0.0
Toko demo eCommerce yang penuh kesetiaan tinggi yang dibangun menggunakan Commerce.js SDK dan Next.js dengan penempatan langsung ke Netlify.
Catatan
Readme ini akan memandu Anda untuk bangun dan berlari dengan template eCommerce yang sepenuhnya. Kami telah mengkonfigurasi templat ini untuk Anda ke penyebaran satu klik langsung ke Netlify. Atau, Anda dapat menggunakan platform hosting pilihan secara manual.
Untuk tutorial terperinci lengkap tentang membangun aplikasi eCommerce Jamstack ini, silakan pergilah ke sini.
yarn global add @chec/cli Sekarang setelah Anda menginstal CHEC CLI secara global, Anda akan dapat mengakses daftar chec [COMMANDS] , salah satunya mendaftar untuk akun CHEC. Ayo lanjutkan dan setel itu!
# Open the Chec registration page in your browser
chec registerIkuti sisa walk-through untuk mengatur detail pedagang Anda. Atau, Anda dapat pergi ke sini untuk mendaftar untuk akun CHEC.
Penyebaran satu klik memungkinkan Anda untuk menghubungkan Netlify ke akun Github Anda untuk mengkloning repositori commercejs-nextjs-demo-store dan menggunakannya secara otomatis. Pastikan untuk pergi ke Netlify dan mendaftar untuk akun sebelum mengklik tombol Deploy.
Dengan mengklik tombol di atas, Anda akan dinavigasi ke halaman penyebaran langsung Netlify dengan repositori proyek dilewatkan sebagai parameter dalam URL. Klik tombol Hubungkan ke GitHub , beri nama repositori Anda dan masukkan kunci publik ini di input kunci publik CHEC . Harap dicatat bahwa untuk tujuan membuat Anda bangun dan berjalan dengan pratinjau penyebaran langsung dari toko demo, kami memberi Anda kunci publik dari akun pedagang demo kami. Sekarang, simpan & gunakan situs Anda.
Harap perhatikan bangunan awal akan gagal jika Anda memasukkan kunci publik Anda alih -alih kunci pedagang demo yang disediakan. Penyebaran satu klik dimaksudkan untuk tujuan presentasi untuk memutar penyebaran cepat. Menggunakan akun pedagang Anda berarti Anda perlu memiliki data yang sesuai seperti beberapa aset dan kategori yang terkait dengan produk Anda. Jika Anda ingin menggunakan akun pedagang Anda, silakan ikuti langkah -langkah pengaturan manual di bawah ini.
Pengaturan manual melibatkan mengkloning repo ke lingkungan lokal Anda, menyemai data sampel yang disediakan ke dalam akun CHEC Anda dan menyebarkan ke netlify.
Langkah 1. Kloning repo dan instal dependensi
# Clone the repository locally, optionally rename the repo, change into the directory
git clone https://github.com/chec/commercejs-nextjs-demo-store.git chec-store
# Change into the directory and install dependencies
cd chec-store && yarnLangkah 2. Siapkan variabel lingkungan Anda
Ganti sampel .env.example DotenV file di root proyek untuk menyimpan CHEC public_key Anda serta secret_key Anda.
# Copy from source file to destination file .env
cp .env.example .env Anda dapat mengakses tombol API Anda di bawah dalam pengaturan dasbor CHEC Anda, kemudian navigasikan ke tab Kembangkan untuk menyalin kunci publik dan kunci rahasia Anda. Ganti NEXT_PUBLIC_CHEC_PUBLIC_KEY yang disediakan sendiri dan isi CHEC_SECRET_KEY Anda di file .env . Kunci rahasia diperlukan agar skrip benih memiliki izin yang tepat untuk menyemai data sampel dalam /seeds ke dalam akun CHEC Anda. Lepaskan kunci rahasia setelah data diunggulkan.
# .env
# Fill in your public key and secret key
NEXT_PUBLIC_CHEC_PUBLIC_KEY =
CHEC_API_URL = https://api.chec.io
# Secret key is used with chec/seeder to access your Chec account to seed it with sample data
CHEC_SECRET_KEY =
NODE_ENV =File ini dimaksudkan untuk tidak berkomitmen untuk kontrol sumber dan juga akan disembunyikan di browser file.
Langkah 3. Seed Data yang diperlukan untuk memberi daya pada toko CHEC Anda dan memulai lingkungan pengembangan Anda (diperlukan untuk pengaturan awal).
# Seed data in /seeds into your Chec account
yarn seed
# Run your development environment on http://localhost:3000
yarn devSekarang pergilah ke http: // localhost: 3000 Setelah memulai pengembangan Anda, situs Anda sekarang harus diisi dengan data sampel!
Jika Anda mengganti produk atau kategori sampel, Anda dapat menyesuaikan gambar kategori Anda sendiri di bawah `publik/gambar/koleksi. Lihat info lebih lanjut tentang kustomisasi data di bawah ini.
Langkah 5. Buat perubahan yang diperlukan yang Anda butuhkan dan dorong kode ke repositori di GitHub atau platform pilihan Anda.
Langkah 6. Menyebarkan situs Anda
Pastikan untuk mendaftar ke akun Netlify dan masuk ke sana. Klik tombol baru dari tombol Git dan berikan akses untuk memilih repo Anda. Pengaturan build Anda secara otomatis diisi untuk Anda dari netlify.toml di templat. Untuk memasuki variabel lingkungan Anda, klik Tampilkan Advanced kemudian variabel baru dan isi input kunci sebagai NEXT_PUBLIC_CHEC_PUBLIC_KEY dan input nilai dengan kunci publik Anda. Anda dapat mengakses tombol API Anda di dasbor CHEC Anda di bawah pengaturan, lalu navigasikan ke tab pengembang untuk menyalin kunci publik Anda
Sekarang silakan dan klik "Situs Deploy" untuk melihat situs langsung Anda!
Perintah ini akan mengunduh proyek contoh ini dari GitHub dan menginisialisasi di mesin Anda. Anda akan bebas mengedit kode yang diunduh dan bermain -main dengan Commerce.js sesudahnya.
Langkah 1. Pasang CHEC CLI
npm install -g @chec/cli
# or
yarn add -g @chec/cliLangkah 2. Buat toko demo
chec demo-store
Ketika diminta untuk memilih toko demo dari daftar, pilih "CommerCejs-Nextjs-Demo-store". Perintah ini juga akan menyemai beberapa data sampel ke akun CHEC Anda. Untuk informasi lebih lanjut, lihat dokumentasi CHEC CLI.
Karena proyek ini adalah etalase yang lengkap yang menampilkan desain khusus dan aliran pengguna, ada peringatan tertentu yang akan Anda temui jika Anda menyesuaikan data Anda di dasbor CHEC. Satu gotcha dengan data kategori di UI: Kategori fitur gambar ditambahkan dalam API CHEC sebagai data meta. Jika Anda menambahkan baru atau mengedit data kategori sampel unggulan, Anda dapat menyesuaikan gambar fitur kategori dengan mengganti aset gambar Anda di bawah public/images/collection . Nama file harus tetap sama. Jika Anda berencana untuk mengubah nama file atau menambahkan kategori baru, Anda harus menambahkan data meta baru. Aplikasi ini akan mengharapkan pengaturan inventaris di bawah ini untuk membangun dan membuat komponen, jadi jika Anda ingin menyesuaikan dengan inventaris Anda di backend, pastikan Anda:
public/images/collection dengan gambar Anda sendiriToko demo ini menggunakan berbagai fitur yang disediakan oleh Commerce.js dan ditenagai oleh dasbor CHEC.
Keranjang belanja menggunakan API Cart Commerce.js. Gerobak bertahan hingga 30 hari, dan Commerce.js secara otomatis mengingat gerobak untuk pengunjung.
Commerce.js menyediakan banyak alat untuk merampingkan implementasi checkout. Checkout di toko demo ini memanfaatkan:
Commerce.js menyediakan fungsionalitas bawaan untuk mendukung login pelanggan tanpa kode sisi server. Toko demo ini menampilkan halaman login pelanggan yang ada, dan memberikan detail tentang pesanan sebelumnya. Informasi Pelanggan juga digunakan untuk melakukan pra-populasi checkout dengan detail pelanggan yang diketahui.
Toko demo ini dikonfigurasi dengan "gateway uji" CHEC di luar kotak, yang menyediakan opsi pembayaran yang praktis saat menguji etalase Anda. Selain itu, dukungan elemen strip disertakan jika stripe dikonfigurasi di dasbor CHEC.
Commerce.js <> Dokumentasi Integrasi Stripe
Anda harus mengaktifkan strip di dasbor CHEC dengan mengikuti instruksi yang disediakan. Anda dapat menambahkan tombol kotak pasir untuk stripe, dan menggunakan tombol API Publik CHEC Sandbox CHEC untuk diuji dengan stripe. Baik kunci API publik CHEC, dan kunci "yang dapat diterbitkan" dikonfigurasi dalam file .env . Lihat Langkah Dua dari "Pengaturan Manual dan Penempatan Netlify"
Potong proyek ini untuk menyesuaikan dan memperluas demo sesuka Anda. Berikut adalah beberapa ide tentang apa yang dapat Anda lakukan dan arahan yang dapat Anda ambil eCommerce.
