\n
\n{% endif %}\n```\n\n## 9. Refresh VP prices when needed\n\nIn some cases (filtering, sorting, infinite scrolling,...) when products are dynamically changing on the page, prices need to be refreshed.\n\n_Note: USF search should be handles by default in most cases already._\n\nCalling `document.dispatchEvent(new Event(\"vp-rerender\"))` will run the VP script again and go over all the non-initialised prices.\n\nHere is an example:\n\n```js\n// For example after filtering\n// \"oz:theme:reinit\" is an event example on HW which is dispacth when filters are used\ndocument.addEventListener('oz:theme:reinit', () => {\n document.dispatchEvent(new Event('vp-rerender')); // We dispatch \"vp-rerender\" which \"refresh\"/\"rerender\" the VP\n});\n```\n\n##### DEFINITION\n\n| Type | Name | Description |\n| ----- | ----------------- | --------------------------------------------------------------------------------- |\n| class | `vp-checkout-btn` | Main class to use on the checkout button (just before generating the draft order) |\n\n## 10. Create Lightregister\n\nThe lightregister page allows users to get directed to a specific page (setup in the _Customize_ of the theme) once they're logged-in.\n\n1. In **live theme**, create a new **page liquid template** called `lightregister`\n2. Create a page using that template and publish it\n3. In development theme, create a `page.lightregister.liquid` file in the `template` folder and copy paste [the content of this template](doc/shopify/page.lightregister.liquid) in it.\n4. Add [the following SCSS file](doc/shopify/lightregister.scss) to your theme\n\nThe content of the page can now be administered through the options in the _Customize_ bit of the theme.\n\n## 11. (annex) - App Integration : USF\n\n### App Integration: USF\n\nIf the website is using USF, products with handles on the collection page and search pages will need to be edited like so through the app:\n\n1. Add the `data-vp-handle` **attribute** to `searchResultsGridViewItem`.\n\n```javascript\nsearchResultsGridViewItem: `\n /* ... */\n \n \n
\n \n
\n\n {{ 'customer.fidelity.has_been_applied' | t }}\n
\n \n \n /* ... */\n`;\n```\n\n2. Find HTML element which contains the original price and add the `vp-original-prices` **class** to it.\n3. After the HTML element which contains the original price, add the following code:\n\n```html\n\n
\n \n \n \n \n
\n\n```\n\n3. Add the `data-vp-handle` **attribute** to `searchResultsListViewItem`.\n\n```javascript\nsearchResultsListViewItem: `\n /* ... */\n \n /* ... */\n`;\n```\n\n4. Repeat **Step 2** and **Step 3** for this element.\n\n5. Add the `data-vp-handle` **attribute** to `instantSearchItem`.\n\n```javascript\ninstantSearchItem: `\n /* ... */\n
\n```\n\n## Notes\n\n- If something is not working properly, make sure jquery is available\n*(note: soon-to-be-deprecated-as-all-of-jquery-will-be-removed-very-very-soon :-) )*\n\n- If JS is added manually, make sure it has the `data-ot-ignore` attribute if the destination website has CookiePro installed\n\nExample: ``\n\n```javascript\nimport jquery from 'jquery';\n\nwindow.$ = window.jQuery = jquery;\n```\n","readmeFilename":"README.md"}\n /* ... */\n`;\n```\n\n5. Repeat **Step 2** and **Step 3** for this element.\n\n## 12. (annex) - App Integration : Algolia\n\n1. In `algolia_helpers.js.liquid`, add the `productHandle` function under `algolia.helpers`:\n\n```javascript\nalgolia.helpers = {\n productHandle: function productHandle() {\n return this.handle;\n },\n};\n```\n\n2. In `algolia_autocomplete_product.hogan.liquid` add the `data-vp-handle=\"[[# helpers.productHandle ]][[/ helpers.productHandle ]]\"` attribute on the product container\n3. Add the `vp-original-prices` on the initial price container\n4. Add the `vp-prices` container under it.\n\nExample:\n\n```html\n\n \n
\n\n ![\"\"](\"[[#)
\n
\n \n [[# helpers.autocompletePrice ]][[/ helpers.autocompletePrice ]]\n
\n\n \n \n
\n[[# helpers.fullHTMLTitle ]][[/ helpers.fullHTMLTitle ]]
\n[[# meta ]] [[ meta.global.baseline ]] [[/ meta ]]
\n