【Shopify.dev和訳】Themes/Architecture/Sections/Section assets
この記事について
この記事は、Themes/Architecture/Sections/Section assetsの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Section アセット
セクションは、以下のセクション固有の Liquid タグを使って、独自の JavaScript やスタイルシートのアセットをバンドルすることができます。セクション固有の Liquid タグは、セクションが複数のテーマやショップにインストールされることを想定している場合にのみ使用する必要があります。
javascript
{% javascript %}タグを使用して、セクションに JavaScript を含めることができます。
{% javascript %}
document.querySelector('.slideshow').slideshow();
{% endjavascript %}
全てのセクションの{% javascript %}タグからのコンテンツは Shopify によって 1 つのファイルに連結され、content_for_headerグローバルリキッドオブジェクトを通してテーマに注入されます。このファイルは、defer属性を持つ<script>タグによって非同期的に読み込まれます。
各々の {% javascript %} タグのコンテンツは、自己実行可能な無名関数でラップされており、あらゆる変数がクロージャ内で定義され、実行時の例外が他のセクションに影響を与えないようになっています。
インスタンス固有の JavaScript
バンドルされたアセットは、セクションの各インスタンスに対してではなく、各セクションに対して一度だけ注入されます。インスタンス固有の JavaScript が必要な場合は、セクションのマークアップに data-attributes を追加し、JavaScript でその属性を参照してください。例えば、以下のようになります。
<div class="slideshow-wrapper" data-slide-speed="{{ section.settings.speed }}">
<!-- slideshow content -->
</div>
{% javascript %}
var slideshowSpeed = parseInt(document.querySelector('.slideshow-wrapper').dataset.slideSpeed);
{% endjavascript %}
stylesheet
{% stylesheet %}タグは、セクションの CSS スタイルを含めるために使用できます。
<div class="slideshow-wrapper" data-slide-speed="{{ section.settings.speed }}">
<!-- slideshow content -->
</div>
{% stylesheet %}
.slideshow-wrapper {
// your styles
}
{% endstylesheet %}
すべてのセクションの{% stylesheet %}タグからのコンテンツは、Shopify によって 1 つのファイルに連結され、content_for_headerグローバルリキッドオブジェクトを通してテーマに注入されます。
インスタンス固有のスタイル
バンドルされたアセットは、セクションの各インスタンスに対してではなく、セクションごとに一度だけ注入されます。インスタンスごとの CSS が必要な場合は、インラインの<style>タグを使用してください。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion