@eastsideco/escshopify

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">src/ajax/Cart.js | @eastsideco/escshopify</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css"> <script src="script/prettify/prettify.js"></script> <script src="script/manual.js"></script> </head> <body class="layout-container" data-ice="rootContainer"> <header> <a href="./">Home</a> <a href="./manual/index.html" data-ice="manualHeaderLink">Manual</a> <a href="identifiers.html">Reference</a> <a href="source.html">Source</a> <div class="search-box"> <img src="./image/search.png"> <input class="search-input"> <ul class="search-result"></ul> </div> <a href="https://bitbucket.org/sigapps/escshopify.git">Repository</a></header> <nav class="navigation" data-ice="nav"><div> <ul> <li data-ice="doc">V<a href="variable/index.html#static-variable-cart">cart</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-easyCurrency">easyCurrency</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-geoService">geoService</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-utils">utils</a></li> <li data-ice="doc">E<a href="https://www.npmjs.com/package/promise-queue">promise-queue</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#ajax">ajax</a>C<a href="class/src/ajax/Cart.js~Cart.html">Cart</a></li> <li data-ice="doc">T<a href="typedef/index.html#static-typedef-ShopifyCart">ShopifyCart</a></li> <li data-ice="doc">T<a href="typedef/index.html#static-typedef-ShopifyCartLineItem">ShopifyCartLineItem</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#easycurrency">easycurrency</a>C<a href="class/src/easycurrency/EasyCurrency.js~EasyCurrency.html">EasyCurrency</a></li> <li data-ice="doc">C<a href="class/src/easycurrency/MoneySpan.js~MoneySpan.html">MoneySpan</a></li> <li data-ice="doc">C<a href="class/src/easycurrency/MoneySpanSet.js~MoneySpanSet.html">MoneySpanSet</a></li> <li data-ice="doc">C<a href="class/src/easycurrency/Session.js~Session.html">Session</a></li> <li data-ice="doc">C<a href="class/src/easycurrency/config.js~Config.html">Config</a></li> <li data-ice="doc">C<a href="class/src/easycurrency/state.js~State.html">State</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#easycurrency-formatters">easycurrency/formatters</a>C<a href="class/src/easycurrency/formatters/DefaultFormatter.js~DefaultFormatter.html">DefaultFormatter</a></li> <li data-ice="doc">C<a href="class/src/easycurrency/formatters/Formatter.js~Formatter.html">Formatter</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#easycurrency-helpers">easycurrency/helpers</a>C<a href="class/src/easycurrency/helpers/SelectHelper.js~SelectHelper.html">SelectHelper</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#easycurrency-resolvers">easycurrency/resolvers</a>C<a href="class/src/easycurrency/resolvers/CurrencyResolver.js~CurrencyResolver.html">CurrencyResolver</a></li> <li data-ice="doc">C<a href="class/src/easycurrency/resolvers/GeoserviceResolver.js~GeoserviceResolver.html">GeoserviceResolver</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#geoservice">geoservice</a>C<a href="class/src/geoservice/API.js~API.html">API</a></li> <li data-ice="doc">C<a href="class/src/geoservice/GeoService.js~GeoService.html">GeoService</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#http">http</a>C<a href="class/src/http/RequestQueuable.js~RequestQueuable.html">RequestQueuable</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#utils">utils</a>C<a href="class/src/utils/Log.js~Log.html">Log</a></li> <li data-ice="doc">C<a href="class/src/utils/general.js~GeneralUtils.html">GeneralUtils</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#utils-loggers">utils/loggers</a>C<a href="class/src/utils/loggers/ConsoleLogger.js~ConsoleLogger.html">ConsoleLogger</a></li> <li data-ice="doc">C<a href="class/src/utils/loggers/Logger.js~Logger.html">Logger</a></li> <li data-ice="doc">C<a href="class/src/utils/loggers/logLevel.js~LogLevel.html">LogLevel</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-logLevel">logLevel</a></li> </ul> </div> </nav> <div class="content" data-ice="content"><h1 data-ice="title">src/ajax/Cart.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import Evee from 'evee'; import Queue from 'promise-queue'; import deepEqual from 'deep-equal'; import _ from 'lodash'; import config from 'config'; import log from 'log'; import ajaxApi from 'http/shopifyAJAXAPI'; const TAG = 'Cart'; /** * @typedef {Object} ShopifyCartLineItem * @property {Number} id * @property {Object|null} properties * @property {Number} quantity * @property {Number} variant_id * @property {String} key * @property {String} title * @property {Number} price * @property {Number} original_price * @property {Number} discounted_price * @property {Number} original_line_price * @property {Number} line_price * @property {Number} total_discount * @property {Object[]} discounts * @property {String|null} sku * @property {Number} grams * @property {String} vendor * @property {Boolean} taxable * @property {Number} product_id * @property {Boolean} gift_card * @property {String} url * @property {String|null} image * @property {String} handle * @property {Boolean} requires_shipping * @property {String|null} product_type * @property {String} product_title * @property {String|null} product_description * @property {String} variant_title * @property {String[]} variant_options */ /** * @typedef {Object} ShopifyCart * @property {String} token * @property {String} note * @property {Object} attributes * @property {Number} total_price * @property {Number} total_weight * @property {ShopifyCartLineItem[]} items * @property {Boolean} requires_shipping */ /** * Shopify Cart entity. * @extends {evee} */ export default class Cart extends Evee { /** * Construct a new instance of the cart entity. */ constructor() { super(); /** @type {promise-queue} */ this._queue = new Queue(1, Infinity); this._attributes = {}; this._ready = false; /** @type {Object[]} */ this._items = []; this._attributes = {}; } /** * Initialize the cart entity with the current state of the visitor's cart. * @param {ShopifyCart} cartData - Shopify Cart object. */ initialize(cartData) { this._loadFromShopifyCart(cartData); this._emitUpdate('init', null); if (this.items.length == 0) { this._emitClear([]); } log.send(log.DEBUG, TAG, 'Loaded.'); } /** * Alias to getItems(); * @type {ShopifyCartLineItem[]} */ get items() { return this.getItems(); } /** * Returns items in the cart (in the normal Shopify line item format. * @returns {ShopifyCartLineItem[]} */ getItems() { return this._items; } /** * Alias to getTotalPrice(); * @type {Number} */ get total_price() { return this.getTotalPrice(); } /** * Alias to getTotalPrice(); * @type {Number} */ get totalPrice() { return this.getTotalPrice(); } /** * Calculates the total value of the cart. * @returns {Number} */ getTotalPrice() { return _.reduce(this.items, (total, item) => { return total + item.line_price; }, 0) } /** * Reloads the cart state via AJAX. * @returns {Promise<src/ajax/Cart.js~Cart, Error>} */ async reload() { var cartData = await ajaxApi.get('/cart.js'); this._loadFromShopifyCart(cartData.data); return this; } /** * Alias to getAttributes() * @type {Object} */ get attributes() { return this.getAttributes(); } /** * Returns cart attributes. * @returns {Object} */ getAttributes() { return this._attributes; } /** * Sets all attributes on the cart. This will override/remove existing attributes. * @param {Object} attributes - New attributes for the cart. * @returns {Promise<src/ajax/Cart.js~Cart, Error>} */ setAttributes(attributes) { log.sendObject(log.DEBUG, TAG, 'Setting attributes...', { attributes }); return this._queue.add(async () => { var cart = await ajaxApi.post({attributes}); this._loadFromShopifyCart(cart.data); this._emitUpdate('attribute-updated', null); }); } getAttribute(key) { return this._attributes[key]; } setAttribute(key, value) { log.sendObject(log.DEBUG, TAG, 'Setting attribute...', { key, value }); return this._queue.add(async () => { var newAttributes = Object.assign({}, this._attributes); newAttributes[key] = value; var cart = await ajaxApi.post({attributes: newAttributes}); this._loadFromShopifyCart(cart.data); this._emitUpdate('attribute-updated', null); }); } /** * Add a new item to the cart. * @param {Number|String} id - Variant ID to add to cart. * @param {Number} quantity - Quantity to add. * @param {Object} properties - Line item attributes. * @returns {Promise<ShopifyCartLineItem, Error>} */ addItem(id, quantity, properties) { log.sendObject(log.DEBUG, TAG, 'Queuing addItem...', { id, quantity, properties }); return this._queue.add(async () => { var res = await ajaxApi.post('/cart/add.js', { id, quantity, properties }); var data = res.data; log.sendObject(log.DEBUG, TAG, 'addItem resonse', data); if (data.id) { var item = this._loadItem(data); this._emitAdd(item); this._emitUpdate('add', item); return item; } throw new Error(data); }); } updateItem(lineNumber, quantity, properties) { return this._queue.add(() => { return new Promise((acc, rej) => { }); }); } removeItem(lineNumber) { return this._queue.add(() => { return new Promise((acc, rej) => { }); }); } updateItemById(id, quantity, properties) { return this._queue.add(() => { return new Promise((acc, rej) => { }); }); } updateItemById(id, quantity, properties) { return this._queue.add(() => { return new Promise((acc, rej) => { }); }); } updateItemQuantitiesById(updates) { return this._queue.add(() => { return new Promise((acc, rej) => { }); }); } removeItemById(id) { return this._queue.add(() => { return new Promise((acc, rej) => { }); }); } /** * Clear the cart. * @returns {Promise<src/ajax/Cart.js~Cart, Error>} */ clear() { return this._queue.add(async () => { var cartData = await ajaxApi.post('/cart/clear.js'); var oldItems = this.items; this._loadFromShopifyCart(cartData); this._emitClear(oldItems); }); } _loadItem(itemData) { for (var item of this.items) { if (item.id == itemData.id && deepEqual(item.properties, itemData.properties)) { item.quantity = itemData.quantity; return item; } } this.items.push(itemData); return itemData; } _emitUpdate(operation, item) { var data ={ items: this.items, operation, item }; log.sendObject(log.DEBUG, TAG, 'Event: update', data); this.emit('update', data); } _emitClear(oldItems) { var data ={ oldItems }; log.sendObject(log.DEBUG, TAG, 'Event: clear', data); this.emit('clear', data); } _emitAdd(item) { var data ={ items: this.items, item }; log.sendObject(log.DEBUG, TAG, 'Event: add', data); this.emit('add', data); } _emitUpdateItem(item) { var data ={ items: this.items, item }; log.sendObject(log.DEBUG, TAG, 'Event: updae-item', data); this.emit('update-item', data); } _emitRemove(item) { var data = { items: this.items, item }; log.sendObject(log.DEBUG, TAG, 'Event: remove', data); this.emit('clear', data); } _loadFromShopifyCart(cart) { this._items = cart.items; } } </code></pre> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc(1.0.4)<img src="./image/esdoc-logo-mini-black.png"></a> </footer> <script src="script/search_index.js"></script> <script src="script/search.js"></script> <script src="script/pretty-print.js"></script> <script src="script/inherited-summary.js"></script> <script src="script/test-summary.js"></script> <script src="script/inner-link.js"></script> <script src="script/patch-for-local.js"></script> </body> </html>