Specific code

<div class="whatsapp-widget-container {{section.settings.widget_position}}">
<div class="whatsapp-widget">
<a
href="https://api.whatsapp.com/send/?phone={{ section.settings.phone_number }}&text&type=phone_number&app_absent=0" class="ww-icon"
title="WhatsApp message"
target="_blank"
style="text-decoration: none; flex-direction: {{section.settings.flex_direction}}"
>
<svg viewBox="0 0 32 32">
<path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>
</svg>
{% if section.settings.message != blank %}
<div class="ww-message">
{% if section.settings.store_logo != blank %}
<img src="{{section.settings.store_logo | img_url: '60 x 60' }}" alt="{{section.settings.store_logo.alt}}">
{% endif %}
<span class="ww-text">{{ section.settings.message }}</span>
<span
class="ww-behind {% if section.settings.flex_direction == 'row' %} ww-behind-left {% else %} ww-behind-right {% endif %}"
></span>
</div>
{% endif %}
</a>
</div>
</div>
<style>
.whatsapp-widget-container {
display: flex;
bottom: 2rem;
position: fixed;
z-index: 10;
}

.whatsapp--right {
justify-content: flex-end;
right: 2rem;
}

.whatsapp--left {
justify-content: flex-start;
left: 2rem;
}

.whatsapp-widget {
height: max-content;
display: flex;
align-items: center;
gap: 2rem;
transition: transform .5s ease;
}

.whatsapp-widget:hover {
transform: scale(1.2);
}

.whatsapp-widget .ww-icon {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}

.ww-message {
display: flex;
align-items: center;
gap: 10px;
border-radius: 8px;
border: 1px solid #e2e2e2;
min-height: max-content;
text-align: center;
text-decoration: none;
cursor: pointer;
word-break: break-word;
background: white;
padding: 10px 20px;
position: relative;
box-shadow: 2px 2px 15px 2px rgb(0 0 0 / 17%);
font-family: Roboto, "Helvetica Neue", sans-serif;
}

.ww-behind {
transform: translateY(-50%) rotate(135deg);
position: absolute;
top: 50%;
width: 20px;
height: 20px;
background-color: white;
}

.ww-behind-left {
left: -11px;
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
}

.ww-behind-right {
right: -10px;
border-left: 1px solid #e2e2e2;
border-top: 1px solid #e2e2e2;
}

.whatsapp-widget svg {
fill: rgb(255, 255, 255);
z-index: 1;
border-radius: 50px;
background-color: rgb(77, 194, 71);
box-shadow: rgb(0 0 0 / 40%) 2px 2px 6px;
cursor: pointer;
}

.whatsapp-widget svg {
height: 65px;
width: 65px;
}
</style>

{% schema %}
{
"name": "WhatsApp",
"settings": [
{
"type": "text",
"id": "phone_number",
"label": "Phone number",
"info": "Add with zip code ex: 10123456789"
},
{
"type": "image_picker",
"id": "store_logo",
"label": "Store logo"
},
{
"type": "text",
"id": "message",
"label": "Message Label",
"default": "Message Us",
"info": "Leave message blank to show icon only"
},
{
"type": "select",
"id": "widget_position",
"default": "whatsapp--right",
"label": "Widget Position",
"options": [
{
"value": "whatsapp--left",
"label": "left"
},
{
"value": "whatsapp--right",
"label": "right"
}
]
},
{
"type": "select",
"id": "flex_direction",
"default": "row",
"label": "WhatsApp Icon Position",
"options": [
{
"value": "row-reverse",
"label": "Icon right"
},
{
"value": "row",
"label": "Icon left"
}
]
}
],
"presets": [
{
"name": "WhatsApp"
}
]
}
{% endschema %}
Copied!
Voltar para o blogue

Deixe um comentário