shopify - Liquid を使用してページ URL に応じて異なる .js 埋め込みを表示する

現在のページの URL に応じて、ページの特定の部分に異なる .js 埋め込みを表示するために Shopify コレクション ページを取得しようとしています。

これは、{% if page.url == %} を使用して実行できますか。その場合、ページ URL のバリエーションや特定の埋め込みコードはどのようにすればよいですか?

ページの URL は次のようになります:

https://www.example.com/collections/technology/technology-connected-home

埋め込みコードは次のようになります:

<script type="text/javascript" src="https://apps.example.com/app/js/18218989163.js"></script>```

------------------------

各 Shopify ストアには、インデックス (別名ホーム)、製品、コレクション、ページ、ブログ、記事、カートなど、さまざまな種類のページがあります。ページタイプの完全なリストは次のとおりです.

したがって、この page.url は、URL を取得するために適切なページ オブジェクトを使用する必要がある他のすべてのタイプのページ タイプのページ オブジェクトでのみ機能します。

コレクション.url 製品.url 等...

あなたの場合、case/when を使用し、スニペットにロジックを追加して、theme.liquid にレンダリングすることをお勧めします。

次に例を示します。

{% if request.page_type == 'page' %}
  {% case page.url %}
    {% when '/pages/about-us' %}
      {{ 'pages__about-us.js' | script_tag }}
    {% when '/pages/contact-us' %}
      {{ 'pages__contact-us.js' | script_tag }}
    {% else %}
      {{ 'pages__generic.js' | script_tag }}
  {% endcase %}
{% endif %}

参照

ケースを作成する前に request.page_type を確認する必要があります。または、次のようなスニペットの先頭でタイプを確認する別のアプローチもあります。

{% comment %} Set page object type {% endcomment %}
{% case request.page_type %}
  {% when 'page' %}
    {% assign page_object = page %}
  {% when 'collection' %}
    {% assign page_object = collection %}
  {% when 'product' %}
    {% assign page_object = product %}
{% endcase %}

{% comment %} Load JS based on page URL{% endcomment %}
{% case page_object.url %}
  {% when '/pages/about-us' %}
    {{ 'pages__about-us.js' | script_tag }}
  {% when '/pages/contact-us' %}
    {{ 'pages__contact-us.js' | script_tag }}
  {% else %}
    {{ 'pages__generic.js' | script_tag }}
{% endcase %}

これは完全なソリューションではありませんが、その上に構築するには十分です。

頑張ってください!

0

------------------------

page.handle を使用してハンドルを識別することをお勧めします。 page.url があなたが必要とするものを提供するとは思えません

------------------------

ハンドルは決して変更できないため、これを試すこともできます。

{% case page.handle %}
    {% when 'about-us' %}
      {{ 'pages_about-us.js' | script_tag }}
    {% when 'contact-us' %}
      {{ 'pages_contact-us.js' | script_tag }}
    {% else %}
      {{ 'pages_generic.js' | script_tag }}
  {% endcase %}