#css #shopify #liquid
#css #Shopify #жидкость
Вопрос:
Это мой 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"
},
{
"type": "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",
"settings" : [
{
"type" : "image_picker",
"id" : "image_hero",
"label" : "Hero Image",
"info" : "820 x 820"
},
{
"type" : "image_picker",
"id" : "image_hero_mobile",
"label" : "Hero Image Mobile"
},
{
"id" : "mobile_image_full_width",
"type" : "checkbox",
"default": true,
"label" : "Make image on mobile full width"
},
{
"id" : "hero_link",
"type" : "url",
"label" : "Hero link"
},
{
"id" : "hero_subtitle",
"type" : "text",
"label" : "Hero subtitle"
},
{
"id" : "hero_subtitle_mobile",
"type" : "checkbox",
"default": true,
"label" : "Show hero subtitle on mobile"
},
{
"id" : "hero_title",
"type" : "text",
"label" : "Hero title"
},
{
"id" : "hero_title_mobile",
"type" : "checkbox",
"default": true,
"label" : "Show hero title on mobile"
},
{
"id" : "hero_text",
"type" : "textarea",
"label" : "Hero Text"
},
{
"id" : "hero_text_mobile",
"type" : "checkbox",
"default": true,
"label" : "Show hero text on mobile"
},
{
"id" : "hero_button_text",
"type" : "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",
"name": "Home Page Slider",
"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 %}
Спасибо за помощь!
Комментарии:
1. Где находится этот тег стиля? Цикл внутри блоков? Пожалуйста, поделитесь полным кодом для раздела.
2. Добавлен файл @BilalAkbar.
3. Я не вижу никакой переменной liquid внутри тега style в вашем добавленном файле. Что я хотел сказать ранее, так это то, что если вы хотите использовать некоторые настройки блока, то тег style также должен находиться внутри цикла for, который выполняет итерацию по блокам.
Ответ №1:
Вам не нужно указывать цвет активной точки на уровне блоков, а скорее на уровне раздела, поскольку это глобальная настройка для всего раздела и не изменяется от одного блока к другому, действуйте следующим образом :
- поместите этот фрагмент кода в начало вашего файла раздела:
<style>
/* Color of active silder dot */
.slick-dots li.slick-active button:before {
color: {{section.settings.colorDotActive }};
}
</style>
- Затем добавьте глобальные настройки для всего раздела в самом начале тега схемы, даже перед открытием настроек, специфичных для блоков, следующим образом:
{% 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"
},
{
"type": "color",
"id": "colorDot",
"label": "Dot Color",
"default": "#0000ff"
}
],
"blocks": [
.... Your old block setting.....
]
}
{% endschema %}