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>

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

Answer 2

对于JS，您可以使用类似以下内容的

：

var contactId = "{{user.id}}";

您需要设置引号，例如字符串。

Answer 3

您可以在单引号中为 js 使用 Liquid 变量，这是示例。

from serpapi import GoogleSearch

params = {
  "api_key": "YOUR_API_KEY",
  "engine": "google",
  "q": "definition calcium",
  "google_domain": "google.com",
}

search = GoogleSearch(params)
results = search.get_dict()

syllables = results['answer_box']['syllables']
phonetic = results['answer_box']['phonetic']
noun = results['answer_box']['definitions'][0] # specifying index since the output is an array
print(f'{syllables}\n{phonetic}\n{noun}')

# Output:
'''
cal·ci·um
ˈkalsēəm
the chemical element of atomic number 20, a soft gray metal.
'''

如果liquid var是一个对象，那么你可以使用

{% assign test = 0 %}

//calling liquid variable in js

var testval= '{{test }}';

在JavaScript中使用Liquid变量

3 个答案: