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

Question

我想从以下模式设置传递数据到JS。将在编辑器中输入多字字符串。使用光滑的滑块，用户应该能够点击报价并查看当前报价。但是，当引号出现时，只显示字符串的第一个单词。例如:如果字符串"New York Times"在编辑器中输入，只有"new";displayed"。我怎么能修复我的代码，使整个字符串传递给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];
}
});

Answer 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>