将数据属性从 Shopify Schema 块传递到 JS答案

【问题标题】：Passing data attributes from Shopify Schema blocks to JS将数据属性从 Shopify Schema 块传递到 JS
【发布时间】：2021-10-20 19:31:35
【问题描述】：

我想将以下架构设置中的数据传递给 JS。编辑器中将输入多字串。使用光滑的滑块，用户应该能够点击报价并查看当前报价。但是，当引号出现时，只显示字符串的第一个单词。例如：如果在编辑器中输入字符串“New York Times”，则只显示“New”。如何修复我的代码，以便将整个字符串传递给 JS？

在液体文件中，我有以下内容：

<li class="press-slider-item" data-quote={{block.settings.quote}} {{ block.shopify_attributes }}>      
...
{
          "type": "textarea",
          "id": "quote",
          "label": "Featured Quote"
}

我尝试通过在 JS 中执行以下操作来访问数据值：

var quoteList = [];
$(document).ready(()=>{
  const slides = document.querySelectorAll('.press-slider-item');
  slides.forEach(slide=>quoteList.push(slide.dataset.quote));
...

然后定义了 Slick afterChange 事件：

$('.press-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  const featQuote = document.getElementById('press-featured-quote');
  if(currentSlide + 1 == quoteList.length){
    console.log(quoteList[0]);
    featQuote.innerHTML = quoteList[0];
  }else{
    console.log(quoteList[currentSlide+1]);
    featQuote.innerHTML = quoteList[currentSlide+1];
  }
});

【问题讨论】：

标签： javascript jquery shopify liquid

【解决方案1】：

我使用内联脚本解决了这个问题。这是我的解决方案。不确定这是否是最好的方法，但它可以满足我的需要。

<script>var quoteList = [];</script>
        <ul class="press-slider">
          {% for block in section.blocks %}

            <li class="press-slider-item"{{ block.shopify_attributes }}>
              <script>quoteList.push(`{{block.settings.quote}}`)</script>
              {% if block.settings.link != blank %}
                <a href="{{ block.settings.link }}" class="logo-bar__link">
              {% endif %}
              {% if block.settings.image != blank %}
                {{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
              {% else %}
                {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
              {% endif %}
              {% if block.settings.link != blank %}
                </a>
              {% endif %}
            </li>
            {% endfor %}
          </ul>
          <script>
            $('.press-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
              const mediaQuery = window.matchMedia('(min-width: 481px)');
              // Check if the media query is true
              if (mediaQuery.matches) {
                const featQuote = document.getElementById('press-featured-quote');
                if(currentSlide + 1 == quoteList.length){
                  featQuote.innerHTML = quoteList[0];
                }else{
                  featQuote.innerHTML = quoteList[currentSlide+1];
                }
              }
            });
          </script>

【讨论】：