Using conditionals to show metaobject value

Solved

Using conditionals to show metaobject value

studiobalbis
Shopify Partner
2 1 0

I'm currently working for a client who needs a quite unusual functionality. They have a customised desktop drawer menu with an image that shows on the right hand side of the screen. They want a different image to show when you hover over their different menu items. This I've managed to achieve easily by setting an image metafield for pages and collections that are linked in the menu and then using a bit of jQuery to change the source of the image on menu item hover. All fine.

 

The problem I have is that a few of the menu items are blank links that are just there to open up to the second or third level (ie. Shop > Shirts > Shortsleeves where only 'Shortsleeves' is actually linked to a collection), but they still want hover images for every menu item, even the blank links.

 

My idea to get around this is to set metaobjects for the entire site (with a text field for 'title' and an file ref for 'image') and then use a conditional in the code to change the "link_image" reference if there is or isn't a metaobject with a title that matches the menu link title, or a page/collection metafield. But I've tried this code and it isn't working.

 

Problem is I cannot get the conditional to work properly. I'm afraid I can't link to the live site because it's not yet published. Any ideas anyone?

 

 

{%- for childlink in link.links -%}
  {%- assign downcased_link_title = childlink.title | downcase | strip -%}
  {% for menu_item in shop.metaobjects.menu_hover_image.values %}
    {% assign menu_item_title = menu_item.title.value | downcase | strip %}
    {% if menu_item_title == downcased_link_title %}
      {% assign link_image = menu_item.image.value %}
    {% elsif childlink.object.metafields.custom.menu_image %}
      {% assign link_image = childlink.object.metafields.custom.menu_image %}
    {% endif %}
  {% endfor %}
  
  <li>
    {%- if childlink.links == blank -%}
      <a
        id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
        {% if link_image != blank %}
          data-image="{{ link_image | image_url: width: 700 }}"
        {% else %}
          data-image="{{ section.settings.hover_default | image_url: width: 700 }}"
        {% endif %}
        data-prev-image="{{ section.settings.hover_default | image_url: width: 700 }}"
        href="{{ childlink.url }}"
        class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
        {% if childlink.current %}
          aria-current="page"
        {% endif %}
      >
        {{ childlink.title | escape }}
      </a>

 

 

 

 

 

 

Accepted Solution (1)

studiobalbis
Shopify Partner
2 1 0

This is an accepted solution.

Just in case anyone needs this for future - I've worked out a logic that works:

{%- for link in section.settings.menu.links -%}
{% if link.object.metafields.custom.menu_image %}
  {% assign link_image = link.object.metafields.custom.menu_image %}
{% endif %}
{%- assign downcased_link_title = link.title | downcase | strip -%}
{% for menu_hover_image in shop.metaobjects.menu_hover_image.values %}
  {% assign menu_item_title = menu_hover_image.title | downcase | strip %}
  {% if downcased_link_title == menu_item_title %}
    {% assign link_image = menu_hover_image.image %}
  {% endif %}
{% endfor %}

View solution in original post

Reply 1 (1)

studiobalbis
Shopify Partner
2 1 0

This is an accepted solution.

Just in case anyone needs this for future - I've worked out a logic that works:

{%- for link in section.settings.menu.links -%}
{% if link.object.metafields.custom.menu_image %}
  {% assign link_image = link.object.metafields.custom.menu_image %}
{% endif %}
{%- assign downcased_link_title = link.title | downcase | strip -%}
{% for menu_hover_image in shop.metaobjects.menu_hover_image.values %}
  {% assign menu_item_title = menu_hover_image.title | downcase | strip %}
  {% if downcased_link_title == menu_item_title %}
    {% assign link_image = menu_hover_image.image %}
  {% endif %}
{% endfor %}