Using variant.incoming

Shopify Partner
24 0 4

As per theme documentation (https://docs.shopify.com/themes/liquid/objects/variant#variant-incoming) I am trying to use the `variant.incoming` object to change the "Add to Cart" button to "On Oder" when a product is out of stock but on order.

I made the necessary changes to the 'locales' to add the status message, added a clause between the `if (variant.available)` and `else` in the timber.js.liquid.

The only problem is that doing a `console.log(variant.incoming)` returns `undefined`. Doing a `console.log(variant)` shows the `incoming` option is not being returned in the product JSON. Is there somewhere I have to set what options are returned in the JSON (as seen in the page source)? If so, would someone be able to point it out, because I've looked and I haven't been able to spot it.

0 Likes
Shopify Expert
9981 84 1492

Hey Cole -

Not all the Variant attributes are return in a Liquid drop. If you need some data that's not included you can (since we're talking json in a template file) push the extra values into the constructed json object with js, or just build a new object for separate referencing.

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
24 0 4

Thanks Jason.

Now I just need to figure out a little more about what talks to what a where it gets things from to be able to do that.

Or I'll just forget the whole idea.

0 Likes
Shopify Expert
9981 84 1492

The "where" will differ from theme to theme so if you've got some tangeable code snippets or live page links - post them. With a bit more info the forum members might be able to nudge you in the first direction here. Knowing what theme we're talking about will help a lot as well.

Looking in product.liquid, or snippets included in product.liquid will be the best starting place. You'll find a bit of code that looks like this:

{{ product | json }}

^ that outputs a json product object, with variant data included.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
24 0 4

Thanks Jason,

I have found the code you mentioned.

I understand this contains the information for each product variant, and understand that this is where I need the `incoming` attribute to be so that I can reference it.

But through all the searching I have done, I have not been able to determine how I am able to modify what is returned—I do not know which part of what script processes the `{{ product | json }}`.

Have I blindingly missed the (possibly well written) documentation on this topic?

0 Likes
Shopify Expert
9981 84 1492

There's no docs on this so don't worry - you've not missed anything. If you're wanting to alter the object it will need within a <script> tag - not during the Liquid rendering stage.

So think more like this very (very) loose example.

<script>
  var productJson = {{ product | json }};
  {% for variant in product.variants %}
    productJson.product.variants[{{ forloop.index0 }}].incoming = {{ variant.incoming | json }};
  {% endfor %}
</script>

Then where your code had {{ product | json }} you can replace that the object already created -  productJson

You'll need to massage that to work for your needs but hopefully this helps.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
24 0 4

Thanks.

I'll see what I can hack together.

You may hear the dull thud of a head against a wall for some time.

0 Likes
Highlighted
Shopify Partner
24 0 4

I managed to get something working based on the code snippet you provided Jason.

I wonder though, why incoming isn't part accessible via `{{ product | json }}` in the first place. Wouldn't it be easy/easier to just put this in without having to manually loop through all variants and injecting the required attribute/s in?

Obviously there is nothing available to set the required/requested attributes, eg:

{{ product | with: incoming | json }}

so this would return all the normal attributes, but also include the `incoming` attribute. Seems like a simpler option to me.

Thanks for you assistance Jason.

0 Likes