Solved

Shopfiy custom back in stock integration

  • 23 December 2021
  • 2 replies
  • 30 views

Badge

Hi!

I’m working in a custom Shopify theme which uses Alpine JS & Tailwind. I know that the Back In Stock integration is not officially supported, but i’m feeling i’m almost there and was wondering if anyone could shed some light on why there’s no Klaviyo button appearing for out of stock products.

I tried to simplify my code to show how the logic is working. I of course added the theme.liquid default script by Klaviyo. My product template has this:

<form class="w-full space-y-10" method="post" action="/cart/add">
// variant selector //
{% if product.available %}
<div x-data="{qty: 1, price: {{ product.price }}{% if compare_at_price %}, compare_at_price: {{ product.compare_at_price }}{%endif%}}" class="grid 3xl:grid-cols-2 gap-10">
<div class="grid grid-cols-3 gap-6">
//qty selector//
<div>
<button type="submit" class="btn product-form__cart-submit btn--secondary-accent h-16 px-12 {{ bgColor }} {{ hoverContrast }} transition text-white rounded-full font-futura-bold text-center text-xl md:text-2xl uppercase">{{ 'products.product.add_to_cart' | t }}</button>
</div>
</div>
<input type="hidden" name="id" value="{{ product.variants.first.id }}">
<input type="hidden" name="return_to" value="back" />
{% else %}
<div class="w-full font-futura-bold text-xl lg:text-3xl">{{ 'products.product.out_of_stock' | t }}</div>
<button type="submit" name="add" aria-disabled="true" disabled class="btn">{{ 'products.product.out_of_stock' | t }}</button>
<input type="hidden" name="id" value="{{ product.variants.first.id }}">
<input type="hidden" name="return_to" value="back" />
</form>

 

I guess it’s important to note that we don’t use a regular variant selectbox but a transformed one which consists of divs, not input fields. The correct variants + id’s are being loaded though.

Is there anything missing in the code above? 

icon

Best answer by Mathijs 23 December 2021, 15:27

View original

2 replies

Badge

Nevermind, i just used the API call. Much easier :)

Userlevel 6
Badge +43

Hey @Mathijs,

Glad to hear you are using the API method to resolve this!

For other Community members who may be having similar issues, I suggest taking a look at our Klaviyo API Documentation; especially the Set Up Back in Stock via API article.

Happy Holidays!

David

Reply