Solved

How can I implement quantity selection buttons for discounts?

Thermon92
Tourist
4 0 1

Hi,

I'm wondering if anyone could share any insight as to how I can implement quantity buttons as per the below link?

https://podcompany.com/en-gb/products/the-ice-pod?variant=43835076870310

I am offering quantity-based discounts reaching maximum discount at 4 units so this would be perfect for my needs.

Thanks in advance

Accepted Solution (1)
namphan
Shopify Partner
217 32 49

This is an accepted solution.

Hi @Thermon92,

Please follow the steps below:

- Step 1: Go to main-product.liquid file, find 'quantity-input' and replace code here:

Screenshot.png

=>

Screenshot.png

Code:

<quantity-checkbox class="quantity_buttons" data-section-id="Quantity-{{ section.id }}" data-form-id="{{ product_form_id }}">
                  <div class="quantity_button qty-selected" data-btn-index="1">
                    <span class="qty_btn_value">1</span>
                    <input class="quantity__input visually-hidden" type="number" name="quantity" min="1" id="Quantity-{{ section.id }}" value="1" form="{{ product_form_id }}">
                  </div>
                  <div class="quantity_button" data-btn-index="2">
                    <span class="qty_btn_value">2</span>
                    <span class="qty_btn_saveText">Save 10%</span>
                    <input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="2" value="2" form="">
                  </div>
                  <div class="quantity_button" data-btn-index="3">
                    <span class="qty_btn_value">3</span>
                    <span class="qty_btn_saveText">Save 15%</span>
                    <input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="3" value="3" form="">
                  </div>
                  <div class="quantity_button" data-btn-index="4">
                    <span class="qty_btn_value">4</span>
                    <span class="qty_btn_saveText">Save 17%</span>
                    <input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="4" value="4" form="">
                  </div>
                </quantity-checkbox>

- Step 2: Go to section-main-product.css file and paste this at the bottom of the file:

.quantity_button {
      position: relative;
      width: 70px;
      height: 70px;
      background: #efefef;
      margin-right: 10px;
      border-radius: 10px;
      cursor: pointer;
    }
    .quantity_button.qty-selected{
      background: #000;
    }
    .quantity_buttons {
      display: flex;
    }
    .qty_btn_value {
      color: #000;
      display: block;
      line-height: 70px;
      text-align: center;
      font-size: 24px !important;
      pointer-events: none;
    }
    .qty-selected .qty_btn_value {
      color: #fff;
    }
    .qty_btn_saveText {
      text-align: center;
      position: absolute;
      bottom: 3px;
      font-size: 10px;
      font-weight: 900;
      width: 100%;
      pointer-events: none;
    }
    .qty-selected .qty_btn_saveText{
      color: #fff;
    }

- Step 3: Go to global.js file and paste this at the bottom of the file:

class QuantityCheckbox extends HTMLElement {
  constructor() {
    super();

    this.button = this.querySelectorAll('[data-btn-index]');
    this.id = this.dataset.sectionId;
    this.idForm = this.dataset.formId;

    if (!this.button ) return;
    
    this.button.forEach(
      (button) => button.addEventListener('click', this.onButtonClick.bind(this))
    );
  }

  onButtonClick(event) {
    event.preventDefault();
    
    this.button.forEach((button) => {
      button.classList.remove('qty-selected');
      button.querySelector('.quantity__input').setAttribute('id', '');
      button.querySelector('.quantity__input').setAttribute('form', '');
    });
    event.target.classList.add('qty-selected');
    event.target.querySelector('.quantity__input').setAttribute('id', this.id);
    event.target.querySelector('.quantity__input').setAttribute('form', this.idForm);
  }
}
customElements.define('quantity-checkbox', QuantityCheckbox);

Hope it helps!

Shopify Development Service

View solution in original post

Replies 16 (16)

Ujjaval
Shopify Partner
1242 197 210

@Thermon92 For that need to add custom css to design quantity button.

namphan
Shopify Partner
217 32 49

Hi @Thermon92,

What theme are you using? Please send me the theme name, I can guide it for you.

Shopify Development Service
Thermon92
Tourist
4 0 1

Hi, that would be hugely appreciated, I am using Dawn 8.0 

namphan
Shopify Partner
217 32 49

This is an accepted solution.

Hi @Thermon92,

Please follow the steps below:

- Step 1: Go to main-product.liquid file, find 'quantity-input' and replace code here:

Screenshot.png

=>

Screenshot.png

Code:

<quantity-checkbox class="quantity_buttons" data-section-id="Quantity-{{ section.id }}" data-form-id="{{ product_form_id }}">
                  <div class="quantity_button qty-selected" data-btn-index="1">
                    <span class="qty_btn_value">1</span>
                    <input class="quantity__input visually-hidden" type="number" name="quantity" min="1" id="Quantity-{{ section.id }}" value="1" form="{{ product_form_id }}">
                  </div>
                  <div class="quantity_button" data-btn-index="2">
                    <span class="qty_btn_value">2</span>
                    <span class="qty_btn_saveText">Save 10%</span>
                    <input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="2" value="2" form="">
                  </div>
                  <div class="quantity_button" data-btn-index="3">
                    <span class="qty_btn_value">3</span>
                    <span class="qty_btn_saveText">Save 15%</span>
                    <input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="3" value="3" form="">
                  </div>
                  <div class="quantity_button" data-btn-index="4">
                    <span class="qty_btn_value">4</span>
                    <span class="qty_btn_saveText">Save 17%</span>
                    <input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="4" value="4" form="">
                  </div>
                </quantity-checkbox>

- Step 2: Go to section-main-product.css file and paste this at the bottom of the file:

.quantity_button {
      position: relative;
      width: 70px;
      height: 70px;
      background: #efefef;
      margin-right: 10px;
      border-radius: 10px;
      cursor: pointer;
    }
    .quantity_button.qty-selected{
      background: #000;
    }
    .quantity_buttons {
      display: flex;
    }
    .qty_btn_value {
      color: #000;
      display: block;
      line-height: 70px;
      text-align: center;
      font-size: 24px !important;
      pointer-events: none;
    }
    .qty-selected .qty_btn_value {
      color: #fff;
    }
    .qty_btn_saveText {
      text-align: center;
      position: absolute;
      bottom: 3px;
      font-size: 10px;
      font-weight: 900;
      width: 100%;
      pointer-events: none;
    }
    .qty-selected .qty_btn_saveText{
      color: #fff;
    }

- Step 3: Go to global.js file and paste this at the bottom of the file:

class QuantityCheckbox extends HTMLElement {
  constructor() {
    super();

    this.button = this.querySelectorAll('[data-btn-index]');
    this.id = this.dataset.sectionId;
    this.idForm = this.dataset.formId;

    if (!this.button ) return;
    
    this.button.forEach(
      (button) => button.addEventListener('click', this.onButtonClick.bind(this))
    );
  }

  onButtonClick(event) {
    event.preventDefault();
    
    this.button.forEach((button) => {
      button.classList.remove('qty-selected');
      button.querySelector('.quantity__input').setAttribute('id', '');
      button.querySelector('.quantity__input').setAttribute('form', '');
    });
    event.target.classList.add('qty-selected');
    event.target.querySelector('.quantity__input').setAttribute('id', this.id);
    event.target.querySelector('.quantity__input').setAttribute('form', this.idForm);
  }
}
customElements.define('quantity-checkbox', QuantityCheckbox);

Hope it helps!

Shopify Development Service
Thermon92
Tourist
4 0 1

That works perfectly you absolute legend!

namphan
Shopify Partner
217 32 49

Hi @Thermon92,

If you have any further questions, you can contact me.
Happy to help you.

Shopify Development Service
JosephC1
Tourist
6 0 1

followed your steps and it works great! now is it possible to make the price update according to the button? I have "6 pack", "12 pack", and "24 pack" buttons, can the price on the top change with the button selected including the discount related to each button?
my website - https://cestlave.com/products/cest-la-ve-italian-charcuterie-pack-italian-style-deli-mozzarella-chee...

namphan
Shopify Partner
217 32 49

Hi @JosephC1,

I sent you a private message, you can check it

Shopify Development Service
Omguan
Tourist
4 0 2

Thanks so much for the code! Works like a charm. 

Lets give this a try 🙂
Omguan
Tourist
4 0 2

Its possible to update the product on page price with the total: Price * Quantity when every quantity_button its clicked?

Lets give this a try 🙂
namphan
Shopify Partner
217 32 49

Hi @Omguan,

It will be a more complicated request, because it needs to test with product variants, so it will be difficult for me to guide you in detail for it.

If you want to do it, you need to hire experts for it or send me a collaborator invitation, I will help you check everything.

Shopify Development Service
Omguan
Tourist
4 0 2

I am trying to send you a private message but seems that I can't. 

Lets give this a try 🙂
namphan
Shopify Partner
217 32 49

Hi @Omguan,

Can you resend it? Or I will send you a private message

Shopify Development Service
Omguan
Tourist
4 0 2

Please send me a private message, seems that I am not allowed 

Lets give this a try 🙂
zied_drira
Shopify Partner
28 2 4

Hello @namphan 
Thank you very much, the code works perfectly and it’s very light in code.
I have only 1 and 2 as quantity (unit and pair). Can you please tell me what code lines I need to add to your javascript functions to make the price updating as well?
thank you very much for your help!

namphan
Shopify Partner
217 32 49

Hi @zied_drira,

It will be a complicated request and will require many steps to change it, so I cannot guide you in detail for it.

If you want, you can send me a private message about the site link and information, I will check it

Shopify Development Service