Home > widget-integration > FilterHelper > buildProductDetailUrlWithVariant

FilterHelper.buildProductDetailUrlWithVariant() method

Builds a product detail URL with variant parameter.

Constructs a complete product URL including the variant query parameter when needed. Automatically appends ?variant={id} for split products or when a specific variant ID is provided. This ensures the correct variant is selected when the customer lands on the product page. Override to customize variant parameter handling or add additional query parameters.

Signature:

buildProductDetailUrlWithVariant(product: {
		variants?: unknown[];
		variant_id?: string | number;
		handle: string;
		split_product?: boolean;
	}, hasCollection?: boolean, currentTags?: string[], variantId?: string | number): string;

Parameters

Returns:

string

Complete product detail URL with variant parameter if applicable

Remarks

Variant parameter is added when: - variantId argument is provided - product.split_product is true AND variants exist - Uses product.variant_id as fallback

Example 1

Basic usage:

const url = this.filterHelper.buildProductDetailUrlWithVariant(
  { handle: 'tshirt', variants: [...], variant_id: 12345, split_product: true },
  true
);
// Returns: "/collections/apparel/products/tshirt?variant=12345"

Example 2

Extend to add custom parameters:

window.boostWidgetIntegration.extend('FilterHelper', (FilterHelper) => {
  return class CustomFilterHelper extends FilterHelper {
    buildProductDetailUrlWithVariant(product, hasCollection, currentTags, variantId) {
      const url = super.buildProductDetailUrlWithVariant(product, hasCollection, currentTags, variantId);
      // Add color selection parameter
      if (product.selected_color) {
        const separator = url.includes('?') ? '&' : '?';
        return url + separator + 'color=' + product.selected_color;
      }
      return url;
    }
  };
});