有没有办法在 shopify 的新主题中将 JQuery 缩放添加到产品图片？

Question

我将参考的文章可以在这里找到：https://www.shopify.com/partners/blog/jquery-image-zoom

我已经按照 JQuery 缩放到 tee 的步骤，但我仍然无法让插件工作。

1. JQuery 已安装在项目中
2. 我将插件文件添加到 assets 文件夹中
3. 我编辑了 'product-template.liquid' 文件以添加 data-zoom 属性并将类 'image-zoom' 添加到图像标签
4. 我将站点中的脚本添加到“product-template.liquid”文件中，但我不确定它是否应该在该位置。

理论上，缩放应该可以正常工作吗？我已经尝试了一堆不同的代码，但似乎没有任何效果。

我是编辑 shopify 代码和 JS 的新手，因此非常感谢任何帮助。

我可以完美地看到图像，唯一缺少的是缩放。

我在“product-template.liquid”中的图片代码：

{%- for image in product.images -%}
        <div class="image-container product-single__photo product__photo-container product__photo-container-{{ section.id }} js{% unless image == featured_image %} hide{% endunless %}"
             id="ProductPhoto"
             style="max-width: {% include 'image-width' with image: image, width: 480 %}px;"
             data-image-id="{{ image.id }}">
          <a href="{{ image | img_url: '2048x2048' }}" 
             class="js-modal-open-product-modal product__photo-wrapper product__photo-wrapper-{{ section.id }}"
             style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
            {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
            <img class="lazyload{% unless image == featured_image %} lazypreload{% endunless %} image-zoom"
              src="{{ image | img_url: '150x150' }}"
              data-src="{{ img_url }}" 
              data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ image.aspect_ratio }}"
              data-sizes="auto"
              alt="{{ image.alt | escape }}"
              data-zoom="{{ image | img_url: '2048x2048', scale: 2 }}">
          </a>
          
        </div> 
      {%- endfor -%}

预览产品页面时，我得到 this 错误三次。

Tiger queen 是产品变体，我认为它显示错误，因为它只是网站的预览但我不确定。

Answer 1

我认为img_url 需要是包含较大图像的文件的实际 url，jquery 错误告诉您这样的文件不存在并且错误中的地址看起来已损坏