Hi! We have installed a theme and the logic part with the pick up availability is unchanged pretty much, however its not working as expected.
I compared the theme’s pickup availability liquid file with the one from the following docs guide:
Show pickup availability on product pages (shopify.dev)
And I don’t see what’s wrong with it. The issue is that we have about 20 locations, all are set up exactly the same with pick up enabled. When adding ALL locations to one product it randomly shows maybe none or one or two or five of the locations instead of all 20 locations, its super random. The funny part is that it’s different for each product too.
Is there maybe some kind of caching that’s broken which we can control? I have tried re-publishing the products but it didn’t really work.
I tried giving out the amount of available locations as a number (“
{{ product_variant.store_availabilities.size }}
” in the code as you can see)and it really shows “0” sometimes or maybe “2” or “5” or whatever so its really confusing…
I’m also pretty new to liquid to be fair so maybe I’m missing something. I’ll provide the entire liquid code here:
{%- assign pick_up_availabilities = product_variant.store_availabilities | where: 'pick_up_enabled', true -%}
{%- assign pick_up_available = false -%}
{%- if pick_up_availabilities.size > 0 -%}
{%- assign pick_up_available = true -%}
{%- endif -%}
{%- assign shipping_availabilities = product_variant.store_availabilities | where: 'shipping_enabled', true -%}
{%- assign shipping_available = false -%}
{%- if shipping_availabilities.size > 0 -%}
{%- assign shipping_available = true -%}
{%- endif -%}
<div class="store-availability-container animated fadeIn"
data-pick-up-available="{{ pick_up_available }}"
data-section-id="{{ section.id }}"
data-section-type="store-availability"
>
<p>{{ product_variant.store_availabilities.size }}</p>
{%- if pick_up_available -%}
<div class="store-availability-information">
{%- assign closest_location = pick_up_availabilities.first -%}
<div class="store-availability-information-container">
{%- if closest_location.available -%}
<p class="store-availability-information__title">
{% render 'snip-icons',
wrapper: '.store-availability-list__stock',
type: 'apollo',
icon: 'checkmark',
classes: 'store-availability-list__stock--icon vib-center',
size: '9px',
fill: 'var(--text-color)',
hover: 'var(--text-color)' %}
{%- if shipping_available == false -%}
<span class="vib-center">Nur {{ 'products.product_pickup_availability.pick_up_available' | t: location_name: "" }}</span>
{%- else -%}
<span class="vib-center">{{ 'products.product_pickup_availability.pick_up_available' | t: location_name: "" }}</span>
{%- endif -%}
</p>
<p class="store-availability-information__stock">
{{ closest_location.pick_up_time }}
</p>
<div class="slideout__trigger--open store-availability-information__stores">
<button class="slideout__trigger-store-availability js-slideout-open" data-slideout-direction="right" data-wau-slideout-target="store-availability" aria-label="Toggle slideout" tabindex="0" type="button" name="button">
{%- if pick_up_availabilities.size == 1 -%}
{{ 'products.product_pickup_availability.view_store_info' | t }}
{%- else -%}
{{ 'products.product_pickup_availability.check_other_stores' | t }}
{%- endif -%}
</button>
</div>
{%- else -%}
<p class="store-availability-information__title">
{% render 'snip-icons',
wrapper: '.store-availability-list__stock',
type: 'apollo',
icon: 'close',
classes: 'store-availability-list__stock--icon vib-center',
size: '9px',
fill: 'var(--text-color)',
hover: 'var(--text-color)' %}
<span class="vib-center">{{ 'products.product_pickup_availability.pick_up_unavailable_at_html' | t: location_name: closest_location.location.name }}</span>
</p>
{%- endif -%}
</div>
</div>
<div class="store-availabilities-modal modal" id="StoreAvailabilityModal">
<div class="slideout__trigger--close">
<button class="slideout__trigger-store-availability js-slideout-close" data-slideout-direction="right" aria-label="Close navigation" tabindex="0" type="button" name="button">
<div class="icn-close"></div>
</button>
</div>
<div class="store-availabilities-modal__header">
<span class="store-availabilities-modal__product-information">
<h2 class="store-availabilities-modal__product-title" data-store-availability-modal-product-title>
</h2>
{% unless product_variant.title == 'Default Title' %}
<p class="store-availabilities-modal__variant-title store-availability-small-text">
{{ product_variant.title }}
</p>
{% endunless %}
</span>
</div>
<div class="store-availabilities-list">
{%- for availability in pick_up_availabilities -%}
<div class="store-availability-list__item">
<div class="store-availability-list__location">
<strong>
{{availability.location.name}}
</strong>
</div>
<div class="store-availability-list__stock store-availability-small-text">
{%- if availability.available -%}
{% render 'snip-icons',
wrapper: '.store-availability-list__stock',
type: 'apollo',
icon: 'checkmark',
classes: 'store-availability-list__stock--icon vib-center',
size: '9px',
fill: 'var(--text-color)',
hover: 'var(--text-color)' %}
<span class="vib-center">{{ 'products.product_pickup_availability.pick_up_available' | t }}, {{ availability.pick_up_time | downcase }}</span>
{%- else -%}
{% render 'snip-icons',
wrapper: '.store-availability-list__stock',
type: 'apollo',
icon: 'close',
classes: 'store-availability-list__stock--icon vib-center',
size: '9px',
fill: 'var(--text-color)',
hover: 'var(--text-color)' %}
<span class="vib-center">{{ 'products.product_pickup_availability.pick_up_currently_unavailable' | t }}</span>
{%- endif -%}
</div>
{%- assign address = availability.location.address -%}
{{ address | format_address }}
{%- if address.phone.size > 0 -%}
<p class="store-availability-list__phone">
{{ address.phone }}<br>
</p>
{%- endif -%}
</div>
{%- endfor -%}
</div>
</div>
{%- endif -%}
</div>
{% schema %}
{
"name": {},
"settings": []
}
{% endschema %}
Any help would really be appreciated 