Liquid, JavaScript, themes, sales channels
here is my code:
in product-template.liquid
<div class="product-form__controls-group">
<div class="product-form__item">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<div class="qty-box">
<span class="qty-btn qty-minus">-</span>
<input type="number" id="Quantity-{{ section.id }}"
name="quantity" value="1" min="1" pattern="[0-9]*"
class="product-form__input product-form__input--quantity" data-quantity-input
>
<span class="qty-btn qty-plus">+</span>
</div>
</div>
</div>
in qty.liquid which I include in theme.liquid
<style>
.qty-btn {
display: flex;
cursor: pointer;
border-top: 1px solid var(--color-border-form);
border-bottom: 1px solid var(--color-border-form);
background-color: var(--color-text-field);
color: var(--color-text-field-text);
border-radius: 2px;
line-height: 1.2;
height: 44px;
width:30px;
align-items: center;
justify-content: center;
}
.qty-minus {
border-left: 1px solid var(--color-border-form);
}
.qty-plus {
border-right: 1px solid var(--color-border-form);
}
.qty-box {
display: flex;
}
</style>
<script>
$('.qty-box .qty-btn').on('click', function(){
var qty = parseInt($(this).parent('.qty-box').find('.product-form__input').val());
if($(this).hasClass('qty-plus')) {
qty++;
}else {
if(qty > 1) {
qty--;
}
}
qty = (isNaN(qty))?1:qty;
$(this).parent('.qty-box').find('.product-form__input').val(qty);
});
</script>
the style is working, but the jquery is not, what is wrong?
i modified the solution from here https://community.shopify.com/c/Shopify-Design/Add-Quantity-Buttons-to-Debut-Theme/td-p/593001
Solved! Go to the solution
This is an accepted solution.
turn out I overlooked the "jQuery not defined" error in console, so I include the jQuery file myself
and the problem solved
still I don't quite understand why I have to add the file again, because I am sure jQuery is already defined (I confirmed this by logging the console)
This is an accepted solution.
turn out I overlooked the "jQuery not defined" error in console, so I include the jQuery file myself
and the problem solved
still I don't quite understand why I have to add the file again, because I am sure jQuery is already defined (I confirmed this by logging the console)
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024