Shopify / theme-check

The Ultimate Shopify Theme Linter
Other
333 stars 96 forks source link

Liquid check should be ignored if contains HTML #704

Open bakura10 opened 1 year ago

bakura10 commented 1 year ago

Hi,

As of today, the Liquid tag is actually extremely annoying to use as soon as you have HTML mixed inside the Liquid. Take for instance this code:

{%- if order.shipping_address and fulfillment -%}
            {%- assign created_at = fulfillment.created_at | date: format: 'date' -%}

            {%- if fulfillment.tracking_number -%}
              {%- assign fulfillment_message = 'customer.order.fulfillment_with_number' | t: date: created_at, tracking_number: fulfillment.tracking_number -%}
            {%- else -%}
              {%- assign fulfillment_message = 'customer.order.fulfillment' | t: date: created_at -%}
            {%- endif -%}

            {%- if fulfillment.tracking_url -%}
              {%- capture fulfillment_message -%}
                {%- assign button_content = 'customer.order.track_shipment' | t -%}

                <div class="banner__text-with-button">
                  {{- fulfillment_message -}}
                  {%- render 'button', href: fulfillment.tracking_url, external: true, content: button_content, size: 'sm' -%}
                </div>
              {%- endcapture -%}
            {%- endif -%}

            {%- render 'banner', status: 'success', content: fulfillment_message -%}
          {%- endif -%}

Converting it to Liquid tag is simple, but once this line is hit:

<div class="banner__text-with-button">
                  {{- fulfillment_message -}}
                  {%- render 'button', href: fulfillment.tracking_url, external: true, content: button_content, size: 'sm' -%}
                </div>

This becomes something like this:

echo '<div class="banner__text-with-button">'
echo fulfillment_message
echo '</div>'

The issue here is that we loose all the color syntaxing and validation of the IDE.

I think that we should have a new option for the Liquid check to does not count a block as soon as it contains a HTML code. In this case, the whole if condition should count as "0" line of Liquid if this option would be enabled.

Of course, a better solution would be to improve the Liquid tag to allow outputting HTML inside.