Skip to content

Instantly share code, notes, and snippets.

@nikolaswise
Created August 30, 2018 23:23
Show Gist options
  • Save nikolaswise/87d08122f13a4c29cb71cedd02dc76ee to your computer and use it in GitHub Desktop.
Save nikolaswise/87d08122f13a4c29cb71cedd02dc76ee to your computer and use it in GitHub Desktop.
This is the cartjs from Weezie
import $ from 'jquery'
import {bus} from '../helpers/bus.js'
import * as template from '../templates/cart.js'
const render = (cart = window.Cart.cart, item) => {
template.confirm(item)
template.count(cart.item_count)
template.items(cart.items)
template.totals(cart.total_price)
bus.emit('cart:bind')
}
const addClick = e => {
e.preventDefault()
let input = document.querySelector(`.js-product-quantity[data-product="${e.target.dataset.product}"]`)
let quant = input.value
let id = e.target.dataset.add
let embroidery = document.querySelector(`.js-embroidery-input[data-product="${e.target.dataset.product}"]`)
let embroideryText = document.querySelector(`.js-embroidery-input[data-product="${e.target.dataset.product}"]`)
let embroideryColor = document.querySelector(`.js-select-embroidery-color.is-active[data-product="${e.target.dataset.product}"]`)
let embroideryStyle = document.querySelector(`.js-select-embroidery-style.is-active[data-product="${e.target.dataset.product}"]`)
let options
embroidery
// ? options = {embroiderytext: embroidery.value, embroiderycolor: 'color', embroiderystyle: 'style'}
? options = {embroiderytext: embroideryText.value, embroiderycolor: embroideryColor.dataset.value, embroiderystyle: embroideryStyle.dataset.value}
: options = {}
bus.emit('cart:add', id, quant, options)
}
const removeClick = e => {
e.preventDefault()
let id = e.target.dataset.remove
bus.emit('cart:remove', id)
}
const quantityChange = e => {
let id = e.target.dataset.product
let quant = e.target.value
bus.emit('cart:quantity', id, quant)
}
const add = (id, quant, props = {}) => {
let ids = window.Cart.cart.items.map(item => item.id)
if(ids.includes(parseInt(id))) {
bus.emit('cart:update', id, quant)
return
}
window.Cart.addItem(id, quant, props, {
"success": function(data, textStatus, jqXHR) {
}
})
}
const remove = (id) => {
window.Cart.removeItemById(id, {}, {
"success": function(data, textStatus, jqXHR) {
}
})
}
const update = (id, quant) => {
let target = window.Cart.cart.items.filter(item => item.id == id)
let newQuant = target[0].quantity + parseInt(quant)
window.Cart.updateItemById(id, newQuant, {}, {
"success": function(data, textStatus, jqXHR) {
}
})
}
const quantity = (id, quant) => {
window.Cart.updateItemById(id, quant, {}, {
"success": function(data, textStatus, jqXHR) {
}
})
}
const note = message => {
window.Cart.setNote(message)
}
const bind = () => {
let addButtons = Array(...document.querySelectorAll('.js-add-to-cart'))
addButtons.forEach(button => {
button.removeEventListener('click', addClick)
button.addEventListener('click', addClick)
})
let removeButtons = Array(...document.querySelectorAll('.js-remove-from-cart'))
removeButtons.forEach(button => {
button.removeEventListener('click', removeClick)
button.addEventListener('click', removeClick)
})
let quantity = Array(...document.querySelectorAll('.js-quantity'))
quantity.forEach(node => {
node.removeEventListener('change', quantityChange)
node.addEventListener('change', quantityChange)
})
$(document).on('cart.requestComplete', function(event, cart) {
bus.emit('cart:render', window.Cart.cart)
})
}
export const listen = () => {
bus.register({
channel: 'cart:add',
emits: 'ID, N',
description: 'Adds `N` items of the product `ID` to the cart.'
})
bus.register({
channel: 'cart:remove',
emits: 'ID',
description: 'Removes all items of of the product `ID`.'
})
bus.register({
channel: 'cart:update',
emits: 'ID, N',
description: 'Sets the count of the items with the product `ID` to `N`.'
})
bus.register({
channel: 'cart:quantity',
emits: 'ID, N',
description: 'Sets the count of the items with the product `ID` to `N`.'
})
bus.register({
channel: 'cart:note',
emits: 'Message',
description: 'Sets a note on the Cart to `Message`'
})
bus.register({
channel: 'cart:bind',
emits: 'n/a',
description: 'Binds DOM nodes for Cart UI.'
})
bus.register({
channel: 'cart:render',
emits: 'Cart',
description: 'Renders the templates with the Cart object and attaches to a DOM node.'
})
bus.on('cart:add', add)
bus.on('cart:remove', remove)
bus.on('cart:update', update)
bus.on('cart:quantity', quantity)
bus.on('cart:note', note)
bus.on('cart:bind', bind)
bus.on('cart:render', render)
bus.emit('cart:bind')
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment