LaunchCartでページごとのCSSやJSの読み込みの振り分けを設定する方法

カテゴリーから探す

年別から見る

2019/05/14

LaunchCartでページごとのCSSやJSの読み込みの振り分けを設定する方法

LaunchCart上でページごとにCSSやJSの読み込みを振り分けたい場合があると思います。

読み込みを振り分ける方法として、私が使ったことのある方法をご紹介したいと思います。

ちなみにCSSの読み込みは<head>タグ内にあることが推奨されているので、headタグから読み込みを振り分けることを想定しています。

※以前のHTML5の仕様では<body>内に<style>や<link>を置くことは非推奨でしたが、現行のHTML5の仕様では特に非推奨ではありません（<link>, <style>）。ただ、パフォーマンスやコードの可読性の観点から、以前と同様に<head>内からの読み込みがMDNなどでは勧められています。

※余談ですが、<style>は以前はscoped属性を置くことで<body>に置くことができるというルールがありましたが、現行のHTML5の仕様ではscoped属性が廃止され、HTML5.2からは無条件で<body>内に置くことが許容されています。ただ、CSSが読み込まれたタイミングでスタイルが調整されるため、特にファーストビューで表示される要素のスタイルなどは<head>内に置くことが無難なように思われます。

WordPressと違い、LaunchCartには「is_home()」や「is_single()」のような各ページを識別する関数がないため、ちょっとひと工夫が必要です。

各ページのテンプレートから必要なCSSやJSを読み込む
- <head>タグが各ページのテンプレート内にある場合
- <head>タグが各ページのテンプレート内にない場合
ヘッダーやフッターなど、モジュールテンプレート上で振り分ける
商品ごとに読み込むCSSを設定したい場合

各テンプレートから必要なCSSやJSを読み込む

<head>タグが各ページのテンプレート内にある場合


<!DOCTYPE HTML>
<html lang="{{ language }}">
<head>
{% TemplateInclude "html head" %}
</head>
<body>
{% TemplateInclude "header" %}
・・・
{% TemplateInclude "footer" %}
</body>
</html>

<!DOCTYPE HTML>

<head>

{% TemplateInclude "html head" %}

</head>

<body>

{% TemplateInclude "header" %}

・・・

{% TemplateInclude "footer" %}

</body>

</html>

上記のように、各ページのテンプレート内に<head>がある場合は、直接<link>タグを書き込めるので、おすすめです。


<!DOCTYPE HTML>
<html lang="{{ language }}">
<head>
{% TemplateInclude "html head" %}
<link rel="stylesheet" href="{{ asset("css/example.css") }}"> <!-- ←ここに書く -->
<script src="{{ asset("/js/example.js") }}"></script> <!-- ←ここに書く -->
</head>
<body>
{% TemplateInclude "header" %}
・・・
{% TemplateInclude "footer" %}
<script src="{{ asset("/js/example2.js") }}"></script> <!-- ←JSならここもあり -->
</body>
</html>

<!DOCTYPE HTML>

<head>

{% TemplateInclude "html head" %}

</head>

<body>

{% TemplateInclude "header" %}

・・・

{% TemplateInclude "footer" %}

</body>

</html>

<head>タグが各ページのテンプレート内にない場合


{% TemplateInclude "header" %}
・・・
{% TemplateInclude "footer" %}

{% TemplateInclude "header" %}

・・・

{% TemplateInclude "footer" %}

一方上記のように、<head>がモジュールテンプレートのheader内などに内包されていて各ページのテンプレートから直接書き込めない場合もあると思います。

そういった場合、twigの変数で読み込むCSSやJSの情報を<head>を内包するモジュールテンプレートに渡し、モジュールテンプレート内で読み込む処理を行う方法が使えます。

各ページのテンプレートで


{% set head_styles = ['css/example.css'] %}
{% set head_scripts = ['js/example.js','js/example2.js'] %}
{% TemplateInclude "header" %}
・・・
{% TemplateInclude "footer" %}

{% set head_styles = ['css/example.css'] %}

{% set head_scripts = ['js/example.js','js/example2.js'] %}

{% TemplateInclude "header" %}

・・・

{% TemplateInclude "footer" %}

<head>を内包するモジュールテンプレート内で


{% if head_styles is defined %}
{%   for head_style in head_styles %}
<link rel="stylesheet" href="{{ asset(head_style) }}">
{%   endfor %}
{% endif %}

{% if head_scripts is defined %}
{%   for head_script in head_scripts %}
<script src="{{ asset(head_script) }}"></script>
{%   endfor %}
{% endif %}

{% if head_styles is defined %}

{% for head_style in head_styles %}

{% endfor %}

{% endif %}

{% if head_scripts is defined %}

{% for head_script in head_scripts %}

{% endfor %}

{% endif %}

ヘッダーやフッターなど、モジュールテンプレート上で振り分ける

複数のテンプレートで共通のCSSを振り分けたい場合などで、直接ページのテンプレートにファイル名やパスなどを書きたくない場合もあると思います（読み込みむファイルやディレクトリが変更になる可能性があるなど）。

そういった場合は、各ページのテンプレート上では変数でフラグだけ設定し、モジュールテンプレート上で読み込みを振り分ける方法が使えます。

各ページのテンプレートで


{% set is_required_style__example = true %}
{% set is_required_script__example = true %}
{% TemplateInclude "header" %}
・・・
{% TemplateInclude "footer" %}

{% set is_required_style__example = true %}

{% set is_required_script__example = true %}

{% TemplateInclude "header" %}

・・・

{% TemplateInclude "footer" %}

モジュールテンプレート内で


{% if is_required_style__example is defined %}
<link rel="stylesheet" href="{{ asset('css/example.css') }}">
{% endif %]

{% if is_required_script__example is defined %}
<script src="{{ asset('script/example.js') }}"></script>
{% endif %]

{% if is_required_style__example is defined %}

{% endif %]

{% if is_required_script__example is defined %}

{% endif %]

商品ごとに読み込むCSSを設定したい場合

LP付きの商品詳細ページのように、それぞれの商品で個別のレイアウトを設定したい場合など、商品ごとに読み込むCSSを指定したい場合もあるかもしれません。

そういった場合は、商品の拡張フィールドを活用することで、商品ごとに読み込むCSSを設定することができます。

設定 > 拡張フィールド > 商品拡張フィールド > 新規追加でCSS、JSというフィールドを追加

<head>を内包するモジュールテンプレート内で以下のコードを記述


{% product is defined %}
{% if product.attribute('CSS') %}
<link rel="stylesheet" href="{{ product.attribute('CSS') }}">
{% endif %}
{% if product.attribute('JS') %}
<script src="{{ product.attribute('JS') }}"></script>
{% endif %}
{% endif %}