Shopify：在JavaScript中调用{% schema %}中的变量

Hey there! I totally get where you're coming from—using Liquid to pull section settings is straightforward, but switching to JavaScript can feel a bit tricky at first. The key thing to remember is that Liquid runs on the server before the page loads, while JavaScript runs in the browser afterward. That means we need to "pass" those Liquid-generated settings to your JS code first. Let's walk through two reliable ways to do this:

Method 1: Use a Global JavaScript Variable #

First, in your section's Liquid file (like sections/custom.liquid), add a script tag that outputs your section settings as a JSON object. We'll use the escape filter to make sure any special characters (like quotes) don't break the JavaScript syntax:

{% comment %} Inject section settings into a global JS variable {% endcomment %}
<script>
  const customSectionData = {
    productName: "{{ section.settings.custom_text_product | escape }}",
    customMessage: "{{ section.settings.custom_text_msg | escape }}"
  };
</script>

Then, write your JavaScript to grab this data and add it to the DOM. We'll wait for the DOM to fully load to make sure we're targeting existing elements:

document.addEventListener('DOMContentLoaded', function() {
  // Destructure the settings from our global variable
  const { productName, customMessage } = customSectionData;

  // Create elements to display the text
  const productTitle = document.createElement('h3');
  productTitle.textContent = productName;

  const customText = document.createElement('p');
  customText.textContent = customMessage;

  // Append the elements to your target container (update the selector to match your code)
  const sectionContainer = document.querySelector('.custom-section');
  if (sectionContainer) {
    sectionContainer.appendChild(productTitle);
    sectionContainer.appendChild(customText);
  }
});

Method 2: Use HTML Data Attributes #

If you prefer keeping data tied directly to your section's HTML (more semantic!), you can add data-* attributes to your section's root element:

{% comment %} Add settings as data attributes to the section container {% endcomment %}
<div class="custom-section"
     data-product-name="{{ section.settings.custom_text_product | escape }}"
     data-custom-message="{{ section.settings.custom_text_msg | escape }}">
  <!-- Your existing section content goes here -->
</div>

Then, your JavaScript can fetch these values directly from the element's dataset:

document.addEventListener('DOMContentLoaded', function() {
  const sectionContainer = document.querySelector('.custom-section');
  if (!sectionContainer) return; // Exit if the container doesn't exist

  // Get values from the dataset
  const productName = sectionContainer.dataset.productName;
  const customMessage = sectionContainer.dataset.customMessage;

  // Create and append elements just like before
  const productTitle = document.createElement('h3');
  productTitle.textContent = productName;

  const customText = document.createElement('p');
  customText.textContent = customMessage;

  sectionContainer.appendChild(productTitle);
  sectionContainer.appendChild(customText);
});

Both methods work great—pick whichever fits your coding style better. The escape filter is crucial here to prevent issues with special characters in your text areas, so don't skip that!

内容的提问来源于stack exchange，提问作者Diego Fortes