新デフォルトテーマ「Bright_theme」について

CS-Cart、v4.2.4からデフォルトテーマとして活躍してきたレスポンシブテーマですが、v4.7.2からついにデフォルトテーマの座を別テーマに明け渡すことになったようです。その名も「Bright_theme」。

ただし、このテーマ。実は親テーマとして「レスポンシブテーマ」を指定してあるため、レスポンシブテーマとは切っても切れない関係なのです。今回はCS-Cartのテーマの構成と新デフォルトテーマ「Bright_theme」の特徴について書いていきたいと思います。

CS-Cartのテーマ構成について

まずはCS-Cartのテーマ構成についてですが、ひとまず今まで散々お世話になってきた「レスポンシブテーマ」のフォルダ構成を確認してみましょう。

・「css」フォルダ
・「layouts」フォルダ
・「mail」フォルダ
・「media」フォルダ
・「styles」フォルダ
・「templates」フォルダ
・customer_screenshot.png
・manifest.json

レスポンシブテーマの中身は上記のとおりです。
次に、今回新しくデフォルトテーマとなった「Bright_theme」のフォルダ構成を確認してみます。

・「layout」フォルダ
・「media」フォルダ
・「styles」フォルダ
・「templates」フォルダ
・customer_screenshot.png
・manifest.json

「css」フォルダと「mail」フォルダがなく、また「templates」フォルダの中身を見比べてもらえるとわかるかと思いますが「Bright_theme」の方が明らかに中身が少なくなっています。

テーマとして明らかにファイルが足りないように見えるのに、普通に動いているのはなぜか。これはこの記事のはじめの方にも書きましたが、レスポンシブテーマを親テーマとして持っているからなのです。

「manifest.json」と親テーマ子テーマについて

レスポンシブテーマにも、「Bright_theme」にも存在している「manifest.jpon」ファイル。このファイルには、各テーマの基本情報が書かれています。「Bright_theme」内に存在しているmanifest.jsonの中身を確認してみると、「parent_theme」という項目部分で「responsive」という文字列を指定しているかと思います。

「Bright_theme」がmanifest.json内のparent_themeで「responsive」を指定している場合、「Bright_theme」は子テーマとして扱われます。そして、「responsive(レスポンシブテーマ)」は親テーマとして扱われます。
子テーマは、親テーマのファイルと異なるファイルだけを含んだファイル構成で作成する必要があります。なので「Bright_theme」内には「css」フォルダや「mail」フォルダが存在していなかったのです。必要に応じて子テーマは、親テーマの内容(テンプレート、ロゴなど)を使用する形になります。この「必要に応じて」というのは、簡潔にいうと子テーマに含まれていないファイルは親テーマのものをそのまま使う形になる、ということです。

※詳細に関しては、本家CS-Cart.comの公式ドキュメント(英語)
https://docs.cs-cart.com/4.7.x/designer_guide/parent_themes.html
をご参照ください。

「Bright_theme」の特徴について

ここまではテーマの構成について書いてきましたが、ここからは新デフォルトテーマ「Bright_theme」の特徴や、このテーマでしか使えないテンプレートブロックなどを紹介していきたいと思います。

「スクローラー」ブロックがbright_themeオリジナル仕様に

商品を表示させる「スクローラー」ブロックが、Bright_theme仕様になっています。コードを確認してみたところ、グリッドと同じ形で構造が組まれているようなので、見た目も以前のものより確かにグリッドでの表示に近くなっているようです。

設定に関しては以前と変わらず、
・価格の表示
・クイックビューの有効化
・自動スクロールしない
・1ページ毎のスクロール
・スピード
・表示間隔
・商品数
・スクローラー内サムネイルの横幅
・スクローラーの右上にナビゲーションを表示
・カートに追加ボタンを非表示(「ブロック設定」タブ画面内)
上記内容の設定を行うことが可能になっています。

「マイアカウント(拡張版)」ブロックが新たに追加

管理画面 → デザイン → レイアウト 画面からはグリッドやブロックを追加することが可能になっていますが、この「Bright_theme」では「マイアカウント(拡張版)」というブロックが使用可能になっています。実際にサイト上に置いてみると、

このように、スタイルが適用されていないマイアカウントのメニューが表示されます。(※ブロック追加時に「ラッパー」を「オンクリックドロップダウン」に設定しています。)

「メールマガジン:メルマガ購読の拡張フォーム」ブロックが新たに追加

「Bright_theme」では前述の「マイアカウント(拡張版)」に続き、「メールマガジン:メルマガ購読の拡張フォーム」というブロックが使用可能になっています。実際にサイト上に置いてみると、

このように、今までのレスポンシブテーマ時のものと比べると少々表示が異なり、「特別割引」「メルマガ購読申込で10%割引クーポンをプレゼント!」と書かれている部分は言語変数となっているため、管理画面より任意の文言に書き換えることも可能になっています。

Bright_themeで変更されているテンプレートファイル一覧

デフォルトのブロックテンプレートの他に、前述した「メールマガジン:メルマガ購読の拡張フォーム」のように、アドオンのテンプレートが子テーマ「Bright_themes」で変更されている場合もあります。なので、以下に「Bright_themes」で変更されているテンプレート一覧を書き記しておこうと思います。

既存ブロック
・cart_content.tpl
・my_account.tpl
・products/products_scroller.tpl(前述した商品の「スクローラー」ブロック)
・static_templates/my_account_links_advanced.tpl(前述した「マイアカウント(拡張版)」ブロック)

アドオン内のファイル
・blog/blocks/text_links.tpl
・discussion/blocks/testimonials.tpl
・discussion/views/discussion/view.tpl
・products/products_scroller.tpl
・newsletters/blocks/static_templates/subscribe_advanced.tpl(前述した「メールマガジン:メルマガ購読の拡張フォーム」ブロック)

<<< 前の記事