Try-on in SPA and headless stores
In stores that change pages without a full browser reload (SPA, headless, or themes with instant navigation), the fashion, eyewear and room try-ons follow URL changes on their own. Paste the code once, in the site’s base HTML, as you would in any store.
What the try-on tracks
Section titled “What the try-on tracks”The fashion, eyewear and room try-ons notice when the page URL changes through:
history.pushStateorhistory.replaceState, which most routers use;- the browser’s back or forward button (
popstate); - a change in the part after
#(hashchange).
On each change, the try-on:
- hides the button and the elements with
data-reverbs-auto-show; - checks whether the product at the new URL is in the catalog and active;
- if it is, shows the button and the
data-reverbs-auto-showelements again.
Buttons with data-reverbs-trigger that your site creates after the change also open the try-on. See Install modes.
One URL per product
Section titled “One URL per product”The try-on recognizes the product by the page URL. For it to work in an SPA store:
- each product needs its own URL, matching the Link do produto na loja (Product link in the store) saved in the catalog;
- the URL must change when the shopper opens another product.
If your store shows products without changing the URL, for example in a quick-view window over the product grid, the try-on can’t tell which product is on screen. In that case, contact support.
Open it from your code
Section titled “Open it from your code”If your product component handles the button click, call the JavaScript API. While the try-on is checking the product on the new page, open() does nothing. To keep shoppers from clicking too early, add data-reverbs-auto-show and style="display:none" to your button: it only appears once the product is confirmed.
Try-on inside the page
Section titled “Try-on inside the page”In the Dentro da página (Inside the page) format, the placeholder area must exist when the try-on loads. In SPA stores, an area created after a page change doesn’t receive the try-on. To use this format in an SPA store, contact support.
Sizing widget
Section titled “Sizing widget”The sizing widget checks the product only when the page loads. When the product changes without a reload, the links still point to the first product. If your store works this way, contact support before installing.
Video Commerce
Section titled “Video Commerce”Video Commerce follows changes in the page content and URL and shows the showcase set up for each URL. See Video Commerce install code.
Frequently asked questions
Do I need to reload the try-on when the shopper switches products without a page reload?
Not for the fashion, eyewear and room try-ons. They detect the URL change and check the product on the new page on their own.
Does the sizing widget work in an SPA store?
It checks the product only when the page loads. If your store switches products without reloading, contact support before installing.