Passing data attributes from Shopify Schema blocks to JS

willaskitchen
New Member
1 0 0

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];
  }
});
Replies 0 (0)