58 lines
1.9 KiB
Plaintext
58 lines
1.9 KiB
Plaintext
{% comment %}
|
|
Renders a product media modal. Also see 'product-media-gallery'
|
|
|
|
Accepts:
|
|
- product: {Object} Product liquid object
|
|
- variant_images: {Array} Product images associated with a variant
|
|
|
|
Usage:
|
|
{% render 'product-media-modal' %}
|
|
{% endcomment %}
|
|
|
|
<product-modal id="ProductModal-{{ section.id }}" class="product-media-modal media-modal">
|
|
<div
|
|
class="product-media-modal__dialog color-{{ section.settings.color_scheme }} gradient"
|
|
role="dialog"
|
|
aria-label="{{ 'products.modal.label' | t }}"
|
|
aria-modal="true"
|
|
tabindex="-1"
|
|
>
|
|
<button
|
|
id="ModalClose-{{ section.id }}"
|
|
type="button"
|
|
class="product-media-modal__toggle"
|
|
aria-label="{{ 'accessibility.close' | t }}"
|
|
>
|
|
{% render 'icon-close' %}
|
|
</button>
|
|
|
|
<div
|
|
class="product-media-modal__content color-{{ section.settings.color_scheme }} gradient"
|
|
role="document"
|
|
aria-label="{{ 'products.modal.label' | t }}"
|
|
tabindex="0"
|
|
>
|
|
{%- liquid
|
|
if product.selected_or_first_available_variant.featured_media != null
|
|
assign media = product.selected_or_first_available_variant.featured_media
|
|
render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: section.settings.hide_variants
|
|
endif
|
|
-%}
|
|
|
|
{%- for media in product.media -%}
|
|
{%- liquid
|
|
if section.settings.hide_variants and variant_images contains media.src or variant_images contains media.id
|
|
assign variant_image = true
|
|
else
|
|
assign variant_image = false
|
|
endif
|
|
|
|
unless media.id == product.selected_or_first_available_variant.featured_media.id
|
|
render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: variant_image
|
|
endunless
|
|
-%}
|
|
{%- endfor -%}
|
|
</div>
|
|
</div>
|
|
</product-modal>
|