Wrong hover image(zoom) on all products. Warehouse

Highlighted
New Member
1 0 0

Hi! I use Warehouse theme. And i have an issue with zoom. On all products the hover (zoom) image is wrong. Help please:DСнимок экрана от 2020-07-12 15-03-27.png

Here is the code of product-gallery.liquid

 

{%- if product.media.size > 0 -%}
  {%- assign show_thumbnails_if_one_media = true -%}

  <div class="card">
    <div class="card__section card__section--tight">
      <div class="product-gallery {% if show_thumbnails_if_one_media %}product-gallery--with-thumbnails{% endif %}">
        {%- assign selected_media = product.selected_variant.featured_media | default: product.featured_media -%}

        <div class="product-gallery__carousel-wrapper">
          <div class="product-gallery__carousel {% if template != 'product.quick-view' and section.settings.enable_image_zoom %}product-gallery__carousel--zoomable{% endif %}" data-media-count="{{ product.media.size }}" data-initial-media-id="{{ selected_media.id }}">
            {%- for media in product.media -%}
              {%- assign is_media_group = false -%}
              {%- assign is_media_filtered = false -%}
              {%- assign media_alt = media.alt -%}

              {%- if media.alt contains '#' -%}
                {%- assign is_media_group = true -%}
                {%- assign alt_parts = media.alt | split: '#' -%}

                {%- comment -%}
                If the custom ALT tag contains two parts (for instance "My custom alt # color_blue") then the first part is actually used
                as a custom ALT tag
                {%- endcomment -%}

                {%- if alt_parts.size == 2 and alt_parts.first != blank -%}
                  {%- assign media_alt = alt_parts.first | strip -%}
                {%- else -%}
                  {%- assign media_alt = product.title -%}
                {%- endif -%}

                {%- assign media_group_parts = alt_parts.last | split: '_' -%}

                {%- for option in product.options -%}
                  {%- assign downcase_option = option | downcase -%}
                  {%- assign downcase_group_option = media_group_parts.first | strip | downcase -%}

                  {%- if downcase_option == downcase_group_option -%}
                    {%- assign option_setting = 'option' | append: forloop.index -%}
                    {%- assign option_value = product.selected_or_first_available_variant[option_setting] | downcase -%}

                    {%- assign downcase_group_value = media_group_parts.last | strip | downcase -%}
                    {%- assign media_variant_ids = media.variants | map: 'id' -%}

                    {%- if option_value != downcase_group_value -%}
                      {%- unless media_variant_ids contains product.selected_or_first_available_variant.id -%}
                        {%- assign is_media_filtered = true -%}
                      {%- endunless -%}
                    {%- endif -%}

                    {%- break -%}
                  {%- endif -%}
                {%- endfor -%}
              {%- endif -%}

              <div class="product-gallery__carousel-item {% if media.id == selected_media.id %}is-selected{% endif %} {% if is_media_filtered %}is-filtered{% endif %}" tabindex="-1" data-media-id="{{ media.id }}" data-media-type="{{ media.media_type | escape }}" {% if media.media_type == 'external_video' %}data-media-host="{{ media.host | escape }}" data-video-id="{{ media.external_id | escape }}"{% endif %} {% if is_media_group %}data-group-name="{{ media_group_parts.first | strip | downcase | escape }}" data-group-value="{{ media_group_parts.last | strip | downcase | escape }}"{% endif %}>
                {%- case media.media_type -%}
                  {%- when 'image' -%}
                    <div class="product-gallery__size-limiter" style="max-width: {{ media.width }}px">
                      {%- capture supported_sizes -%}{%- render 'image-size', sizes: '400,500,600,700,800,900,1000,1100,1200', image: media -%}{%- endcapture -%}
                      {%- assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                      <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%">
                        <img class="product-gallery__image lazyload image--blur-up" src="{{ media | img_url: '60x' }}" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" data-zoom="{{ media | img_url: '1600x' }}" alt="{{ media_alt | escape }}">

                        <noscript>
                          <img src="{{ media | img_url: '800x' }}" alt="{{ media_alt | escape }}">
                        </noscript>
                      </div>
                    </div>

                  {%- when 'model' -%}
                    <div class="product-gallery__model">
                      <div class="model-wrapper">
                        {{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
                      </div>
                    </div>

                  {%- when 'external_video' -%}
                    <div class="product-gallery__external-video">
                      <div class="video-wrapper">
                        {{- media | external_video_tag: image_size: '1024x' -}}
                      </div>
                    </div>

                  {%- when 'video' -%}
                    <div class="product-gallery__video">
                      <div class="video-wrapper video-wrapper--native" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%">
                        {{- media | video_tag: image_size: '1024x', controls: true -}}
                      </div>
                    </div>
                {%- endcase -%}
              </div>
            {%- endfor -%}
          </div>

          {%- comment -%}Add the "view in your space" button, which allows to show the product in customer's environment (if the device supports it){%- endcomment -%}
          {%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}

          {%- if first_3d_model -%}
            <button class="product-gallery__view-in-space button button--full" data-shopify-xr data-shopify-model3d-id="{{ first_3d_model.id }}" data-shopify-model3d-default-id="{{ first_3d_model.id }}" data-shopify-title="{{ product.title | escape }}" data-shopify-xr-hidden>
              {%- render 'icon', icon: 'media-view-in-space' -%} {{- 'product.general.view_in_space' | t -}}
            </button>
          {%- endif -%}

          {%- if template != 'product.quick-view' and section.settings.enable_image_zoom -%}
            <span class="product-gallery__zoom-notice">{% render 'icon', icon: 'zoom' %} {{ 'product.general.zoom' | t }}</span>
          {%- endif -%}
        </div>

        {%- if show_thumbnails_if_one_media -%}
          <div class="scroller">
            <div class="scroller__inner">
              <div class="product-gallery__thumbnail-list">
                {%- for media in product.media -%}
                  {%- assign is_media_group = false -%}
                  {%- assign is_media_filtered = false -%}
                  {%- assign media_alt = media.alt -%}

                  {%- if media.alt contains '#' -%}
                    {%- assign is_media_group = true -%}
                    {%- assign alt_parts = media.alt | split: '#' -%}

                    {%- comment -%}
                      If the custom ALT tag contains two parts (for instance "My custom alt # color_blue") then the first part is actually used
                      as a custom ALT tag
                    {%- endcomment -%}

                    {%- if alt_parts.size == 2 and alt_parts.first != blank -%}
                      {%- assign media_alt = alt_parts.first | strip -%}
                    {%- else -%}
                      {%- assign media_alt = product.title -%}
                    {%- endif -%}

                    {%- assign media_group_parts = alt_parts.last | split: '_' -%}

                    {%- for option in product.options -%}
                      {%- assign downcase_option = option | downcase -%}
                      {%- assign downcase_group_option = media_group_parts.first | strip | downcase -%}

                      {%- if downcase_option == downcase_group_option -%}
                        {%- assign option_setting = 'option' | append: forloop.index -%}
                        {%- assign option_value = product.selected_or_first_available_variant[option_setting] | downcase -%}

                        {%- assign downcase_group_value = media_group_parts.last | strip | downcase -%}
                        {%- assign media_variant_ids = media.variants | map: 'id' -%}

                        {%- if option_value != downcase_group_value -%}
                          {%- unless media_variant_ids contains product.selected_or_first_available_variant.id -%}
                            {%- assign is_media_filtered = true -%}
                          {%- endunless -%}
                        {%- endif -%}

                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}
                  {%- endif -%}

                  <a href="{{ media | img_url: '1024x' }}" class="product-gallery__thumbnail {% if media.id == selected_media.id %}is-nav-selected{% endif %} {% if is_media_filtered %}is-filtered{% endif %}" data-media-id="{{ media.id }}" {% if is_media_group %}data-group-name="{{ media_group_parts.first | strip | downcase | escape }}" data-group-value="{{ media_group_parts.last | strip | downcase | escape }}"{% endif %}>
                    {%- comment -%}Based on the type of media, we have to add an icon as per Shopify rules{%- endcomment -%}

                    {%- case media.media_type -%}
                      {%- when 'model' -%}
                        <span class="product-gallery__thumbnail-badge">{% render 'icon', icon: 'media-model-badge' %}</span>

                      {%- when 'video' or 'external_video' -%}
                        <span class="product-gallery__thumbnail-badge">{% render 'icon', icon: 'media-video-badge' %}</span>
                    {%- endcase -%}

                    <!-- <div class="aspect-ratio" > -->
                      <img src="{{ media | img_url: '130x' }}" alt="{{ media_alt | escape }}">
                    <!-- </div> -->
                  </a>
                {%- endfor -%}
              </div>
            </div>
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
{%- endif -%}

Here is js of zoom:

  key: '_createZoom',
      value: function _createZoom() {
        var _this20 = this;

        if (this.options['enableImageZoom']) {
          this.driftObjects = [];
          var zoomWrapper = this.element.querySelector('.product__zoom-wrapper');

          // While Drift has a "handleTouch" option, we've found it's not working well, so we are doing our own
          // test here to prevent loading it at all on mobile
          if (__WEBPACK_IMPORTED_MODULE_0__helper_Responsive__["default"].matchesBreakpoint('supports-hover')) {
            this.element.querySelectorAll('.product-gallery__image').forEach(function (image) {
              _this20.driftObjects.push(new Drift(image, {
                containInline: _this20.options['zoomEffect'] === 'outside',
                inlinePane: window.innerWidth < 1024 ? true : _this20.options['zoomEffect'] !== 'outside',
                hoverBoundingBox: _this20.options['zoomEffect'] === 'outside',
                handleTouch: false,
                inlineOffsetY: window.innerWidth < 1024 ? -85 : 0,
                paneContainer: zoomWrapper
              }));
            });
          }
        }
      }
    }

 

0 Likes