在 JavaScript 中使用 Liquid 变量

Question

我刚开始使用 Shopify Liquid，我在尝试在 JavaScript 中使用 Liquid 变量时遇到了问题。我已经将一个 Instagram 提要放在一起，我想将其用作一个部分，以便可以在 CMS 内而不是在代码中轻松添加和更改 UserId、ClientId 和 accessToken。我遇到的问题是没有拾取 Liquid 变量。

我已经为三个字段添加了数据设置，然后将这些字段添加到脚本中，但没有任何效果。提要有效，但前提是我手动将 ID 和令牌添加到脚本中，而不是通过 Liquid。

对此有任何帮助都会很棒:)

{% if section.settings.insta_enable != blank %}

  {% if section.settings.insta_handle %}
  <div class="ss-handle">
    <h2>be social <a href="https://www.instagram.com/{{ section.settings.insta_handle }}" target="_blank">@{{ section.settings.insta_handle }}</a></h2>
  </div>
  {% endif %}

  <div data-section-id="{{ section.id }}" id="ss-instagram-feed" data-settings='{
  "user_id": {{ section.settings.user_id }},
  "client_id": {{ section.settings.client_id }},
  "access_token": "{{ section.settings.access_token }}"
  }'></div>

<!--
Note:
"user_id": {{ section.settings.instagram_id }}, // numeric (no quotes)
"access_token": "{{ section.settings.instagram_access_token }}", // string in quotes
-->

{% endif %}


{% schema %}
  {
    "name": "Instagram Feed",
    "settings": [
      {
        "type": "header",
        "content": "Feed Configuration"
      },
      {
        "label": "Enable Instagram feed",
        "id": "insta_enable",
        "type": "checkbox"
      },
      {
        "label": "User ID",
        "id": "user_id",
        "type": "text"
      },
      {
        "label": "Client ID",
        "id": "client_id",
        "type": "text"
      },
      {
        "label": "Access Token",
        "id": "access_token",
        "type": "text"
      },
      {
        "label": "Insta Handle (enter without @ symbol)",
        "id": "insta_handle",
        "type": "text"
      }
    ],
    "presets": [
      {
        "name": "Instagram Feed",
        "category": "Image"
      }
    ]
  }
{% endschema %}

{% javascript %}
//<script>

function instafeed_load() {

  // JS goes here
  $(document).ready(function() {

    var settings = $('#ss-instagram-feed').data('settings');

    var feed = new Instafeed({
        clientId: 'settings.client_id', 
        accessToken: 'settings.access_token',
        get: 'user',
        userId: settings.user_id,,
        target: 'ss-instagram-feed',
        limit: 5,
        resolution: 'standard_resolution',
        template: '<li><a class="instagram-image" href="{{link}}" target="_blank"><img src="{{image}}"/></a></li>'
    });
    feed.run();

  });

  $(window).on('load', function() {
    setTimeout(function() {
      $('body, #ss-instagram-feed, h1, h3').addClass('loaded');
    }, 500);
  });

}
function instafeed_unload() {
  // you will want to do clean-up and/or destroy what you created in instafeed_load
}
function instafeed_event_handler(event) {
  // there are cleaner ways to write this, but the below works for me
  if (event.detail.sectionId == '1533732475847') { // 1533732475847 or insta-feed
    if (event.type == 'shopify:section:load') {
      instafeed_load();
    } else if (event.type == 'shopify:section:unload') {
      instafeed_unload();
    }
  }
}

$(document).on('shopify:section:load shopify:section:unload', instafeed_event_handler);
$(document).ready(function() {
  instafeed_load(); // this is to execute on initial page load
});

//</script>
{% endjavascript %}

Answer 1

你可以这样做：

<script>
var myVar = {{yourLiquidVar | json}}
</script>

该指令会将您的液体 var 转换为 json 格式