带有部分的 Shopify 光滑滑块有问题吗?
Shopify slick slider with section have problems?
我正在构建 Shopify 主题并添加灵活的滑块插件 http://kenwheeler.github.io/slick/。
我已经创建了架构 json 用于设置内部和 Slider 的代码,但无法开始工作。我收到一条错误消息:
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
我的导师告诉我,JSON 架构没有任何问题,但创建的光滑滑块有一些问题,但仍然无法解决正在发生的事情。
解释代码: 试图创建的是一个带有光滑的自定义滑块,并以其在新部分选项中的方式创建。
因此使用主题的用户可以将滑块放在任何页面上并移动到底部或顶部。
有人可以解释一下吗
{% 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 %}
您的 JSON 架构有误。
{
"type": "text",
"id": "carousel_product_description",
"label": "Carousel Description",
"default: Carousel Main Description"
},
default
没有平仓 "
,Carousel Main Description
没有开仓 "
。
在此处验证您的 JSON:https://jsonlint.com/ 您也会看到它。
我正在构建 Shopify 主题并添加灵活的滑块插件 http://kenwheeler.github.io/slick/。
我已经创建了架构 json 用于设置内部和 Slider 的代码,但无法开始工作。我收到一条错误消息:
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
我的导师告诉我,JSON 架构没有任何问题,但创建的光滑滑块有一些问题,但仍然无法解决正在发生的事情。
解释代码: 试图创建的是一个带有光滑的自定义滑块,并以其在新部分选项中的方式创建。
因此使用主题的用户可以将滑块放在任何页面上并移动到底部或顶部。
有人可以解释一下吗
{% 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 %}
您的 JSON 架构有误。
{
"type": "text",
"id": "carousel_product_description",
"label": "Carousel Description",
"default: Carousel Main Description"
},
default
没有平仓 "
,Carousel Main Description
没有开仓 "
。
在此处验证您的 JSON:https://jsonlint.com/ 您也会看到它。