saleor storefront

Repositori Saleor-Storefront sudah DEPRECATED

Kami telah memutuskan untuk membangun etalase baru mulai dari awal, tanpa desain mewah, hanya berfokus pada praktik terbaik untuk membangun etalase perdagangan. Proyek baru, yang disebut React-Storefront, menggunakan Next.js sebagai fondasi dan penarik untuk penampilan. Anda dapat menemukannya di sini: https://github.com/saleor/react-storefront.

Storefront Penjualan

CATATAN: Proyek ini merupakan demonstrasi tentang bagaimana Penjual dapat digunakan. Ini tidak siap untuk menjadi starter tetapi lebih menunjukkan bagaimana kasus yang berbeda dapat ditangani dan dapat digunakan sebagai buku resep. Akan ada perubahan perubahan dan kodenya terus berkembang, jadi gunakan dengan risiko Anda sendiri.

Sebuah etalase aplikasi yang bertenaga graphql, PWA, untuk dijual.

Fitur

• Etomomront eCommerce headless dibangun dengan graphql, klien apollo, bereaksi, next.js dan naskah
• Mode offline (beta)
• Penjualan GraphQL API Integrasi
• Pengalaman aplikasi satu halaman
• Integrasi gateway pembayaran braintree

Demo

Lihat Demo Publik Saleor Storefront!

Atau luncurkan demo pada instance Heroku gratis.

Memulai

Instruksi ini akan memberi Anda salinan proyek dan berjalan di mesin lokal Anda untuk tujuan pengembangan dan pengujian.

Prasyarat

• Node.js 14.16
• Contoh pelaku yang sedang berjalan.

Untuk menjalankan etalase, Anda harus mengatur variabel lingkungan NEXT_PUBLIC_API_URI untuk menunjuk ke pelaku graphql API. Jika Anda menjalankan Saleor secara lokal, dengan pengaturan default, NEXT_PUBLIC_API_URI diatur ke: http://localhost:8000/graphql/ . Untuk mengubahnya, buat file .env.local dan tambahkan di sana atau atur variabel env menggunakan perintah export .

Menginstal

Klon Repositori:

 git clone https://github.com/mirumee/saleor-storefront.git

Masukkan Direktori Proyek:

 cd saleor-storefront

Menggunakan pelepasan yang stabil

Untuk menggunakan rilis stabil resmi, checkout ke tag rilis:

 $ git checkout 2.11.0

Lihat daftar semua rilis di sini: https://github.com/mirumee/saleor-storefront/releases/

Menggunakan versi pengembangan

Jika Anda ingin menggunakan versi pengembangan terbaru, checkout ke cabang master :

 $ git checkout master

Instal dependensi NPM:

 npm i

Jalankan server pengembangan:

 npm start

Pergi ke http://localhost:3000 untuk mengakses etalase.

Membangun

Untuk mengkompilasi aplikasi menjalankan:

 $ npm run build

Untuk mengkompilasi aplikasi dan mengekspor etalase ke run html statis:

 $ npm run build:export

Untuk mengkompilasi aplikasi dan menjalankannya dalam mode produksi dengan server berikutnya jalankan:

 $ npm run build:start

Untuk mengaktifkan Apollo Devtools dalam versi produksi, atur variabel lingkungan

 NEXT_PUBLIC_ENABLE_APOLLO_DEVTOOLS=true

Tes Cypress

Jika Anda ingin menjalankan tes Cypress, pastikan bahwa semua dependensi (termasuk Cypress ) diinstal dengan menjalankan perintah instalasi.

 npm i

Variabel lingkungan berikut harus diatur agar dapat menjalankan tes dengan benar:

• API_URI - Alamat API GraphQL.
• STATIC_URL - URL tujuan file statis, mis. S3 Bucket
• CYPRESS_USER_NAME - nama pengguna (email) untuk pengguna Storefront .
• CYPRESS_USER_PASSWORD - Untuk pengguna yang disebutkan di atas.

Jika Anda menjalankan etalase dari perspektif wadah Docker , maka Anda dapat menjalankan tes menggunakan perintah berikut:

Mode tanpa kepala:

 cy:run

Mode UI Cypress:

 cy:open

Jika Anda ingin menjalankan tes terhadap lingkungan pengembangan lokal Anda maka gunakan perintah berikut:

Mode tanpa kepala:

 test:e2e:run

Mode UI Cypress:

 test:e2e:dev

Membuat komponen baru

Semua komponen baru harus mengikuti pedoman desain atom dan ditempatkan di direktori src/@next/components .

Struktur file dapat dihasilkan menggunakan plop :

 npm run generate

Memodifikasi etalase

Dari Spectrum Post

File penting

• Saleor -Storefront/config/next/config.base.js - base next.js file konfigurasi yang berisi penyesuaian kustom webpack.
  • Dapat mengubah nama aplikasi (ditampilkan saat diinstal di ponsel)
• Saleor -Storefront/SRC/halaman/ App .tsx - File titik masuk utama. Render komponen, Apollo-Client, dan lainnya ke root div dalam file index.html di atas. Berisi juga bagian kepala - Anda dapat mengubah judul etalase di sini.
• Saleor -Storefront/src/core/config.ts - Kontrol Jumlah produk yang ditampilkan per halaman, email dukungan, penyedia gateway, media sosial, dan beberapa meta.
  • Dapat mengubah email dukungan
  • Dapat mengubah produk yang ditampilkan per halaman
  • Dapat mengubah penyedia gateway
  • Dapat mengubah tautan media sosial yang ditampilkan di footer
  • Dapat mengubah beberapa opsi meta
• Saleor -Storefront/SRC/Images/ - Memegang semua gambar untuk logo, keranjang, favicon, dll.
  • Dapat mengubah logo etalase, favicon, atau menambahkan gambar baru di sini.
• Saleor -Storefront/SRC/GlobalStyles/SCSS/Variable.scss - Berisi gaya dasar seperti warna, ukuran font, lebar kontainer, breakpoint media dan banyak lagi.
• Saleor -Storefront/SRC/@Next/GlobalStyles/ - berisi lebih banyak gaya dasar, tema, media, dan konstanta.
• Saleor -Storefront/SRC/Views/ - Folder ini mengontrol tampilan, atau apa yang ditampilkan untuk setiap halaman. Sebagian besar tampilan memiliki file bernama "page.tsx" yang mengontrol tata letak halaman dan file bernama "view.tsx" yang memanggil kueri dan membuat komponen dengan data.
  • Dapat menambahkan tampilan lain ke etalase di sini. Membutuhkan penambahan rute (lihat rute di bawah).
• Saleor -Storefront/SRC/@Next/Pages/ - Tempat kedua untuk memodifikasi/menambahkan halaman yang berbeda. Ini adalah direktori yang disarankan untuk menambahkan halaman baru.
• Saleor -Storefront/src/paths.ts - Folder ini berisi semua jalur. Di sinilah Anda menambahkan yang baru.
• Saleor -Storefront/SRC/halaman/ - Folder ini berisi file yang diterjemahkan ke routing next.js. Di sinilah Anda menambahkan rute baru.
  1. Ekspor jalur baru di Paths.ts
  2. Di dalam halaman, buat file baru dengan Name Correnspond ke rute yang Anda inginkan (Baca lebih lanjut di sini tentang rute bersarang). Impor tampilan Anda di file rute yang dibuat EKSPOR EKSPOR sebagai ekspor default.
  3. Untuk menautkan ke import Link from "next/link" dan menggunakan jalur baru yang Anda buat di Paths.ts (pastikan untuk mengimpornya)
• Saleor -Storefront/SRC/APP/APP.TSX - Ini adalah komponen utama yang membuat, (dijelaskan di bawah), dan beberapa komponen lainnya.

Menambahkan gateway pembayaran

• Saleor -Storefront/src/core/config.ts - Tambahkan nama penyedia gateway baru di sini.
• Saleor -Storefront/SRC/@Next/Components/Organisms/ - Buat folder baru untuk komponen gateway pembayaran baru di sini.
• saleor-storefront/src/@next/components/organisms/paymentgatewayslist/paymentgatewayslist.tsx - impor komponen gateway baru, buat sakelar baru untuk menangani komponen gateway Anda.

Menerima email konfirmasi

• Setel variabel lingkungan email_url untuk inti penjualan.
  • Menggunakan Docker - Tambahkan email_url sebagai variabel lingkungan baru untuk layanan API dan pekerja mengikuti format di sini.
• Masalah membuat email berfungsi?
  • Gmail
    • Periksa untuk melihat bahwa "akses aplikasi yang kurang aman" dihidupkan. Di bawah "Kelola Akun Google Anda"> Buka tab Keamanan. Secara default, pengaturan tidak dimatikan karena alasan keamanan.
    • Jika menggunakan 2FA, pastikan untuk mengatur kata sandi aplikasi dan menggunakannya sebagai pengganti kata sandi login normal Anda.

Multichannel

• Set [SALEOR_CHANNEL_SLUG] Variabel Lingkungan. - Nilai default: default-channel .

Lisensi

Proyek ini dilisensikan di bawah lisensi BSD-3-Clause-lihat file lisensi untuk detailnya

Dibuat dengan ❤️ oleh Saleor Commerce

[email protected]