nextjs woocommerce

Sejarah Bintang

Situs e -commerce next.js dengan woocommerce backend

URL Langsung: https://next-wooCommerce.dfweb.no

Daftar Isi (TOC)

• Instalasi
• Fitur
• Masalah
• Pemecahan masalah
• Todo

Instalasi

1. Instal dan aktifkan plugin yang diperlukan berikut, di Direktori Plugin WordPress Anda:

• WooCommerce eCommerce untuk WordPress.
• WP-GraphQL memaparkan graphql untuk wordpress.
• WP-GRAPHQL-WOOCOMMERCE menambahkan fungsionalitas WooCommerce ke skema WPGRAPHQL.
• Plugin WP-Algolia-Woo-indexer WordPress yang dikodekan oleh saya. Mengirimkan produk WooCommerce ke Algolia. Diperlukan pencarian untuk bekerja.

Plugin opsional:

• Headless-WordPress menonaktifkan frontend sehingga hanya backend yang dapat diakses. (opsional)

Rilis saat ini telah diuji dan dikonfirmasi bekerja dengan versi berikut:

• Versi WordPress 6.6.2
• WooCommerce Versi 7.4.0
• WP GraphQL Versi 1.13.8
• Versi WoographQL 0.12.0
• WPGRAPHQL CORS Versi 2.1

2. Untuk debugging dan pengujian, instal keduanya:

   https://addons.mozilla.org/en-us/firefox/addon/apollo-developer-tools/ (firefox)

   https://chrome.google.com/webstore/detail/apollo-client-develever-t/jdkknkkbebbapilgoecccciglkfbmbnfm (chrome)

3. Pastikan WooCommerce sudah memiliki beberapa produk

4. Klon atau garpu repo dan ubah .env.example dan ganti namanya menjadi .env

   Kemudian atur variabel lingkungan yang sesuai di Vercel atau solusi hosting pilihan Anda.

   Lihat https://vercel.com/docs/environment-variables

5. Ubah nilai sesuai dengan pengaturan Anda

6. Mulai server dengan npm run dev

7. Aktifkan metode pembayaran COD (uang tunai atas permintaan) di WooCommerce

8. Tambahkan produk ke kereta

9. Lanjutkan ke Checkout (Gå Til Kasse)

10. Isi detail Anda dan lakukan pesanan

Fitur

• Next.js Versi 14.3.11
• React Versi 18.3.1
• Naskah
• Tes dengan penulis naskah
• Hubungkan ke WooCommerce GraphQL API dan nama daftar, harga dan gambar tampilan untuk produk
• Dukungan untuk produk sederhana dan produk variabel
• Penanganan dan checkout keranjang dengan WooCommerce (Cash on Delivery hanya untuk saat ini)
• Pencarian Algolia (membutuhkan Algolia-Woo-Indexer)
• Memenuhi standar aksesibilitas WCAG jika memungkinkan
• Placeholder untuk produk tanpa gambar
• Klien Apollo dengan GraphQL
• Bentuk pengait bereaksi
• Validasi formulir HTML5 asli
• Animasi dengan gerakan framer, komponen bergaya dan animate.css
• Memuat pemintal yang dibuat dengan komponen gaya
• Menampilkan kemajuan pemuatan halaman dengan nprogress selama navigasi
• Desain yang sepenuhnya responsif
• Kategori dan Daftar Produk
• Menunjukkan status stok
• URL cantik dengan fungsionalitas Builtin NextJS
• Tailwind 3 untuk gaya
• Komentar JSDOC

Pemecahan masalah

Saya mendapatkan kesalahan yang tidak ditentukan oleh keranjang atau kesalahan graphql lainnya

Periksa apakah Anda menggunakan plugin WP-Graphql-WooCommerce versi 0.12.0

Halaman Produk tidak memuat

Periksa atribut produk. Saat ini aplikasi membutuhkan ukuran dan warna.

Masalah

Secara keseluruhan aplikasi berfungsi sebagaimana dimaksud, tetapi belum diuji secara luas di lingkungan produksi. Diperlukan lebih banyak pengujian dan debugging sebelum menggunakannya di lingkungan produksi.

Dengan itu, ingatlah hal berikut:

• Saat ini hanya produk sederhana dan produk variabel yang berfungsi tanpa masalah. Jenis produk lainnya tidak diketahui berfungsi.
• Hanya Cash on Delivery (COD) yang saat ini didukung. Lebih banyak metode pembayaran dapat ditambahkan nanti.

Proyek ini diuji dengan BrowserStack.

Todo

• Tambahkan Total ke Keranjang/Halaman Checkout
• Salin alamat penagihan ke alamat pengiriman
• Tambahkan dasbor pesanan dan memerlukan login
• Sembunyikan produk yang tidak tersedia
• Tambahkan SEO yang lebih baik
• Tambahkan kembali berikutnya/gambar saat bekerja lebih baik