Add Quantity Buttons to Debut Theme

Solved
LobsterNoodels
New Member
2 0 2

After being disappointed by the solutions to this thread I have created my own that should work as of Debut 17.10.0.

As Debut no longer natively supports JQuery or SCSS, this works without installing anything.

This is based on @Jasoliya's initial solution.

 

1. Go to theme customize theme editor->select product page->tick "Show quantity selector" box from left side.

2. Go to section->product-template.liquid -> press CTRL+F,  and search for {% if section.settings.show_quantity_selector %} . Replace your code with this below.

            {% if section.settings.show_quantity_selector %}
        
			{% comment %}
              <div class="product-form__controls-group">
                <div class="product-form__item">
                  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                  <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
                  >
                </div>
              </div>
			{% endcomment %}  

            <div class="qtydiv">
              <label for="Quantity" class="quantity-selector">Quantity</label>
              <div class="qtybox">
                <span class="btnqty qtyminus icon icon-minus">-</span>
                <input type="text" id="quantity" name="quantity" value="1" min="1" class="quantity-selector quantity-input" readonly="" data-quantity-input>
                <span class="btnqty qtyplus icon icon-plus">+</span>
              </div>
            </div>
        
            {% endif %}

When Jasoliya mentions 

 comment code that in between condition (only product-form__item--quantity this div ). and paste bellow:

They mean to comment out the existing code, not to delete it. Commenting code means it will still be present in your files, but not display on your website. (incase you would like to revert your changes in the future for example)

Commenting out code in Shopify's liquid language is done as shown above with {% comment %} and {% endcomment %}.

 

3. Go to Asset->theme.css file and add this code at the bottom. 

.qtydiv label {
	 display: block;
	 margin-bottom: 12px;
	 letter-spacing: 2.8px;
	 color: #747a7b;
}
 .qtydiv .btnqty {
	 display: inline-block;
	 cursor: pointer;
	 user-select: none;
	 font-size: 25px;
	 padding: 5px;
	 line-height: 5px;
}
 .qtydiv .btnqty.qtyminus {
	 margin-right: 8px;
}
 .qtydiv .btnqty.qtyplus {
	 margin-left: 8px;
}
 .qtydiv .quantity-input {
	 border: none;
	 border: none;
	 padding: 8px;
	 text-align: center;
	 width: 50px;
	 outline: none;
	 display: inline-block;
}
 .qtydiv {
	 display: inline-block;
	 padding-right: 15px;
	 padding-top: 10px;
}

This is called CSS. If you would like to modify the look of the quantity selector, this part is what you would want to modify. 

 

4. Go to Asset->theme.js and add this code at the bottom:

document.getElementsByClassName("qtyminus")[0].addEventListener("click", function (){quantityChange("btn_minus");});
document.getElementsByClassName("qtyplus")[0].addEventListener("click", function (){quantityChange("btn_plus");});

function quantityChange(button) {
	var input_element = document.getElementById("quantity");
	var qty = parseInt(input_element.value);
  
  	if (button == "btn_plus") {
    	input_element.setAttribute("value", qty=qty+1); 
    } else if (button == "btn_minus" && qty > 1) {
    	input_element.setAttribute("value", qty-1); 
    }
};

 

You are welcome 

 

 

 

Jess06
New Member
2 0 1

Thank you @LobsterNoodels soooo much. After countless attempts, this one works.  

LobsterNoodels
New Member
2 0 2

Hi @Jess06, I'm glad I could help!

I've spent a lot of time working on this so ill just provide a follow up in hopes it can help someone who stumbles across this.

If you are considering adding the custom quantity selector to your cart page, it is possible but much more complex if you have automatic cart updates enabled.

I had to rewrite all of my javascript code, as well as heavily modify the cart-template.liquid page to get it to function.

It is not clean, took a long time, and I am just sharing my experience in case you are considering attempting something like this.

I'm happy to share my code if you are interested but there is no guarantee it'll work on your end as I've made a lot of changes and didn't document it.

0 Likes
rbelle
Tourist
31 0 14

Hi there!

Thank you so much for this fix, I really appreciate it.

Everything seems to be working fine, even automatic updates in the cart. The only thing seems to be the cart popup, where only the quantity at the top right is fixed at 1.

For example, I've just added 3 of this item here and it does add 3 blazers to the cart, but "Qty:" remains at 1.

rbelle_0-1619099557924.png

Not too adept at javascript, would you be able to share any insight on this?

Thank you again

 

0 Likes
Jess06
New Member
2 0 1

Hello,

The only thing I can recommend is to recheck the codes posted above. My carts are updating correctly, so I'm not sure what the issue may be. Maybe @LobsterNoodels can help with more insight

0 Likes