カタログ¶
eコマースカタログには、顧客が閲覧できるプロダクトが表示されます。これは、プロダクトカテゴリ、利用可能なオプション、ソート、ナビゲーションパスを使用して整理されています。基本的に、eコマースカタログはウェブサイトのショップページです。
プロダクトカタログには、トップバー、サイドパネル、および:ref:プロダクトリストエリア <ecommerce/catalog/product-listing>`が含まれます。Odoo を使用すると、:ref:`レイアウトをカスタマイズ <ecommerce/catalog/customize-layout>、カテゴリおよび属性 でフィルタリング、および必要に応じて 追加機能 を使用することができます。
ウェブサイトエディタを使用して、ショップページをカスタマイズすることができます。ショップページにアクセスするには、ショップページに移動し、右上隅にある 編集 をクリックし、カスタマイズ タブに移動します。
トップバー¶
上部のバーには、検索バー、通貨選択、並べ替えおよび表示オプション、および カテゴリクイックアクセス を含めることができます。
並べ替え検索および表示オプション¶
検索バー`の表示/非表示を切り替えたり、:ref:`カテゴリ <ecommerce/catalog/categories> および/または 属性 を表示したり、並べ替え、および レイアウト ボタンを有効または無効にできます。
並べ替え ボタンはデフォルトでオンになっており、顧客は次の デフォルトの並べ替え オプションから選択できます。
なし
おすすめ
新着商品
名称 (A-Z)
価格 - 安い順
価格 - 安い順
デフォルトの並べ替えは、すべての カテゴリ に適用されます。
ちなみに
トップバーまたは サイドパネル を表示したくない場合は、ウェブサイトエディタで関連するオプションをすべて無効にしてください。
サイドパネル¶
サイドパネルには、プロダクトカテゴリを整理するための高度なフィルタリングツールがあります。ショップページをさらに カテゴリ分け するには、属性 フィルタなどのさまざまなフィルタを有効化できます。
また、日付表示 オプションを追加して、指定した期間のレンタルプロダクトの空き状況を確認できる日付範囲カレンダーを表示することもできます。この機能を使用するには、レンタルアプリ をインストールする必要があります。
また、折りたたみ可能なサイドバー スイッチを切り替えることで、サイドパネルを手動で折りたたむこともできます。
ちなみに
価格帯やタグのフィルタを使用するには、まず 属性 を有効にする必要があります。
カタログ内でのプロダクトのカテゴリ分け¶
eコマースカテゴリで、プロダクトをグループに整理することで、顧客がオンラインストアで商品を閲覧しやすくします。
eコマースカテゴリを作成するには、 をクリックします。カテゴリフォームで、名前`を追加し、必要に応じて :guilabel:`親カテゴリ`を入力し、:guilabel:`カテゴリ説明 を記入します。
eコマースカテゴリを使用するには、:menuselection:`ウェブサイト --> eコマース --> プロダクト`に移動し、変更するプロダクトを選択し、:guilabel:`販売`タブに移動し、:guilabel:`eコマースショップ`セクションに移動し、それが属する:guilabel:`カテゴリ`を選択してください。
注釈
1つのプロダクトは複数のeコマースカテゴリに属することができます。
カテゴリを設定し、関連するプロダクトに割り当てたら、メインショップページに移動し、ウェブサイトエディタを開きます。カテゴリ オプションでは、左、つまり サイドパネル、または トップ、つまり トップバー、あるいはその両方にメニューを表示することができます。:guilabel:`左`カテゴリを選択すると、:guilabel:`折りたたみ可能なカテゴリ再帰`オプションが表示され、サイドパネルでカテゴリを折りたたむことができます。
参照
属性¶
属性は、色や素材など、プロダクトの特性を指します。一方、バリアントは、属性のさまざまな組み合わせを指します。属性とバリアントを設定するには、 を選択し、プロダクトを選択して、:guilabel:`属性とバリアント`タブをクリックします。必要なだけ属性を追加します。
属性フィルタリングを有効にするには、メインショップページに移動し、ウェブサイトエディタを開き、属性 フィールドを 左 (サイドパネル) および/または 上 (トップバー) に設定します。
ちなみに
トップバーで属性フィルタリングが有効になっている場合、顧客は (ドロップダウントグル) ボタンをクリックしてアクセスする必要があります。
属性 を有効にすると、さらに多くのオプションが利用可能になります。
価格フィルタ: スイッチを切り替えると、価格範囲 バーが表示され、顧客は調整可能なレバーをドラッグすることで、特定の価格帯でプロダクトをフィルタリングすることができます。
プロダクトタグフィルタ: スイッチを切り替えて、ショップページに プロダクトタグ を表示し、顧客が サイドパネル の タグ セクションに移動して、それらのタグを使用してプロダクトをフィルタリングできるようにします。
ちなみに
eコマースでタグを使用したい場合は、 タブでプロダクトのバリアントを追加し、:guilabel:`すべてのプロダクト`タブで選択したすべてのプロダクトの概要を表示することもできます。
価格フィルタリングは属性とは独立して機能するため、必要に応じて単独で有効にすることができます。
プロダクトリスティングエリア¶
ショップページ全体のレイアウト、および 個々のカテゴリページ のレイアウトをカスタマイズすることができます。
ちなみに
個々の プロダクトページ をカスタマイズすることも可能です。
ウェブサイトエディタで、レイアウト を選択し、デフォルトのレイアウトを グリッド または リスト ビューに設定します。
以下のオプションを使用して、レイアウトをさらに調整してください：
サイズ: ページと行ごとに表示するプロダクトの数を設定します。
間隔: プロダクト間の間隔を定義します。
スタイル: デフォルト、カード、サムネイル、または グリッド を選択します。
画像サイズ: プロダクト画像のアスペクト比を選択してください: 横長 (4/3)、デフォルト (1/1)、縦長 (4/5)、または 縦長 (2/3)。また、塗りつぶし オプションを変更して、デザインに合わせて表示を調整することもできます。
プロダクト説明 スイッチを切り替えて、プロダクトの名前の下にプロダクトの説明を表示します。
ちなみに
グリッドのサイズは選択できますが、プロダクトを大量に表示するとパフォーマンスやページの読み込み速度に影響が出る可能性があることにご注意下さい。
さらに、ショップページでプロダクトの位置を手動で変更することもできます。これを行うには、メインのショップページに移動し、プロダクトをクリックして、ウェブサイトエディタを開きます。Product セクションでは、矢印を使用してプロダクトの順番を変更できます。<<` >> ボタンでプロダクトを左端または右端に、< > で 1 行左または右に、それぞれ移動できます。
ちなみに
また、menuselection:`ウェブサイト --> eコマース --> プロダクト`に移動し、リスト表示に切り替えて、リスト内のプロダクトをドラッグ＆ドロップすることで、ショップページ上のプロダクトの位置を変更することもできます。
プロダクトハイライト¶
ショップページでプロダクトをより目立たせるために、プロダクトをハイライトすることができます。これを行うには、ウェブサイトエディタに移動し、ハイライトするプロダクトをクリックします。プロダクト`セクションでは、グリッドをクリックしてプロダクト画像のサイズを選択したり、:guilabel:`リボン `を追加したりすることができます。これにより、:guilabel:`セール、完売、在庫切れ、:guilabel:`New!`などのバナーがプロダクト画像に表示されます。
新しいリボンを作成するには、リボン フィールドの横にある緑色の (作成) アイコンをクリックします。次に、リボン名`を追加し、その :guilabel:`位置`を定義し、:guilabel:`背景`と :guilabel:`テキスト`ラベルを選択します。リボンを編集するには、:guilabel:`リボン`ラベルの横にある :icon:`fa-pencil-square-o (編集) アイコンをクリックします。
リボンは、すべての e コマースプロダクトでご利用いただけるようになりました。
ちなみに
新しいリボンは他の方法でも作成できます：
特定の プロダクトバリアント にリボンを追加することもできます。これを行うには、 に移動し、プロダクトを選択します。バリアント スマートボタンをクリックし、バリアントを選択して、販売 セクションの バリアントリボン フィールドにリボンを追加します。
ショップおよびカテゴリページデザイン¶
ビルディングブロック を使用して、ショップページやカテゴリページにコンテンツを追加します。
カタログの上部および/または下部セクションは、ショップ全体のページ用にも、特定のカテゴリ用にもカスタマイズできます。後者の場合、そのブロックは該当のカテゴリでフィルタされたときのみ表示されます。これを行うには、ブロックをページの最上部または最下部に移動すれば、ショップ全体のページに表示されます。あるいは、カテゴリ名の下(ページ上部)や、プロダクトリストの下(ページ下部)に配置することで、そのカテゴリでフィルタされたときにのみ表示されます。
追加機能¶
:guilabel:`カートに追加`や :guilabel:`ウィッシュリスト`ボタン、 :guilabel:`比較リスト`などの追加機能ボタンにアクセスして有効にすることができます。これを行うには、ウェブサイトエディタを開き、目的の機能ボタンをクリックします。プロダクトの画像にマウスを置くと、3つのボタンすべてが表示されます。
(カートに追加): カートにプロダクトを追加する ボタンを追加します。
(比較): 価格、バリアントなどに基づいてプロダクトを比較するためのボタンを追加します。
(ウィッシュリスト): プロダクトを ウィッシュリスト に追加するボタンを追加します。
参照