How do I add a metafield_tag to a href statement?

[zabazaba]

Not sure if the title makes sense, but I am basically trying to add a link that only appears to certain customers once they have logged into their account on my site.

I have added my own code below:

{%  if customer.metafields.custom.wholesale_order_form != blank %}
                        <a class="popover__link-item" href={{customer.metafields.custom.wholesale_order_form | metafield_tag}}>{{ 'Wholesale Order Form' }}</a>
                        {%  endif  %}

Into the existing code for the menu system on my site, as seen below:

{%- if customer -%}
                    <div class="popover__inner popover__inner--no-padding">
                      <div class="popover__linklist">
                        <a class="popover__link-item" href="{{ routes.account_url }}">{{ 'customer.general.orders' | t }}</a>
                        <a class="popover__link-item" href="{{ routes.account_addresses_url }}">{{ 'customer.general.addresses' | t }}</a>
                        
                        {%  if customer.metafields.custom.wholesale_order_form != blank %}
                        <a class="popover__link-item" href={{customer.metafields.custom.wholesale_order_form | metafield_tag}}>{{ 'Order Form' }}</a>
                        {%  endif  %}
               
                        <a class="popover__link-item" href="{{ routes.account_logout_url }}" data-no-instant>{{ 'customer.general.logout' | t }}</a>
                      </div>
                    </div>
                  {%- else -%}

My only issue is that using {{customer.metafields.custom.wholesale_order_form | metafield_tag}} after the href= doesn’t work as it is intended to. Instead of creating an inline link that matches the format of the other links in the same menu, it instead looks like it is being recognized as a

instead and ends up not having the same format as the rest of the links in the same drop down menu.

Am I missing something simple in order to get this to work properly?

[tim_1]

No, this is not exactly true.

Depending on your metafield type, metafield_tag will produce different kinds of HTML tag/element, so I believe using it like you do actually breaks HTML structure.

You should be able to see it if you “view page source” (which shows you exact HTML) rather then “inspect element” which shows you browsers interpretation of your HTML code (including browsers attempts to fix HTML errors).

If it’s a page reference type metafield, you should rather use

href={{customer.metafields.custom.wholesale_order_form.value.url }}

(see more at https://shopify.dev/docs/api/liquid/objects/metafield#metafield-value)

Or use simple customer.metafields.custom.wholesale_order_form.value if it’s a a single line text or URL metafield…

[zabazaba]

It is funny, because using the code that you provided, it does properly end up allowing the “Wholesale order form” to be correctly formatted with the rest of the menu. However, when I use value.url at the end, it doesn’t do anything other than kind of like refreshing the page that you were currently already on.

This is what the line of code looks like when I click to view source on the site

Wholesale Order Form

If I end up using the .value code, this is what my url ends up having at the end, which I guess is saying Liquid error (sections/Liquid) error sections/header line 288, metafield tag can only be used with a metafield drop.

Liquid%20error%20(sections/Liquid%20error%20(sections/header%20line%20288):%20metafield_tag%20can%20only%20be%20used%20with%20a%20metafield%20drop

[tim_1]

As expected, my code does not break HTML structure.

And you obviously can’t do {{ customer.metafields.custom.wholesale_order_form.value | metafield_tag }} because metafield_tag expects metafield and not it’s value.

Since value.url does not produce anything, the question is how your metafield is defined? Can you share a screenshot showing the metafield type?

[zabazaba]

Do you mean the code that I used to create the metafield? It is something that I found online.

For the theme.liquid, I put in the code below

  
  {% if template contains "subscription" %}
    {% unless customer %}
        {% assign send_to_login = true %}
    {% endunless %} 
  {% endif %}
  
  {% if send_to_login and request.path != "/challenge" %}
    
  {% else %}
 
  
    
    
 
  
 
  
 
    
 
  
 
  {% endif %}
 

Then I created a liquid file in the templates folder titled page.subscription.liquid and put in the code below

{% if customer.tags contains 'Active Subscriber' %}

{{% section 'page-test-template' %}}
{% section 'orderform' %}

{% else %}
 

 
{% endif %}

[tim_1]

What I actually need right now is something similar to this screenshot of my metafield definition, where we can see that the type is “Page” and it’s “One page”, not a “List”:

Then it would be possible to definitely tell whether you need to use value, or vlaue.url or something different…

[zabazaba]

Ah, I see, I get it now. I guess based on the online instructions I had followed, it told me to create it using rich text.

[tim_1]

Well, this explains why you’re seeing the

– by default, if I am not mistaken, richtext is either wrapped with

, or is a list of paragraphs.

Richtext is ok if you want to simply output some HTML-formatted text on your page but not in your use case.

You may try href=“{{ metafield.value | strip_html | strip }}”, but ideally –

– I would suggest you to remove and re-define the metafield.

If you’re ready to type in/copy-paste the URL manually, then use “Single line text” and use href=“{{ metafield.value }}” (not recommended, because may have incidental spaces or some typos).

I’d rather recommend to either use URL metafield type and same code. URL would be easier to enter and adds some validation. Will allow links to other sites if your form is located not on your site.

Or, use the Reference: Page type (probably the best, but only allows Page objects in your store, not good if need to link to 3rd party service) and then use value.url as I suggested initially.

[tim_1]

Ah, and if keeping rich text type metafield may as well try {{ metafield | metafield_text }} instead of strip_html…

[zabazaba]

That just made the link disappear entirely unfortunately.

[tim_1]

it also depends on how you enter your metafield data – whether you simply type-in/copy-paste the URL or use the “insert link” button in rich text editor. too many variables, that’s why re-defining the metafield as URL will be the best option in the long run.

[zabazaba]

This is how I have it under the customer’s metafields.

I am close to just simply leaving it as is, since it seems too difficult for me to figure out. If I could get away with simply pushing the text over using padding or something similar, then I would be ok with that as well. It’s not really a major/critical part of my site, but it would be nice if I could figure something out at least.

[tim_1]

yeah, that’s what I was afraid of – very difficult to retrieve the URL from this reliably.

Redefine the metafield as URL, or simply define a new metafield as URL type and key wholesale_form_link) and then the code would be like:

{%  if customer.metafields.custom.wholesale_form_link != blank %}
  Wholesale Order Form
{%  endif  %}

[zabazaba]

Thanks. I’ll give it a closer look/try tomorrow. Just quickly testing it out right now seems like it doesn’t work. Nothing shows up in the drop down menu after adding this in.