BerandaComputers and TechnologyToko Next.js Commerce, satu klik terapkan ke Netlify

Toko Next.js Commerce, satu klik terapkan ke Netlify

Netlify Status Stars Forks

Toko demo eCommerce lengkap dengan ketelitian tinggi yang dibangun menggunakan Commerce.js SDK dan Next.js dengan penerapan langsung ke Netlify.

Chec see live demo button

Catatan

Gambaran

README ini akan memandu Anda untuk memulai dan menjalankan template eCommerce yang lengkap. Kami telah mengkonfigurasi template ini agar Anda dapat menerapkan satu-klik langsung ke Netlify. Atau, Anda dapat menerapkan secara manual ke platform hosting pilihan Anda.

Untuk tutorial mendetail lengkap tentang membangun aplikasi eCommerce JAMstack ini, silakan lanjutkan sini.

Prasyarat

Mendirikan

Buat akun Chec.

Sekarang setelah Anda menginstal Chec CLI secara global, Anda akan dapat mengakses daftar chec [COMMANDS] , salah satunya adalah mendaftar untuk akun Chec. Ayo lanjutkan dan siapkan itu!

   #  Buka pendaftaran Chec halaman di browser Anda  register chec  

Ikuti panduan selanjutnya untuk menyiapkan detail pedagang Anda. Atau, Anda dapat pergi

untuk mendaftar akun Chec.

Penerapan sekali klik memungkinkan Anda menghubungkan Netlify ke akun GitHub Anda untuk mengkloning commercejs-nextjs-demo-store dan menerapkannya secara otomatis. Pastikan untuk pergi ke Netlify dan daftar akun sebelum mengklik tombol terapkan.

Deploy to Netlify button

Dengan mengklik tombol di atas, Anda akan diarahkan ke halaman penerapan langsung Netlify dengan repositori proyek yang diteruskan sebagai parameter di url. Klik tombol Hubungkan ke GitHub , beri nama repositori Anda dan masukkan ini kunci publik di Masukan Kunci Publik Chec . Harap dicatat bahwa untuk tujuan membangunkan Anda dan menjalankan pratinjau penerapan langsung dari toko demo, kami memberi Anda Kunci Publik dari akun pedagang demo kami. Sekarang, simpan & terapkan situs Anda.

Harap diperhatikan bahwa build awal akan gagal jika Anda memasukkan kunci publik alih-alih pedagang demo yang disediakan kunci. Penyebaran satu klik dimaksudkan untuk tujuan presentasi untuk menjalankan penyebaran cepat. Menggunakan akun pedagang Anda berarti Anda harus memiliki data yang sesuai seperti beberapa aset dan kategori yang terkait dengan produk Anda. Jika Anda ingin menggunakan akun pedagang Anda, ikuti langkah-langkah penyiapan manual di bawah ini.

Penyiapan manual dan penerapan Netlify

Penyiapan manual melibatkan penggandaan repo ke lingkungan lokal Anda, memasukkan data sampel yang diberikan ke akun Chec Anda dan menerapkannya ke Netlify.

LANGKAH 1. Kloning repo dan instal dependensi

   #  Kloning repositori secara lokal , secara opsional mengganti nama repo, ubah ke direktori  git clone https://github.com/chec/commercejs-nextjs-demo-store.git chec-store   #  Ubah ke direktori dan instal dependensi 

CD toko chec && benang

LANGKAH 2. Siapkan variabel lingkungan Anda

Ganti sampel . env.example file dotenv di root proyek untuk menyimpan Chec Anda kunci_ publik serta kunci rahasia

.

   #  Salin dari file sumber ke file tujuan .env  cp .env.example .env 

Anda dapat mengakses kunci API Anda di bawah dalam pengaturan dasbor Chec Anda, lalu arahkan ke tab Kembangkan untuk menyalin Kunci Publik dan Kunci Rahasia Anda. Ganti yang disediakan NEXT_PUBLIC_CHEC_PUBLIC_KEY dengan milik Anda sendiri dan isi CHEC_SECRET_KEY dalam . env file. Kunci rahasia diperlukan agar skrip benih memiliki izin yang tepat untuk memasukkan data sampel ke dalam /biji ke akun Chec Anda. Hapus kunci rahasia setelah data di-seed.

  # .env  # Isi kunci publik dan kunci rahasia Anda NEXT_PUBLIC_CHEC_PUBLIC_KEY=CHEC_API_URL=https: //api.chec.io # Kunci rahasia digunakan dengan chec / seeder untuk mengakses akun Chec Anda untuk menyemainya dengan data sampel CHEC_SECRET_KEY=NODE_ENV= 

File ini dimaksudkan untuk tidak terikat pada kontrol sumber dan juga akan disembunyikan di browser file.

LANGKAH 3. Benih data yang diperlukan untuk menyalakan penyimpanan Chec Anda dan memulai lingkungan pengembangan Anda (diperlukan untuk pengaturan awal).

   #  Data benih di / benih ke akun Chec Anda  biji benang   #  Jalankan lingkungan pengembangan Anda di http: // localhost: 3000 

benang dev

Sekarang lanjutkan ke http: // localhost: 3000 setelah memulai pengembangan, situs Anda sekarang harus diisi dengan data sampel!

Jika Anda mengganti produk sampel, pastikan untuk menambahkan kategori baru di dasbor, kaitkan produk Anda dengan mereka dan terakhir ganti siput dan tautan

nilai sini.

LANGKAH 5. Buat perubahan yang diperlukan yang Anda perlukan dan masukkan kode ke repositori di Github atau platform pilihan Anda.

LANGKAH 6. Terapkan situs Anda

Pastikan untuk mendaftar ke akun Netlify dan masuk ke sana. Klik tombol Situs baru dari Git dan berikan akses untuk memilih repo Anda. Pengaturan build Anda secara otomatis diisi dari netlify.toml di dalam template. Untuk memasukkan variabel lingkungan Anda, klik Tampilkan lanjutan lalu Variabel baru dan isi di masukan kunci sebagai NEXT_PUBLIC_CHEC_PUBLIC_KEY dan masukan nilai dengan Kunci Publik Anda. Anda dapat mengakses kunci API Anda di dasbor Chec di bawah Penyiapan, lalu arahkan ke tab Pengembang untuk menyalin Kunci Publik Anda

Sekarang lanjutkan dan klik “terapkan situs” untuk melihat situs langsung Anda!

Penyiapan menggunakan perintah toko demo Chec CLI

Perintah ini akan mengunduh proyek contoh ini dari GitHub dan menginisialisasinya di komputer Anda. Anda akan bebas mengedit kode yang diunduh dan bermain-main dengan Commerce.js sesudahnya.

LANGKAH 1. Instal Chec CLI

 npm instal -g @ chec / cli   #  atau benang menambahkan -g @ chec / cli 

LANGKAH 2. Buat toko demo

  cek demo-store  

Saat diminta untuk memilih toko demo dari daftar, pilih “commercejs-nextjs-demo-store”. Perintah ini juga akan seed beberapa data sampel ke akun Chec Anda. Untuk informasi lebih lanjut, lihat dokumentasi Chec CLI .

Peringatan dengan kustomisasi data (PENTING)

Karena proyek ini adalah etalase toko yang lengkap yang menampilkan desain khusus dan alur pengguna, ada peringatan tertentu yang akan Anda temui jika menyesuaikan data Anda di Dasbor Chec. Satu gotcha adalah dengan data kategori di UI: data koleksi tambahan ditambahkan sini dan digabungkan dengan data kategori di API. Jika Anda menambahkan baru atau mengedit data kategori sampel unggulan, pastikan untuk mencocokkan nilai slugs / permalink di file data koleksi. Aplikasi akan mengharapkan penyiapan inventaris di bawah ini untuk membangun, jadi jika Anda ingin menyesuaikan dengan inventaris Anda di backend, pastikan Anda:

🥞 Tumpukan

Toko demo ini menggunakan berbagai fitur yang disediakan oleh Commerce.js dan didukung oleh Chec Dashboard.

Gerobak

Keranjang belanja menggunakan API keranjang Commerce.js. Keranjang disimpan hingga 30 hari, dan Commerce.js secara otomatis mengingat gerobak untuk pengunjung.

Kasir

Commerce.js menyediakan banyak alat untuk menyederhanakan implementasi checkout. Kasir di toko demo ini menggunakan:

  • Commerce.js API negara dan wilayah,
  • API metode pengiriman, dan
  • API diskon (untuk memvalidasi dan menerapkan diskon di kasir).

Pelanggan

Commerce.js menyediakan fungsionalitas bawaan untuk mendukung login pelanggan tanpa kode sisi server. Toko demo ini menampilkan halaman login pelanggan yang sudah ada, dan memberikan detail tentang pesanan sebelumnya. Informasi pelanggan juga digunakan untuk mengisi kasir dengan detail pelanggan yang diketahui.

Pembayaran gateway

Toko demo ini dikonfigurasi dengan “gerbang uji” Chec di luar kotak, yang menyediakan opsi pembayaran praktis saat menguji etalase Anda. Selain itu, dukungan untuk Stripe Elements disertakan jika Stripe dikonfigurasi di Chec Dasbor.

Mengaktifkan Stripe

Anda harus mengaktifkan Stripe di Dasbor Chec dengan mengikuti instruksi yang diberikan. Anda dapat menambahkan kotak pasir Anda kunci untuk Stripe, dan gunakan kunci API publik Chec kotak pasir untuk menguji dengan Stripe. Baik kunci API publik Chec, dan Stripe kunci “yang dapat dipublikasikan” dikonfigurasi di . env file. Lihat langkah kedua dari “ Penyiapan manual dan penerapan Netlify

Kustomisasi dan Dapat Diperpanjang

Buat proyek ini untuk menyesuaikan dan memperpanjang demo sesuka Anda. Berikut adalah beberapa gagasan tentang apa yang dapat Anda lakukan dan petunjuk arah yang dapat Anda ikuti eCommerce.

  • Tambahkan zona pengiriman dan mengaktifkan opsi pengiriman di setiap produk
  • Menyesuaikan gaya
    • Semua gaya global selesai menggunakan SASS dan Bootstrap
  • Pengujian A / B desain dan aliran pembayaran yang unik
  • Mengintegrasikan alat backend lain seperti Sistem Manajemen Konten, Dukungan Pelanggan, layanan Pemenuhan, dan banyak lagi.
  • Mengambil ulasan klien nyata dari API ulasan
  • Menambahkan fungsionalitas pencarian
  • Memanfaatkan
    webhooks untuk mengotomatiskan tindakan pasca pembayaran

Read More

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments