How do I add the custom field logic to ATC button so snipcart uses my custom field selection

EdRod · February 11, 2022, 10:27pm

I saw this example online of someone adding an item to the cart and also sending the dropdown customField data straight to SnipCart so that when the cart opens, the selection they made is already being used by the cart instead of having the customer select it inside the cart. The user selects the color he wants from the drop down and then clicks add to cart. When the cart opens snipcart it has the same color he selected as the option ready for checkout.

https://codepen.io/couellet/pen/BazWPpV

I copied the exact same code and it should work just like his on codepen, but when I try it on my application, the SnipCart did not use the selection I made. It makes me select the color while inside the cart even though I selected it outside of the cart. I get this browser console warning pointing to snipcart.js

snipcart.js:36 Field “Frame color” is used as “Frame-color” for it’s name and id attribute

I have tried renaming the id but that did not working wither. I am using snipcart version 3.3.1 if that is important to know for this.

This is my code I pasted into my application exactly as I copied it from the existing code pen link example.

<select id="color">
  <option>Black</option>
  <option>Brown</option>
    <option>Gold</option>
      </select>

        <button class="buy-button snipcart-add-item" 
        data-item-quantity="1"
        data-item-id="RZ-SN" 
        data-item-name="Starry Night" 
        data-item-price="79.95" 
        data-item-image="https://demo.snipcart.com/assets/images/starry-night.jpg" 
        data-item-url="https://demo.snipcart.com/" 
        data-item-description="High-quality replica of van Gogh!" 
        data-item-custom1-name="Frame color" 
        data-item-custom1-options="Black|Brown|Gold[+300.00]">
        Buy 1 physical copy ($79.95)
        </button>


<script>
    var select = document.getElementById('color');

    select.addEventListener('change', function () {
        document.querySelector('.snipcart-add-item')
            .dataset['itemCustom1Value'] = select.value;

        console.log("Made it here ")
        console.log("This is what I selected:------> " + select.value)
        console.log("Selection complete ")
    });
</script>

The javascript logs the correct selection that I made, but its not reflected in the cart when snipcart opens up. What could be going on here? I literally have the exact same code that example is using in that codepen link above?

The images below are my view where the I selected Brown and the cart ignored that selection. The other image is my browser console error.

Thanks!