Me gustaría pasar datos de la siguiente configuración de esquema a JS. Las cadenas de varias palabras se ingresarán en el editor. Usando un control deslizante, el usuario debería poder hacer clic en las cotizaciones y ver la cotización actual. Sin embargo, cuando aparecen las comillas, solo se muestra la primera palabra de la cadena. Por ejemplo: si se ingresa la cadena "New York Times" en el editor, solo se muestra "Nuevo". ¿Cómo puedo arreglar mi código para que toda la cadena se pase a JS?
En el archivo líquido tengo lo siguiente:
<li class="press-slider-item" data-quote={{block.settings.quote}} {{ block.shopify_attributes }}> ... { "type": "textarea", "id": "quote", "label": "Featured Quote" }Intenté acceder a los valores de los datos haciendo lo siguiente en JS:
var quoteList = []; $(document).ready(()=>{ const slides = document.querySelectorAll('.press-slider-item'); slides.forEach(slide=>quoteList.push(slide.dataset.quote)); ...Luego se define el evento 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]; } });Lo descubrí usando scripts en línea. Aquí está mi solución. No estoy seguro si esta es la mejor manera de hacer esto, pero funciona para lo que necesito.
<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>