https://github.com/the-couch/richer
jquery free ajax cart for shopify
https://github.com/the-couch/richer
ajax cart shopify slate
Last synced: 6 months ago
JSON representation
jquery free ajax cart for shopify
- Host: GitHub
- URL: https://github.com/the-couch/richer
- Owner: the-couch
- Created: 2017-08-26T16:18:59.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-04T17:30:26.000Z (about 8 years ago)
- Last Synced: 2025-03-26T06:11:16.088Z (7 months ago)
- Topics: ajax, cart, shopify, slate
- Language: JavaScript
- Size: 1.77 MB
- Stars: 33
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Richer
[](http://standardjs.com)
## What is it?
This library is built on top of [slater](https://github.com/the-couch/slater) (which is a fork of shopify [slate](https://github.com/Shopify/slate)). It is based on the old implementation of the [Timber](https://github.com/Shopify/Timber) depreciated richcart. The idea behind this comes from Slate and Timber both being tied to jQuery and wanting to build something that could be used independent of that.
## Using It
We use richer to handle API requests to the shopify AJAX cart. How you implement it is entirely up to you. We expose a couple of common routes that allow you to easily handle updating/refreshing/generating your ajax cart.
I'll outline a number of examples in YOYO below
### Initialize a cart
```javascript
import RicherAPI from 'richer'
// Some DOM defaults
const defaults = {
addToCart: '.js-add-to-cart', // classname
addToCartForm: 'AddToCartForm', // id
cartContainer: 'CartContainer', // id
cartCounter: 'CartCounter', // id
items: []
}
const config = Object.assign({}, defaults, options)
const dom = {
addToCartForm: document.getElementById(config.addToCartForm),
cartContainer: document.getElementById(config.cartContainer),
cartCounter: document.getElementById(config.cartCounter)
}
RicherAPI.getCart(cartUpdateCallback)
// Updates a cart number and builds our cart
const cartUpdateCallback = (cart) => {
updateCount(cart)
buildCart(cart)
}
const updateCount = (cart) => {
const counter = dom.cartCounter
counter.innerHTML = cart.item_count
}
const buildCart = (cart) => {
const cartContainer = dom.cartContainer
cartContainer.innerHTML = null
if (cart.item_count === 0) {
cartContainer.innerHTML = `
We're sorry your cart is empty
`
return
}
var el = cartBlock(cart.items, cart, update)
function cartBlock (items, cart, qtyControl) {
return yo`
${items.map((item, index) => {
const product = cleanProduct(item, index, config)
return yo`
${product.name}
${product.variation ? yo`${product.variation}` : null}
${realPrice(product.discountsApplied, product.originalLinePrice, product.linePrice)}
${yo`
qtyControl(product, product.itemMinus)}>
${product.itemQty}
qtyControl(product, product.itemAdd)}>
`}
`
})}
${subTotal(cart.total_price, cart.total_cart_discount)}
`
}
function subTotal (total, discount) {
// TODO: handling discounts
const totalPrice = slate.Currency.formatMoney(total) // eslint-disable-line
return yo`
Subtotal: ${totalPrice}
`
}
function realPrice (discountsApplied, originalLinePrice, linePrice) {
if (discountsApplied) {
return yo`
${originalLinePrice}
${linePrice}
`
} else {
return yo`
${linePrice}
`
}
}
function update (item, quantity) {
RicherAPI.changeItem((item.index + 1), quantity, refreshCart)
}
function refreshCart (cart) {
let newCart = cartBlock(cart.items, cart, update)
yo.update(el, newCart)
}
cartContainer.appendChild(el)
}
```
```javascript
import RicherAPI from 'richer'
const dom = {
addToCartForm: document.getElementById('AddToCartForm'),
}
const AddToCart = () => {
const form = dom.addToCartForm
form.addEventListener('submit', (e) => {
e.preventDefault()
form.classList.remove('is-added')
form.classList.add('is-adding')
RicherAPI.addItemFromForm(e.target, itemAddedCallback, itemErrorCallback)
})
const itemAddedCallback = () => {
RicherAPI.getCart(cartUpdateCallback)
}
const itemErrorCallback = (XMLHttpRequest, textStatus) => {
console.log('error family')
}
}
const cartUpdateCallback = (cart) => {
updateCount(cart)
buildCart(cart)
RicherAPI.onCartUpdate(cart)
}
```
MIT License