Shopify Prestige主题：菜单悬停时访问集合元字段方法

需求：在主菜单悬停集合链接时，下拉菜单内显示对应集合的metafield内容。当前代码仅在进入集合页面时才能加载元字段内容，无法实现菜单悬停动态展示。

现有代码：

<div class="DropdownMenu flex-menu" aria-hidden="true">
                    <ul class="Linklist">
                      {%- for sub_link in link.links -%}
                        <li class="Linklist__Item" {% if sub_link.links != blank %}aria-haspopup="true"{% endif %}>
                          <a href="{{ sub_link.url }}" class="Link Link--secondary">{{ sub_link.title | escape }} {% if sub_link.links != blank %}{% render 'icon' with 'select-arrow-right' %}{% endif %}</a>
                          {%- if sub_link.links != blank -%}
                            <div class="DropdownMenu" aria-hidden="true">
                              <ul class="Linklist">
                                {%- for sub_sub_link in sub_link.links -%}
                                
                                  <li class="Linklist__Item">
                                  
                                    <a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
                                  </li>
                                {%- endfor -%}
                              </ul>
                            </div>
                          {%- endif -%}
                        </li>
                      {%- endfor -%}
                    </ul>
                   
                     <div class="rel-container">
                         <img src="{{collection.metafields.custom.menuimage}}" 
                           alt="garnheader" style="width:880px;height:60vh;">
                         <div class="bottom-left">
                           <h2> {{collection.metafields.my_fields.introheader}} </h2>
                           <p>  {{collection.metafields.my_fields.introtekst}} </p>
                           <a href="{{ sub_link.url }}"> Køb nu</button>
                         </div>
                     <div>
<div>

解决方案 #

问题核心：当前代码直接调用{{collection.metafields}}仅在集合页面环境下有效，全局菜单中需要先通过菜单链接获取对应集合对象，才能访问其元字段。

1. 修改Liquid代码，动态获取集合对象 #

遍历菜单链接时，提取集合的handle，再通过collections[handle]获取对应的集合数据，将元字段内容嵌入到对应菜单的下拉区域：

<div class="DropdownMenu flex-menu" aria-hidden="true">
  <div class="menu-content-wrapper">
    <ul class="Linklist">
      {%- for sub_link in link.links -%}
        {%- assign collection_handle = sub_link.url | split: '/' | last -%}
        {%- assign target_collection = collections[collection_handle] -%}
        <li class="Linklist__Item menu-collection-item {% if target_collection %}has-metafield-content{% endif %}" {% if sub_link.links != blank %}aria-haspopup="true"{% endif %}>
          <a href="{{ sub_link.url }}" class="Link Link--secondary">{{ sub_link.title | escape }} {% if sub_link.links != blank %}{% render 'icon' with 'select-arrow-right' %}{% endif %}</a>
          
          {%- if sub_link.links != blank -%}
            <div class="DropdownMenu sub-menu" aria-hidden="true">
              <ul class="Linklist">
                {%- for sub_sub_link in sub_link.links -%}
                  <li class="Linklist__Item">
                    <a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
                  </li>
                {%- endfor -%}
              </ul>
            </div>
          {%- endif -%}

          {%- if target_collection and target_collection.metafields.custom.menuimage != blank -%}
            <!-- 集合元字段内容容器，默认隐藏，悬停时显示 -->
            <div class="rel-container collection-metafield-content">
              <img src="{{ target_collection.metafields.custom.menuimage | img_url: 'large' }}" 
                   alt="{{ target_collection.title | escape }}" style="width:880px;height:60vh;">
              <div class="bottom-left">
                {%- if target_collection.metafields.my_fields.introheader -%}
                  <h2>{{ target_collection.metafields.my_fields.introheader }}</h2>
                {%- endif -%}
                {%- if target_collection.metafields.my_fields.introtekst -%}
                  <p>{{ target_collection.metafields.my_fields.introtekst }}</p>
                {%- endif -%}
                <a href="{{ sub_link.url }}" class="button">Køb nu</a>
              </div>
            </div>
          {%- endif -%}
        </li>
      {%- endfor -%}
    </ul>
  </div>
</div>

2. 添加CSS实现悬停显示效果 #

在主题的CSS文件（如theme.css或自定义CSS区域）添加以下样式，控制元字段内容的显示逻辑：

/* 默认隐藏元字段内容容器 */
.collection-metafield-content {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  z-index: 100;
}

/* 悬停菜单项时显示对应的元字段内容 */
.menu-collection-item:hover .collection-metafield-content {
  display: block;
}

/* 调整菜单容器的定位，避免内容溢出 */
.menu-content-wrapper {
  position: relative;
}

.Linklist__Item.menu-collection-item {
  position: relative;
}

关键说明 #

• 通过sub_link.url提取集合handle，再调用collections[collection_handle]获取集合对象，实现全局环境下访问集合元字段。
• 增加条件判断，仅当集合存在且元字段内容不为空时，才渲染内容容器。
• 用CSS控制容器的显示/隐藏，实现悬停触发的动态效果。

内容的提问来源于stack exchange，提问作者J. P.