WoodMartテーマ設定AJAX商品フィルタリングチュートリアル

もし ウッドマートのテーマe-コマース・ウェブサイトの制作を計画しているのであれば、このウェブサイトには以下の機能が付いていることを見逃すわけにはいかない。 AJAX 製品フィルター 機能このフィルターを使用すると、顧客はページを更新することなく、ブランド、価格、色、カテゴリ、およびその他の寸法で製品をすばやくフィルタリングすることができます。

画像[1]-WoodMartテーマ設定AJAX商品フィルタリングチュートリアル

ステップ1:WooCommerceとWoodMart Coreプラグインが有効になっていることを確認します!

AJAXフィルターを使用するには、まずあなたのサイトに2つのものが必要です:

  1. インストールと有効化 WooCommerce プラグイン
  2. インストールと有効化 ウッドマート・コア プラグイン(WoodMartの機能の中心)
画像[2]-WoodMartテーマ設定AJAX商品フィルタリングチュートリアル

この2つがインストールされていない場合は、まずバックエンドの[プラグイン → プラグインのインストール]で検索し、有効にしてください。

ステップ2:商品属性とカテゴリーを設定する

フィルターは商品の「属性」と「カテゴリー」に依存します。システムが何をフィルタリングすべきかを知る前に、これらを定義する必要があります。

手順は以下の通り:

  • バックグラウンドで[商品 → プロパティ]に進む
  • 新しい属性(例:カラー、サイズ、ブランディング
画像[3]-WoodMartテーマ設定AJAX商品フィルタリングチュートリアル
  • 各属性の "Configure Entry "をクリックする。
画像[4]-WoodMartテーマ設定AJAX商品フィルタリングチュートリアル
  • 商品を編集する場合は、「商品データ → プロパティ」で「商品データ → プロパティ」を選択します。増加さらにダニ属性 "for product variants"(可変商品の場合)と "visible "の値。
画像[5]-WoodMartテーマ設定AJAX商品フィルタリングチュートリアル

注:関連するオプションがフィルターに表示されるのは、アイテムが実際にこれらの属性を使用している場合のみです。

ステップ3: フィルター付きウィジェット・サイドバーの作成

ウッドマートでは、Elementor またはデフォルトのウィジェットパネルを使用して、以下のウィジェットを追加することを推奨しています。(機械)フィルター.以下は、ワードプレスのネイティブ版である。サイドバー一例として

  • バックグラウンドで[外観 → ウィジェット]に移動する。
  • 見つける ショップ・サイドバー(ショップのサイドバー)または独自の新しいウィジェットエリアを作成します!
  • 以下のガジェットをドラッグします(WoodMart Coreが有効な場合):
    • WOODMART 属性で絞り込む(色、ブランドなどの属性によるフィルタリング用)
    • WOODMART 価格で絞り込む(価格帯フィルタリング用)
    • WOODMARTカテゴリーウィジェット(商品による絞り込み用)
画像[6]-WoodMartテーマ設定AJAX商品フィルタリングチュートリアル
  • 各フィルターには、タイトル、表示方法(リスト、ドロップダウン、複数選択)、その他のスタイルオプションを設定できます。
  • 設定の保存

ステップ4:このサイドバーをショップページに適用する

次に、このフィルターを正しいページ位置に表示させる必要がある。

動作モード:

  • バックエンド[WoodMart → Theme Settings → Layout → Sidebar]に移動します。
  • ショップのサイドバーの位置」で左または右を選択します。
画像[7]-WoodMartテーマ設定AJAX商品フィルタリングチュートリアル
  • 設定の保存

商品一覧ページを更新すると、サイドバーにフィルターが表示されます。

ステップ5:AJAXフィルタリングを有効にする

デフォルト ウッドマート フィルターはAJAXなので、フィルターオプションをクリックすると商品が自動的に更新され、ページを更新する必要はありません。しかし、この機能が有効かどうかを手動でチェックすることもできます。

  1. バックエンドの[WoodMart → Theme Settings → Product archive]に移動します。
  2. 以下のオプションが有効になっていることを確認する:
    • AJAXショップ
    • AJAXでカートに追加
    • 製品グリッド切り替え(オプション)
画像[8]-WoodMartテーマ設定AJAX商品フィルターチュートリアル

これらの機能により、商品ページ全体がよりスムーズでスキップフリーなものとなり、ユーザー体験が向上します。

ステップ6:モバイル用コラプスフィルターの設定

バランスを取るためにモバイルこの体験にアクセスするため、ウッドマートではモバイル端末向けに、クリックするとサイドバーがポップアップする「フィルター」ボタンを提供している。

テーマ設定 → レイアウト]を一番下までスクロールして開きます:

  • モバイルのフィルターボタン
  • タブレット用オフキャンバスフィルタ(ポップアップサイドバーをオンにする)
画像[9]-WoodMartテーマ設定AJAX商品フィルタリングチュートリアル

これにより、携帯電話のユーザーはボタンをタップしてフィルタリングパネルを呼び出すことができ、ページがすっきりして操作しやすくなる。

トラブルシューティング

  • フィルターのクリックが反応しない?
    ページがAJAXモードを有効にしているか、キャッシュプラグインがJSリクエストを妨害しているかをチェックする。
  • フィルタリングオプションが表示されない?
    対応する属性またはカテゴリーが商品に適用されていることを確認してください。そうでない場合、システムはフィルター項目を生成しません。
  • スタイルが違う?
    キャッシュをクリアするか、または以下をオフにしてみてください。 カスケーディングスタイルシート マージ機能を圧縮した後、ページを更新してください。

概要

WoodMartには、AJAX商品フィルターが搭載されており、実は非常に強力で、うまく使えば効率的なコンバージョンツールとなります。あらかじめ商品の属性とカテゴリーを設定し、商品フィルターをサイドバー適切なウィジェットをシステムに追加し、数分で完全に機能するスクリーニング・システムを構築することができる。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事はリトル・リンが執筆した。
終わり
好きなら応援してください。
クドス854 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし