TURBO for Developers

Home > widget-integration > FilterHelper > buildProductDetailUrl

FilterHelper.buildProductDetailUrl() method

Builds a product detail URL with optional collection context.

Constructs the product detail page URL, optionally including collection context in the path for better navigation and SEO. Handles locale prefixes, collection handles, and tag-based URLs. This is a key extensibility point for customizing product navigation behavior. Override to implement shop-specific URL structures, add tracking parameters, or modify collection context logic.

Signature:

buildProductDetailUrl(handle: string, hasCollection?: boolean, currentTags?: string[]): string;

Parameters

Parameter	Type	Description
handle	string	Product handle (URL-safe product identifier)
hasCollection	boolean	(Optional) Whether to include collection in URL path (default: false)
currentTags	string[]	(Optional) Optional array of current page tags for tag-based URLs

Returns:

string

Complete product detail URL with optional collection context

Remarks

URL patterns generated: - Basic: /products/{handle} - With locale: /{locale}/products/{handle} - With collection: /collections/{collection}/products/{handle} - With tags: /collections/{collection}/{tag}

Example 1

Basic usage:

const url = this.filterHelper.buildProductDetailUrl('product-handle', true);
// Returns: "/collections/summer/products/product-handle"

Example 2

Extend to add analytics tracking:

window.boostWidgetIntegration.extend('FilterHelper', (FilterHelper) => {
  return class CustomFilterHelper extends FilterHelper {
    buildProductDetailUrl(handle, hasCollection, currentTags) {
      const url = super.buildProductDetailUrl(handle, hasCollection, currentTags);
      // Add UTM parameters for tracking
      const separator = url.includes('?') ? '&' : '?';
      return url + separator + 'utm_source=filter&utm_medium=product_list';
    }
  };
});