Navigation and page lifecycle

Upstorr storefront navigation often replaces page content without performing a full browser refresh. Custom JavaScript must therefore handle both the first page and later route changes.

const enhancePage = () => {
  const element = document.querySelector('[data-my-theme-effect]');
  if (!element || element.hasAttribute('data-my-theme-ready')) return;
  element.setAttribute('data-my-theme-ready', 'true');
  // Attach the effect once.
};

enhancePage();
window.addEventListener('upstorr:storefront-navigation', enhancePage);

Make initialization repeat-safe. Otherwise each route change can attach another listener to the same element.

Use public route builders such as buildThemeProductUrl, buildThemeCollectionUrl, buildThemeBlogUrl, buildThemeArticleUrl, buildThemeSearchUrl and buildThemeOrdersUrl. Use ThemeLink or the documented router helpers when writing a React-based developer-mode enhancement.

Do not hard-code storefront prefixes, market paths or internal route rules. The route builders keep links compatible with the current storefront contract.