Блог

Каким образом было бы лучше иметь блоки в Shopify, но с тем же синтаксисом стиля? Если я дважды выбираю один и тот же блок в редакторе тем Shopify, применяется стиль второго блока. Как бы мне заставить оба блока иметь свой собственный стиль?

То, что у меня есть, похоже на это:

Стиль:

 <style>
{%- for block in section.blocks -%}
.announce {
   font-size: {{ block.settings.announce_text_size | append: 'px'}};
   font-weight: {{ block.settings.announce_text_weight }};    
   {%- if block.settings.announce_text_align == 'left' -%}
    padding-left: 45px;
   {%- endif -%} 
   {%- if block.settings.announce_text_align == 'right' -%}
    padding-right: 45px;
   {%- endif -%}
   color: {{ block.settings.announce_text_color }};
      }
  {%- endfor -%}
   </style>
 

Содержание:

 {%- for block in section.blocks -%}
      {%- if block.type == 'announcement' -%}
    
    <div class="announce">
      
      {%- if block.settings.announce_text != blank -%}
 {{ block.settings.announce_text }}
    
      {%- endif -%}
    </div>
    {%- endif -%}
    {%- endfor -%}
 

Применяется только последний стиль, потому что вы переопределяете стили в классе. Либо добавьте встроенные стили, либо создайте уникальный класс для каждого блока, используя id. Я создаю отдельный класс для каждого блока, используя идентификатор блока в приведенном ниже коде.

 <div class="page-width" data-section-id="{{ section.id }}">

  <style>
    {% for block in section.blocks %}
    .announcement-{{block.id}} {
      font-size: {{block.settings.fontSize | append: "px"}};
    }
    {% endfor %}
  </style>

  {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}

        <div class="announcement-{{block.id}}">
            {{block.settings.announcementText}}
        </div>
        
        {% endfor %}
  {% endif %}

</div>



{% schema %}
{
  "name": "Test Section",
  "class": "test-section",
  "max_blocks": 5,
  "blocks": [
    {
      "type": "sample-block",
      "name": "Block",
      "settings": [
        {
          "type": "text",
          "id": "announcementText",
          "label": "Announcement Text"

        },
        {
            "type":   "range",
            "id":     "fontSize",
            "min":       10,
            "max":       50,
            "step":      4,
            "unit":      "px",
            "label":     "Font Size",
            "default":   10
        }
      ]
    }
  ]
}
{% endschema %}