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

Topic summary

Issue: JSON metafield data for location-based inventory on the cart page shows incorrect values on first load and only displays correctly after a page refresh.

Context: The code pulls from a third‑party app metafield at variant.metafields.locationInventory.info and iterates inventories.value per location (fields: location.id, quantity). It labels locations by ID (20406468675 → “Store pick up”, 68553244861 → “Online Delivery”, else prints the ID) and shows availability as “Available” (green) when qty ≥ 1, otherwise “Not available” (red).

Implementation details: On the cart, the code assigns variant using item.product.selected_or_first_available_variant, then renders a list within a div with data-product-id set to item.product.id.

Observed behavior: Initial render shows mismatched/incorrect availability per location; reloading the page yields the correct data. Two screenshots are provided illustrating the before/after discrepancy (images central to the issue).

Suspected cause: The poster believes selected_or_first_available_variant may be responsible for the mismatch.

Status: Request for assistance; no solution or consensus yet. Discussion remains open.

Summarized with AI on January 13. AI used: gpt-5.

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:-

{% 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 %}
  • {% if locationId == 20406468675 %} Store pick up {% elsif locationId == 68553244861 %} Online Delivery {% else %} {{ locationId }} {% endif %} : {% if qty >= 1 %} Available {% elsif qty < 1 %} Not available {% else %} {{ qty }} {% endif %}
  • .cart_custom_available li { list-style: none; } {%- endfor -%}
    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:-