Need help on json metafield along with {{selected_or_first_available_variant}}

[akhilmahajan]

Hi there,

Hope All doing well. So i have a request, can someone help me to solve this.
I have a json metafield data from a third party app.{{variant.metafields.locationInventory.info}}.
Somehow i make a code to show the data on cart page. It's showing also. But the correct data show only when the page get reload/refreshed.
Here is the code:-
<div class="cart_custom_available" id="availability-container" data-product-id="{{ item.product.id }}">
{% assign variant = item.product.selected_or_first_available_variant %}
{% assign inventories = variant.metafields.locationInventory.info %}
{% for inventoryInfo in inventories.value %}
{% assign locationId = inventoryInfo.location.id %}
{% assign qty = inventoryInfo.quantity %}
<li>
{% if locationId == 20406468675 %}
Store pick up
{% elsif locationId == 68553244861 %}
Online Delivery
{% else %}
{{ locationId }}
{% endif %}
:
{% if qty >= 1 %}
<span style="color: green;">Available</span>
{% elsif qty < 1 %}
<span style="color: red;">Not available</span>
{% else %}
{{ qty }}
{% endif %}
</li>
<style>
.cart_custom_available li {
list-style: none;
}
</style>
{%- endfor -%}
</div>
I think the issue with the selected_or_first_available_variant. please assist with me
I am attaching the before reload showing data:-

And here is after reloading the website/the actual data:-