How to - Add custom facet URLs

Traditionally, Tweakwise only supported direct landing page links (/category/x) for category-based facets. We have expanded this capability to allow any facet value to carry a unique URL.

Why is this helpful?

Contextual Overrides: You can now serve different category URLs depending on the page type (e.g., pointing to a /sale/t-shirts landing page when the user is on a Sale list, rather than the generic /t-shirts).
Brand SEO: Directly link facet values for 'Brands' to their respective brand pages, increasing internal linking strength and SEO relevance.

Example

Example: link to brand pages:

function convertToSlug(text) {
  return text
    .toLowerCase()
    .replace(/[^\w\s-]/g, '')   // Remove special characters
    .replace(/[\s_]+/g, '-')    // Replace spaces and underscores with a hyphen
    .replace(/^-+|-+$/g, '');   // Trim leading/trailing hyphens
}

window.addEventListener("twn.starter.ready", function () {
  var api = tweakwiseListerPage({
    cid: "1000",
    prettyUrl: true,
    seo: {
      routes: {
        
				// using a dictionary

        "ae-brand": [
          {
            value: "Tweakwise",
            url: "/brands/tweakwise",
          },
          {
            value: "Orisha",
            url: "/brands/orisha",
          },
        ],

        // or using a function

        "ae-brand": function ({ item, settings, context }) {
          var brandslug = convertToSlug(item.value);
          return '/brand/' + brandslug + '/';
        }

      },
    },
  });
});