I'm working to customize the Pickup Availability section on our product pages. Everything looks great when a product is available for pick up. However, no message is shown on products when they are unavailable for pick up. This seems like it should be easy to do, but I'm just not sure how to make it work in liquid. Here's the relevant snip of our store_availability.liquid code:
<div
data-section-id="{{ section.id }}"
data-section-type="store-availability">
{%- assign pick_up_availabilities = product_variant.store_availabilities | where: 'pick_up_enabled', true -%}
{%- if pick_up_availabilities.size > 0 -%}
<div class="store-availability">
{%- assign closest_location = pick_up_availabilities.first -%}
{%- if closest_location.available -%}
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-in-stock" viewBox="0 0 12 10"><path fill-rule="evenodd" clip-rule="evenodd" d="m3.293 9.707-3-3a.999.999 0 1 1 1.414-1.414l2.236 2.236 6.298-7.18a.999.999 0 1 1 1.518 1.3l-7 8a1 1 0 0 1-.72.35 1.017 1.017 0 0 1-.746-.292z" fill="#212B36"/></svg>
{%- else -%}
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-out-of-stock" viewBox="0 0 12 13"><path fill-rule="evenodd" clip-rule="evenodd" d="m7.414 6.5 4.293-4.293A.999.999 0 1 0 10.293.793L6 5.086 1.707.793A.999.999 0 1 0 .293 2.207L4.586 6.5.293 10.793a.999.999 0 1 0 1.414 1.414L6 7.914l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L7.414 6.5z" fill="#212B36"/></svg>
{%- endif -%}
<div class="store-availability__info">
{%- if closest_location.available -%}
<div>
{{ 'store_availability.general.pick_up_available_at_html' | t: location_name: "Local Location Name" }}
</div>
{%- else -%}
<p>
{{ 'store_availability.general.pick_up_unavailable_at_html' | t: location_name: "Local Location Name" }}
</p>
{%- if pick_up_availabilities.size > 1 -%}
<p class="store-availability__small">
<a href="#StoreAvailabilityDrawer" class="js-drawer-open-availability" aria-controls="StoreAvailabilityDrawer">
{{ 'store_availability.general.check_other_stores' | t }}
</a>
</p>
{%- endif -%}
{%- endif -%}
</div>
</div>
It seems like this part should have it show an unavailability message... but, I know just enough code to bugger around with things, and not enough to tell for sure if this is the right trigger to get an alternate message to show:
<div class="store-availability__info">
{%- if closest_location.available -%}
<div>
{{ 'store_availability.general.pick_up_available_at_html' | t: location_name: "Local Location Name" }}
</div>
{%- else -%}
<p>
{{ 'store_availability.general.pick_up_unavailable_at_html' | t: location_name: "Local Location Name" }}
</p>
Please help if you can tell me where I'm going wrong! Thanks!
