问题描述
这是我的CSS
<style>
/* Color of active silder dot */
.slick-dots li.slick-active button:before {
color: {{ block.settings.colorDotActive }};
}
</style>
这是我的模式块
{
"name": "Homepage","blocks": [
{
"type": "home_slider","name": "Home Page Slider","settings": [
{
"type": "text","id": "sliderSpeed","label": "Slider Speed","default": "300","info": "100 = 1 second"
},{
"type": "color","id": "colorDotActive","label": "Active Dot Color"
},"id": "colorDot","label": "Dot Color"
}
]
}
]
}
无论出于何种原因颜色不变，Shopify中的颜色选择器仍然存在。只是没有将它传递给班级。
我也尝试过使用{％stylesheet％}标签，但这也不起作用。
这是请求者的整个文件-
{% for block in section.blocks %}
{% case block.type %}
{% when 'full_image_hero' %}
<div class="full_image_hero_container">
{% if block.settings.image_hero_mobile != blank %}
<a href="{{ block.settings.hero_link }}" class="hide_on_desktop">
<img src="{{ block.settings.image_hero_mobile | img_url: 'large' }}" />
</a>
{% else %}
<a href="{{ block.settings.hero_link }}" class="hide_on_desktop">
<img src="{{ block.settings.image_hero | img_url: 'large' }}" />
</a>
{% endif %}
{% if block.settings.image_hero != blank %}
<a href="{{ block.settings.hero_link }}" class="hide_on_mobile">
<img src="{{ block.settings.image_hero | img_url: 'master' }}" />
</a>
{% endif %}
</div><!-- end .full_image_hero_container -->
{% when 'hero_image_and_text' %}
<div class="hero_image_and_text_container
{% if block.settings.mobile_image_full_width %}
full_width
{% endif %}
"
style="background-color:{{ block.settings.hero_background_color }};">
<div class="hero_text float_{{ block.settings.hero_layout_format }} hide_on_mobile">
{% if block.settings.hero_subtitle != blank %}
<h3>{{ block.settings.hero_subtitle }}</h3>
{% endif %}
{% if block.settings.hero_title != blank %}
<h2>{{ block.settings.hero_title }}</h2>
{% endif %}
{% if block.settings.hero_text != blank %}
<p>{{ block.settings.hero_text }}</p>
{% endif %}
<a href="{{ block.settings.hero_link }}">
<button class="button">{{ block.settings.hero_button_text }}</button>
</a>
</div>
<div class="hero_image">
{% if block.settings.image_hero_mobile != blank %}
<a href="{{ block.settings.hero_link }}" class="hide_on_desktop">
<img src="{{ block.settings.image_hero_mobile | img_url: 'large' }}" />
</a>
{% else %}
<a href="{{ block.settings.hero_link }}" class="hide_on_desktop">
<img src="{{ block.settings.image_hero | img_url: 'large' }}" />
</a>
{% endif %}
{% if block.settings.image_hero != blank %}
<a href="{{ block.settings.hero_link }}" class="hide_on_mobile">
<img src="{{ block.settings.image_hero | img_url: 'master' }}" />
</a>
{% endif %}
</div>
<div class="hero_text hide_on_desktop">
{% if block.settings.hero_subtitle_mobile == true %}
<h3>{{ block.settings.hero_subtitle }}</h3>
{% endif %}
{% if block.settings.hero_title_mobile == true %}
<h2>{{ block.settings.hero_title }}</h2>
{% endif %}
{% if block.settings.hero_text_mobile == true %}
<p>{{ block.settings.hero_text }}</p>
{% endif %}
<a href="{{ block.settings.hero_link }}">
<button class="button">{{ block.settings.hero_button_text }}</button>
</a>
</div>
</div>
<hr class="hide_on_desktop" />
{% when 'featured_collection' %}
<div class="featured_collection">
<h2>{{ block.settings.featured_collection_title }}</h2>
{% for product in collections[block.settings.featured_collection_collection].products %}
{% include 'bold-product' with product,hide_action: 'skip' %}
<div class="product">
<a href="{{ product.url }}">
<div class="product_list_image" style="background-image:url({{ product.images[2] | product_img_url: 'large' }});">
<img src="{{ product.featured_image | img_url: 'large' }}">
</div>
<div class="product_title"><h3>{{ product.title }}</h3></div>
<p class="collection_product_price {% if product.compare_at_price > product.price %}on_sale{% endif %}">
<span class="original_price">{{ product.compare_at_price | money }}</span>
<span class="{% if product.compare_at_price > product.price %}sale_{% endif %}price">{{ product.price | money }}</span>
</p>
</a>
</div>
{% endfor %}
</div><!-- end .featured_collection -->
<hr class="hide_on_desktop" />
{% endcase %}
{% endfor %}
<style type="text/css">
/* Full Image Hero */
.full_image_hero_container img{display:block; height:auto; width:100%;}
/* Hero Image and Text */
.hero_image_and_text_container{padding:9% 7% 0;}
.hero_image_and_text_container.full_width{padding:0;}
.hero_image_and_text_container h2{font-size:43px; font-weight:300; text-transform:uppercase;}
.hero_image_and_text_container h3{font-size:12px; font-weight:300; margin-top:3em; text-transform:uppercase;}
.hero_image_and_text_container p{font-size:28px;}
.hero_image img{height:auto; width:100%;}
.hero_text{text-align:center;}
.hero_image_and_text_container.full_width .hero_text p{padding:0 2% 2%;}
hr{border:none; border-top:1px solid #DCDDDE; margin:9% auto; width:75%;}
/* Desktop */
@media screen and (min-width:1098px){
.hero_image_and_text_container,.hero_image_and_text_container.full_width{
align-items:center;
display:flex;
padding:5%;
}
.hero_image_and_text_container > div{display:inline-block; vertical-align:top; width:47%;}
.hero_text.float_left{padding-right:5%;}
.hero_text.float_right{order:2; padding-left:5%;}
.hero_text.hide_on_desktop{display:none;}
}
/* Mobile Only */
@media screen and (max-width:1097px){
.hero_image_and_text_container{background-color:white !important;}
}
/* Featured Collection */
.featured_collection{padding:0 4%; text-align:center;}
.featured_collection h2{font-size:25px; font-weight:300; margin-bottom:1.5em; text-transform:uppercase;}
.featured_collection .product{display:inline-block; margin-bottom:3em; vertical-align:top; width:44%;}
.featured_collection .product:nth-of-type(even){margin-left:2%;}
.featured_collection .product img{display:block; height:auto; width:100%;}
.featured_collection a{text-decoration:none;}
.product_title h3{font-size:12px; font-weight:300; margin-bottom:.5em;}
.collection_product_price{font-size:11px; margin-top:0;}
.collection_product_price .price{font-weight:700; letter-spacing:2;}
/* Desktop */
@media screen and (min-width:1098px){
.featured_collection h2{display:none;}
.featured_collection .product{width:18%;}
.featured_collection .product:nth-of-type(even){margin-left:3%;}
.featured_collection .product{margin:0 3% 3em;}
}
</style>
{% schema %}
{
"name": "Home Page Slider","blocks": [
{
"type" : "full_image_hero","name" : "Full Image Hero","settings" : [
{
"type" : "image_picker","id" : "image_hero","label" : "Hero Image","info" : "1,366 x 548"
},{
"type" : "image_picker","id" : "image_hero_mobile","label" : "Hero Image Mobile"
},{
"id" : "hero_link","type" : "url","label" : "Hero link"
}
]
},{
"type" : "hero_image_and_text","name" : "Hero Image and Text","info" : "820 x 820"
},{
"id" : "mobile_image_full_width","type" : "checkBox","default": true,"label" : "Make image on mobile full width"
},"label" : "Hero link"
},{
"id" : "hero_subtitle","type" : "text","label" : "Hero subtitle"
},{
"id" : "hero_subtitle_mobile","label" : "Show hero subtitle on mobile"
},{
"id" : "hero_title","label" : "Hero title"
},{
"id" : "hero_title_mobile","label" : "Show hero title on mobile"
},{
"id" : "hero_text","type" : "textarea","label" : "Hero Text"
},{
"id" : "hero_text_mobile","label" : "Show hero text on mobile"
},{
"id" : "hero_button_text","default": "Shop Now","label" : "Hero button text"
},{
"id" : "hero_background_color","type" : "color","label" : "Hero background color","default": "#F7F7F7"
},{
"id" : "hero_layout_format","type" : "select","options": [
{ "value": "left","label": "Text Left - Image Right"},{ "value": "right","label": "Text Right - Image Left"}
],"label" : "Hero layout format"
}
]
},{
"type": "featured_collection","settings": [
{
"type": "text","id": "featured_collection_title","label": "Featured Collection Title"
},{
"type": "collection","id": "featured_collection_collection","label": "Featured Collection"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
感谢您的帮助！
解决方法
您不必在块级中指定活动点的颜色，而是在部分级中指定，因为这是整个设置的全局设置部分，并且不会从一个块更改为另一个块，请按照以下步骤操作：
- 将这段代码放在节文件的开头：
{% schema %}
{
"name": "Home Page Slider","settings": [
{
"type": "text","id": "sliderSpeed","label": "Slider Speed","default": "300","info": "1000 = 1 second"
},{
"type": "color","id": "colorDotActive","label": "Active Dot Color","default": "#ff0000"
},"id": "colorDot","label": "Dot Color","default": "#0000ff"
}
],"blocks": [
.... Your old block setting.....
]
}
{% endschema %}
- 然后，甚至在打开特定于块的设置之前，将全局设置添加到Schema标记的最开始的整个部分，如下所示：
{{1}}