My sticky add to card button is not clickable and the variants on it either could anyone help to fix it i have the code from the snippets liquid file posted underneath.
Maybe anyone who understands the code better then i can rewrite it or tell me what i can do to fix this issue ?
I would verry Mutch appriciate it.
##### snippets/sticky-add-cart.liquid
{% if template contains 'product' %}
<div id="huratips-addtocart-sticky">
<form action="/cart/add" method="post">
<select name="id">
{% for variant in product.variants %}
<option value="{{variant.id}}">{{variant.option1}} / {{variant.option2}}</option>
{% endfor %}
</select>
<!-- <input type="number" name="quantity" value="1" min="1"> -->
<button
type="submit"
name="add"
id="AddToCart--{{ unique }}"
class="btn {{ atc_button_color }} {{ atc_button_style }} btn--large btn--submit product__submit__add"
data-add-to-cart
{% if show_newsletter %}
data-notification-popup="{%- render 'notification-form', product_title: product.title, product_subtitle: current_variant.title, product_id: current_variant.id -%}"
{% endif %}>
<span data-add-to-cart-text>
{%- if current_variant.available and product.tags contains '_preorder' -%}
Aan winkelwagen toevoegen
{%- elsif current_variant.available -%}
Aan winkelwagen toevoegen
{%- else -%}
Aan winkelwagen toevoegen
{%- endif -%}
</span>
<!-- <div class="loader loader--line"><div class="loader-indeterminate"></div></div> -->
</button>
</form>
</div>
<style>
#huratips-addtocart-sticky{
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
background: #f5f5f5;
padding-top: 10px;
border-top: 1px solid #e2e2e2;
padding-bottom: 10px;
left: 0px;
}
@media (max-width:749px){
#huratips-addtocart-sticky select,
#huratips-addtocart-sticky input,
#huratips-addtocart-sticky button{
height:34px;
margin:0 5px;
vertical-align: middle;
border-radius: 30px;
margin: 0px 10px;
min-width: 158px;
width: 90%;
margin-top: 10px;
text-align: center;
}}
#huratips-addtocart-sticky input{
width: 60px;
text-align: center;
}
#huratips-addtocart-sticky button{
padding:0 10px;
text-transform: uppercase;
border:none;
}
#huratips-addtocart-sticky {
padding-top: 2px;
padding-bottom: 2px;
}
@media (min-width:749px){
#huratips-addtocart-sticky select, #huratips-addtocart-sticky input, #huratips-addtocart-sticky button {
height: 40px;
margin: 0 20px;
vertical-align: middle;
min-width: 250px;
padding: 0 20px;
background-position: 93% 50%;
border-radius: 30px;
text-align: center;
align-items: center;
justify-content: center;
display: inline-flex;
}}
#huratips-addtocart-sticky button {
background-color: #d96937;
color: #fff;
border:none;
}
#huratips-addtocart-sticky input {
background-color: #f5f5f5;
}
@media (max-width: 749px){
#huratips-addtocart-sticky select {
min-width: 108px;
border-radius:50px;
color: #000 !important;
width: 90%;
}}
#huratips-addtocart-sticky select {
color: #000 !important;
}
</style>
{% endif %}