tempaltes.cart.js

const item = item => `
  <div class="cart-item">
    <a href="#" class="cart-icon-remove js-remove-from-cart"
       data-remove="${item.id}">
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" class="icon icon-close"><path fill="#444" d="M15.89 14.696l-4.734-4.734 4.717-4.717c.4-.4.37-1.085-.03-1.485s-1.085-.43-1.485-.03L9.641 8.447 4.97 3.776c-.4-.4-1.085-.37-1.485.03s-.43 1.085-.03 1.485l4.671 4.671-4.688 4.688c-.4.4-.37 1.085.03 1.485s1.085.43 1.485.03l4.688-4.687 4.734 4.734c.4.4 1.085.37 1.485-.03s.43-1.085.03-1.485z"/></svg>
    </a>
    <img class="cart-preview" src="${item.image}" alt="${item.product_title}" />
    <div class="cart-item-description">
      <p>${item.product_title}</p>
      <p>
        QTY: ${item.quantity}
        ${item.variant_options[0]}
      </p>
    </div>
    <p>$ ${item.price / 100}</p>
  </div>
`
 const lines = (node, items) => {
  node.innerHTML = ''
  items.forEach(item => {
    node.insertAdjacentHTML('beforeend', item(item))
  })
}
 export const items = items => {
  let nodes = Array(...document.querySelectorAll('.js-cart-items'))
  nodes.forEach(node => {
    template.lines(node, items)
  })
}
 export const count = count => {
  let nodes = Array(...document.querySelectorAll('.js-cart-count'))
  let cartContents = document.getElementById('js-cart-contents')
  let emptyCartContents = document.getElementById('js-empty-cart-contents')
  nodes.forEach(node => {
    if (count > 0) {
      node.innerHTML = `${count}`
      node.parentNode.classList.remove('hide')
      if (cartContents) {
        cartContents.classList.remove('hide')
      }
      if (emptyCartContents) {
        emptyCartContents.classList.add('hide')
      }
    } else {
      node.innerHTML = `0`
      node.parentNode.classList.add('hide')
      if (cartContents) {
        cartContents.classList.add('hide')
      }
      if (emptyCartContents) {
        emptyCartContents.classList.remove('hide')
      }
    }
  })
}
 export const confirm = item => {
  if (item) {
    let nodes = Array(...document.querySelectorAll('.js-cart-confirm'))
    nodes.forEach(node => {
      count ? node.innerHTML = `${item.product_title} added!`
            : node.innerHTML = ``
    })
  }
}
 export const totals = total => {
  let money = (total / 100).toFixed(2)
  let nodes = Array(...document.querySelectorAll('.js-cart-total'))
  nodes.forEach(node => {
    node.innerHTML = `$${money}`
  })
}