大型菜单中的产品图片

Question

我正在 Shopify 中构建一个 megamenu，它将混合显示 collection 图片、产品图片和可能存在于其中的任何其他 link 的通用图片。

目前 collection 图片显示正常，而且是通用图片，但在显示产品图片时遇到了一些问题。我的大型菜单代码如下所示：

 <ul class="megaMenu">
 <div class="megaMenuWrapper">
   {% for child_link in link.links %}  
   <li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}>
     <a href= "{{ child_link.url }}">

       {% if child_link.type == "collection_link" and child_link.object.image %}

          <div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>

       {% elsif child_link.type == "product_link" and child_link.object.image %}

          <div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div> 

       {% else%}

          <div class="menuImage" style="background-image: url('https://cdn.shopify.com/s/files/1/0924/5464/files/map_macarons_paris.jpg?1158498038497005180')"></div>

       {% endif %}

       <span>{{ child_link.title }}</span>

     </a>
   </li>
   {% endfor %}
 </div> 
</ul>

欢迎提出任何可能错误的想法。

Answer 1

产品没有 image 对象，它有 featured_image 或 images。

所以你应该调用 {{ child_link.object.featured_image | img_url: '500x' }}。

这同样适用于您的 if 检查图像是否存在的位置。

大型菜单中的产品图片

Product Image in mega menu

image

liquid

e-commerce

shopify