yournextstore
1.0.0
demo.yournextstore.com?
Kami secara resmi mendukung versi LTS saat ini - 20 pada saat penulisan. YNS harus mengerjakan versi 18, 20, dan 22. Jika Anda menggunakan salah satu versi itu dan menghadapi masalah, silakan laporkan!
Ikuti instruksi untuk sistem operasi Anda yang ditemukan di sini: nodejs.org/en/download
Kami secara resmi mendukung PNPM versi 9, tetapi kami akan melakukan yang terbaik untuk membuatnya tetap kompatibel dengan NPM dan benang.
Cara termudah untuk menginstal PNPM adalah melalui Node.js CorePack. Di dalam folder dengan YNS, jalankan perintah ini:
corepack enable
corepack installAtau, ikuti instruksi untuk sistem operasi Anda yang ditemukan di sini: pnpm.io/installation
YNS terintegrasi erat dengan stripe, jadi Anda memerlukan akun strip untuk menggunakan toko Anda berikutnya. Ikuti instruksi dari Stripe untuk membuat akun.
Penting untuk diingat bahwa stripe berfungsi dalam dua mode yang berbeda: mode uji dan mode produksi . Untuk tujuan pengembangan dan pengujian lokal, Anda harus menggunakan mode pengujian . Dengan cara ini, Stripe tidak akan pernah mengenakan uang sungguhan, dan Anda dapat menggunakan kredensial tes khusus seperti nomor kartu kredit dan nomor Blik untuk menyelesaikan pembayaran. Untuk informasi lebih rinci, silakan merujuk ke dokumentasi Stripe di docs.stripe.com/testing.
Setelah Anda siap menjual produk Anda ke pelanggan nyata, Anda harus beralih mode uji ke mode produksi di Stripe dan menghasilkan kredensial baru.
Tip
Langkah ini akan membutuhkan verifikasi tambahan dari stripe, jadi kami sarankan Anda memulai proses segera.
Agar YNS bekerja, Anda harus mendefinisikan beberapa variabel lingkungan. Untuk pengembangan dan pengujian lokal, Anda dapat membuat file .env kosong dan menyalin konten .env.example ke dalamnya.
Untuk mengatur variabel Env dalam produksi, Anda harus berkonsultasi dengan dokumentasi penyedia hosting yang Anda pilih.
ENABLE_EXPERIMENTAL_COREPACK - hanya Vercel: Set ke 1 untuk mengaktifkan corePackNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - kunci yang dapat diterbitkan dari stripe.STRIPE_SECRET_KEY - Kunci rahasia dari stripe.STRIPE_CURRENCY - Ini digunakan untuk menentukan mata uang toko Anda. Saat ini, hanya satu mata uang yang diizinkan, dan itu harus menjadi kode ISO tiga huruf (misalnya, usd ).NEXT_PUBLIC_URL - Opsional di Vercel alamat toko Anda tanpa slash trailing, yaitu, https://demo.yournextstore.com . Saat membangun untuk pertama kalinya, Anda harus mengaturnya ke URL yang valid, yaitu http://localhost:3000 .NEXT_PUBLIC_UMAMI_WEBSITE_ID - ID situs web UMAMI untuk analitikNEXT_PUBLIC_NEWSLETTER_ENDPOINT - Pratinjau : Titik akhir untuk formulir buletin di masa depan. Itu harus menerima permintaan posting dengan json { email: string } dan mengembalikan json { status: number } .STRIPE_WEBHOOK_SECRET - Pratinjau : Stripe Webhook Secret untuk menangani acara dari Stripe. Baca lebih lanjut di bawah ini.ENABLE_STRIPE_TAX - Pratinjau : Setel ke nilai apa pun (yaitu, 1 ) untuk mengaktifkan pajak strip di YNS. Baca lebih lanjut di bawah ini.NEXT_PUBLIC_LANGUAGE - lokasi toko (yaitu, en-US ) Setelah mengikuti langkah -langkah di atas, jalankan pnpm install untuk menginstal dependensi yang diperlukan, dan kemudian jalankan pnpm dev untuk memulai server pengembangan pada mesin Anda. Toko Anda berikutnya akan tersedia di LocalHost: 3000
Toko Anda berikutnya mendapatkan semua produk, harga, deskripsi, dan kategori dari Stripe. Jadi, jika Anda sudah tahu Stripe, Anda akan merasa seperti di rumah!
Anda perlu menambahkan produk ke dasbor stripe untuk ditampilkan dalam YNS. Setelah masuk, klik lebih banyak di bilah sisi kiri dan pilih Katalog Produk . Anda juga dapat menggunakan tautan langsung:
Kemudian, klik Tambah Produk dan isi semua informasi yang diperlukan:
Selain itu, toko Anda berikutnya menggunakan metadata produk untuk memberikan lebih banyak informasi konteks tentang produk. Anda dapat menentukan bidang metadata berikut:
| Bidang | Diperlukan | Keterangan |
|---|---|---|
slug | Ya | Siput produk digunakan untuk URL. Harus unik kecuali untuk varian. |
category | TIDAK | Kategori produk yang digunakan untuk pengelompokan produk. |
order | TIDAK | Pesanan produk yang digunakan untuk menyortir produk. Angka yang lebih rendah ditampilkan terlebih dahulu. |
variant | TIDAK | Varian produk siput. Baca di bawah ini untuk detailnya. |
Sekarang Anda harus melihat semua produk yang ditambahkan di toko Anda berikutnya.
Toko Anda berikutnya mendukung varian produk sederhana. Untuk membuat produk dengan varian, Anda harus menambahkan banyak produk ke stripe dengan bidang metadata slug yang sama. YNS menggunakan bidang variant metadata untuk membedakan antara varian yang berbeda dari produk yang sama. Misalnya, jika Anda memiliki T-shirt dalam berbagai ukuran, Anda dapat membuat tiga produk dengan slug t-shirt dan nilai variant small , medium , dan large .
Varian ditampilkan di halaman produk. Varian dapat memiliki harga, deskripsi, dan gambar yang berbeda. Penting untuk dicatat bahwa category tersebut harus sama untuk semua varian dari produk yang sama untuk pengalaman menjelajah terbaik.
Catatan
Di masa depan, kami berencana untuk menambahkan kemungkinan mengedit produk dan varian di dalam dasbor admin bawaan. Jika Anda memiliki ide atau saran, beri tahu kami!
Toko Anda berikutnya menggunakan Webhooks Stripe untuk menangani acara dari Stripe. Saat ini, titik akhir digunakan untuk secara otomatis merevalidasi halaman kereta dan untuk membuat transaksi pajak (jika diaktifkan). Untuk mengatur webhooks, ikuti stripe docs. Langkah-langkah yang tepat tergantung pada apakah Anda telah mengaktifkan Workbench Stripe di akun Stripe Anda: docs.stripe.com/webhooks#add-a-webhook-endpoint.
Titik akhir untuk webhook adalah https://{YOUR_DOMAIN}/api/stripe-webhook . Satu -satunya acara yang diperlukan adalah payment_intent.succeeded . Saat webhook dikonfigurasi di stripe, atur variabel lingkungan STRIPE_WEBHOOK_SECRET ke kunci rahasia yang dibuat oleh stripe.
Catatan
Di masa depan, kami berencana untuk menambahkan lebih banyak acara ke webhook untuk meningkatkan pengalaman pengguna.
Toko Anda berikutnya dilengkapi dengan pratinjau dukungan pajak strip. Untuk mengaktifkannya, atur variabel lingkungan ENABLE_STRIPE_TAX ke nilai apa pun (yaitu, 1 ).
Agar fitur ini berfungsi, Anda harus mengatur pengaturan pajak Anda di stripe dashboard: dashboard.stripe.com/register/tax. Saat diaktifkan dan dikonfigurasi, pajak akan secara otomatis dihitung dan ditambahkan ke total harga produk berdasarkan:
Peringatan
Fitur ini masih dalam tahap awal, dan mungkin ada kasus tepi yang tidak didukung. Kami secara aktif mengerjakannya, jadi jika Anda mengalami masalah atau memiliki saran, beri tahu kami!
Untuk menggunakan Vercel, klik tombol berikut, atur variabel repositori dan lingkungan GitHub Anda, dan klik Deploy . Pastikan untuk mengatur variabel ENABLE_EXPERIMENTAL_COREPACK ke 1 .
Deskripsi segera hadir.
Untuk menggunakan Docker, ikuti langkah -langkah ini:
pnpm run docker:build .pnpm run docker:run . YNS berkembang setiap hari, dan kami secara aktif mencari umpan balik tentang apa yang harus ditingkatkan. Jika Anda memiliki pertanyaan atau masalah, jangan ragu untuk menghubungi kami di server Discord kami.
structuredClone untuk meneruskan data dari server ke komponen klien. Mengapa? Hanya jenis data tertentu yang dapat diteruskan dari server ke klien secara langsung. Data dari Stripe SDK sering berisi contoh kelas. Untuk mengatasi hal ini, kami menggunakan structuredClone untuk menghilangkannya dan meneruskan objek lama yang sederhana kepada klien.
