第1章 - テーマ

Odoo がインストールされ、サーバーがローカルで稼働しているので、ウェブサイト用に独自のテーマモジュールを作成しましょう。

セットアップ

最初のステップは、Odoo がローカルで正しく動作していることを確認することです。これを行うには、Shell スクリプトを使用してサーバーを実行します。
このスクリプトでは、データベース名を定義し、website モジュールのみをインストールします。

関連項目

:ref:`run Odoo <website_themes/setup/getting_started> ` の参考文献を参照してください。

モジュール構造を構築

すべてが正常に動作していることがわかったので、モジュールの構築を始めましょう。

次の構造に基づいて、テーマとして使用するモジュールの作成を開始します。 XMLページ、SCSS、JS、 … を追加します。

関連項目

テーマモジュール の構造方法については、リファレンスドキュメントを参照してください。

基本： /data、 /img、 /scss、 :file:`/js`から始めます。
:file:`__init__.py`と :file:`__manifest__.py`ファイルを追加することを忘れないでください。

:file:`__manifest__.py`ファイルでは、以下の情報を含むモジュールを宣言できます：

  • 名前 (必須)

  • 説明

  • カテゴリー

  • バージョン

  • 作成者

  • ライセンス

  • 依存する

Odoo 変数を宣言する

primary_variables.scss ファイルでは、デフォルトの Odoo SCSS 変数をデザインに合わせてオーバーライドできます。

Airproof デザインに基づいて、 primary_variables.scss ファイルを作成し、次の要素を定義します。

  • 見出しフォントファミリー: Space Grotesk

  • コンテンツフォントファミリー: Lato

  • カラーパレットの名前と、それを構成する5つのメインカラー。#000000、#BBE1FA、#CEF8A1、#FFFFFF、#0B8EE6

  • ヘッダーとフッター: 現時点でデフォルトのテンプレートのいずれかを使用して、後でカスタムヘッダーを作成します。

関連項目

primary variables の使用方法と、利用可能なすべての primary variables のリストについては、リファレンスドキュメントを参照してください。

スクリプトを再起動すると、すぐに変更のアプリケーションが表示されます。
マニフェストへのパスをスクリプトに追加し、インストールするアプリとしてモジュールを設定することを忘れないでください。

変更が正しく適用されるようにするには、ウェブサイトにログインし、カラーパレットに指定した色が含まれていることを確認してください。

ちなみに

Airproofデザインを複製するには、より多くの変数をオーバーライドする必要があります。ウェブサイトの作成中に追加することを忘れないでください。

注釈

フォントファミリーは Google フォント のものです。

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

  1. primary_variables.scss ファイルを作成します。サンプルモジュールの primary_variables.scss ファイルから必要な情報をすべて見つけることができます。

  2. ドキュメントに示されているように、 :file:`__manifest__.py`でファイルを宣言します。

  3. スクリプト経由でモジュールをインストールします。この例では、次のようになります。

./odoo-bin --addons-path=../enterprise,addons,../myprojects --db-filter=theming -d theming
--without-demo=all -i website_airproof --dev=xml

ブートストラップ変数をDeclare

デフォルトのOdoo変数の上に、Bootstrap変数を再定義することもできます。 Bootstrapは、初期設定でOdooに含まれるフロントエンドフレームワークです。

防空設計に基づいて、次の要素を定義します。

  • 見出しのフォントサイズ:

    • h1 : 3.125rem

    • h2 : 2.5rem

    • h3 : 2rem

    • h4 : 1.75rem

    • h5 : 1.5rem

    • h6 : 1.25rem

  • Inputs border radius : 10px

  • Inputs border color : black

  • Inputs border width : 1px

  • 大きなボタンの枠の半径: 10px 10px 10px

関連項目

ちなみに

  • Airproofデザインを複製するには、より多くの変数をオーバーライドする必要があります。ウェブサイトの作成中に追加することを忘れないでください。

  • 変更が正常に適用され、エラーが発生していないことをローカルで定期的に確認する習慣を作ります。

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

  1. :file:の bootstrap_overridden.scss ファイルを作成します。サンプルモジュールの bootstrap_overridden.scss ファイルから必要な情報をすべて見つけることができます。

  2. ドキュメントに示されているように、 :file:`__manifest__.py`でファイルを宣言します。

プリセットを定義

先ほどカバーした変数に加えて、デザインを変更するために特定のビューを有効にすることもできます。

:file:`presets.xml`ファイルを追加し、エアプルーフデザインに基づいて、次のクライアントのリクエストを満たすために適切なビューを有効にしてください。

  • ヘッダーの「Call-to-action」を無効にします。

  • ショップの欲しい物リスト機能を無効にしますが、製品ページで有効にしてください。

  • ショップページで、左側のみカテゴリ別のフィルタリングを有効にします。

関連項目

:ref:`プリセット <theming/module/views/presets> ` を定義する方法を見てください。
ファイルの書き込みを開始するには、 レイアウト で説明されている Odoo XML ページの指示に従ってください。

ちなみに

  • 課題を完了するには、eCommerce (website_sale) と wishlist (website_sale_whishlist) アプリケーションをインストールする必要があります。 注意してください！ インストールされていないアプリケーションを参照するとエラーが発生します。

  • 有効化するテンプレートを見つけるには、ソースコード「odoo/addons/website/views/**」を参照してください。
    例えば、ヘッダー用のテンプレートは website_templates.xml にあります。

  • プリセットの効果を確認するには、いくつかの**製品** (耐薬品ミニ、耐薬品ロビン、保証*を追加してください。 *チャージャーケーブル）と**eコマースカテゴリ**（保証、付属品、ドローン、防水ドローン）をデータベースに作成します。 product images here があります。

  • Airproofデザインを複製するには、より多くのビューを有効にする必要があります。ウェブサイトの作成中に追加することを忘れないでください。

コールトゥアクションを無効にするには:

  1. 見つけなければならないビューは odoo/addons/website/views/website_templates.xml l:2113 にあります。

  2. :file:`presets.xml`ファイルを正しいレコードで作成します

    /website_airproof/data/presets.xml
    <?xml version="1.0" encoding="utf-8"?>
<odoo>
   <!-- Disable Call-to-action in header -->
   <record id="website.header_call_to_action" model="ir.ui.view">
      <field name="active" eval="False"/>
   </record>
</odoo>

  3. マニフェストで、2つのアプリを追加し、ファイルを宣言します。

    /website_airproof/__manifest__.py
    'depends': ['website_sale', 'website_sale_wishlist'],
'data': [
   # Options
   'data/presets.xml',
]