{"_id":"560b09c1f6994b0d0023bd2a","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"},"user":"55a6caa022cfa321008e01d6","__v":6,"parentDoc":null,"project":"55a6e72e8cc73e0d00096635","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-29T21:59:29.703Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:html]\n{\n  \"html\": \"<A NAME=\\\"remote-ex-1\\\"></a>In the JavaScript-only example below, the <span class=\\\"inline-code\\\">cookie-privacy-notification</span> hook enables customization of the alert window that displays European Union&ndash;required cookie notifications:<br>\\n\\n<p></p>\\n<pre>\\n// Load the stencil-utils package\\nimport utils from ':::at:::bigcommerce/stencil-utils';\\n[...]\\n\\n/**\\n * European websites must notify users of cookies to comply with European Union law.\\n * This will alert shoppers that this website uses cookies.\\n */\\nexport default function() {\\n\\n  // Here you can override the default browser alert box by\\n  // hooking to the 'cookie-privacy-notification' hook.\\n  utils.hooks.on('cookie-privacy-notification', (event, privacyMessage) => {\\n\\n    // You can make your own custom modal or alert box\\n    // appear in your theme using the privacyMessage provided\\n    myCustomAlert(privacyMessage);\\n\\n    // Call event.preventDefault() to prevent the default\\n    // browser alert from occurring in stencil-utils\\n    event.preventDefault();\\n  });\\n}</pre>\\n\\nA theme could listen for the <span class=\\\"inline-code\\\">cookie-privacy-notification</span> event to override the browser’s default notification UI.\"\n}\n[/block]","excerpt":"Using Event Hooks","slug":"hook-usage-example-1-cookie-notification","type":"basic","title":"Hook Example 1: Cookie Notification"}

Hook Example 1: Cookie Notification

Using Event Hooks

[block:html] { "html": "<A NAME=\"remote-ex-1\"></a>In the JavaScript-only example below, the <span class=\"inline-code\">cookie-privacy-notification</span> hook enables customization of the alert window that displays European Union&ndash;required cookie notifications:<br>\n\n<p></p>\n<pre>\n// Load the stencil-utils package\nimport utils from '@bigcommerce/stencil-utils';\n[...]\n\n/**\n * European websites must notify users of cookies to comply with European Union law.\n * This will alert shoppers that this website uses cookies.\n */\nexport default function() {\n\n // Here you can override the default browser alert box by\n // hooking to the 'cookie-privacy-notification' hook.\n utils.hooks.on('cookie-privacy-notification', (event, privacyMessage) => {\n\n // You can make your own custom modal or alert box\n // appear in your theme using the privacyMessage provided\n myCustomAlert(privacyMessage);\n\n // Call event.preventDefault() to prevent the default\n // browser alert from occurring in stencil-utils\n event.preventDefault();\n });\n}</pre>\n\nA theme could listen for the <span class=\"inline-code\">cookie-privacy-notification</span> event to override the browser’s default notification UI." } [/block]