{"_id":"560b0a2f87b71d0d000d3bdb","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"58105f548a4aed0f00d67536","__v":0,"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-10-26T07:46:28.684Z","from_sync":false,"order":11,"slug":"event-hooks","title":"Event Hooks"},"project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","parentDoc":null,"__v":13,"updates":["59287632647b703b005f1a9b"],"next":{"pages":[],"description":""},"createdAt":"2015-09-29T22:01:19.532Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"[block:html]\n{\n  \"html\": \"<A NAME=\\\"Remote-API-ex\\\"></a> <A NAME=\\\"remote-ex-3\\\"></a> Client-side JavaScript can access event hooks directly, without using Handlebars statements. By setting up listeners for these events, you can exercise granular control over your storefront’s user interface. For example, you can pop up custom windows when certain events occur.<br><br>\\n\\nBelow is an example implemented within a Stencil theme. This code adds an item to the shopping cart, and displays the result in a custom modal dialog rather than a cart page.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"ES6 Example\",\n  \"body\": \"This particular example uses certain conventions of <a href=\\\"https://github.com/lukehoban/es6features\\\" target=\\\"_blank\\\">ES6</a> JavaScript (also known as ECMAScript 6 or \\nECMAScript 2015). <a href=\\\"https://kangax.github.io/compat-table/es6/\\\" target=\\\"_blank\\\">This table</a> shows current browser support for ES6.\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"Here is the signature of the <span class=\\\"inline-code\\\">cart.itemAdd</span> function used below, with parameters for product&nbsp;ID, quantity, and options:<br><p></p>\\n\\n\\n<pre>itemAdd(<a href=\\\"https://developer.mozilla.org/en-US/docs/Web/API/FormData\\\">FormData</a>, callback)</pre>\\n\\n<p></p>Here is the signature of the cart.getContent function used further down:<br><p></p>\\n\\n\\n<pre>getContent(<a href=\\\"#getContent-options\\\">options</a>, callback)</pre>\\n\\n\\n<p></p>This first complete code snippet calls <span class=\\\"inline-code\\\">cart.itemAdd</span>, catches any errors, and displays the cart contents in a modal dialog: <br><p></p>\\n\\n<pre>\\n        // Add item to cart\\n        utils.api.cart.itemAdd(new FormData(form), (err, response) => {\\n            const errorMessage = err || response.data.error;\\n\\n            $addToCartBtn\\n                .val(originalBtnVal)\\n                .prop('disabled', false);\\n\\n            this.$overlay.hide();\\n\\n            // Guard statement\\n            if (errorMessage) {\\n                // Strip the HTML from the error message\\n                const tmp = document.createElement('DIV');\\n                tmp.innerHTML = errorMessage;\\n\\n                return alert(tmp.textContent || tmp.innerText);\\n            }\\n\\n            // Open preview modal and update content\\n            if (this.previewModal) {\\n                this.previewModal.open();\\n\\n                this.updateCartContent(this.previewModal, response.data.cart_item.hash);\\n            } else {\\n                this.$overlay.show();\\n                // if no modal, redirect to the cart page\\n                this.redirectTo(response.data.cart_item.cart_url || this.context.urls.cart);\\n            }\\n        });\\n</pre>\\n\\n\\n<p></p>This final code snippet calls <span class=\\\"inline-code\\\">cart.getContent</span> to fetch the cart contents, then display it in a preview format, which is specified by a <span class=\\\"inline-code\\\">template</span> option with a value of <span class=\\\"inline-code\\\">cart/preview</span>:<br><p></p>\\n\\n<pre>\\n    /**\\n     * Get cart contents\\n     *\\n     * :::at:::param {String} cartItemHash\\n     * @param {Function} onComplete\\n     */\\n    getCartContent(cartItemHash, onComplete) {\\n        const options = {\\n            template: 'cart/preview',\\n            params: {\\n                suggest: cartItemHash,\\n            },\\n            config: {\\n                cart: {\\n                    suggestions: {\\n                        limit: 4,\\n                    },\\n                },\\n            },\\n        };\\n\\n        utils.api.cart.getContent(options, onComplete);\\n    }</pre>\"\n}\n[/block]","excerpt":"Using Event Hooks","slug":"remote-api-example","type":"basic","title":"Remote API Example"}

Remote API Example

Using Event Hooks

[block:html] { "html": "<A NAME=\"Remote-API-ex\"></a> <A NAME=\"remote-ex-3\"></a> Client-side JavaScript can access event hooks directly, without using Handlebars statements. By setting up listeners for these events, you can exercise granular control over your storefront’s user interface. For example, you can pop up custom windows when certain events occur.<br><br>\n\nBelow is an example implemented within a Stencil theme. This code adds an item to the shopping cart, and displays the result in a custom modal dialog rather than a cart page." } [/block] [block:callout] { "type": "warning", "title": "ES6 Example", "body": "This particular example uses certain conventions of <a href=\"https://github.com/lukehoban/es6features\" target=\"_blank\">ES6</a> JavaScript (also known as ECMAScript 6 or \nECMAScript 2015). <a href=\"https://kangax.github.io/compat-table/es6/\" target=\"_blank\">This table</a> shows current browser support for ES6." } [/block] [block:html] { "html": "Here is the signature of the <span class=\"inline-code\">cart.itemAdd</span> function used below, with parameters for product&nbsp;ID, quantity, and options:<br><p></p>\n\n\n<pre>itemAdd(<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/FormData\">FormData</a>, callback)</pre>\n\n<p></p>Here is the signature of the cart.getContent function used further down:<br><p></p>\n\n\n<pre>getContent(<a href=\"#getContent-options\">options</a>, callback)</pre>\n\n\n<p></p>This first complete code snippet calls <span class=\"inline-code\">cart.itemAdd</span>, catches any errors, and displays the cart contents in a modal dialog: <br><p></p>\n\n<pre>\n // Add item to cart\n utils.api.cart.itemAdd(new FormData(form), (err, response) => {\n const errorMessage = err || response.data.error;\n\n $addToCartBtn\n .val(originalBtnVal)\n .prop('disabled', false);\n\n this.$overlay.hide();\n\n // Guard statement\n if (errorMessage) {\n // Strip the HTML from the error message\n const tmp = document.createElement('DIV');\n tmp.innerHTML = errorMessage;\n\n return alert(tmp.textContent || tmp.innerText);\n }\n\n // Open preview modal and update content\n if (this.previewModal) {\n this.previewModal.open();\n\n this.updateCartContent(this.previewModal, response.data.cart_item.hash);\n } else {\n this.$overlay.show();\n // if no modal, redirect to the cart page\n this.redirectTo(response.data.cart_item.cart_url || this.context.urls.cart);\n }\n });\n</pre>\n\n\n<p></p>This final code snippet calls <span class=\"inline-code\">cart.getContent</span> to fetch the cart contents, then display it in a preview format, which is specified by a <span class=\"inline-code\">template</span> option with a value of <span class=\"inline-code\">cart/preview</span>:<br><p></p>\n\n<pre>\n /**\n * Get cart contents\n *\n * @param {String} cartItemHash\n * @param {Function} onComplete\n */\n getCartContent(cartItemHash, onComplete) {\n const options = {\n template: 'cart/preview',\n params: {\n suggest: cartItemHash,\n },\n config: {\n cart: {\n suggestions: {\n limit: 4,\n },\n },\n },\n };\n\n utils.api.cart.getContent(options, onComplete);\n }</pre>" } [/block]