Hi Everyone,
Thanks for taking a look at this question, any feedback would be greatful. I created a logo carousel for my store. I installed glide.js, built the whole thing using blocks (see below). Everything works great, from admin and frontend of the store. However, if a user we’re to make an adjustment to anything in the section in the dashboard, only one of the logos becomes visible and seems like all the other logos are either hidden and / or the JS breaks. This only happens in the backend, and never on the frontend of the site.
Image 1 (below) - Preview of the section, and the carousel dashboard
Image 2 (below)- shows an option clicked- I clicked change logos to grayscale, and the carousel breaking.
Code at the very bottom
Appreciate any help. Thanks again!
{%- assign set = section.settings -%}
{% assign blockcount = 0 %}
{% style %}
{% if set.logo_grayscaled %}
#lcarousel img{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
#lcarousel img:hover{
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}
{% endif %}
#lcarousel > div.glide__arrows > button > i {
color: {{set.arrows_color}};
}
{% endstyle %}
{%- if section.blocks.size > 0 -%}
{% for block in section.blocks %}
- {%- assign setb = block.settings -%}
{%- if setb.logo_title != blank -%}
{{ setb.logo_title }}
{% endif %}
{% assign blockcount = blockcount | plus: 1 %}
{% endfor %}
{% endif %}
{% assign blockcount = blockcount | minus: 1%}
{% for i in (0..blockcount) %}
{% endfor %}
{% schema %}
{
"name": "Logos Carousel",
"tag": "section",
"class": "lcarousel-section",
"max_blocks": 9,
"settings": [
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "arrows_color",
"label": "Arrow Icons color",
"default": "#000000"
},
{
"type": "checkbox",
"id": "logo_grayscaled",
"default": false,
"label": "Logos Grayscaled",
"info": "Web automate logos to be black and white for design aesthetics. Note: This feature does not work in IE11 or lesser versions"
}
],
"blocks": [
{
"type": "Logos",
"name": "logo",
"settings": [
{
"type": "image_picker",
"id": "logo_img",
"label": "Logo Image",
"info": "Required"
},
{
"type": "text",
"id": "logo_title",
"label": "Logo - brand text",
"info": "Optional"
},
{
"type": "color",
"id": "arrows_color",
"label": "Background color",
"default": "#000000"
},
{
"type": "url",
"id": "logo_link",
"label": "Logo URL"
}
]
}
],
"presets": [
{
"name": "Logos Carousel",
"category": "Carousel"
}
]
}
{% endschema %}
