{"_id":"560b0a77ee8a910d0072f8e4","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"},"__v":6,"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"},"parentDoc":null,"user":"55a6caa022cfa321008e01d6","project":"55a6e72e8cc73e0d00096635","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-29T22:02:31.258Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"[block:html]\n{\n  \"html\": \"<A NAME=\\\"tags-hooks-ref\\\"></a>Stencil themes provide the following chains of data tags, bound/delegated DOM (Document&nbsp;Object Model) events, emitted Stencil event hooks, and Stencil event parameters.<br>\\n\\n<h2> Cart Item Added</h2>\\n\\nHook for items added to the customer’s shopping cart.<br>\\n\\n<br><b>Function Signature</b><br>\\n\\n<p></p><pre>itemAdd() {\\n    this.$body.on('submit', '[data-cart-item-add]', (event) =&gt; {\\n        this.emit('cart-item-add', event, event.target);\\n    });\\n}</pre>\\n\\n\\n <br>\\n\\n<p></p><table>\\n  <tbody><tr>\\n    <td class=\\\"\\\">Data Tag</td>\\n    <td class=\\\"\\\">Delegated DOM Event</td>\\n    <td class=\\\"\\\">Stencil Event/Hook</td>\\n    <td class=\\\"\\\">Stencil Event Parameter(s)</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">data-cart-item-add</td>\\n    <td class=\\\"\\\">submit</td>\\n    <td class=\\\"\\\">cart-item-add</td>\\n    <td class=\\\"\\\">event, event.target</td>\\n  </tr>\\n</tbody></table>\\n\\n\\n<h2> Faceted-Search Events </h2>\\n\\nHooks for faceted-search selections that the customer initiates or submits.<br>\\n\\n<br><b>Function Signature</b><br>\\n\\n<p></p><pre>searchEvents() {\\n  this.$body.on('click', '[data-faceted-search-facet]', (event) =&gt; {\\n        this.emit('facetedSearch-facet-clicked', event);\\n  });\\n \\n  this.$body.on('submit', '[data-faceted-search-range]', (event) =&gt; {\\n        this.emit('facetedSearch-range-submitted', event);\\n  });\\n}</pre>\"\n}\n[/block]","excerpt":"","slug":"data-tagsevent-hooks-reference","type":"basic","title":"Data Tags/Event Hooks Reference"}

Data Tags/Event Hooks Reference


[block:html] { "html": "<A NAME=\"tags-hooks-ref\"></a>Stencil themes provide the following chains of data tags, bound/delegated DOM (Document&nbsp;Object Model) events, emitted Stencil event hooks, and Stencil event parameters.<br>\n\n<h2> Cart Item Added</h2>\n\nHook for items added to the customer’s shopping cart.<br>\n\n<br><b>Function Signature</b><br>\n\n<p></p><pre>itemAdd() {\n this.$body.on('submit', '[data-cart-item-add]', (event) =&gt; {\n this.emit('cart-item-add', event, event.target);\n });\n}</pre>\n\n\n <br>\n\n<p></p><table>\n <tbody><tr>\n <td class=\"\">Data Tag</td>\n <td class=\"\">Delegated DOM Event</td>\n <td class=\"\">Stencil Event/Hook</td>\n <td class=\"\">Stencil Event Parameter(s)</td>\n </tr>\n <tr>\n <td class=\"\">data-cart-item-add</td>\n <td class=\"\">submit</td>\n <td class=\"\">cart-item-add</td>\n <td class=\"\">event, event.target</td>\n </tr>\n</tbody></table>\n\n\n<h2> Faceted-Search Events </h2>\n\nHooks for faceted-search selections that the customer initiates or submits.<br>\n\n<br><b>Function Signature</b><br>\n\n<p></p><pre>searchEvents() {\n this.$body.on('click', '[data-faceted-search-facet]', (event) =&gt; {\n this.emit('facetedSearch-facet-clicked', event);\n });\n \n this.$body.on('submit', '[data-faceted-search-range]', (event) =&gt; {\n this.emit('facetedSearch-range-submitted', event);\n });\n}</pre>" } [/block]