TeamDijon

{% # Cart filters testing %}
{% liquid
  # A small liquid snippet to compare the two new filters from what was possible before
  # See https://shopify.dev/docs/api/liquid/filters/cart-filters for reference
  # Quite redundant in my opinion as this is basically sugar but maybe they'll find their audience
  
  assign targetProduct = all_products['product-handle']
  assign productId = targetProduct.id
  assign targetVariant = targetProduct.selected_or_first_available_variant
  assign variantId = targetVariant.id

TeamDijon

{% comment %}
  In this case, the merchant, for UX testing would like subscription products to be on top of the cart drawer, followed by the one-time purchase items.
  Usually, we would have two forloops inside the markup, with their distinctive conditions in order to sort the different products.
  Instead, we will prepare all the necessary data beforehand and loop over the more explicit arrays in the markup.
  For performance, in place of two for loops over the items, we only have one. In more critical use-cases, several ms are gained.
  For readability and maintenability, we have a DRY declaration at defined location which makes it more maintainable and readable.
  
  Note: The arrays are constructed using a for loop, a common pattern that works pretty well !
{% endcomment %}

TeamDijon

{% # Checking the presence of a block %}
{% liquid
  assign announcement_block_list = section.blocks | where: 'type', 'announcement'
  if announcement_block_list == empty
    # Take action to prepare fallback content
  endif
%}

/////////////////////////////////////////

TeamDijon

{% # Snippet documentation comment %}
{%- comment -%}
  Renders the template name based on the template object.

  Accepts:
    - template {Template object} - Template object

  Usage:
    {% render 'template-name' %}
{%- endcomment -%}

TeamDijon

{% comment %}
  - I have a product with a variant metafield containing associated cross-sell product list
  - Objective is to show cross-sell products associated with the variant
  - Second objective was to use object construction to remove complexity in markup
  - Inside the markup, we need the product reference for data population as well as the variant IDs which needs to show the cross sell card (used by Javascript)
{% endcomment %}

{% liquid
  # First, we make a duplicate-free list of cross-sell products
  assign cross_sell_product_list = ''

TeamDijon

{% comment %}
  Returns the color code most contrasted with the given color.
  
  Accepts:
    color {Hex color} - The background color of the element. Defaults to #ffffff.
    black {Hex color} - The first color we calculate the contrast with. Defaults to #000000. (Optional)
    white {Hex color} - The second color we calculate the constrast with. Defaults to #ffffff. (Optional)
  
  Usage:
    {% render 'color-contrast', color: section.settings.background_color %}

TeamDijon

{% # Inside the liquid file %}
{% liquid
  assign base_selector = '#shopify-section-' | append: section.id 
  assign accent_color = section.settings.accent_color
%}

<style>
  {{ base_selector }} {
    {% if accent_color != 'rgba(0,0,0,0)' and accent_color != '#000000' %}    
      --accent-color: {{ accent_color }};

TeamDijon

{% liquid
  # The setting is of "richtext" type
  assign blog_handle_list = section.settings.blog_handle_list

  assign associated_blog_list = ''
  assign markup_blog_markup_list = blog_handle_list | split: '</ul>' | first | split: '</li>'
  for markup_blog_handle in markup_blog_handle_list
     assign blog_handle = static_blog_handle | split: '>' | last
     assign associated_blog = blogs[blog_handle]

TeamDijon

{% comment %}
  If you have questions regarding the blog/article list interface, see :
  https://gist.github.com/TeamDijon/15684d1bef3c4bb5ca9dfd8a9381a156
  
  As always, with collections/blogs/articles, mind the potential conflicts with pagination

  For the article handle source, I usually go with a "ricthext" setting using unordered list.
  From this, I can retrieve the data and store everything in an array before using it on the following snippets of code
{% endcomment %}

TeamDijon

{%- comment -%}
  Minifies and return CSS. Returns nothing if the CSS is empty.

  Accepts:
  - css {string} - CSS to minify
  - section {Section object} - Section object (Optional)

  Usage:
    {% capture dynamic_style %}
      {% render 'template-section-style' %}