Quantity Selection Individual Buttons

[Thermon92]

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

[Ujjaval]

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

[namphan]

Hi @Thermon92,

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

[Thermon92]

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

[namphan · Accepted solution]

Hi @Thermon92,

Please follow the steps below:

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

=>

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!

[Thermon92]

That works perfectly you absolute legend!

[namphan]

Hi @Thermon92,

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

[JosephC1]

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]

Hi @JosephC1,

I sent you a private message, you can check it

[Omguan]

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

[Omguan]

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

[namphan]

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.

[Omguan]

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

[namphan]

Hi @Omguan,

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

[Omguan]

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