Out of Stock functionality not working on iOS, theme: Debut, (Klaviyo integration)

Solved
Highlighted
Excursionist
35 4 1

Dear Reader,

I have integrated this tutorial into my Shopify website:

https://help.klaviyo.com/hc/en-us/articles/360001895651-Install-Back-in-Stock-for-Shopify#:~:text=Website%20Button%3A%20You%20will%20need,subscribe%20to%20a%20restock%20alert.

 

Everything seems to work perfectly on my Windows and Android devices, but it doesn't work on iOS at all, it simply doesn't matter if I replace the anchor or not it doesn't show the button at all, my guess is that it has something to do with the Iframe not loading correctly, like it was a security issues before because of the exploit that could be injected, but I have not found a workaround yet, I did search a lot around the web and tried many different meta tags, but they simply don't seem to work, I've tried to put a div around the Iframe but it's a script that is being executed so it doesn't display at all then,

I've also tried to set the 'replace_anchor false' to true, so it simply replaced the button so I have only one button that step does work but not being displayed on iOS.

I'm a loss for things to try, hoping someone can point me in the right direction, since Klaviyo is very popular and this functionality as well.

 

product-template-liquid (   {% include 'klaviyo-back-in-stock.liquid' %}    )

<div class="product-form__controls-group product-form__controls-group--submit">
              <div class="product-form__item product-form__item--submit
                    {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                    {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}">
                <button type="submit" name="add"
                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
                  data-add-to-cart>
                  <span data-add-to-cart-text>
                    {% unless current_variant.available %}
                      {{ 'products.product.sold_out' | t }}
                    {% else %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% endunless %}
                      {% include 'klaviyo-back-in-stock.liquid' %}
                  </span>
                </button>
              </div> 

 

Snippet  ( klaviyo-back-in-stock.liquid)

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
var klaviyo = klaviyo || [];
klaviyo.init({
account: "#######",
platform: "shopify"
});
klaviyo.enable("backinstock",{ 
trigger: {
product_page_text: "UITVERKOCHT klik hier voor een Berichtje",
product_page_class: "btn",
product_page_text_align: "center",
product_page_margin: "0px 0px 0px 0px",
product_page_width: "100%",
replace_anchor: false
},
modal: {
headline: "{product_name}",
body_content: "Registreer om een ​​melding te ontvangen wanneer dit artikel weer op voorraad komt.",
email_field_label: "Vul hier je e-mailadres in",
button_label:"Laat me weten wanneer het product beschikbaar is",
subscription_success_label: "Je melding is verstuurd, we laten het je weten wanneer het product weer voorradig is",
footer_content: '',
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
drop_background_color: "#000",
background_color: "#fff",
text_color: "#222",
button_text_color: "#fff",
button_background_color: "#439fdb",
close_button_color: "#ccc",
error_background_color: "#fcd6d7",
error_text_color: "#C72E2F",
success_background_color: "#d3efcd",
success_text_color: "#1B9500"
}
});
</script>

 

Old situation where I have two buttons displayed, this is when the 'replace_anchor:false' only the 'UITVERKOCHT' button is being displayed on iPhone but it has no code behind it and is the normal button.

replace_anchor:falsereplace_anchor:false

New situation with  'replace_anchor:true' when I set it like this the old button is being replaced with this one with the Iframe but it only shows the button 'UITVERKOCHT'

Capture 2.JPG

 

Below are two screens from the inspect element within chrome;

Capture 3.JPG

 

Capture 4.JPG

 

0 Likes
Highlighted
Excursionist
35 4 1

This is an accepted solution.

Turns out it is a bug for the latest iOS beta version, so it works with official versions.

0 Likes