Skip to content

Commit

Permalink
Simplify featured product to use the same media gallery snippet as ma…
Browse files Browse the repository at this point in the history 
…in-product, simplify product-media-gallery, simplify main-product
  • Loading branch information
@lhoffbeck
lhoffbeck committed Feb 2, 2024
1 parent c77ebf5 commit 89de40a
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 213 deletions.
4 changes: 4 additions & 0 deletions assets/section-featured-product.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@
.background-secondary .featured-product {
padding: 5rem;
}

.product--right .product__media-wrapper {
order: 2;
}
}

@media screen and (min-width: 990px) {
Expand Down
4 changes: 4 additions & 0 deletions assets/section-main-product.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@
.product__media-container .slider-buttons {
display: none;
}

.product--right .product__media-wrapper {
order: 2;
}
}

@media screen and (min-width: 990px) {
Expand Down
166 changes: 15 additions & 151 deletions sections/featured-product.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,86 +62,24 @@
>
{%- endif -%}

{% assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' %}

<section class="color-{{ section.settings.color_scheme }} {% if section.settings.secondary_background %}background-secondary{% else %}gradient{% endif %}">
<div class="page-width section-{{ section.id }}-padding{% if section.settings.secondary_background %} isolate{% endif %}">
<div class="featured-product product product--{{ section.settings.media_size }} grid grid--1-col gradient color-{{ section.settings.color_scheme }} product--{{ section.settings.media_position }}{% if section.settings.secondary_background == false %} isolate{% endif %} {% if product.media.size > 0 or section.settings.product == blank %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
<div class="grid__item product__media-wrapper{% if section.settings.media_position == 'right' %} medium-hide large-up-hide{% endif %}">
<media-gallery
id="MediaGallery-{{ section.id }}"
role="region"
aria-label="{{ 'products.product.media.gallery_viewer' | t }}"
data-desktop-layout="stacked"
>
<div
id="GalleryViewer-{{ section.id }}"
class="product__media-list{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
>
{%- if section.settings.product != blank -%}
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign media = product.selected_or_first_available_variant.featured_media -%}
<div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
{% render 'product-thumbnail',
media: media,
position: 'featured',
loop: section.settings.enable_video_looping,
modal_id: section.id,
xr_button: false,
media_width: media_width,
media_fit: section.settings.media_fit,
constrain_to_viewport: section.settings.constrain_to_viewport
%}
</div>
{%- endif -%}
{%- liquid
assign media_to_render = product.featured_media.id
for variant in product.variants
assign media_to_render = media_to_render | append: variant.featured_media.id | append: ' '
endfor
-%}
{%- for media in product.media -%}
{%- if media_to_render contains media.id
and media.id != product.selected_or_first_available_variant.featured_media.id
-%}
<div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
{% render 'product-thumbnail',
media: media,
position: forloop.index,
loop: section.settings.enable_video_looping,
modal_id: section.id,
xr_button: false,
media_width: media_width,
media_fit: section.settings.media_fit,
constrain_to_viewport: section.settings.constrain_to_viewport
%}
</div>
{%- endif -%}
{%- endfor -%}
{%- else -%}
<div class="product__media-item">
<div
class="product-media-container global-media-settings gradient{% if section.settings.constrain_to_viewport %} constrain-height{% endif %}"
style="--ratio: 1.0; --preview-ratio: 1.0;"
>
{{ 'product-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{%- endif -%}
</div>
{%- if first_3d_model -%}
<button
class="button button--full-width product__xr-button"
type="button"
aria-label="{{ 'products.product.xr_button_label' | t }}"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
<div class="grid__item product__media-wrapper">
{%- if section.settings.product != blank -%}
{% render 'product-media-gallery', product: product, variant_images: variant_images, limit: 1 %}
{%- else -%}
<div class="product__media-item">
<div
class="product-media-container global-media-settings gradient{% if section.settings.constrain_to_viewport %} constrain-height{% endif %}"
style="--ratio: 1.0; --preview-ratio: 1.0;"
>
{% render 'icon-3d-model' %}
{{ 'products.product.xr_button' | t }}
</button>
{%- endif -%}
</media-gallery>
{{ 'product-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{%- endif -%}
</div>
<div class="product__info-wrapper grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<product-info
Expand Down Expand Up @@ -517,82 +455,8 @@
</a>
</product-info>
</div>
{%- if section.settings.media_position == 'right' -%}
<div class="grid__item product__media-wrapper small-hide">
{%- if section.settings.product != blank -%}
<media-gallery
id="MediaGallery-{{ section.id }}-right"
role="region"
aria-label="{{ 'products.product.media.gallery_viewer' | t }}"
data-desktop-layout="stacked"
>
<div
id="GalleryViewer-{{ section.id }}-right"
class="product__media-list{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
>
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign media = product.selected_or_first_available_variant.featured_media -%}
<div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
{% render 'product-thumbnail',
media: media,
position: 'featured',
loop: section.settings.enable_video_looping,
modal_id: section.id,
xr_button: false,
media_width: media_width,
media_fit: section.settings.media_fit,
constrain_to_viewport: section.settings.constrain_to_viewport
%}
</div>
{%- endif -%}
{%- for media in product.media -%}
{%- if media_to_render contains media.id
and media.id != product.selected_or_first_available_variant.featured_media.id
-%}
<div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
{% render 'product-thumbnail',
media: media,
position: forloop.index,
loop: section.settings.enable_video_looping,
modal_id: section.id,
xr_button: false,
media_width: media_width,
media_fit: section.settings.media_fit,
constrain_to_viewport: section.settings.constrain_to_viewport
%}
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- if first_3d_model -%}
<button
class="button button--full-width product__xr-button"
type="button"
aria-label="{{ 'products.product.xr_button_label' | t }}"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
{% render 'icon-3d-model' %}
{{ 'products.product.xr_button' | t }}
</button>
{%- endif -%}
</media-gallery>
{%- else -%}
<div class="product__media-item">
<div
class="product-media-container global-media-settings gradient{% if section.settings.constrain_to_viewport %} constrain-height{% endif %}"
style="--ratio: 1.0; --preview-ratio: 1.0;"
>
{{ 'product-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{%- endif -%}
</div>
{%- endif -%}
</div>
{% render 'product-media-modal', product: product, variant_images: media_to_render %}
{% render 'product-media-modal', product: product, variant_images: variant_images %}
</div>
</section>

Expand Down
8 changes: 1 addition & 7 deletions sections/main-product.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
{% assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' %}
<div class="page-width">
<div class="product product--{{ section.settings.media_size }} product--{{ section.settings.media_position }} product--{{ section.settings.gallery_layout }} product--mobile-{{ section.settings.mobile_thumbnails }} grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
<div class="grid__item product__media-wrapper{% if section.settings.media_position == 'right' %} medium-hide large-up-hide{% endif %}">
<div class="grid__item product__media-wrapper">
{% render 'product-media-gallery', variant_images: variant_images %}
</div>
<div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
Expand Down Expand Up @@ -545,12 +545,6 @@
</a>
</product-info>
</div>
{%- if section.settings.media_position == 'right' -%}
{% comment %} Duplicate gallery to display after product content on tablet/desktop breakpoint {% endcomment %}
<div class="grid__item product__media-wrapper small-hide">
{% render 'product-media-gallery', variant_images: variant_images, is_duplicate: true %}
</div>
{%- endif -%}
</div>

{% render 'product-media-modal' variant_images: variant_images %}
Expand Down
Loading

0 comments on commit 89de40a

Please sign in to comment.