Unduh demo store - unduh kode sumber demo store

demo store

Kategori lainnya

1.0.0

Unduh

Toko Demo Lapisan Perdagangan

Toko Demo ini adalah solusi e-niaga yang sepenuhnya statis (dengan kemampuan SSR) yang didukung oleh Commerce Layer. Toko ini berfitur lengkap dan beroperasi penuh, tanpa memerlukan layanan pihak ketiga. Anda dapat dengan mudah menyesuaikannya sendiri dengan berbagai tingkat penyesuaian. Teruslah membaca untuk mempelajari lebih lanjut.

Proyek Demo Store terdiri dari dua repositori, yang satu ini adalah template GitHub.

Apa itu Lapisan Perdagangan?

Commerce Layer adalah API perdagangan multi-pasar dan sistem manajemen pesanan yang memungkinkan Anda menambahkan kemampuan belanja global ke situs web, aplikasi seluler, chatbot, perangkat wearable, suara, atau IoT apa pun, dengan mudah. Susun tumpukan Anda dengan alat terbaik yang sudah Anda kuasai dan sukai. Jadikan pengalaman apa pun dapat dibeli, di mana saja, melalui API yang sangat cepat, tingkat perusahaan, dan aman.

Daftar isi

Fitur
Bagaimana cara kerjanya
Memulai
Kustomisasi
Menyebarkan
Butuh bantuan?
Pemecahan masalah
Lisensi

Fitur

Kami memutuskan untuk membangun Toko Demo dengan menghapus semua layanan pihak ketiga yang biasanya digunakan untuk menciptakan pengalaman situs web e-niaga yang komprehensif (CMS, penelusuran, PIM, dll.).

Segala sesuatu yang berhubungan dengan konten disimpan sebagai file JSON. Untuk membangun Toko Demo Anda sendiri, Anda perlu membuat file-file ini secara manual atau melalui skrip.

Toko Demo dilengkapi dengan:

mesin pencari bawaan dengan pencarian faset yang didukung oleh Fuse.js
manajemen katalog produk lengkap dengan taksonomi dan takson
manajemen varian produk tunggal
kemampuan multi-bahasa untuk membuat penjualan internasional lebih mudah
keseluruhan rangkaian fitur yang disediakan secara langsung oleh Commerce Layer API (daftar harga berbagai mata uang, model inventaris yang mendukung beberapa lokasi stok dan strategi pemenuhan, gateway pembayaran khusus pasar, opsi pengiriman dan akun operator, dll.)

Integrasi dengan Commerce Layer dicapai dengan memanfaatkan beberapa alat pengembang sumber terbuka kami, khususnya:

perpustakaan JS Auth
SDK Javascript
komponen React
keranjang yang dihosting
pembayaran yang dihosting

Bagaimana cara kerjanya

Proyek Demo Store terdiri dari dua repositori yang dapat Anda manfaatkan untuk membangun toko Anda sendiri, berdasarkan jumlah penyesuaian yang perlu Anda tambahkan:

demo-store
Ini adalah templat GitHub yang menggunakan demo-store-core yang disebutkan di bawah sebagai submodul git. Jika Anda puas dengan fitur dan tampilan serta nuansa Toko Demo Commerce Layer, kami sarankan Anda mengikuti jalur ini. Anda tidak perlu peduli dengan keseluruhan kode sumber dan Anda akan bebas fokus hanya pada data dan konten Anda. Selain itu, Anda akan mendapatkan pembaruan gratis hampir tanpa risiko hanya dengan menjalankan:
```
git submodule update --remote
npm install
```
demo-store-core
Repositori ini berisi kode sumber. Jika Anda perlu menyesuaikan toko Anda sepenuhnya (perilaku, UI, UX, dll.), Anda hanya perlu membagi repo ini dan membuatnya sendiri. Ini juga merupakan cara untuk berkontribusi.
️ Harap perhatikan bahwa jika Anda mengikuti jalur ini dan mulai menyimpang terlalu banyak dari kode sumber asli, risikonya adalah kehilangan semua pembaruan di masa mendatang atau tidak dapat mereplikasinya.

Memulai

Jika Anda tidak memiliki pengalaman dengan Commerce Layer, Anda dapat memulai dengan membuat akun (gratis!) dan mengikuti tutorial orientasi.

Penting

Harap dicatat bahwa untuk menyiapkan Toko Demo, Anda memerlukan organisasi yang dikonfigurasi dengan benar dengan setidaknya beberapa produk dan satu pasar.

Jika Anda memilih untuk memulai dari awal, Anda dapat membuat organisasi baru dan menggunakan perintah berikut untuk mengonfigurasi proyek seperti Toko Demo Commerce Layer.

Menyiapkan organisasi Anda

Setelah organisasi dibuat, Anda perlu membuat dua klien API: saluran penjualan dan integrasi .

Jika Anda belum melakukannya, instal Commerce Layer CLI dan dua pluginnya: plugin seeder dan plugin imports:

npm install -g @commercelayer/cli

commercelayer plugins:install seeder
commercelayer plugins:install imports

Sekarang Anda dapat masuk ke klien API integrasi Anda dari CLI:

commercelayer applications:login 
  --clientId Oy5F2TbPYhOZsxy1tQd9ZVZ... 
  --clientSecret 1ZHNJUgn_1lh1mel06gGDqa... 
  --organization my-awesome-organization 
  --alias cli-admin

Membangun toko Anda

Setelah organisasi Anda siap, untuk membangun toko Anda, Anda perlu mengikuti beberapa langkah sederhana... mari kita mulai!

1. Buat repositori baru

Jalur mana pun yang Anda pilih, pertama-tama, Anda perlu membuat repositori baru untuk toko Anda:

Jika Anda memutuskan untuk menyimpan templat demo-store Anda hanya perlu mengeklik "Gunakan templat ini" dari beranda repositori di GitHub, lalu jalankan:

git clone < your-repository-url > my-new-project
cd my-new-project
git submodule update --init
npm install

cp ./demo-store-core/packages/website/.env.sample.submodule .env.local

cp -r ./demo-store-core/packages/website/data/json ./data/json

Jika Anda memutuskan untuk melakukan fork pada repositori demo-store-core Anda dapat menjalankan ini sebagai gantinya:

git clone < your-repository-url > my-new-project
cd my-new-project
npm install

cp ./packages/website/.env.sample ./packages/website/.env.local

2. Atur variabel lingkungan

Edit .env.local dan isi semua informasi yang hilang:

 # this is the 'sales channel' client id
NEXT_PUBLIC_CL_CLIENT_ID =er34TWFcd24RFI8KJ52Ws6q...

3. Benih datanya

Langkah ini opsional. Jika Anda sudah memiliki organisasi yang dikonfigurasi dengan benar di akun Commerce Layer, Anda dapat melewatinya.

Skrip berikut akan mengisi organisasi Anda dengan semua sumber daya yang Anda perlukan untuk membangun e-niaga multi-pasar dengan Commerce Layer (yang kami gunakan untuk Toko Demo kami).

npm run seeder:seed -ws --if-present

Jika perintah di atas dijalankan tanpa kesalahan, lanjutkan ke langkah 4. Jika tidak, Anda masih dapat menambahkan data sampel ke organisasi Anda menggunakan CLI dengan menjalankan perintah berikut:

commercelayer seeder:seed -b custom -n demo_store_full -u ./demo-store-core/packages/setup/

4. Pilih negara tempat Anda akan menjual

File json/countries.json berisi daftar negara yang tersedia untuk e-niaga Anda. Anda dapat mengubahnya dengan editor pilihan Anda. Pastikan untuk mengganti semua temuan "market": xxx dengan pasar terkait organisasi Anda. Anda bisa mendapatkan daftar pasar Anda dari dasbor admin Commerce Layer atau dengan menjalankan perintah ini:

npm run markets -ws --if-present

5. Lihat aksinya

npm run dev

# http://localhost:3000/

Mengelola pembaruan

Anda selalu dapat menemukan kode terbaru dari demo-store-core di cabang main .

Untuk memperbarui Toko Demo Anda ke perubahan terbaru, Anda cukup menjalankan:

git submodule update --remote
npm install

Terkadang dapat terjadi bahwa versi mayor baru berisi perubahan yang dapat menyebabkan gangguan. Dalam hal ini, dengan memperbarui ke versi terbaru, Toko Demo Anda mungkin berhenti berfungsi dan Anda harus menyelesaikan semua masalah secara manual dengan mengikuti catatan rilis.

Jika mau, Anda dapat menerima pemberitahuan GitHub segera setelah versi baru dirilis.

Kustomisasi

Saat Anda menggunakan templat Toko Demo kami, Anda dapat menyesuaikan tiga elemen utama: data konten, lokal, dan file konfigurasi.

️ Kami akan terus meningkatkan Toko Demo kami untuk menambahkan fitur baru dan mengoptimalkan fitur yang sudah ada. Saat Anda memperbarui ke rilis terbaru, build mungkin gagal. Lihatlah catatan rilis untuk memahami cara memperbaikinya dengan memperbarui file khusus Anda.

File data JSON

Seperti disebutkan sebelumnya, Toko Demo kami dibangun berdasarkan sekumpulan data yang disimpan sebagai file JSON, untuk memisahkannya dari layanan pihak ketiga mana pun. Untuk membangun toko Anda, Anda harus membuat dan mengelola file-file ini.

File JSON terletak di data/json/ , tetapi Anda dapat memilih posisi lain dengan mengubah variabel lingkungan NEXT_PUBLIC_JSON_DATA_FOLDER .

File definisi tipe terletak di packages/types/src/json/ . Kami menggunakan zod untuk validasi skema. Lihatlah file-file ini untuk memahami struktur mana yang harus Anda ikuti.

Ketika Anda selesai dengan semua perubahan, Anda dapat memeriksa apakah semuanya sudah benar dengan menjalankan:

 npm run test:data

File data lokal

Toko Demo kami adalah situs web multi-bahasa. Saat Anda membuat data pada langkah sebelumnya, Anda mungkin memperhatikan bahwa beberapa bidang dilokalkan. Anda dapat menambahkan bahasa baru atau mengubah terjemahan yang sudah ada.

File JSON lokal terletak di data/locales/ , tetapi Anda dapat memilih posisi lain dengan mengubah variabel lingkungan NEXT_PUBLIC_LOCALES_DATA_FOLDER .

Lakukan hal berikut untuk mulai menyesuaikan lokal:

cp -r ./demo-store-core/packages/website/data/locales ./data/locales

 # .env.local
NEXT_PUBLIC_LOCALES_DATA_FOLDER =../../../data/locales/

File konfigurasi

File konfigurasi terletak di config/ , tetapi Anda dapat memilih posisi lain dengan mengubah variabel lingkungan NEXT_PUBLIC_CONFIG_FOLDER .

Ada tiga file konfigurasi yang dapat Anda kelola:

general.config.js
File ini berisi konfigurasi umum.
facets.config.js
Ini adalah file konfigurasi aspek. Anda dapat memilih urutan tampilannya di panel filter, tampilannya, dan aturan pengurutan nilainya.
variants.config.js
Ini adalah file konfigurasi varian. Anda dapat memilih urutan tampilannya di halaman detail produk dan tampilannya.

Lakukan hal berikut untuk mulai menyesuaikan konfigurasi:

cp -r ./demo-store-core/packages/website/config ./config

 # .env.local
NEXT_PUBLIC_CONFIG_FOLDER =../../../config/

Variabel lingkungan tambahan

Ada beberapa variabel lingkungan yang dapat Anda gunakan untuk menyesuaikan toko Anda. Untuk daftar dan deskripsi lengkap, Anda dapat melihat file tambahan-env.d.ts.

Menyebarkan

Anda dapat menyebarkan Toko Demo di mana pun Anda mau. Anda hanya perlu:

Tetapkan semua variabel lingkungan dalam sistem yang akan Anda gunakan untuk menjalankan build, sesuai dengan kebutuhan Anda.
Putuskan apakah Anda ingin menggunakan pembuatan situs statis atau rendering sisi server.

Demo Store dirancang untuk menjadi SSG yang pertama dan terpenting, namun Anda dapat beralih ke SSR dalam sekejap. Kami menguji beberapa cara untuk menerapkannya (misalnya menggunakan GitHub Workflow, Netlify, Vercel, dll.) dan Anda dapat menemukan informasi lebih lanjut tentangnya di sini. Jika Anda melakukannya secara berbeda atau menggunakan layanan lain dan ingin berbagi langkah-langkahnya dengan komunitas, silakan bergabung dalam diskusi, dan terima kasih sebelumnya!

Pembuatan situs statis

Untuk membangun dan menerapkan Toko Demo:

Atur variabel lingkungan berikut sesuai:
```
 NEXT_PUBLIC_DATA_FETCHING =ssg
```
Jalankan npm run build untuk membuat build produksi aplikasi Anda yang dioptimalkan secara statis.
Salin folder demo-store-core/packages/website/out ke hosting statis pilihan Anda.

Render sisi server

Toko Demo dapat diterapkan ke penyedia hosting mana pun yang mendukung Node.js. Untuk melakukan itu:

Atur variabel lingkungan berikut sesuai:
```
 NEXT_PUBLIC_DATA_FETCHING =ssr
```
Jalankan npm run build untuk membuat build produksi aplikasi Anda yang dioptimalkan.
Jalankan npm start untuk memulai server Node.js dalam mode produksi.

Butuh bantuan?

Bergabunglah dengan komunitas Discord Commerce Layer.
Buka diskusi Tanya Jawab baru
Ping kami di Bluesky, X (sebelumnya Twitter), atau LinkedIn.
Apakah ada bug? Buat masalah pada repositori ini.

Pemecahan masalah

T. Meskipun saya mengubah NEXT_PUBLIC_JSON_DATA_FOLDER , NEXT_PUBLIC_LOCALE_DATA_FOLDER atau NEXT_PUBLIC_CONFIG_FOLDER , situs web masih mengacu pada file sebelumnya.
A. Variabel lingkungan ini digunakan sebagai alias di Webpack. Mulai dari Webpack 5, caching untuk build yang lebih cepat telah diperkenalkan. Mengubah variabel lingkungan ini tidak akan membuat cache Webpack tidak valid. Anda harus menghapus folder .next secara manual atau dengan menjalankan:
```
 # update the path if needed
rm -rf demo-store-core/packages/website/.next/
```