liquid & HTML, JS

Условия и вычисления

Стараемся избегать применение условий и вычисления в целевом фрагменте кода. Если требуется произвести проверку, нужно выполнить ее до и сохранить в переменую.
Основной посыл: целевой фрагмент должен легко читаться, не нужно разбираться в хитросплетении применяемых языков и их возможностей.
Liquid
        
          

Плохо
<div class="snippet_class {% if snippet %}snippet_class--{{ snippet }}{% endif %}}">
  <!--  -->
</div>

Хорошо
{% if snippet %}
  {% capture snippet_mod %}snippet_class--{{ snippet }}{% endcapture %}
{% endif %}}
<div class="snippet_class {{ snippet_mod }}">
  <!--  -->
</div>

 

Плохо
<script type="text/javascript">
$(function(){
  $( '.js-slider--index' ).owlCarousel({
    items: 1,
    loop: true,
    dots: false,
    autoplay: {% if settings.index_slider-autoplay == '1' %}true{% else %}false{% endif %},
    autoplayTimeout: {% if settings.index_slider-timeout %}{{ settings.index_slider-timeout }}
    {% else %}{{ assign timeout = 5000 }}{% endif %},
  });
});
</script>

Хорошо
{% if settings.index_slider-autoplay == '1' %}
  {% assign is_autoplay = true %}
{% else %}
  {% assign is_autoplay = false %}
{% endif %}

{% if settings.index_slider-timeout %}
  {% assign timeout = settings.index_slider-timeout %}
{% else %}
  {% assign timeout = 5000 %}
{% endif %}
<script type="text/javascript">
$(function(){
  $( '.js-slider--index' ).owlCarousel({
    items: 1,
    loop: true,
    dots: false,
    autoplay: {{ is_autoplay }},
    autoplayTimeout: {{ timeout }}
  });
});
</script>