I'd like to pass data from the following schema setting to JS. Multi-word strings will be input in the editor. Using a slick slider, the user should be able to click through the quotes and see the current quote. However, when the quotes show up, only the first word of the string is displayed. For example: if the string "New York Times" is entered in the editor, only "New" is displayed". How can I fix my code so that the whole string is passed to JS?
In the liquid file I have the following:
<li class="press-slider-item" data-quote={{block.settings.quote}} {{ block.shopify_attributes }}>
...
{
"type": "textarea",
"id": "quote",
"label": "Featured Quote"
}
I attempted to access the data values by doing the following in JS:
var quoteList = [];
$(document).ready(()=>{
const slides = document.querySelectorAll('.press-slider-item');
slides.forEach(slide=>quoteList.push(slide.dataset.quote));
...
Then the Slick afterChange event is defined:
$('.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];
}
});
I figured it out using inline scripts. Here's my solution. Not sure if this is the best way to do this, but it works for what I need.
<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>