Getting Klaviyo button to show when out of stock not working

Rick_Lee
Shopify Partner
10 0 23

Hey all, I'm trying to install Klaviyo's Back in Stock widget with District's Theme. I've gotten it onto the page but it isn't hiding / showing the button when in stock / out of stock variants are selected.

I'm a newb coder and googling around I think I need to somehow connect to the callBack function of the theme? It's the 2nd button down below.

<div class="button-wrapper">
    <button type="submit" name="add" id="AddToCart-{{ section.id }}" class="button solid {% unless current_variant.available %}disabled{% endunless %}" {% unless current_variant.available %}disabled{% endunless %}>
        <span id="AddToCartText-{{ section.id }}">
            {% unless current_variant.available %}
              {{ 'products.product.sold_out' | t }}
            {% else %}
              {{ 'products.product.add_to_cart' | t }}
            {% endunless %}
        </span>
     </button>
     <button class="klaviyo-bis-trigger button solid" {% unless current_variant.available %}style="display:none;"{% endunless %}>
         <span>
           Notify Me When Available
         </span>  
      </button>
</div>

thanks for your help!

0 Likes
Visely-Team
Shopify Partner
1835 210 436

Hey Rick,

Can you point me to a product on your store that is currently unavailable? That'll help to debug the issue.

Sergiu

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Rick_Lee
Shopify Partner
10 0 23

Yup. Here is an out of stock variant of a hat product, you'll see that the "Notify Me When Available" button is there but when you switch to the brown hat (in stock) it doesn't dissapear.

https://staywildish.com/collections/wildish-headwear/products/wildish-buffalo-trucker-black-charcoal...

And here is a link to the in stock brown hat, the button doesn't show up which is good but then when you select the black hat the button never shows.

https://staywildish.com/collections/wildish-headwear/products/wildish-buffalo-trucker-black-charcoal...

Thanks

0 Likes
Visely-Team
Shopify Partner
1835 210 436

Got it. The thing is that on the initial page load, the availability information that is considered is of the variant selected, this is why it works (the button appears when needed, and disappears when not needed) for when you access any of these products directly.

Once the page is loaded, changing the variant won't reload the page. The page makes a call to Shopify and fetches the selected variant's specific data. You have to add some logic to the theme's JavaScript file so that you can hide/show the button on variant selection. You have to look for something like:

/**
* Event handler for when a variant input changes.

*/
_onSelectChange:

Hope that helps!

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Rick_Lee
Shopify Partner
10 0 23

Ok, I've found that. Not really sure how to use it.

_onSelectChange: function() {
        var variant = this._getVariantFromOptions();

        this.$container.trigger({
          type: 'variantChange',
          variant: variant
        });

        if (!variant) {
          return;
        }

        this._updateMasterSelect(variant);
        this._updateImages(variant);
        this._updatePrice(variant);
        this.currentVariant = variant;

        if (this.enableHistoryState) {
          this._updateHistoryState(variant);
        }
      },

      /**
       * Trigger event when variant image changes
       *
       * @param  {object} variant - Currently selected variant
       * @return {event}  variantImageChange
       */
      _updateImages: function(variant) {
        var variantImage = variant.featured_image || {};
        var currentVariantImage = this.currentVariant.featured_image || {};

        if (!variant.featured_image || variantImage.src === currentVariantImage.src) {
          return;
        }

        this.$container.trigger({
          type: 'variantImageChange',
          variant: variant
        });
      },

      /**
       * Trigger event when variant price changes.
       *
       * @param  {object} variant - Currently selected variant
       * @return {event} variantPriceChange
       */
      _updatePrice: function(variant) {
        if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) {
          return;
        }

        this.$container.trigger({
          type: 'variantPriceChange',
          variant: variant
        });
},

 

0 Likes
Visely-Team
Shopify Partner
1835 210 436

Actually, the function is _updateAddToCart, but yeah, you'll need a developer help to add the logic to hide/show the notify me button based on item availability.

I can help you with that drop me a note at ssvinarciuc@nemo.ai

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Rick_Lee
Shopify Partner
10 0 23

Hey Sergiu! I figured it out! Traced back how to use it with selectors. 

All is working as expected now: https://staywildish.com/collections/wildish-headwear/products/wildish-buffalo-trucker-black-charcoal...

Now I just got to get the buttons next to each other in the div, but I'm sure I can figure that out.

Thanks a million.

Rick

0 Likes
Visely-Team
Shopify Partner
1835 210 436

Awesome! Good luck!

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Rick_Lee
Shopify Partner
10 0 23

Well, spoke a bit too soon. All is working except for the initial page load of some products from the collection page will load the button even though it's in stock. 

Example of where it works as it should (button dissapears because the selected product is in stock): https://staywildish.com/collections/all/products/drinktanks-64-oz-vacuum-insulated-growler

Example of where it does not work (button still shows even though the product is out of stock): https://staywildish.com/collections/all/products/m-c-hammie

I thought maby the init functions but looked through them and didn't see an obvious solution. Thoughts?

0 Likes
Visely-Team
Shopify Partner
1835 210 436

Looks like you have the last issue figured out? I don't see any other buttons except for Add to Cart.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes