第5章 - 動的なテンプレート¶

ショップテンプレートを適応する¶

では、ウェブサイトの動的セクションを適応させてみましょう。ご存知のように、eコマース用のページなどが自動的に生成されます。ショップ、商品、チェックアウトなどのページは、 website_sale アプリケーションがインストールされると自動的に生成されます。これらのテンプレートページは、バックエンドから表示される情報を取り出します。

これらのページを変更するには、標準の Odoo テンプレートを編集する必要があります。これは SCSS、プリセット、特に XPath を使用して行うことができます。 `XPath`を使用して変更し拡張したい標準のOdooテンプレートを見つけます。Airproofデザインに従って、ショップビューを変更することから始めましょう。

まず、Odoo : :menuselection:`website_sale --> templates.xml --> id="products"`で標準テンプレートを探します。
website_sale_templates.xml ファイル内のすべての変更を適用します。
- バナーを追加する
- 左側の電子商取引カテゴリフィルタリングのレイアウトを変更します。
- 検索バーを削除します(ショップと商品ページの両方から同時に削除できます)。
- パンくずリストを動かしてください。
- リストまたはグリッド表示オプションを非表示にします。
- 商品カードに適したデザインと情報を作成します。

ちなみに

プリセット、XPath と SCSI を使用して変更を適用します。
属性/バリアントフィルタを有効にするには、ウェブサイトのバックエンド設定で /applications/sales/products_prices/products/variants オプションを、製品の configure attributes and variant を有効にします。

Solutions

presets.xml, website_sale_templates.xml part shop page, and shop.scss の解決策を見つけます。

製品ページのテンプレートを適応する¶

クライアントはショップの変更に興奮しています。次に、私たちのデザインを製品ページに適用しましょう。以下のAirproof設計に基づいて、以下を含むいくつかの要素を適応させます。

検索バーを削除します(前の演習で完了していない場合)。
数量セレクター、利用規約、および共有アイコンを削除します。
:guilabel:の「カートに追加」ボタンのアイコンを更新します。
製品仕様の上にタイトルを挿入します (このセクションは、製品に属性ごとに 1 つのバリアントがある場合にのみ表示されます)。
カルーセルの適切なレイアウトを設計します。
タイトルを追加し、「代替製品」セクションに以前に作成した製品テンプレートを適用します (このセクションが表示されるバックエンドの製品に代替製品が割り当てられていることを確認してください)。
すべての製品に表示される、製品詳細の下に新しいドロップゾーンを実装します。使用例として、Website Builder (e) を使用して Text-Image ビルダーを追加します。 .: 「*… *を購入する6つの理由」で、製品ページのスクリーンショットを参照してください。