Capítulo 3 - Customization, Part I¶

カスタムSCSSを追加¶

OdooとBootstrapの変数を調整してプリセットを設定しましたが、ウェブサイトとクライアントのデザインの間に違いがあります。唯一の解決策はカスタムSCSSを組み込むことです。

theme.scss では、次のデザイン要素を再現します。

アクティブなナビゲーションアイテムに 緑色の下線 を追加します。
矢印を折りたたみ可能なナビ項目に変更します。
スライダーの矢印 を緑色の背景を追加してデザインを変更します。

media here があります。

関連項目

:ref:`SCSS ルール <theming/assets/styles> ` の参照ドキュメントを参照してください。

注釈

すべての SCSS ルールを #wrapwrap に含めることを常に推奨します。このIDは、すべてのページの header、 footer、および :guilabel:`main`コンテンツをグループ化するdivに適用されます。

あなたの規則がウェブサイトの部品にのみ影響を与えることを確かめる。

Solutions

header.scss と caroussel.scss の解決策を見つけます。

カスタムJSを追加¶

では、ウェブサイトにマウスフォロワーを追加しましょう。このインタラクティブな要素は、ブラウジング体験を向上させ、より魅力的で視覚的に魅力的にします。

これを実装するためにJavaScriptのスキルを使用してください。

関連項目

:ref:`add Javascript code <theming/assets/interactivity> ` の参照ドキュメントを参照してください。

Solutions

mouse_follower.js と mouse_follower.scss の解決策を見つけます。

カスタムヘッダーを作成¶

変数、プリセット、およびカスタムSCSSを使用すると、ヘッダーから始めて、レイアウトを絞り込み、キーをクロスページ要素を追加する時が来ます。

防護設計に基づいて、次の要素を使用してカスタムヘッダーを作成します。

中心となるロゴ。ヘッダーに自動的に表示されるようにロゴを宣言してください。
カスタムショッピングカートアイコン。
ボタンとしてのログイン/ユーザー
14pxへのナビゲーションテキスト。

ロゴ、カートアイコンとテンプレートイラストレーションがあります。

関連項目

次の方法についてのリファレンスドキュメントを参照してください:

:ref:`custom headers <website_themes/layout/header/custom> `を作成する
XPath を実行します
会社のロゴを宣言します。

ちなみに

odoo/addons/website/views/website_templates.xml にある既存のヘッダーテンプレートのコードをベースにしてください。
カスタムビューとテンプレートを管理するための異なるファイルを作成することが良い習慣です。例えば、一般的なレイアウト（ヘッダー、フッター）に関するすべてのものです。を入力します。 website_templates.xml 、 website_blog_templates.xml のブログに関連するすべてのもの、 website_event_templates.xml などでイベントを行います。
カートアイコンを変更するには、 XPath を使用します。

これはeCommerceにリンクされているため、 website_sale_templates.xml という新しいファイルに配置します。
Bootstrap変数 と primary variables (フォント、色、サイズ) でできるだけ多くの変更を続けることを忘れないでください。 . ). このエクササイズを支援するために使用できます.

Solutions

解決策を見つけるには、以下の例をご覧ください:

xml構造を指定し、website_template.xml のオプションリストにテンプレートを追加します。

デフォルトヘッダを無効にします:

/website_airproof/data/presets.xml¶

<!-- Disable default header -->
<record id="website.template_header_default" model="ir.ui.view">
   <field name="active" eval="False"/>
</record>

ロゴを記録します。

/website_airproof/data/images.xml¶

<!-- Set as the logo of the website -->
<record id="website.default_website" model="website">
   <field name="logo" type="base64" file="website_airproof/static/src/img/content/branding/airproof-logo.svg"/>
</record>

website_templates.xml ファイルと、 manifest 内のすべての新しいファイルを宣言します。
presets 経由でヘッダーに含まれないオプションを無効にします。
primaries を header-template、navbar-font、`header-font-size`のように使用します...
bootstrap_overrided like $navbar-light-color, $navbar-light-hover-color, $navbar-padding-y...
scss ルールを追加します。

カスタムフッターを作成¶

クライアントは、提供されたデザインと完全に一致するため、新しいヘッダーに満足しています。今、彼は一致するカスタムフッターを望んでいます。

防護設計に基づいて、次の要素を使用してカスタムフッターを作成します。

ニュースレター購読のためのセクション。
著作権とソーシャルメディアのセクション。

icons here があります。

関連項目

custom footer を作成し、 :ref:の website_themes/layout/copyright` を調整する方法については、リファレンスドキュメントを参照してください。

ちなみに

プリセットから著作権セクションを有効または無効にすることができます。
ニュースレターセクションが機能するには、 website_mass_mailing アプリケーションをインストールする必要があります。

Solutions

この課題を完了するには、次のようにする必要があります:

mass mailing を依存関係に追加します。

/website_airproof/__manifest__.py¶

'depends': ['website_sale', 'website_sale_wishlist', 'website_blog',
'website_mass_mailing'],

xml構造を見つけて、website_template.xml のオプションリストにテンプレートを追加します。

デフォルトのフッターを無効にし、著作権を有効にします。

/website_airproof/data/presets.xml¶

<!-- Disable Default Footer -->
<record id="website.footer_custom" model="ir.ui.view">
   <field name="active" eval="False"/>
</record>
<!-- Enable Copyright -->
<record id="website.footer_no_copyright" model="ir.ui.view">
   <field name="active" eval="False"/>
</record>

primaries を footer-template、footer、`o-cc4-link`のように使用します...
newsletter セクションに scss ルールを追加します。

カスタムビルディングブロックを作成する¶

あなたのクライアントがさらに彼のウェブサイトをカスタマイズすることを可能にするために、彼は自由にドラッグ&ドロップすることができますオーダーメイドのビルディングブロックを作成します。

防空設計に基づいて、ドローンを紹介するカスタムカルーセルスニペットを作成します。その後、ホームページにカバーセクションとして追加します。

スニペットテンプレートを作成し、ウェブサイトビルダーで利用可能なビルディングブロックのリストに追加します。ここでは image と snippet イラストがあります。

関連項目
:ref:`カスタムビルディングブロック <website_themes/building_blocks/custom> ` の作成方法については、リファレンスドキュメントを参照してください。
Website Builder で、ユーザーが青色または緑色のバブルシャドウを選択できるようにするオプションを追加します。

関連項目
:ref:`スニペットオプション <website_themes/building_blocks/custom/options> ` の追加方法については、リファレンスドキュメントを参照してください。
ホームページにスニペットを追加します。

ちなみに

Don't forget to always properly declare your new files in your __manifest__.py and follow the good folder structure seen previously.

Solutions

この課題を完了するには、次のようにする必要があります:

テンプレートを作成

必要なすべての情報は s_airproof_carousel.xml ファイルと s_airproof_caroussel/000.scss ファイルにあります。
images.xml で画像を記録します。
__manifest__.py でファイルを宣言します。

ブロックのリストに追加します。この例では次のようになります。

/website_airproof/views/snippets/options.xml¶

<!-- Add custom snippets to the builder -->
<template id="snippets" inherit_id="website.snippets" name="Airproof - Custom Snippets">
   <xpath expr="//*[@id='default_snippets']" position="before">
      <t id="x_theme_snippets">
         <div id="x_airproof_snippets" class="o_panel">
            <div class="o_panel_header">Airproof</div>
            <div class="o_panel_body">
               <!-- Carousel snippet -->
               <t t-snippet="website_airproof.s_airproof_carousel"
               t-thumbnail="/website_airproof/static/src/img/wbuilder/s-airproof-snippet.svg">
                  <keywords>Carousel block</keywords>
               </t>
            </div>
         </div>
      </t>
   </xpath>
</template>

ウェブサイトビルダーにオプションを追加します。この例では、次のようになります。

/website_airproof/views/snippets/s_airproof_carousel.xml¶

<!-- Add options to snippets -->
<template id="snippet_options" inherit_id="website.snippet_options" name="Airproof -
Snippets Options">
   <xpath expr="." position="inside">
      <!-- *** Carousel snippet : blue or green bubble *** -->
      <div data-selector=".x_bubble_item">
         <we-button-group string="Bubble shadow">
            <we-button data-select-class="x_bubble1">Blue</we-button>
            <we-button data-select-class="x_bubble2">Green</we-button>
         </we-button-group>
      </div>
   </xpath>
</template>

さらに、s_airproof_caroussel/000.scss ファイル中のバブルに関連する SCSS もあります。

ホームページにスニペットを追加します。サンプルモジュールの home.xml ファイルから必要な情報をすべて見つけることができます。

新しい動的スニペットテンプレートを作成¶

動的スニペットは構成ブロックです。これらはバックエンドから情報を取得し、特定のフィルタに応じてウェブサイトに表示することができます。

動的スニペットを表示するためのいくつかのレイアウトテンプレートがすでにありますが、既存のテンプレートはクライアントのニーズに完全に一致しません。

エアプルーフデザインに基づいて、ホームページの製品動的スニペットに適用するカスタムテンプレートを作成します。

まず、動的な製品テンプレートのリストに追加されるカスタムテンプレートを作成します。次の要素を含める必要があります:
- もっと知るリンクを追加します。
- カードにホバー効果を追加します。
- ナビゲーション矢印を移動します。
icons here があります。

関連項目
See reference documentation on how to create a template for dynamic snippets.

ちなみに
Website Builder で、製品の動的スニペットで使用可能なテンプレートのリストにテンプレートが表示されることを確認できます。
次に、ホームページに作成したテンプレートで製品の動的スニペットを追加します。

関連項目
:ref:`テンプレート <website_themes/building_blocks/custom/dynamic/call> `を呼び出す方法については、リファレンスドキュメントを参照してください。

Solutions

この課題を完了するには、次のようにする必要があります:

スニペットテンプレートを作成します。必要な情報は options. ml file and karossel.scss file from our example module.
ホームページで製品の動的スニペットにテンプレートを適用します。必要なすべての情報は、サンプルモジュールから home.xml ファイルにあります。