How do I add two buttons for the same product to the same page?

Support
#1

Hi,
I’m trying to add two identical (data-item-id) buttons to the same page but am getting an error due to the conflicting values. The button code is below.

FYI, I’m using WordPress so have ACF fields but pls ignore;

<button
    id="<?php echo $sanitisedName; ?>"
    class="snipcart-add-item button-red w-button"
        data-item-id="<?php echo $sanitisedName; ?>"
        data-item-price="<?php echo $snipcart_price; ?>"
        data-item-description="<?php echo $snipcart_description; ?>"
        data-item-image="<?php echo get_template_directory_uri(); ?>/assets/images/thumb-cards-white-dark.jpg"
        data-item-url="<?php echo get_permalink(); ?>"
        data-item-name="<?php echo $snipcart_name; ?>"
        data-item-weight="<?php echo $snipcart_weight; ?>"
        data-item-custom1-name="Design option"
        data-item-custom1-options="Dark|Light"
        > 
    Add to cart : £<?php echo $snipcart_price; ?>
</button>

<script>
    const button = document.querySelector('<?php echo $sanitisedName; ?>')
    const quantity = document.querySelector('#quantity')
    quantity.addEventListener('change', () => {
        // Sets the default quantity when adding the item
        button.setAttribute('data-item-quantity', quantity.value)
        })
        const select = document.querySelector('#design_color')
        select.addEventListener('change', () => {
        // Sets the default frame color when adding the item
        button.setAttribute("data-item-custom1-value", select.value)
    })
</script>

Is this possible?
Thanks
Rob

1 Like
#2

Same problem here.
We also have the same button multiple times on a page using pure HTML. We get conflicts due to the same ID.
A solution for this is really appreciated.

#3

I also have the same problem - any solution?