Shopify slick slider with section have problems?

Question

I'm working building Shopify theme and adding the slick slider plugin http://kenwheeler.github.io/slick/.

I have created schema json for setting inside of and the code for Slider but cannot get to work. I'm getting an error message:

15:48:35 [development]Asset Perform Update to sections/slick-silder.liquid at host unique-legacy.myshopify.com

Status: 422 Unprocessable Entity Errors: Invalid JSON in tag 'schema' 15:48:58 [development]Asset config/settings_data.json filtered based on ignore patterns

My mentor told me that not anything wrong with JSON schema but something going own with the slick slider that created but still cannot wrap head around what going on.

Explain Code: What trying to create is a custom slider with slick and created in the way that it's inside the new section option.

So the user that using the theme can put the slider on any page and move to bottom or top.

Can someone explain to, please

{% if section.blocks.size > 0 %}
<!-- Slick Slider Wrapper -->
<div class="carousel-wrapper" style="background-color: red;">
    <div class="carousel-info">
      <!-- Title Slider Wrapper -->
      <h3>{{ section.settings.carousel_title }}</h3>
      <!-- Description Wrapper -->
      <p>{{ section.settings.carousel_product_description }}</p>
      <!-- Button Wrapper -->
      <button>{{ section.settings.carousel_button_title }}</button>
    </div>

    <!-- Slick Slider -->
    <div id="carousel-{{ section.id }}" class="carousel" data-slick="autoplay">
    {% for block in section.blocks %}
        <div class="carousel-slide--{{ block.id }}" {{ block.shopify_attributes }} style="width:240px">
            {% if block.settings.carousel_image != blank %}
                    <img class="carousel_image--{{ block.id }}" src="{{ block.settings.carousel_image | img_url: '240x' }}" style="max-width:240px;display:inline-block;padding:40px">
            {% endif %}
        </div>
    {% endfor %}
    </div>
    <!-- ended of Slick Slider -->
  </div>

  </div>
  {% endif %}

  {% if section.blocks.size == 0 %}
    <div class="placeholder-noblocks">
        {{ 'homepage.onboarding.no_content' | t }}
    </div>
  {% endif %}

  <!-- Slick Slider Wrapper -->

{% schema %}
{
       "name": "Carousel Images",
       "max_blocks": 8,
       "settings": [
       {
          "type":"header",
          "content":"Carousel option"
       },
       {
          "type":"text",
          "id":"carousel_title",
          "label":"Carousel title",
          "default":"Carousel main title"
       },
       {
         "type": "text",
         "id": "carousel_title",
         "label":"Carousel title",
         "default":"Carousel main title"
       },
       {
         "type": "text",
         "id": "carousel_product_description",
         "label": "Carousel Description",
         "default: Carousel Main Description"
       },
       {
         "type": "url",
         "id": "carousel_link",
         "label": "Carousel title link"
       },
       {
          "type":"header",
          "content":"In depth carousel option"
       },
       {
         "type": "checkbox",
         "id": "carousel_autoplay",
         "label": "Auto-rotate slides",
         "default": false
       },
       {
          "type":"color",
          "id":"carousel_bg",
          "label":"Carousel background",
          "default":"#fff"
       }
     ],
     "blocks": [
       {
         "type": "image",
         "name": "Image slide",
         "settings": [
           {
             "type": "image_picker",
             "id": "carousel_image",
             "label": "Image"
           },
           {
             "type": "url",
             "id": "slide_link",
             "label": "Slide link"
           }
         ]
       }
     ],
     "presets": [{
       "name": "Carousel",
       "category": "Image",
       "settings": {
         "carousel_autoplay": false
       },
       "blocks": [
         {
           "type": "image"
         },
         {
           "type": "image"
         },
         {
           "type": "image"
         },
         {
           "type": "image"
         },
         {
           "type": "image"
         },
         {
           "type": "image"
         }
       ]
     }]
   }
{% endschema %}

score 0 · Accepted Answer · answered Sep 27 '17 at 05:16

You have an error in your JSON schema.

   {
     "type": "text",
     "id": "carousel_product_description",
     "label": "Carousel Description",
     "default: Carousel Main Description"
   },

There is no closing " at default and no opening " at Carousel Main Description.

Validate your JSON in here: https://jsonlint.com/ you will see it as well.

Shopify slick slider with section have problems?

1 Answers1