Return to Solutions Overview <-

Custom quantity selector for Webflow

Below is the code that allows you to use multiple quantity selectors for your dynamic items. For whatever reason you need them :D. Have fun!

(Still under development as of March 15th 2023)

Below is the code that allows you to use multiple quantity selectors for your dynamic items. For whatever reason you need them :D. Have fun!

// * Quantity selector *

// Global strings
const DYN_ITEM = '.w-dyn-item'
const MINUS = '.quantity_minus'
const PLUS = '.quantity_plus'
const NUMBER = '.quantity_number'

// Global css
const CSS_SHOW = {
    'opacity': '100%',
    'transition-property': 'opacity',
    'transition-duration': '350ms',
    'transition-timing-function': 'ease',
    'pointer-events': 'auto'
}
const CSS_HIDE = {
    'opacity': '50%',
    'transition-property': 'opacity',
    'transition-duration': '350ms',
    'transition-timing-function': 'ease',
    'pointer-events': 'none'
}
$( MINUS ).css( CSS_HIDE )


// Main function
$( DYN_ITEM ).each(function(index) {

    // Local elements
    let $_this_minus = $(this).find( MINUS )
    let $_this_plus = $(this).find( PLUS )
    let $_this_number = $(this).find( NUMBER )

    // Calc values
    let min_number = 1
    let max_number = 10
    let this_number = parseInt( $_this_number.first().text() )


    // Local main function's
    $_this_minus.click(function() {

        this_number--
        if( this_number <= min_number ) {
            this_number = min_number
            $_this_minus.css( CSS_HIDE )
        } else {
            $_this_plus.css( CSS_SHOW )
        }
        $_this_number.text( this_number )
        
    })

    $_this_plus.click(function() {

        this_number++
        if( this_number >= max_number ) {
            this_number = max_number
            $_this_plus.css( CSS_HIDE )
        } else {
            $_this_minus.css( CSS_SHOW )
        }
        $_this_number.text( this_number )
        
    }) 
    
})

FAQs

You still have an open question about BMG.studio and how we operate. Chances are good that you will find what you are looking for here:

Why does this FAQ exist?

Well. As of Wednesday, March 15th 2023, I think this component looks really cool.

Can I clone this FAQ component?

Yes. Yes you can. You can do so -> here <-

Still have questions?

It's okay to reach out. Use either email or our calendar tool