nextjs woocommerce

星の歴史

woocommerceバックエンドを備えたJS eコマースサイト

ライブURL：https：//next-woocommerce.dfweb.no

目次（TOC）

• インストール
• 特徴
• 問題
• トラブルシューティング
• トト

インストール

1. WordPressプラグインディレクトリに、次の必要なプラグインをインストールしてアクティブにします。

• Worocommerce eコマースのecommerce。
• WP-GraphQlは、WordPressのGraphQLを公開します。
• wp-graphql-woocommerceは、WOCOMMERCE機能をWPGRAPHQLスキーマに追加します。
• WP-Algolia-Woo-Indexer WordPressプラグインが私によってコーディングされました。 WooCommerce製品をAlgoliaに送信します。検索が機能するために必要です。

オプションのプラグイン：

• ヘッドレスワードプレスはフロントエンドを無効にするため、バックエンドのみにアクセスできます。 （オプション）

現在のリリースはテストされており、次のバージョンで動作することが確認されています。

• WordPressバージョン6.6.2
• WooCommerceバージョン7.4.0
• WP GraphQLバージョン1.13.8
• woographqlバージョン0.12.0
• WPGRAPHQL CORSバージョン2.1

2. デバッグとテストについては、どちらかをインストールしてください。

   https://addons.mozilla.org/en-us/firefox/addon/apollo-developer-tools/（firefox）

   https://chrome.google.com/webstore/detail/apollolo-client-developer-t/jdkknkkbbebbapilgoecccclkfbmbnfm（Chrome）

3. WooCommerceにはすでにいくつかの製品があることを確認してください

4. リポジトリをクローンまたはフォークして修正します.env.exampleを.envに変更して変更します

   次に、それに応じて環境変数をVercelまたは優先ホスティングソリューションに設定します。

   https://vercel.com/docs/environment-variablesを参照してください

5. セットアップに従って値を変更します

6. npm run devでサーバーを開始します

7. WooCommerceでCOD（現金オンデマンド）支払い方法を有効にします

8. カートに製品を追加します

9. チェックアウトに進む（gåtilkasse）

10. 詳細を記入して注文します

特徴

• next.jsバージョン14.3.11
• Reactバージョン18.3.1
• タイプスクリプト
• 劇作家とのテスト
• WooCommerce GraphQl APIに接続し、製品の名前、価格、表示画像をリスト、価格、表示画像
• シンプルな製品と可変製品のサポート
• woocommerceとのカートの取り扱いとチェックアウト（今のところのみ納税
• Algolia検索（Algolia-Woo-Indexerが必要）
• 可能であれば、WCAGのアクセシビリティ基準を満たしています
• 画像のない製品のプレースホルダー
• GraphQLを備えたApolloクライアント
• 反応フックフォーム
• ネイティブHTML5フォーム検証
• フレーマーモーション、スタイルのコンポーネント、animate.cssを備えたアニメーション
• スタイルのコンポーネントで作成されたスピナーのロード
• ナビゲーション中のnprogressでページの負荷の進行状況を表示します
• 完全なレスポンシブデザイン
• カテゴリと製品リスト
• ストックステータスを表示します
• Builtin NextJS機能を備えたかなりのURL
• スタイリング用のテールウィンド3
• JSDOCのコメント

トラブルシューティング

カートの未定義のエラーまたは他のgraphqlエラーが発生しています

wp-graphql-woocommerceプラグインの0.12.0バージョンを使用していることを確認してください

製品ページは読み込まれていません

製品の属性を確認してください。現在、アプリケーションにはサイズと色が必要です。

問題

全体として、アプリケーションは意図したとおりに機能していますが、生産環境では広範囲にテストされていません。生産環境に展開する前に、より多くのテストとデバッグが必要です。

そうは言っても、次のことを念頭に置いてください。

• 現在、単純な製品と可変製品のみが問題なく機能しています。他の製品タイプは機能することは知られていません。
• 現在サポートされている納税（COD）のみがサポートされています。より多くの支払い方法を後で追加することができます。

このプロジェクトは、browserstackでテストされています。

トト

• カート/チェックアウトページに合計を追加します
• 請求先住所を配送先住所にコピーします
• 注文ダッシュボードを追加し、ログインが必要です
• 在庫のない製品を非表示にします
• より良いSEOを追加します
• 次に再生/画像がうまく機能しているとき