Add snippets/card-gallery.liquid
This commit is contained in:
soulchild committed
1 parent
8364acc7e8
commit
9c74274506
1 file changed
+488
@@ -0,0 +1,488 @@
|
||||
{%- doc -%}
|
||||
Displays product images in a carousel.
|
||||
Settings allow for a full slideshow, showing only the first image, or showing the second image when hovering.
|
||||
Note: When the product card itself is in a carousel layout, the card-gallery's carousel is disabled with JavaScript.
|
||||
|
||||
@param [children] - Additional content rendered below the card gallery
|
||||
@param [section] - The section object the snippet is rendered in
|
||||
@param [block] - The block object the snippet is rendered in
|
||||
{%- enddoc -%}
|
||||
|
||||
{% liquid
|
||||
assign product = closest.product
|
||||
assign block_settings = block.settings
|
||||
assign image_sizes = '(min-width: 750px) 50vw, 100vw'
|
||||
|
||||
# Check if product has badges and determine position
|
||||
assign has_badges = false
|
||||
assign badge_position = null
|
||||
if product != blank
|
||||
comment
|
||||
start Yagi
|
||||
endcomment
|
||||
assign product_compare_at_price = product.compare_at_price
|
||||
assign product_price = product.price
|
||||
|
||||
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
||||
|
||||
if product.metafields.app--168074346497.discount_percentage.value > 0.01
|
||||
assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value
|
||||
|
||||
assign product_price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
||||
|
||||
assign product_compare_at_price = product.price
|
||||
|
||||
if product.compare_at_price > product_compare_at_price
|
||||
assign product_compare_at_price = product.compare_at_price
|
||||
endif
|
||||
endif
|
||||
comment
|
||||
end Yagi
|
||||
endcomment
|
||||
|
||||
if product.available == false or product_compare_at_price > product_price
|
||||
assign has_badges = true
|
||||
assign badge_position = settings.badge_position
|
||||
endif
|
||||
endif
|
||||
|
||||
# if the card-gallery has a section.settings.product_card_size:
|
||||
# assume grid-template autofill(card-size, 1fr) and calculate the sizes attribute based on the minimum card size
|
||||
#
|
||||
# if section has section.settings.columns:
|
||||
# assume grid-template repeat(column-count, 1fr) and calculate the sizes attribute based on the number of columns
|
||||
if section.settings.product_card_size
|
||||
assign mobile_image_size = '100vw'
|
||||
if section.settings.mobile_product_card_size == 'small'
|
||||
assign mobile_image_size = '50vw'
|
||||
endif
|
||||
|
||||
capture card_size
|
||||
render 'util-product-grid-card-size', section: section
|
||||
endcapture
|
||||
assign card_size = card_size | strip | replace: 'px', '' | plus: 0
|
||||
capture sizes_attribute
|
||||
render 'util-autofill-img-size-attr', card_size: card_size, card_gap: section.settings.columns_gap_horizontal, mobile_size: mobile_image_size
|
||||
endcapture
|
||||
assign image_sizes = sizes_attribute | strip
|
||||
elsif section.settings.columns and section.settings.layout_type != 'editorial'
|
||||
assign viewport_width = 100.0 | divided_by: section.settings.columns
|
||||
assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 100vw' | replace: '[viewport_width]', viewport_width
|
||||
assign image_sizes = sizes_attribute | strip
|
||||
endif
|
||||
|
||||
assign ratio = '1'
|
||||
case block_settings.image_ratio
|
||||
when 'landscape'
|
||||
assign ratio = '16 / 9'
|
||||
when 'portrait'
|
||||
assign ratio = '4 / 5'
|
||||
when 'square'
|
||||
assign ratio = '1'
|
||||
when 'adapt'
|
||||
assign ratio = product.featured_media.preview_image.aspect_ratio | default: '1'
|
||||
endcase
|
||||
|
||||
if block_settings.image_ratio == 'adapt' and block_settings.constrain_to_viewport
|
||||
if block_settings.constrain_to_viewport != ''
|
||||
assign constrain_to_viewport = true
|
||||
assign media_fit = block_settings.constrain_to_viewport
|
||||
endif
|
||||
endif
|
||||
%}
|
||||
|
||||
<div
|
||||
ref="cardGallery"
|
||||
class="card-gallery card-gallery-{{ block.id }} spacing-style border-style{% if has_badges %} card-gallery--badge-{{ badge_position }}{% endif %}"
|
||||
style="
|
||||
{% render 'border-override', settings: block_settings %}
|
||||
{% render 'spacing-style', settings: block_settings %}
|
||||
--gallery-aspect-ratio: {{ ratio }};
|
||||
"
|
||||
data-product-id="{{ product.id }}"
|
||||
{% if settings.show_second_image_on_hover and product.media.size > 1 %}
|
||||
on:pointerenter="/previewImage"
|
||||
on:pointerleave="/resetImage"
|
||||
{% endif %}
|
||||
{% if settings.transition_to_main_product %}
|
||||
data-view-transition-to-main-product
|
||||
{% endif %}
|
||||
data-image-ratio="{{ block_settings.image_ratio }}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
{%- if product.media.size > 0 -%}
|
||||
<a
|
||||
class="contents"
|
||||
ref="cardGalleryLink"
|
||||
href="{{ product.url }}"
|
||||
aria-label="{{- product.title -}}"
|
||||
>
|
||||
{% liquid
|
||||
assign featured_media = product.featured_media
|
||||
|
||||
assign featured_media_loading = 'lazy'
|
||||
assign featured_media_sizes = 'auto, ' | append: image_sizes
|
||||
if section.index == null or section.index < 5
|
||||
assign featured_media_loading = 'eager'
|
||||
assign featured_media_sizes = image_sizes
|
||||
endif
|
||||
|
||||
# The class differs per media only by media_type; the base template and the
|
||||
# constrain-height suffix are the same for every slide, so build them once.
|
||||
assign media_class = 'product-media-container media-fit product-media-container--[media_type]'
|
||||
assign media_class_suffix = ''
|
||||
if constrain_to_viewport
|
||||
assign media_class_suffix = ' constrain-height'
|
||||
endif
|
||||
|
||||
assign featured_media_class = media_class | replace: '[media_type]', featured_media.media_type | append: media_class_suffix
|
||||
%}
|
||||
{%- if product.media.size == 1 -%}
|
||||
<div
|
||||
class="{{ featured_media_class }}"
|
||||
style="--product-media-fit: {{ media_fit | default: 'cover' }};"
|
||||
>
|
||||
{% render 'product-media',
|
||||
media: featured_media,
|
||||
sizes: featured_media_sizes,
|
||||
loading: featured_media_loading,
|
||||
preview_image_only: true
|
||||
%}
|
||||
</div>
|
||||
{%- else -%}
|
||||
{% liquid
|
||||
# Check if there are generic media that are not variant images
|
||||
assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
|
||||
assign generic_media_size = product.media.size | minus: variant_images.size
|
||||
|
||||
# Sort media so product.featured_media.preview_image comes first as that is the most relevant image to display
|
||||
# product.featured_media updates based on search context and filters applied
|
||||
|
||||
assign other_media = product.media | reject: 'src', product.featured_media
|
||||
assign media_list_to_show = product.featured_media | concat: other_media
|
||||
|
||||
# Don't overfetch media if we don't need to
|
||||
assign max_visible_slide_count = 1
|
||||
if settings.product_card_carousel
|
||||
assign max_visible_slide_count = 5
|
||||
elsif settings.show_second_image_on_hover
|
||||
assign max_visible_slide_count = 2
|
||||
endif
|
||||
|
||||
capture slides
|
||||
for media in media_list_to_show
|
||||
assign hidden = false
|
||||
assign attributes = ''
|
||||
if variant_images contains media.src
|
||||
assign attributes = 'variant-image'
|
||||
|
||||
if forloop.first == false
|
||||
# hide all variant images that aren't the first one
|
||||
assign hidden = true
|
||||
endif
|
||||
endif
|
||||
|
||||
# Performance improvement: don't render more than 5 visible images into the slideshow
|
||||
# We'll keep the images that we need for the variant images and hover next.
|
||||
if forloop.first
|
||||
assign visible_slide_count = 0
|
||||
endif
|
||||
unless hidden
|
||||
assign visible_slide_count = visible_slide_count | plus: 1
|
||||
endunless
|
||||
if hidden == false and visible_slide_count > max_visible_slide_count
|
||||
continue
|
||||
endif
|
||||
|
||||
if forloop.first
|
||||
assign loading = featured_media_loading
|
||||
assign sizes = featured_media_sizes
|
||||
else
|
||||
assign loading = 'lazy'
|
||||
assign sizes = 'auto, ' | append: image_sizes
|
||||
endif
|
||||
|
||||
assign class = media_class | replace: '[media_type]', media.media_type | append: media_class_suffix
|
||||
|
||||
capture slideshow_children
|
||||
render 'product-media', media: media, sizes: sizes, loading: loading, preview_image_only: true
|
||||
endcapture
|
||||
|
||||
render 'slideshow-slide', slide_id: media.id, index: forloop.index0, hidden: hidden, class: class, attributes: attributes, children: slideshow_children, media_fit: media_fit
|
||||
endfor
|
||||
endcapture
|
||||
|
||||
# Arrows can only reach slides that are rendered visible. Variant images past
|
||||
# the featured media are hidden, so a product whose only extra media are
|
||||
# variant images has a single navigable slide and would get inert arrows.
|
||||
if product.media.size > 2 and visible_slide_count > 1
|
||||
assign show_arrows = true
|
||||
endif
|
||||
|
||||
assign slideshow_attributes = 'data-generic-media-size="[generic_media_size]"' | replace: '[generic_media_size]', generic_media_size
|
||||
if settings.product_card_carousel == false
|
||||
assign slideshow_attributes = slideshow_attributes | append: ' disabled="true"'
|
||||
endif
|
||||
%}
|
||||
{% render 'slideshow',
|
||||
ref: 'slideshow',
|
||||
initial_slide: 0,
|
||||
slides: slides,
|
||||
slide_count: media_list_to_show.size,
|
||||
show_arrows: show_arrows,
|
||||
attributes: slideshow_attributes
|
||||
%}
|
||||
{%- endif -%}
|
||||
</a>
|
||||
{% elsif product != blank and product.media.size == 0 %}
|
||||
<div class="product-card-gallery__title-placeholder">
|
||||
<a
|
||||
class="contents"
|
||||
ref="cardGalleryLink"
|
||||
href="{{ product.url }}"
|
||||
>
|
||||
<span class="title-text">{{- product.title -}}</span>
|
||||
</a>
|
||||
</div>
|
||||
{% elsif product == blank %}
|
||||
{% liquid
|
||||
capture placeholder_image
|
||||
# Extract index from block ID (e.g., "product-card-3" -> "3")
|
||||
assign block_parts = block.id | split: '-'
|
||||
assign placeholder_index = block_parts.last | default: 0
|
||||
assign variant = placeholder_index | modulo: 3 | plus: 1
|
||||
assign placeholder_name = 'product-apparel-' | append: variant
|
||||
echo placeholder_name | placeholder_svg_tag
|
||||
endcapture
|
||||
capture placeholder_slide
|
||||
render 'slideshow-slide', index: 1, children: placeholder_image, class: 'product-media-container card-gallery__placeholder'
|
||||
endcapture
|
||||
render 'slideshow', ref: 'slideshow', slides: placeholder_slide, slide_count: 1, attributes: 'disabled="true"'
|
||||
%}
|
||||
{%- endif -%}
|
||||
{{ children }}
|
||||
</div>
|
||||
|
||||
{% render 'slideshow-styles' %}
|
||||
{% render 'product-media-container-styles' %}
|
||||
|
||||
{% stylesheet %}
|
||||
.card-gallery {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
container-type: inline-size; /* Make card-gallery a container */
|
||||
container-name: card-gallery-container; /* Optional: name the container */
|
||||
}
|
||||
|
||||
@container (max-width: 70px) {
|
||||
.card-gallery:hover .quick-add__button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.card-gallery__placeholder svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-gallery svg {
|
||||
aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
|
||||
}
|
||||
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding: var(--padding-md);
|
||||
font-size: var(--font-size--2xl);
|
||||
line-height: var(--line-height--display-loose);
|
||||
word-break: break-word;
|
||||
color: var(--color-foreground);
|
||||
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
|
||||
aspect-ratio: var(--gallery-aspect-ratio);
|
||||
border-radius: var(--product-corner-radius);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-card-gallery__title-placeholder .title-text {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 5;
|
||||
line-clamp: 5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
|
||||
padding: var(--padding-3xl);
|
||||
font-size: var(--font-size--3xl);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
|
||||
padding: var(--padding-2xl);
|
||||
font-size: var(--font-size--2xl);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
|
||||
padding: var(--padding-xl);
|
||||
font-size: var(--font-size--xl);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
|
||||
padding: var(--padding-sm);
|
||||
font-size: var(--font-size--lg);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='extra-large']
|
||||
.card-gallery.card-gallery--badge-top-right
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-inline-end: calc(var(--padding-3xl) + 50px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='large']
|
||||
.card-gallery.card-gallery--badge-top-right
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-inline-end: calc(var(--padding-2xl) + 50px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='medium']
|
||||
.card-gallery.card-gallery--badge-top-right
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-inline-end: calc(var(--padding-xl) + 50px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='small']
|
||||
.card-gallery.card-gallery--badge-top-right
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-inline-end: calc(var(--padding-sm) + 50px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='extra-large']
|
||||
.card-gallery.card-gallery--badge-top-left
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-top: calc(var(--padding-3xl) + 40px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='large']
|
||||
.card-gallery.card-gallery--badge-top-left
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-top: calc(var(--padding-2xl) + 40px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='medium']
|
||||
.card-gallery.card-gallery--badge-top-left
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-top: calc(var(--padding-xl) + 40px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='small']
|
||||
.card-gallery.card-gallery--badge-top-left
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-top: calc(var(--padding-sm) + 40px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='extra-large']
|
||||
.card-gallery.card-gallery--badge-bottom-left
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-bottom: calc(var(--padding-3xl) + 40px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='large']
|
||||
.card-gallery.card-gallery--badge-bottom-left
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-bottom: calc(var(--padding-2xl) + 40px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='medium']
|
||||
.card-gallery.card-gallery--badge-bottom-left
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-bottom: calc(var(--padding-xl) + 40px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size='small']
|
||||
.card-gallery.card-gallery--badge-bottom-left
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-bottom: calc(var(--padding-sm) + 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 749px) {
|
||||
.product-card-gallery__title-placeholder {
|
||||
font-size: var(--font-size--xl);
|
||||
padding: var(--padding-md);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size]
|
||||
.card-gallery.card-gallery--badge-top-right
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-inline-end: calc(var(--padding-sm) + 50px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size]
|
||||
.card-gallery.card-gallery--badge-top-left
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-top: calc(var(--padding-sm) + 40px);
|
||||
}
|
||||
|
||||
.product-grid[data-product-card-size]
|
||||
.card-gallery.card-gallery--badge-bottom-left
|
||||
.product-card-gallery__title-placeholder {
|
||||
padding-bottom: calc(var(--padding-sm) + 40px);
|
||||
}
|
||||
}
|
||||
|
||||
[product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
padding: var(--padding-xs) !important;
|
||||
font-size: var(--font-size--xs);
|
||||
}
|
||||
|
||||
[product-grid-view='zoom-out'] .card-gallery .slideshow-control {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
|
||||
display: block;
|
||||
}
|
||||
|
||||
[product-grid-view='zoom-out']
|
||||
.card-gallery
|
||||
> :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul[product-grid-view='zoom-out'] .card-gallery > img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-gallery slideshow-arrows .slideshow-control {
|
||||
/* Align icons with quick-add button */
|
||||
padding-inline: var(--padding-xl);
|
||||
|
||||
@container (max-width: 249px) {
|
||||
padding-inline: 0 var(--padding-sm);
|
||||
|
||||
[dir='rtl'] & {
|
||||
padding-inline: var(--padding-sm) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Card galleries preview the next or previous images on 'pointerenter', so we
|
||||
* try to kick load them beforehand (they are lazy loaded otherwise).
|
||||
*/
|
||||
.card-gallery
|
||||
:is(
|
||||
slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
|
||||
slideshow-slide[aria-hidden='false'] + slideshow-slide
|
||||
) {
|
||||
content-visibility: auto;
|
||||
|
||||
slideshow-component[actioned] & {
|
||||
content-visibility: visible;
|
||||
}
|
||||
}
|
||||
{% endstylesheet %}
|
||||
Reference in new issue
Block a user