Untitled

mail@pastecode.io avatar
unknown
plain_text
2 months ago
24 kB
0
Indexable
Never
{% liquid
  if media_layout == null
    assign media_layout = section.settings.layout
  endif
  assign enable_zoom = section.settings.show_zoom_button
  assign enable_video_autoplay = section.settings.enable_video_autoplay

  if show_thumbnails == null
    assign show_thumbnails = true
  endif
  if show_dots == null
    assign show_dots = true
  endif
  if show_nav == nil
    assign show_nav = true
  endif

  if template_product == nil
    assign template_product = false
  endif

  assign enableVariantGroupImg = false
  assign hasVariantGI = false
  assign variantGroups = product.metafields['foxecom-bs-kit']['variant-images'].value
  if section.settings.enable_variant_group_images and product.metafields['foxecom-bs-kit']['variant-images'].value.enable
    assign enableVariantGroupImg = true
  endif

  assign selected_variant = product.selected_or_first_available_variant

  for media in variantGroups.mapping
    assign mediaId = media.id | times: 1
    if mediaId == selected_variant.id and media.media.size > 0
      assign hasVariantGI = true
    endif
  endfor

  assign swiperContainer = ''
  if product.media.size > 1
    assign swiperContainer = 'swiper-container'
  endif

  assign enableLoadingMedia = false
  if hasVariantGI and template_product and section.settings.enable_variant_group_images
    assign enableLoadingMedia = true
  endif

  assign onlyMedia = false
  if product.media.size <= 1
    assign onlyMedia = true
  endif
%}
{% if product.media.size > 0 %}
  <media-gallery
    data-product-id="{{ product.id }}"
    data-product-handle="{{ product.handle }}"
    data-product-url="{{ product.url }}"
    data-enable-image-zoom="{{ section.settings.show_zoom_button }}"
    data-enable-history-state="{{ section.settings.enable_history_state }}"
    data-enable-video-autoplay="{{ section.settings.enable_video_autoplay }}"
    data-enable-variant-group-images="{{ enableVariantGroupImg }}"
    data-only-media="{{ onlyMedia }}"
    data-layout="{{ media_layout }}"
    data-section="{{ section.id }}"
    class="m-media-gallery m:w-full {{ class }}"
    data-screen="{{ screen | default: 'desktop' }}"
    {% if enableLoadingMedia %}
      data-media-loading
    {% endif %}
    data-media-size="{{ product.media.size }}"
    data-available="{{ product.available }}"
  >
    {% case media_layout %}
      {% when 'layout-1' %}
        <div class="m-product-media--list m:grid" style="--column-gap: 10px;{% if enableLoadingMedia %} opacity: 0;{% endif %}">
          {%- for media in product.media -%}
            <div
              class="m-product-media--item media-type-{{ media.media_type }} m:column"
              data-index="{{ forloop.index0 }}"
              data-media-type="{{ media.media_type }}"
            >
              {% render 'product-thumbnail',
                media: media,
                index: forloop.index0,
                autoplay: enable_video_autoplay,
                loop: true,
                media_layout: media_layout,
                product: product
              %}
              {%- if enable_zoom and media.media_type == 'image' -%}
                <div class="m-product-media--zoom-icon">
                  {% render 'tooltip', type: 'zoom-in', class_name: ' m-tooltip--left' %}
                </div>
              {%- endif -%}
            </div>
          {%- endfor -%}
        </div>
      {% when 'layout-2' %}
        <div class="m-product-media--list m:grid{% if product.media.size > 1 %} m:grid-2-cols{% endif %}" style="--column-gap: 10px;{% if enableLoadingMedia %} opacity: 0;{% endif %}">
          {%- for media in product.media -%}
            {%- assign remainder = forloop.index0 | modulo: 3 -%}
            <div
              class="m-product-media--item media-type-{{ media.media_type }}{% if remainder == 0 or product.media.size < 3 %} m-col-span-2{% endif %} m:column"
              data-index="{{ forloop.index0 }}"
              data-media-type="{{ media.media_type }}"
            >
              {% render 'product-thumbnail',
                media: media,
                index: forloop.index0,
                autoplay: enable_video_autoplay,
                loop: true,
                media_layout: media_layout,
                product: product
              %}
              {%- if enable_zoom and media.media_type == 'image' -%}
                <div class="m-product-media--zoom-icon">
                  {% render 'tooltip', type: 'zoom-in', class_name: ' m-tooltip--left' %}
                </div>
              {%- endif -%}
            </div>
          {%- endfor -%}
        </div>
      {% when 'layout-3' %}
        <div class="m-product-media--list m:grid{% if product.media.size > 1 %} m:grid-2-cols{% endif %}" style="--column-gap: 10px;{% if enableLoadingMedia %} opacity: 0;{% endif %}">
          {%- for media in product.media -%}
            {%- assign remainder = forloop.index0 | modulo: 3 -%}
            <div
              class="m-product-media--item media-type-{{ media.media_type }} m:column"
              data-index="{{ forloop.index0 }}"
              data-media-type="{{ media.media_type }}"
            >
              {% render 'product-thumbnail',
                media: media,
                index: forloop.index0,
                autoplay: enable_video_autoplay,
                loop: true,
                media_layout: media_layout,
                product: product
              %}
              {%- if enable_zoom and media.media_type == 'image' -%}
                <div class="m-product-media--zoom-icon">
                  {% render 'tooltip', type: 'zoom-in', class_name: ' m-tooltip--left' %}
                </div>
              {%- endif -%}
            </div>
          {%- endfor -%}
        </div>
      {% when 'layout-4' %}
        {% assign aspect_ratio = product.featured_media.aspect_ratio | default: 1 %}
        <div class="m-product-media--slider" {% if enableLoadingMedia %}style="opacity: 0;"{% endif %}>
          <div class="m-product-media--slider__images">
            <div class="{{ swiperContainer }}">
              <div class="swiper-wrapper">
                {% for media in product.media %}
                  <div
                    class="swiper-slide m-product-media--item media-type-{{ media.media_type }}"
                    data-index="{{ forloop.index0 }}"
                    data-media-type="{{ media.media_type }}"
                    data-media-id="{{ media.id }}"
                    data-aspect-ratio="{{ media.aspect_ratio | default: '1' }}"
                  >
                    {% render 'product-thumbnail',
                      media: media,
                      index: forloop.index0,
                      autoplay: enable_video_autoplay,
                      loop: true,
                      media_layout: media_layout,
                      product: product
                    %}
                    {%- if enable_zoom and media.media_type == 'image' -%}
                      <div class="m-product-media--zoom-icon">
                        {% render 'tooltip', type: 'zoom-in', class_name: ' m-tooltip--left' %}
                      </div>
                    {%- endif -%}
                  </div>
                {% endfor %}
              </div>
              {% if show_nav and product.media.size > 1 %}
                <div class="m-product-media--slider__navigation">
                  <button class="swiper-button-control swiper-button-prev m-button--icon" aria-label="Previous">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </button>
                  <button class="swiper-button-control swiper-button-next m-button--icon" aria-label="Next">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </button>
                </div>
              {% endif %}
            </div>
          </div>
          {% if show_thumbnails and product.media.size > 1 %}
            <div class="m-product-media--slider__thumbnails">
              <div class="nav-swiper-container">
                <div class="swiper-wrapper" style="min-width: 70px;">
                  {% for media in product.media %}
                    {% assign aspect_ratio = media.preview_image.aspect_ratio | default: 1 %}
                    <div
                      class="swiper-slide media-type-{{ media.media_type }}"
                      data-index="{{ forloop.index0 }}"
                    >
                      {% render 'product-thumbnail', 
                        media: media, 
                        thumbnail: true, 
                        index: forloop.index0,
                        media_layout: media_layout,
                        product: product
                      %}
                      {% if media.media_type contains 'video' %}
                        <div class="m-product-media--slider__thumbnail-icon">
                          <svg
                            class="m-svg-icon"
                            fill="currentColor"
                            stroke="currentColor"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 576 512"
                          >
                            <path d="M543.9 96c-6.2 0-12.5 1.8-18.2 5.7L416 171.6v-59.8c0-26.4-23.2-47.8-51.8-47.8H51.8C23.2 64 0 85.4 0 111.8v288.4C0 426.6 23.2 448 51.8 448h312.4c28.6 0 51.8-21.4 51.8-47.8v-59.8l109.6 69.9c5.7 4 12.1 5.7 18.2 5.7 16.6 0 32.1-13 32.1-31.5v-257c.1-18.5-15.4-31.5-32-31.5zM384 400.2c0 8.6-9.1 15.8-19.8 15.8H51.8c-10.7 0-19.8-7.2-19.8-15.8V111.8c0-8.6 9.1-15.8 19.8-15.8h312.4c10.7 0 19.8 7.2 19.8 15.8v288.4zm160-15.7l-1.2-1.3L416 302.4v-92.9L544 128v256.5z"/>
                          </svg>
                        </div>
                      {% endif %}
                      {% if media.media_type == 'model' %}
                        <div class="m-product-media--slider__thumbnail-icon">
                          <svg
                            class="m-svg-icon"
                            fill="currentColor"
                            stroke="currentColor"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 512 512"
                          >
                            <path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 34.2l224 84v.3l-224 97.1-224-97.1v-.3l224-84zM32 153.4l208 90.1v224.7l-208-104V153.4zm240 314.8V243.5l208-90.1v210.9L272 468.2z"/>
                          </svg>
                        </div>
                      {% endif %}
                    </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          {% endif %}
          {% if show_pagination and product.media.size > 1 %}
            <div class="swiper-pagination"></div>
          {% endif %}
        </div>
      {% when 'layout-5' %}
        {% assign aspect_ratio = product.featured_media.aspect_ratio | times: 2 %}
        <div class="m-product-media--slider" {% if enableLoadingMedia %}style="opacity: 0;"{% endif %}>
          <div class="m-product-media--slider__images">
            <div class="{{ swiperContainer }}">
              <div class="swiper-wrapper">
                {% for media in product.media %}
                  <div
                    class="m-product-media--item swiper-slide media-type-{{ media.media_type }}"
                    data-index="{{ forloop.index0 }}"
                    data-media-type="{{ media.media_type }}"
                    data-media-id="{{ media.id }}"
                    data-aspect-ratio="{{ media.aspect_ratio | default: '1' }}"
                  >
                    {% render 'product-thumbnail',
                      media: media,
                      index: forloop.index0,
                      autoplay: enable_video_autoplay,
                      loop: true,
                      media_layout: media_layout,
                      product: product
                    %}
                    {%- if enable_zoom and media.media_type == 'image' -%}
                      <div class="m-product-media--zoom-icon">
                        {% render 'tooltip', type: 'zoom-in', class_name: ' m-tooltip--left' %}
                      </div>
                    {%- endif -%}
                  </div>
                {% endfor %}
              </div>
              {% if show_nav and product.media.size > 1 %}
                <div class="m-product-media--slider__navigation">
                  <button class="swiper-button-control swiper-button-prev m-button--icon" aria-label="Previous">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </button>
                  <button class="swiper-button-control swiper-button-next m-button--icon" aria-label="Next">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </button>
                </div>
              {% endif %}
            </div>
          </div>
          {% if show_dots and product.media.size > 1 %}
            <div class="m-product-media--slider__pagination swiper-pagination m:w-full"></div>
          {% endif %}
        </div>
      {% when 'layout-6' %}
        {% assign aspect_ratio = product.preview_media.aspect_ratio %}
        <div class="m-product-media--slider" {% if enableLoadingMedia %}style="opacity: 0;"{% endif %}>
          <div class="m-product-media--slider__images">
            <div class="{{ swiperContainer }}">
              <div class="swiper-wrapper">
                {% for media in product.media %}
                  <div
                    class="swiper-slide m-product-media--item media-type-{{ media.media_type }}"
                    data-index="{{ forloop.index0 }}"
                    data-media-type="{{ media.media_type }}"
                    data-media-id="{{ media.id }}"
                    data-aspect-ratio="{{ media.aspect_ratio | default: '1' }}"
                  >
                    {% render 'product-thumbnail',
                      media: media,
                      index: forloop.index0,
                      autoplay: enable_video_autoplay,
                      loop: true,
                      media_layout: media_layout,
                      product: product
                    %}
                    {%- if enable_zoom and media.media_type == 'image' -%}
                      <div class="m-product-media--zoom-icon">
                        {% render 'tooltip', type: 'zoom-in', class_name: ' m-tooltip--left' %}
                      </div>
                    {%- endif -%}
                  </div>
                {% endfor %}
              </div>
              {% if show_nav and product.media.size > 1 %}
                <div class="m-product-media--slider__navigation">
                  <button class="swiper-button-control swiper-button-prev m-button--icon" aria-label="Previous">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </button>
                  <button class="swiper-button-control swiper-button-next m-button--icon" aria-label="Next">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </button>
                </div>
              {% endif %}
            </div>
          </div>
          {% if show_thumbnails and product.media.size > 1 %}
            <div class="m-product-media--slider__thumbnails">
              <div class="nav-swiper-container">
                <div class="swiper-wrapper" style="min-width: 70px;">
                  {% for media in product.media %}
                    {% assign aspect_ratio = product.media[0].preview_image.aspect_ratio | default: 1 %}
                    <div
                      class="swiper-slide media-type-{{ media.media_type }}"
                      data-index="{{ forloop.index0 }}"
                      data-a="{{ media.first.preview_image.aspect_ratio }}"
                      style="--slide-height: {{ 70 | divided_by: aspect_ratio }}px;"
                    >
                      {% render 'product-thumbnail', 
                        media: media, 
                        thumbnail: true, 
                        index: forloop.index0,
                        media_layout: media_layout,
                        product: product,
                        aspect_ratio: aspect_ratio
                      %}
                      {% if media.media_type contains 'video' %}
                        <div class="m-product-media--slider__thumbnail-icon">
                          <svg
                            class="m-svg-icon"
                            fill="currentColor"
                            stroke="currentColor"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 576 512"
                          >
                            <path d="M543.9 96c-6.2 0-12.5 1.8-18.2 5.7L416 171.6v-59.8c0-26.4-23.2-47.8-51.8-47.8H51.8C23.2 64 0 85.4 0 111.8v288.4C0 426.6 23.2 448 51.8 448h312.4c28.6 0 51.8-21.4 51.8-47.8v-59.8l109.6 69.9c5.7 4 12.1 5.7 18.2 5.7 16.6 0 32.1-13 32.1-31.5v-257c.1-18.5-15.4-31.5-32-31.5zM384 400.2c0 8.6-9.1 15.8-19.8 15.8H51.8c-10.7 0-19.8-7.2-19.8-15.8V111.8c0-8.6 9.1-15.8 19.8-15.8h312.4c10.7 0 19.8 7.2 19.8 15.8v288.4zm160-15.7l-1.2-1.3L416 302.4v-92.9L544 128v256.5z"/>
                          </svg>
                        </div>
                      {% endif %}
                      {% if media.media_type == 'model' %}
                        <div class="m-product-media--slider__thumbnail-icon">
                          <svg
                            class="m-svg-icon"
                            fill="currentColor"
                            stroke="currentColor"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 512 512"
                          >
                            <path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 34.2l224 84v.3l-224 97.1-224-97.1v-.3l224-84zM32 153.4l208 90.1v224.7l-208-104V153.4zm240 314.8V243.5l208-90.1v210.9L272 468.2z"/>
                          </svg>
                        </div>
                      {% endif %}
                    </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          {% endif %}
        </div>
      {% else %}
        <div class="m-product-media--slider media-slider-full" {% if enableLoadingMedia %}style="opacity: 0;"{% endif %}>
          {% if product.media.size <= 3 %}
            <div class="m:flex m:justify-center m:items-center">
              {% for media in product.media %}
                <div
                  class="m-product-media--item media-type-{{ media.media_type }}"
                  data-index="{{ forloop.index0 }}"
                  data-media-type="{{ media.media_type }}"
                  data-media-id="{{ media.id }}"
                  style="{% if product.media.size == 1 %}width: 100%;{% else %}width: 33.33%{% endif %}"
                >
                  {% render 'product-thumbnail',
                    media: media,
                    index: forloop.index0,
                    autoplay: enable_video_autoplay,
                    loop: true,
                    media_layout: media_layout,
                    product: product
                  %}
                  {%- if enable_zoom and media.media_type == 'image' -%}
                    <div class="m-product-media--zoom-icon">
                      {% render 'tooltip', type: 'zoom-in', class_name: ' m-tooltip--left' %}
                    </div>
                  {%- endif -%}
                </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="swiper-container {{ swiper_class }}">
              <div class="swiper-wrapper">
                {% for media in product.media %}
                  <div
                    class="swiper-slide m-product-media--item media-type-{{ media.media_type }}"
                    data-index="{{ forloop.index0 }}"
                    data-media-type="{{ media.media_type }}"
                    data-media-id="{{ media.id }}"
                  >
                    {% render 'product-thumbnail',
                      media: media,
                      index: forloop.index0,
                      autoplay: enable_video_autoplay,
                      loop: true,
                      media_layout: media_layout,
                      product: product
                    %}
                    {%- if enable_zoom and media.media_type == 'image' -%}
                      <div class="m-product-media--zoom-icon">
                        {% render 'tooltip', type: 'zoom-in', class_name: ' m-tooltip--left' %}
                      </div>
                    {%- endif -%}
                  </div>
                {% endfor %}
              </div>
            </div>
            <div class="m-product-media--slider__navigation">
              <button class="swiper-button-control m-button--icon swiper-button-prev" aria-label="Previous">
                <svg
                  width="14px"
                  height="14px"
                  fill="currentColor"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 448 512"
                >
                  <path d="M229.9 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L94.569 282H436c6.627 0 12-5.373 12-12v-28c0-6.627-5.373-12-12-12H94.569l155.13-155.13c4.686-4.686 4.686-12.284 0-16.971L229.9 38.101c-4.686-4.686-12.284-4.686-16.971 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971L212.929 473.9c4.686 4.686 12.284 4.686 16.971-.001z"/>
                </svg>
              </button>
              <button class="swiper-button-control m-button--icon swiper-button-next" aria-label="Next">
                <svg
                  fill="currentColor"
                  width="14px"
                  height="14px"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 448 512"
                >
                  <path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"/>
                </svg>
              </button>
            </div>
          {% endif %}
        </div>
    {% endcase %}
  </media-gallery>
{% else %}
  {{ 'product-1' | placeholder_svg_tag: 'm-placeholder-svg' }}
{% endif %}
Leave a Comment