Update item before adding to cart not working using Ghost HTML blocks

Support
,
#1

Hi,

I am using Ghost with HTML blocks to add items to the cart. I followed the documentation to add item options before adding them to the cart but it is not working. Google chrome gives me the error: Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

<label>Quantity</label>
<input id="quantity" type="number"></input
<label>Shirt Size</label>
<select id="shirt_size">
  <option value="Small">Small</option>
  <option value="Medium">Medium</option>
  <option value="Large">Large</option>
  <option value="XL">XL</option>
  <option value="2XL">2XL</option>
  <option value="3XL">3XL</option>
</select>
<buttonlife class="snipcart-add-item"
  data-item-id="life-shirt"
  data-item-price="20.00"
  data-item-description="Don't Stop Collection, Life T-Shirt"
  data-item-image="https://store.sawyeroriginal.com/content/images/2022/07/life-shirt-01.png"
  data-item-name="Life | Keep Going T-Shirt"
  data-item-custom1-name="Size"
  data-item-custom1-options="Small|Medium|Large|XL|2XL[+2.00]|3XL[+4.00]">
  Add to cart
</buttonlife>
<script>
const buttonlife = document.querySelector('#life-shirt')
const quantity = document.querySelector('#quantity')
quantity.addEventListener('change', () => {
  // Sets the default quantity when adding the item
  buttonlife.setAttribute('data-item-quantity', quantity.value)
})
const select = document.querySelector('#shirt_size')
select.addEventListener('change', () => {
  // Sets the default frame color when adding the item
  buttonlife.setAttribute("data-item-custom1-value", select.value)
})
</script>
<style>
    .snipcart-add-item {
        display: inline-block;
        margin:5px;
        padding:7px;
        margin-top: 5px;
        border: 1px solid;
        border-color:#4c4c4c;
  		text-decoration: none;
  		border-radius: 10px;
  		background-color:#FFFFFF;
        font-size: 10px;
}

.snipcart-add-item:hover {
  background-color:#e6e6e6;
}
</style>
1 Like