nextjs woocommerce restapi

? Next.js WOOCOMMERCE REST API

• Reaksi tema wooCommerce, menggunakan arsitektur yang dipisahkan di next.js
• Backend di WordPress
• Ujung depan dalam reaksi.
• Data diambil melalui API REST.

Fitur

• Halaman Beranda
• Halaman Produk Tunggal dengan Galeri Carousel.
• Halaman gerobak
• Halaman checkout dengan integrasi gateway pembayaran stripe.
• Istirahat titik akhir API.
• Header dan footer di next.js mengambil dari item menu WordPress.
• Widget WordPress ditampilkan di Frontend Next.js.
• Judul situs, tagline, teks hak cipta, tautan sosial yang bersumber dari WordPress.
• Dukungan SEO yoast
• Komponen gambar selanjutnya.js, yang memiliki optimasi gambar pada waktu permintaan
• Pembuatan statis tambahan (RE) dan penciptaan otomatis halaman produk statis baru tanpa harus membangun kembali Next.js aplikasi.
• Dukungan Gutenberg Styles
• Halaman blog dengan pagination
• Pos tunggal
• Halaman
• 404 halaman
• Menampilkan komentar
• Posting komentar (menggunakan formulir komentar)
• Pratinjau Posting (segera hadir)
• Pagination Produk (segera hadir)
• Muat lebih banyak produk (segera hadir)
• Otentikasi dengan implementasi cookie hanya JWT dan HTTP. ( Segera hadir )
• Fitur Login untuk Pratinjau Posting WP di Next.js (segera hadir)

Kursus tutorial

Tautan demo langsung

Pengaturan

Klon pertama/garpu repo dan CD ke dalamnya.

git clone https://github.com/imranhsayed/nextjs-woocommerce-restapi.git
cd nextjs-woocommerce-restapi
npm ci
npm run dev

Tambahkan fitur tanpa kepala untuk WordPress

• Instal dan aktifkan plugin WordPress berikut:

• headless-cms
• WooCommerce

Konfigurasi?

1. (Diperlukan) Buat file .env mengambil referensi dari .env-example dan perbarui url wordpresssite Anda dan frontend next.js url.

• NEXT_PUBLIC_WORDPRESS_URL=https://example.com
• NEXT_PUBLIC_SITE_URL=http://localhost.com (ini akan menjadi frontend Anda next.js url)

2. Tambahkan WC_CONSUMER_KEY Anda dan WC_CONSUMER_SECRET ke .env dengan mengikuti wooCommerce> pengaturan> lanjutan> REST API

3. Di dasbor WordPress Anda, buka Pengaturan> Umum> Alamat Situs (URL) (Atur ini ke URL frontend misalnya http: // localhost: 3000 selama pengembangan)

4. Buat menu header dan footer di dasbor WordPress dan atur ke menu header hcms dan menu hcms footer masing -masing.

Tautan yang berguna

• Garis
• Mendapatkan tombol API Stripe

Versi?

Saya menggunakan git untuk versi.

Pengarang ?

• Imran Sayed

Lisensi?

Proyek ini dilisensikan di bawah lisensi MIT - lihat file lisensi.md untuk detailnya