Hello,
I have managed to create and implement a floating WhatsApp button in the storefront of your Niara theme. Here's the code:
HTML
Add the below code to the footer.tpl file of the theme (/.../themes/niara/footer.tpl)
Another way to customize the whatsapp url:
https://web.whatsapp.com/send?l=en&phone=prefix-your-number&text=some-text
<div id="whatsapp-button" class="whatsapp-button">
<a href="https://wa.me/prefix-your-number" target="_blank">
<img src="http(s)://path-to-your-wa-icon.png" alt="WhatsApp">
</a>
</div>
CSS
Go to the Custom Code section of the admin panel (backstore), and add the below code:
/* WhatsApp floating button for the storefront */
.whatsapp-button {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.whatsapp-button a img {
width: 50px; /* Icon size */
height: auto;
}
JAVASCRIPT (not fully working)
Go to the Custom Code section of the admin panel (backstore), and add the below code:
// WhatsApp floating button for the storefront
// Control how it's hidden/shown when scrolling the page.
window.addEventListener("scroll", function() {
var whatsappButton = document.getElementById("whatsapp-button");
if (window.scrollY > 200) {
whatsappButton.style.visibility = "visible";
} else {
whatsappButton.style.visibility = "hidden";
}
});
All works perfectly fine, and very simple. But, I have a problem trying to make the JS code working as it should.
The button hides itself only when I'm under certain categories with subcategories on it (???). When I'm on the home page and under categories without subcategories, the button remains visible.
Can you help me with this?