How can I implement quantity selection buttons for discounts?

Store Design
,
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

2

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

1 Like
3

Hi @Thermon92 ,

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

4

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

5

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.png1287×805 50.1 KB

=>

Screenshot.png
Screenshot.png1405×822 52.7 KB

Code:
  • 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!

3 Likes
6

That works perfectly you absolute legend!

1 Like
7

Hi @Thermon92 ,

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

8

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-cheese-mini-bruschette-raw-almonds-dried-cranberries

1 Like
9

Hi @JosephC1 ,

I sent you a private message, you can check it

10

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

1 Like
11

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

12

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.

13

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

14

Hi @Omguan ,

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

15

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

1 Like
16

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!

17

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