How to reference meta objects in liquid templates

[Cedric7]

Hello, I inserted a piece of code in the meta object.

< div style="background : #FDEEDB ; padding : 15px ; max-width : 300px ; text-align : center ; color : red ; " > < b > 10% Off </ b >CODE: < b > HS10 </b> </div>  _ _ _ _ _

I have translated the code into Spanish in Translate & Adapt, which is my main purpose.

But I now want to reference this meta object in the Liquid module so that the code runs successfully. That's what counts as success.

{{ shop.metaobjects.type.handle }}
{{ shop.metaobjects['type']['handle'] }}

I saw this in the official docs, but I can't get it to work. Especially what the type refers to.

[RhiRo]

Hi Cedric7, 

Type refers to the definition of the metaobject. So if you go to the metaobject entry in question, in the top right hand corner you should see the definition of the metaobject and a link to 'view definition'. 
If you click on this, you should be taken to the settings for the metaobject definition. 
Here it will have the type. You need to use this in the type section. 

So here it would be {{ shop.metaobjects['see_more_collection_button']['handle'] }}
Handle is specific to the metaobject entry - you should find it in the entry under the 'Handle' section 

Hope that helps! 

Rhianna

[Cedric7]

Hello,I know what Type means, but I haven't succeeded in referencing the code. it shows weird stuff.

My front end says "MetaobjectDrop" and I don't know what that means. Why did I fail to quote the code.

I can't upload pictures, I don't know why. I will dictate to you how I create the meta object, hope you can understand.

I created a field.Field is a Single line text inside the meta object. I set Single line text to Limit to preset choices. Then put the code in it. I want to know how can I successfully reference the code.

[Cedric7]

You can show me directly, where the meta object stores the code. And the process of successfully referencing in liquid

[RhiRo]

Usually when you have 'drop' on the end (eg CollectionDrop or MetaobjectDrop), it just means you haven't dug down into the object itself. So if you want the id of the metaobject it would be {{ shop.metaobjects['type']['handle']].id.value }}, and you can replace id with whatever the field is called. 

[RhiRo]

Personally, I store the metaobjects in the metafields of the product/collection etc, so I can reference them a different way - which is 
{{collection.metafields.button.see_more.value.button_link.value }} 
Which I can break down for you below: 
collection.metafields -> get to the metafields of the collection I'm on
button.see_more.value -> get to the metaobject that is stored within the button.see_more metafield (namespace and key) 
button_link.value -> get the value of the button_link field within the metaobject

This way you also avoid having to know the handle of the metaobject you are referencing etc. There is also a limit to the number of storewide metaobject references you can use on one page, which i can't remember off the top of my head, but this avoids that too 🙂 

[Cedric7]

Hi,RhiRo

{{ shop.metaobjects['type']['handle'].id.value }}

What does value represent in this code? Also can I put the code into a single line of text to quote?

[RhiRo]

Hi Cedric7, 
Value doesn't mean anything, you don't need to alter that one, it should just stay as 'value'. 
I haven't personally used html in a metafield/metaobject before, but according to to this discussion it's possible 👍

[RhiRo]

Also, I understand you need the wording to be translatable, but is there a reason you need the whole html in the metaobject? 
Could you not just put this in the liquid file: 
<div style="background-color : #FDEEDB ; padding : 15px ; max-width : 300px ; text-align : center ; color : red ; " >{{ metaobject reference }}</div>

and then a rich text field in the metaobject where you have 

10% Off CODE:  HS10

If the colours need to change those could be stored in the metafield too.
Depends how dynamic you need it to be really, but that's how I would do it personally 🙂  

[Cedric7]

Hello, I have a question. If I put the code in the meta object. Can the code I put in stylesheet.css and theme.js take effect on the content of the meta object?

[RhiRo · Accepted solution]

Yes it should do - the liquid happens first, (compiled to html), so the code should be placed in as normal, then the css and js have access to it on load 🙂