Sending Selected Variant SKU via Whatsapp Button

panwar
New Member
2 0 0

I am trying to send the selected variant SKU via my custom built whatsapp button but it's sending only pre-selected SKU via whatsapp. I want your help to suggest me a proper code snippet to solve this problem.

shopify_product_page.png

 

 

file name product-template.liquid


The code for variable sku i am using.

 

{% assign current_variant = product.selected_or_first_available_variant %}
<span>SKU-</span><span class="variant-sku">{{ current_variant.sku }}</span>


The whatsapp button code.

 

<a href="https://wa.me/91XXXXXXXXXX?text={{ current_variant.sku }}" class="shopify-payment-button__button shopify-payment-button__button--unbranded" style="border-radius:0px; background-color:#25d366">Buy on Whatsapp</a>


The Problem with this code.


When i open a product page and click on buy on whatsapp button it sends pre-selected SKU but when i select any other variant it send that previews pre-selected SKU not the current one i have selected. The current_variant.sku data doesn't change accordingly but shows on product page below product.title correctly.


Also i want some condition on my whatsapp button.


1. if the product.type is = "X" then whatsapp button should be visble otherwise not.
2. if the current selected variable is not available in inventory the whatsapp button should be hide just like Shopify's built-in regular add to cart or buy now button does.

* All these conditions should be in real time i.e. doesn't requires the page reload/refresh.


I am using Debut Theme.


Thanks
I would greatly appreciate your help.

0 Likes
PrateekTripathi
Shopify Partner
213 42 48

Hi @panwar ,

It will need modification in default JS which is responsible for changing the button status and price of product when we change the product variant.

and with the help of liquid code it is possible to add or remove the Whatsapp buy button on product page on the basis of product tag,

Thanks

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: technicalvishvas@gmail.com
0 Likes
panwar
New Member
2 0 0

How to achieve this?

@PrateekTripathi 

0 Likes
PrateekTripathi
Shopify Partner
213 42 48

@panwar 

if you are asking about the code then I could not provide you because this will need lots of code modification in JS and time taking task and it is not possible to write a code from outside by watching the store frontend and give you to just paste for the functionality the you had mentioned

Thanks

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: technicalvishvas@gmail.com
0 Likes