I have a slider and I want my JS to be updated and the slider to be updated when editing in the Customizer.Why does the code now, when updating {{ section.settings.change_slides_speed }} always display the default value 5 to the console, and only if I save it will display a different value to the console. Also does not update true/false values. How can I solve this problem
<script>
document.addEventListener('DOMContentLoaded', () => {
const initAnnouncementSlider = () => {
console.log({{ section.settings.change_slides_speed | json }});
const announcementBarSlider = document.querySelector(".announcement-bar__slider");
if (announcementBarSlider) {
new Splide(announcementBarSlider, {
arrows: false,
pagination: false,
type: 'loop',
autoplay: {{ section.settings.auto_rotate }},
interval: {{ section.settings.change_slides_speed }}000,
speed: 800,
perPage: 1,
perMove: 1,
}).mount();
}
};
initAnnouncementSlider();
if (Shopify.designMode) {
document.addEventListener('shopify:section:load', initAnnouncementSlider);
document.addEventListener('shopify:section:reorder', initAnnouncementSlider);
}
});
</script>
{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"class": "announcement-bar-section",
"enabled_on": {
"groups": ["header"]
},
"settings": [
{
"type": "checkbox",
"id": "auto_rotate",
"label": "t:sections.announcement-bar.settings.auto_rotate.label",
"default": false
},
{
"type": "range",
"id": "change_slides_speed",
"min": 3,
"max": 10,
"step": 1,
"unit": "s",
"label": "t:sections.announcement-bar.settings.change_slides_speed.label",
"default": 5
},
],
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"presets": [
{
"name": "t:sections.announcement-bar.presets.name",
"blocks": [
{
"type": "announcement"
}
]
}
]
}
{% endschema %}