web-dev-qa-db-ja.com

ShopifyにカスタムCSSとJSを追加する

「Atlantic」テーマを使用して、Shopifyのページの垂直タブの取得に取り組んでいます。このテーマにはデフォルトで垂直タブがないため、外部JSとCSSの「jquery-jvert-tabs」を使用しました。

私の質問は、JSファイルとCSSファイルをアセットとしてアップロードする場合、特定のスタイル要素が利用可能な場合、これらを使用するページにそれらをリンクし、その後ページでこれらを使用する方法ですそこにも？

javascriptjqueryhtmlcssshopify
24
gagneet

assetsフォルダーにfilename.jsファイルをアップロードするだけです。

次に、theme.liquidheadセクションに以下をドロップします。

{{ 'filename.js' | asset_url | script_tag }}

ところで、ファイル名を変更し、.liquid extensionを追加する必要があります

filename.js.liquid

幸運を！

31
JCharette

私が正しく理解していれば、 asset_url filter が探しているものです。

JSファイルを.liquidファイルに含めるには、次を使用します。

{{ 'script.js' | asset_url | script_tag }}

CSSファイル：

{{ 'style.css' | asset_url | stylesheet_tag }}
31
Steph Sharp

グローバル名前空間を汚染したくない場合は、JavaScriptまたはCSSを特定の領域に制限できます。

Shopifyは、単純なifステートメントとそのページハンドルを使用します（www.foo.com/abcd/barの場合、「bar」がハンドルになります）。

{% if page.handle == "bar" %}
    {{ 'your_custom_javascript.js' | asset_url | script_tag }}
    {{ 'your_custom_css.css' | asset_url | stylesheet_tag }}
{% endif %}

これは、特定のページに小さな変更を加えたい場合に非常に便利です。

4
Peter Piper