Skip to content

Commit

Permalink
Prettier liquid files snippets. (Shopify#2115)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eugenekasimov
eugenekasimov authored Nov 21, 2022
1 parent 503fdf8 commit 539af27
Show file tree
Hide file tree
Showing 15 changed files with 1,023 additions and 465 deletions.
69 changes: 42 additions & 27 deletions snippets/article-card.liquid
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,79 @@
{% comment %}
Renders an article card for a given blog with settings to either show the image or not.
Renders an article card for a given blog with settings to either show the image or not.
Accepts:
- blog: {Object} Blog object
- article: {Object} Article object
- media_aspect_ratio: {String} The setting changes the aspect ratio of the article image, if shown
- media_height: {String} The setting changes the height of the article image. Overrides media_aspect_ratio.
- show_image: {String} The setting either show the article image or not. If it's not included it will show the image by default
- show_date: {String} The setting either show the article date or not. If it's not included it will not show the image by default
- show_author: {String} The setting either show the article author or not. If it's not included it will not show the author by default
- show_badge: {String} The setting either show the blog badge or not.
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
Accepts:
- blog: {Object} Blog object
- article: {Object} Article object
- media_aspect_ratio: {String} The setting changes the aspect ratio of the article image, if shown
- media_height: {String} The setting changes the height of the article image. Overrides media_aspect_ratio.
- show_image: {String} The setting either show the article image or not. If it's not included it will show the image by default
- show_date: {String} The setting either show the article date or not. If it's not included it will not show the image by default
- show_author: {String} The setting either show the article author or not. If it's not included it will not show the author by default
- show_badge: {String} The setting either show the blog badge or not.
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
Usage:
{% render 'article-card' blog: blog, article: article, show_image: section.settings.show_image %}
Usage:
{% render 'article-card' blog: blog, article: article, show_image: section.settings.show_image %}
{% endcomment %}

{%- if article and article != empty -%}
{%- liquid
assign ratio = 1
if media_aspect_ratio != nil
if media_aspect_ratio != null
assign ratio = media_aspect_ratio
endif
-%}
<div class="article-card-wrapper card-wrapper underline-links-hover">
{% comment %} <article aria-labelledby="Article-{{ article.id }}"> {% endcomment %}
<div class="card article-card
card--{{ settings.blog_card_style }}
{% if media_height and media_height != 'adapt' %} article-card__image--{{ media_height }}{% endif %}
{% if article.image and show_image %} card--media{% else %} card--text{% endif %}
{% if settings.blog_card_style == 'card' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %}
{% if settings.blog_card_style == 'card' and media_height == nil and article.image == empty or show_image == false %} ratio{% endif %}"
<div
class="
card article-card
card--{{ settings.blog_card_style }}
{% if media_height and media_height != 'adapt' %} article-card__image--{{ media_height }}{% endif %}
{% if article.image and show_image %} card--media{% else %} card--text{% endif %}
{% if settings.blog_card_style == 'card' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %}
{% if settings.blog_card_style == 'card' and media_height == nil and article.image == empty or show_image == false %} ratio{% endif %}
"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
<div class="card__inner {% if settings.blog_card_style == 'standard' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %}{% if article.image and show_image or settings.blog_card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
<div
class="card__inner {% if settings.blog_card_style == 'standard' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %}{% if article.image and show_image or settings.blog_card_style == 'standard' %} ratio{% endif %}"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
{%- if show_image == true and article.image -%}
<div class="article-card__image-wrapper card__media">
<div class="article-card__image media media--hover-effect" {% if section.settings.media_height == 'adapt' %} style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"{% endif %}>
<div
class="article-card__image media media--hover-effect"
{% if section.settings.media_height == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"
{% endif %}
>
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
<img
srcset="{%- if article.image.src.width >= 165 -%}{{ article.image.src | image_url: width: 165 }} 165w,{%- endif -%}
srcset="
{%- if article.image.src.width >= 165 -%}{{ article.image.src | image_url: width: 165 }} 165w,{%- endif -%}
{%- if article.image.src.width >= 360 -%}{{ article.image.src | image_url: width: 360 }} 360w,{%- endif -%}
{%- if article.image.src.width >= 533 -%}{{ article.image.src | image_url: width: 533 }} 533w,{%- endif -%}
{%- if article.image.src.width >= 720 -%}{{ article.image.src | image_url: width: 720 }} 720w,{%- endif -%}
{%- if article.image.src.width >= 1000 -%}{{ article.image.src | image_url: width: 1000 }} 1000w,{%- endif -%}
{%- if article.image.src.width >= 1500 -%}{{ article.image.src | image_url: width: 1500 }} 1500w,{%- endif -%}
{{ article.image.src | image_url }} {{ article.image.src.width }}w"
{{ article.image.src | image_url }} {{ article.image.src.width }}w
"
src="{{ article.image.src | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
alt="{{ article.image.src.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}loading="lazy"{% endunless %}
{% unless lazy_load == false %}
loading="lazy"
{% endunless %}
width="{{ article.image.width }}"
height="{{ article.image.height }}"
>
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
</div>
</div>
{%- endif -%}
<div class="card__content">
<div class="card__content">
<div class="card__information">
<h3 class="card__heading{% if show_excerpt %} h2{% endif %}">
<a href="{{ article.url }}" class="full-unstyled-link">
Expand Down Expand Up @@ -133,7 +148,7 @@
<div class="card__badge {{ settings.badge_position }}">
<span class="badge color-background-1">{{ 'blogs.article.blog' | t }}</span>
</div>
{%- endif -%}
{%- endif -%}
</div>
</div>
</div>
Expand Down
97 changes: 63 additions & 34 deletions snippets/card-collection.liquid
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{% comment %}
Renders a collection card
Renders a collection card
Accepts:
- card_collection: {Object} Collection Liquid object
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- columns: {Number}
- extend_height: {Boolean} Card height extends to available container space. Default: false (optional)
- wrapper_class: {String} Wrapper class for card (optional)
Accepts:
- card_collection: {Object} Collection Liquid object
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- columns: {Number}
- extend_height: {Boolean} Card height extends to available container space. Default: false (optional)
- wrapper_class: {String} Wrapper class for card (optional)
Usage:
{% render 'card-collection' %}
Usage:
{% render 'card-collection' %}
{% endcomment %}

{%- liquid
Expand All @@ -19,44 +19,53 @@
elsif card_collection.featured_image and media_aspect_ratio == 'adapt'
assign ratio = card_collection.featured_image.aspect_ratio
endif
if ratio == 0 or ratio == nil
if ratio == 0 or ratio == null
assign ratio = 1
endif
assign card_color_scheme = settings.card_color_scheme
assign card_style = settings.card_style
if wrapper_class == nil or wrapper_class == 'none'
if wrapper_class == null or wrapper_class == 'none'
assign card_color_scheme = settings.collection_card_color_scheme
assign card_style = settings.collection_card_style
endif
endif
-%}

<div class="card-wrapper animate-arrow {% if wrapper_class and wrapper_class != 'none' %}{{ wrapper_class }}{% else %}collection-card-wrapper{% endif %}">
<div class="card
card--{{ card_style }}
{% if card_collection.featured_image %} card--media{% else %} card--text{% endif %}
{% if card_style == 'card' %} color-{{ card_color_scheme }} gradient{% endif %}
{% if extend_height %} card--extend-height{% endif %}
{% if card_collection.featured_image == nil and card_style == 'card' %} ratio{% endif %}"
<div
class="
card
card--{{ card_style }}
{% if card_collection.featured_image %} card--media{% else %} card--text{% endif %}
{% if card_style == 'card' %} color-{{ card_color_scheme }} gradient{% endif %}
{% if extend_height %} card--extend-height{% endif %}
{% if card_collection.featured_image == nil and card_style == 'card' %} ratio{% endif %}
"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
<div class="card__inner {% if card_style == 'standard' %}color-{{ card_color_scheme }} gradient{% endif %}{% if card_collection.featured_image or card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
<div
class="card__inner {% if card_style == 'standard' %}color-{{ card_color_scheme }} gradient{% endif %}{% if card_collection.featured_image or card_style == 'standard' %} ratio{% endif %}"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
{%- if card_collection.featured_image -%}
<div class="card__media">
<div class="media media--transparent media--hover-effect">
<img
srcset="{%- if card_collection.featured_image.width >= 165 -%}{{ card_collection.featured_image | image_url: width: 165 }} 165w,{%- endif -%}
srcset="
{%- if card_collection.featured_image.width >= 165 -%}{{ card_collection.featured_image | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | image_url: width: 330 }} 330w,{%- endif -%}
{%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | image_url: width: 535 }} 535w,{%- endif -%}
{%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | image_url: width: 750 }} 750w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | image_url: width: 1000 }} 1000w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | image_url: width: 3000 }} 3000w,{%- endif -%}
{{ card_collection.featured_image | image_url }} {{ card_collection.featured_image.width }}w"
{{ card_collection.featured_image | image_url }} {{ card_collection.featured_image.width }}w
"
src="{{ card_collection.featured_image | image_url: width: 1500 }}"
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
(min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
calc(100vw - 3rem)"
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
(min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
calc(100vw - 3rem)
"
alt=""
height="{{ card_collection.featured_image.height }}"
width="{{ card_collection.featured_image.width }}"
Expand All @@ -69,43 +78,63 @@
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a{% if card_collection == blank %} role="link" aria-disabled="true"{% else %} href="{{ card_collection.url }}"{% endif %} class="full-unstyled-link">
<a
{% if card_collection == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ card_collection.url }}"
{% endif %}
class="full-unstyled-link"
>
{%- if card_collection.title != blank -%}
{{- card_collection.title | escape -}}
{%- else -%}
{{ 'onboarding.collection_title' | t }}
{%- endif -%}
{%- if card_collection.description == blank -%}<span class="icon-wrap">{% render 'icon-arrow' %}</span>{% endif %}
{%- if card_collection.description == blank -%}
<span class="icon-wrap">{% render 'icon-arrow' %}</span>
{%- endif %}
</a>
</h3>
{%- if card_collection.description != blank -%}
<p class="card__caption">
{{- card_collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
{{- card_collection.description | strip_html | truncatewords: 12 -}}
<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
</p>
{%- endif -%}
</div>
</div>
</div>
</div>
{% if card_style == 'card' or card_collection.featured_image %}
{% if card_style == 'card' or card_collection.featured_image %}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a{% if card_collection == blank %} role="link" aria-disabled="true"{% else %} href="{{ card_collection.url }}"{% endif %} class="full-unstyled-link">
<a
{% if card_collection == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ card_collection.url }}"
{% endif %}
class="full-unstyled-link"
>
{%- if card_collection.title != blank -%}
{{- card_collection.title | escape -}}
{%- else -%}
{{ 'onboarding.collection_title' | t }}
{%- endif -%}
{%- if card_collection.featured_image or card_collection.description == blank -%}<span class="icon-wrap">{% render 'icon-arrow' %}</span>{% endif %}
{%- if card_collection.featured_image or card_collection.description == blank -%}
<span class="icon-wrap">{% render 'icon-arrow' %}</span>
{%- endif %}
</a>
</h3>
{%- if card_collection.featured_image == nil and card_collection.description != blank -%}
{%- if card_collection.featured_image == null and card_collection.description != blank -%}
<p class="card__caption">
{{- card_collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
{{- card_collection.description | strip_html | truncatewords: 12 -}}
<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
</p>
{%- endif -%}
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
16 changes: 11 additions & 5 deletions snippets/card-product.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}
Expand Down Expand Up @@ -74,7 +74,7 @@
>
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != nil and show_secondary_image -%}
{%- if card_product.media[1] != null and show_secondary_image -%}
<img
srcset="
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
Expand All @@ -101,7 +101,7 @@
<div class="card__information">
<h3
class="card__heading"
{% if card_product.featured_media == nil and settings.card_style == 'standard' %}
{% if card_product.featured_media == null and settings.card_style == 'standard' %}
id="title-{{ section_id }}-{{ card_product.id }}"
{% endif %}
>
Expand Down Expand Up @@ -190,7 +190,7 @@
<span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">
{{- card_product.metafields.reviews.rating_count }}
{{ "accessibility.total_reviews" | t -}}
{{ 'accessibility.total_reviews' | t -}}
</span>
</p>
{%- endif -%}
Expand All @@ -203,7 +203,13 @@
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
{%- if card_product.variants.size == 1 -%}
<product-form>
{%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
{%- form 'product',
card_product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<input
type="hidden"
name="id"
Expand Down
Loading

0 comments on commit 539af27

Please sign in to comment.