Last active
June 19, 2024 02:47
Use-cases where creating arrays in Liquid can prove useful
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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 %} | |
{% liquid | |
assign subscription_item_list = '' | |
assign one_time_item_list = '' | |
for item in cart.items | |
if item.selling_plan_allocation | |
if subscription_item_list == blank | |
assign subscription_item_list = item | uniq | |
else | |
assign subscription_item_list = item | uniq | concat: subscription_item_list | |
endif | |
else | |
if one_time_item_list == blank | |
assign one_time_item_list = item | uniq | |
else | |
assign one_time_item_list = item | uniq | concat: one_time_item_list | |
endif | |
endif | |
endfor | |
assign subscription_item_list = subscription_item_list | reverse | |
assign one_time_item_list = one_time_item_list | reverse | |
%} | |
{% # Later in the document %} | |
{% for subscription_item in subscription_item_list %} | |
{% # Subscription items markup is handled here %} | |
{% endfor %} | |
{% for one_time_item in one_time_item_list %} | |
{% # One time items markup is handled here %} | |
{% endfor %} | |
//////////////////////////////////// | |
{% comment %} | |
In this case, I want to have a generic snippet for images. | |
Instead of writing a complex if condition looping over all format types at multiple times, I can create a list that will leverage the "contains" keyword | |
For performance, at any time I use my list, performance is gained over a complicated if condition. | |
For readability and maintainability, editing/extending the list is pretty easy and preparing the list beforehand makes it DRY. | |
{% endcomment %} | |
{% liquid | |
# We pass a media element (image, video ...) to the snippet | |
if media.media_type == 'image' | |
assign media_source = 'image_object' | |
else | |
# Easy to maintain format list | |
assign image_format_list = '.jpg' | uniq | |
assign image_format_list = '.png' | uniq | concat: image_format_list | |
assign image_format_list = '.webp' | uniq | concat: image_format_list | |
# ... | |
assign image_format_list = image_format_list | reverse | |
for image_format in image_format_list | |
if media contains image_format | |
assign media_source = 'image_url' | |
break | |
endif | |
endfor | |
endif | |
if media_source == null | |
assign media_source = 'not_image' | |
endif | |
# Now, I have sorted which elements are images or not, links or references. Perfect to setup my markup later | |
%} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment