@depict-ai/ui 1.4.9 → 1.4.11

package/ES10/index.cjs

@@ -60,7 +60,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "1.4.9";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "1.4.11";
 function $d6d51b09cb2116a6$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -6167,12 +6167,14 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
     return (_plp_results_4 = plp_results_()) === null || _plp_results_4 === void 0 ? void 0 : _plp_results_4.quick_links;
   });
   const meta_tag_data_ = (0, $52FdA$solidjs.createMemo)(() => {
-    var _plp_results_5, _plp_results_5$metada, _plp_results_6, _plp_results_6$metada, _plp_results_7, _plp_results_7$metada;
-    meta_title_suffix_();
-    return (_plp_results_5 = plp_results_()) !== null && _plp_results_5 !== void 0 && (_plp_results_5$metada = _plp_results_5.metadata) !== null && _plp_results_5$metada !== void 0 && _plp_results_5$metada.replace_meta_tags ? {
-      title: ((_plp_results_6 = plp_results_()) === null || _plp_results_6 === void 0 ? void 0 : (_plp_results_6$metada = _plp_results_6.metadata) === null || _plp_results_6$metada === void 0 ? void 0 : _plp_results_6$metada.title) + (meta_title_suffix_() || ""),
-      description: (_plp_results_7 = plp_results_()) === null || _plp_results_7 === void 0 ? void 0 : (_plp_results_7$metada = _plp_results_7.metadata) === null || _plp_results_7$metada === void 0 ? void 0 : _plp_results_7$metada.description
-    } : null;
+    var _plp_results_5, _plp_results_5$metada;
+    if ((_plp_results_5 = plp_results_()) !== null && _plp_results_5 !== void 0 && (_plp_results_5$metada = _plp_results_5.metadata) !== null && _plp_results_5$metada !== void 0 && _plp_results_5$metada.replace_meta_tags) {
+      var _plp_results_6, _plp_results_6$metada, _plp_results_7, _plp_results_7$metada;
+      return {
+        title: ((_plp_results_6 = plp_results_()) === null || _plp_results_6 === void 0 ? void 0 : (_plp_results_6$metada = _plp_results_6.metadata) === null || _plp_results_6$metada === void 0 ? void 0 : _plp_results_6$metada.title) + (meta_title_suffix_() || ""),
+        description: (_plp_results_7 = plp_results_()) === null || _plp_results_7 === void 0 ? void 0 : (_plp_results_7$metada = _plp_results_7.metadata) === null || _plp_results_7$metada === void 0 ? void 0 : _plp_results_7$metada.description
+      };
+    }
   });
   (0, $52FdA$depictaiutilishared.edit_current_page_meta_tags)(meta_tag_data_);
   const [sort_or_filter_open_, set_sort_or_filter_open_] = (0, $52FdA$solidjs.createSignal)(false);
@@ -6528,8 +6530,12 @@ function $5dd9d0d3ea82e2dd$export$477caf01aecaeb2a(options) {
   const router_ = options.router_;
   const search_query_url_param_name_ = "search_query_url_param_name_" in options ? options.search_query_url_param_name_ : undefined;
   const search_query_ = search_query_url_param_name_ ? (0, $52FdA$solidjs.createSignal)("") : undefined;
+  const override_query_id_query_param_names_ = "override_query_id_query_param_names_" in options ? options.override_query_id_query_param_names_ : undefined;
+  const override_query_id_ = override_query_id_query_param_names_ ? (0, $52FdA$solidjs.createSignal)(null) : undefined;
   const get_search_query_ = search_query_ === null || search_query_ === void 0 ? void 0 : search_query_[0];
   const set_search_query = search_query_ === null || search_query_ === void 0 ? void 0 : search_query_[1];
+  const get_override_query_id_ = override_query_id_ === null || override_query_id_ === void 0 ? void 0 : override_query_id_[0];
+  const set_override_query_id = override_query_id_ === null || override_query_id_ === void 0 ? void 0 : override_query_id_[1];
   const current_sorting_ = (0, $52FdA$solidjs.createSignal)();
   const selected_filters_ = (0, $52FdA$solidjs.createSignal)([]);
   const sideways_filter_clearing_flag_ = (0, $52FdA$solidjs.createSignal)(false);
@@ -6580,6 +6586,12 @@ function $5dd9d0d3ea82e2dd$export$477caf01aecaeb2a(options) {
         const found_query = searchParams.get(search_query_url_param_name_);
         set_search_query(found_query || "");
       }
+      if (override_query_id_query_param_names_) {
+        const found_override_query_id = override_query_id_query_param_names_.map(n => searchParams.get(n)).find(n => n);
+        set_override_query_id(found_override_query_id || null);
+        if (found_override_query_id) (0, $52FdA$depictaiutilishared.dlog)("Found override query id:", found_override_query_id); // This stuff might get confusing so better log it
+      }
+
       if (searchParams.get((0, $a68b73fd7ba0853f$export$cf5feb2102aec7f2)) === "true") set_has_sideways_filter_clearing_flag(true);
       if (!writer_started) {
         // The owner here is the createComputed which gets disposed the next time the computation runs - but we actually just want to delay the start of the href_writer until our signals contain the current value of the URL, therefore the runWithOwner
@@ -6603,7 +6615,10 @@ function $5dd9d0d3ea82e2dd$export$477caf01aecaeb2a(options) {
       search_query_accessor_: get_search_query_
     } : {
       sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
-    })
+    }),
+    ...(typeof override_query_id_query_param_names_ === "object" ? {
+      override_query_id_accessor_: get_override_query_id_
+    } : {})
   };
 }
 /**
@@ -6838,6 +6853,7 @@ var $9cbefc32b9dab36d$var$_merchant_signal = /*#__PURE__*/new WeakMap();
 var $9cbefc32b9dab36d$var$_market_signal = /*#__PURE__*/new WeakMap();
 var $9cbefc32b9dab36d$var$_query_id_signal = /*#__PURE__*/new WeakMap();
 var $9cbefc32b9dab36d$var$_meta_title_suffix_ = /*#__PURE__*/new WeakMap();
+var $9cbefc32b9dab36d$var$_disable_override_query_id = /*#__PURE__*/new WeakMap();
 var $9cbefc32b9dab36d$var$_listing_type_signal = /*#__PURE__*/new WeakMap();
 class $9cbefc32b9dab36d$export$f34314aa9505732e {
   get localization() {
@@ -6877,6 +6893,12 @@ class $9cbefc32b9dab36d$export$f34314aa9505732e {
   set meta_title_suffix(new_suffix) {
     (0, $parcel$interopDefault($52FdA$babelruntimehelpersclassPrivateFieldGet))(this, $9cbefc32b9dab36d$var$_meta_title_suffix_)[1](new_suffix);
   }
+  get disable_override_query_id() {
+    return (0, $parcel$interopDefault($52FdA$babelruntimehelpersclassPrivateFieldGet))(this, $9cbefc32b9dab36d$var$_disable_override_query_id)[0]();
+  }
+  set disable_override_query_id(new_value) {
+    (0, $parcel$interopDefault($52FdA$babelruntimehelpersclassPrivateFieldGet))(this, $9cbefc32b9dab36d$var$_disable_override_query_id)[1](new_value);
+  }
   get on_navigation() {
     // The only non-reactive public property on the class (I don't see it making sense to have it reactive)
     return (0, $parcel$interopDefault($52FdA$babelruntimehelpersclassPrivateFieldGet))(this, $9cbefc32b9dab36d$var$_router).on_navigation_;
@@ -6918,6 +6940,10 @@ class $9cbefc32b9dab36d$export$f34314aa9505732e {
       writable: true,
       value: (0, $52FdA$solidjs.createSignal)()
     });
+    $9cbefc32b9dab36d$var$_classPrivateFieldInitSpec(this, $9cbefc32b9dab36d$var$_disable_override_query_id, {
+      writable: true,
+      value: (0, $52FdA$solidjs.createSignal)()
+    });
     $9cbefc32b9dab36d$var$_classPrivateFieldInitSpec(this, $9cbefc32b9dab36d$var$_listing_type_signal, {
       writable: true,
       value: (0, $52FdA$solidjs.createSignal)()
@@ -6931,16 +6957,19 @@ class $9cbefc32b9dab36d$export$f34314aa9505732e {
       (0, $cfcd56242923775d$export$5162a71f252e6122)();
       (0, $parcel$interopDefault($52FdA$babelruntimehelpersclassPrivateFieldSet))(this, $9cbefc32b9dab36d$var$_router, new (0, $73014ff36186a4dd$export$7e1297a3a19f10d8)("hard_navigation", query_id_state_key));
       if (on_navigation) (0, $parcel$interopDefault($52FdA$babelruntimehelpersclassPrivateFieldGet))(this, $9cbefc32b9dab36d$var$_router).on_navigation_ = on_navigation;
+      const override_query_id_query_param_names_ = ["query_id_" + unique_instance_key_for_state, "query_id"]; // If you're wondering why this is an array https://gitlab.com/depict-ai/depict.ai/-/merge_requests/7958#note_1511700842
       const sorting_query_param_ = "sorting" + unique_instance_key_for_state;
       const filter_query_param_prefix_ = "f" + unique_instance_key_for_state + "_";
       const {
         selected_filters_: selected_filters_,
         current_sorting_: current_sorting_,
-        sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
+        sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
+        override_query_id_accessor_: override_query_id_accessor_
       } = (0, $5dd9d0d3ea82e2dd$export$477caf01aecaeb2a)({
         router_: (0, $parcel$interopDefault($52FdA$babelruntimehelpersclassPrivateFieldGet))(this, $9cbefc32b9dab36d$var$_router),
         sorting_query_param_: sorting_query_param_,
-        filter_query_param_prefix_: filter_query_param_prefix_
+        filter_query_param_prefix_: filter_query_param_prefix_,
+        override_query_id_query_param_names_: override_query_id_query_param_names_
       });
       const [reset_history_state_, state_] = (0, $2b15291bd38ac551$export$9862539c89138352)({
         get_default_values_: () => ({
@@ -6970,6 +6999,7 @@ class $9cbefc32b9dab36d$export$f34314aa9505732e {
         router_: (0, $parcel$interopDefault($52FdA$babelruntimehelpersclassPrivateFieldGet))(this, $9cbefc32b9dab36d$var$_router),
         selected_filters_: selected_filters_,
         current_sorting_: current_sorting_,
+        override_query_id_accessor_: override_query_id_accessor_,
         sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
         sorting_query_param_: sorting_query_param_,
         filter_query_param_prefix_: filter_query_param_prefix_
@@ -6979,6 +7009,11 @@ class $9cbefc32b9dab36d$export$f34314aa9505732e {
     });
   }
 }
+/**
+ * This is the CategoryPage component visible outside - exported from @depict-ai/ui.
+ * It wraps the internal, pure CategoryPage component and connects it to the DepictCategory instance and other global state such as the history or page URL.
+ * It is wrapped once again in the js-ui and react-ui packages which exports the final, most simplified interface.
+ */
 var $9cbefc32b9dab36d$var$_keys_constructed_with = {
   writable: true,
   value: new Set()
@@ -7020,6 +7055,7 @@ function $9cbefc32b9dab36d$export$e2bf8ce7779e827e(props) {
       },
       current_sorting_: current_sorting_,
       selected_filters_: selected_filters_,
+      override_query_id_accessor_: override_query_id_accessor_,
       reset_history_state_: reset_history_state_,
       depict_api_: depict_api_,
       i18n_: i18n_,
@@ -7037,8 +7073,8 @@ function $9cbefc32b9dab36d$export$e2bf8ce7779e827e(props) {
       depict_api_: depict_api_,
       min_products_to_fetch_: $9cbefc32b9dab36d$var$min_products_to_fetch_,
       local_filter_cache_: local_filter_cache_,
+      query_id_: (0, $52FdA$solidjs.createMemo)(() => !depict_category.disable_override_query_id && override_query_id_accessor_() || depict_category.category_id),
       meta_title_suffix_: () => depict_category.meta_title_suffix,
-      query_id_: () => depict_category.category_id,
       listing_type_: () => depict_category.listing_type,
       i18n_: i18n_,
       show_quicklinks_: (0, $52FdA$solidjs.createMemo)(() => {

package/ES10/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "1.4.9";
+export const version = "1.4.11";
 export function ExpandingDetails(props: {
   details_: HTMLDetailsElement;
   summary_: HTMLElement;
@@ -550,6 +550,8 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
   set listing_type(listing_type: ListingType | undefined);
   get meta_title_suffix(): string | undefined;
   set meta_title_suffix(new_suffix: string | undefined);
+  get disable_override_query_id(): boolean | undefined;
+  set disable_override_query_id(new_value: boolean | undefined);
   get on_navigation(): OnNavigation;
   set on_navigation(new_function: OnNavigation);
   constructor({
@@ -562,6 +564,11 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
     ...props_on_class
   }: DepictCategoryConstructorOptions<InputDisplay, OutputDisplay>);
 }
+/**
+ * This is the CategoryPage component visible outside - exported from @depict-ai/ui.
+ * It wraps the internal, pure CategoryPage component and connects it to the DepictCategory instance and other global state such as the history or page URL.
+ * It is wrapped once again in the js-ui and react-ui packages which exports the final, most simplified interface.
+ */
 export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: {
   depict_category: DepictCategory<OriginalDisplay, OutputDisplay>;
   grid_spacing: SDKGridSpacing;
@@ -697,6 +704,11 @@ export class DepictSearch<InputDisplay extends Display, OutputDisplay extends Mo
   set market(market: string);
   fetchSearchResults(query: string, filters?: SearchFilter[], maxResults?: number): Promise<([OutputDisplay] extends [never] ? InputDisplay : ModernDisplayWithPageUrl<OutputDisplay>)[]>;
 }
+/**
+ * This is the SearchPage component visible outside - exported from @depict-ai/ui.
+ * It wraps the internal, pure SearchPage component and connects it to the DepictSearch instance and other global state such as the history or page URL.
+ * It is wrapped once again in the js-ui and react-ui packages which exports the final, most simplified interface.
+ */
 export function SearchPage<OriginalDisplay extends Display, TransformedDisplay extends never | ModernDisplay>(props: {
   depict_search: DepictSearch<OriginalDisplay, TransformedDisplay>;
   include_input_field?: boolean | {
@@ -819,9 +831,18 @@ export type BaseSearchProviderConfig = {
 };
 export type BaseCategoryProviderConfig = {
   /**
-   * Currently used for SEO long tail only. Example: {generatedTitle} + {metaTitleSuffix}
+   * Currently used for SEO long tail only.
+   * Read more about SEO collections here https://docs.depict.ai/other-guides/seo-collections-guide/introduction
+   * @default ""
+   * @example
+   * If the generated SEO title is "Blue Jeans", and you specify metaTitleSuffix to " | My Store", the final SEO title will be "Blue Jeans | My Store".
    */
   metaTitleSuffix?: string;
+  /**
+   * The parameter `query_id=` will override the regular category id that you have configured your SDK to use. You can consider the `query_id` as an escape-hatch if you want to easily set a category id.
+   * However, if your page already sets a query_id, you can disable this behaviour by setting this property to `true` (to avoid a conflict).
+   */
+  disableOverrideQueryId?: boolean;
 };
 export interface BaseProductListingConfig {
   /**

package/ES10/index.js

@@ -8,7 +8,7 @@ import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/def
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "1.4.9";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "1.4.11";
 function $8e8b179489080711$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -6115,12 +6115,14 @@ function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
     return (_plp_results_4 = plp_results_()) === null || _plp_results_4 === void 0 ? void 0 : _plp_results_4.quick_links;
   });
   const meta_tag_data_ = (0, $8tj43$createMemo)(() => {
-    var _plp_results_5, _plp_results_5$metada, _plp_results_6, _plp_results_6$metada, _plp_results_7, _plp_results_7$metada;
-    meta_title_suffix_();
-    return (_plp_results_5 = plp_results_()) !== null && _plp_results_5 !== void 0 && (_plp_results_5$metada = _plp_results_5.metadata) !== null && _plp_results_5$metada !== void 0 && _plp_results_5$metada.replace_meta_tags ? {
-      title: ((_plp_results_6 = plp_results_()) === null || _plp_results_6 === void 0 ? void 0 : (_plp_results_6$metada = _plp_results_6.metadata) === null || _plp_results_6$metada === void 0 ? void 0 : _plp_results_6$metada.title) + (meta_title_suffix_() || ""),
-      description: (_plp_results_7 = plp_results_()) === null || _plp_results_7 === void 0 ? void 0 : (_plp_results_7$metada = _plp_results_7.metadata) === null || _plp_results_7$metada === void 0 ? void 0 : _plp_results_7$metada.description
-    } : null;
+    var _plp_results_5, _plp_results_5$metada;
+    if ((_plp_results_5 = plp_results_()) !== null && _plp_results_5 !== void 0 && (_plp_results_5$metada = _plp_results_5.metadata) !== null && _plp_results_5$metada !== void 0 && _plp_results_5$metada.replace_meta_tags) {
+      var _plp_results_6, _plp_results_6$metada, _plp_results_7, _plp_results_7$metada;
+      return {
+        title: ((_plp_results_6 = plp_results_()) === null || _plp_results_6 === void 0 ? void 0 : (_plp_results_6$metada = _plp_results_6.metadata) === null || _plp_results_6$metada === void 0 ? void 0 : _plp_results_6$metada.title) + (meta_title_suffix_() || ""),
+        description: (_plp_results_7 = plp_results_()) === null || _plp_results_7 === void 0 ? void 0 : (_plp_results_7$metada = _plp_results_7.metadata) === null || _plp_results_7$metada === void 0 ? void 0 : _plp_results_7$metada.description
+      };
+    }
   });
   (0, $8tj43$edit_current_page_meta_tags)(meta_tag_data_);
   const [sort_or_filter_open_, set_sort_or_filter_open_] = (0, $8tj43$createSignal)(false);
@@ -6476,8 +6478,12 @@ function $9d3d794b62318ecc$export$477caf01aecaeb2a(options) {
   const router_ = options.router_;
   const search_query_url_param_name_ = "search_query_url_param_name_" in options ? options.search_query_url_param_name_ : undefined;
   const search_query_ = search_query_url_param_name_ ? (0, $8tj43$createSignal)("") : undefined;
+  const override_query_id_query_param_names_ = "override_query_id_query_param_names_" in options ? options.override_query_id_query_param_names_ : undefined;
+  const override_query_id_ = override_query_id_query_param_names_ ? (0, $8tj43$createSignal)(null) : undefined;
   const get_search_query_ = search_query_ === null || search_query_ === void 0 ? void 0 : search_query_[0];
   const set_search_query = search_query_ === null || search_query_ === void 0 ? void 0 : search_query_[1];
+  const get_override_query_id_ = override_query_id_ === null || override_query_id_ === void 0 ? void 0 : override_query_id_[0];
+  const set_override_query_id = override_query_id_ === null || override_query_id_ === void 0 ? void 0 : override_query_id_[1];
   const current_sorting_ = (0, $8tj43$createSignal)();
   const selected_filters_ = (0, $8tj43$createSignal)([]);
   const sideways_filter_clearing_flag_ = (0, $8tj43$createSignal)(false);
@@ -6528,6 +6534,12 @@ function $9d3d794b62318ecc$export$477caf01aecaeb2a(options) {
         const found_query = searchParams.get(search_query_url_param_name_);
         set_search_query(found_query || "");
       }
+      if (override_query_id_query_param_names_) {
+        const found_override_query_id = override_query_id_query_param_names_.map(n => searchParams.get(n)).find(n => n);
+        set_override_query_id(found_override_query_id || null);
+        if (found_override_query_id) (0, $8tj43$dlog)("Found override query id:", found_override_query_id); // This stuff might get confusing so better log it
+      }
+
       if (searchParams.get((0, $2855bffe06ef7a03$export$cf5feb2102aec7f2)) === "true") set_has_sideways_filter_clearing_flag(true);
       if (!writer_started) {
         // The owner here is the createComputed which gets disposed the next time the computation runs - but we actually just want to delay the start of the href_writer until our signals contain the current value of the URL, therefore the runWithOwner
@@ -6551,7 +6563,10 @@ function $9d3d794b62318ecc$export$477caf01aecaeb2a(options) {
       search_query_accessor_: get_search_query_
     } : {
       sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
-    })
+    }),
+    ...(typeof override_query_id_query_param_names_ === "object" ? {
+      override_query_id_accessor_: get_override_query_id_
+    } : {})
   };
 }
 /**
@@ -6786,6 +6801,7 @@ var $f5f54892fd0c7d9f$var$_merchant_signal = /*#__PURE__*/new WeakMap();
 var $f5f54892fd0c7d9f$var$_market_signal = /*#__PURE__*/new WeakMap();
 var $f5f54892fd0c7d9f$var$_query_id_signal = /*#__PURE__*/new WeakMap();
 var $f5f54892fd0c7d9f$var$_meta_title_suffix_ = /*#__PURE__*/new WeakMap();
+var $f5f54892fd0c7d9f$var$_disable_override_query_id = /*#__PURE__*/new WeakMap();
 var $f5f54892fd0c7d9f$var$_listing_type_signal = /*#__PURE__*/new WeakMap();
 class $f5f54892fd0c7d9f$export$f34314aa9505732e {
   get localization() {
@@ -6825,6 +6841,12 @@ class $f5f54892fd0c7d9f$export$f34314aa9505732e {
   set meta_title_suffix(new_suffix) {
     (0, $8tj43$babelruntimehelpersclassPrivateFieldGet)(this, $f5f54892fd0c7d9f$var$_meta_title_suffix_)[1](new_suffix);
   }
+  get disable_override_query_id() {
+    return (0, $8tj43$babelruntimehelpersclassPrivateFieldGet)(this, $f5f54892fd0c7d9f$var$_disable_override_query_id)[0]();
+  }
+  set disable_override_query_id(new_value) {
+    (0, $8tj43$babelruntimehelpersclassPrivateFieldGet)(this, $f5f54892fd0c7d9f$var$_disable_override_query_id)[1](new_value);
+  }
   get on_navigation() {
     // The only non-reactive public property on the class (I don't see it making sense to have it reactive)
     return (0, $8tj43$babelruntimehelpersclassPrivateFieldGet)(this, $f5f54892fd0c7d9f$var$_router).on_navigation_;
@@ -6866,6 +6888,10 @@ class $f5f54892fd0c7d9f$export$f34314aa9505732e {
       writable: true,
       value: (0, $8tj43$createSignal)()
     });
+    $f5f54892fd0c7d9f$var$_classPrivateFieldInitSpec(this, $f5f54892fd0c7d9f$var$_disable_override_query_id, {
+      writable: true,
+      value: (0, $8tj43$createSignal)()
+    });
     $f5f54892fd0c7d9f$var$_classPrivateFieldInitSpec(this, $f5f54892fd0c7d9f$var$_listing_type_signal, {
       writable: true,
       value: (0, $8tj43$createSignal)()
@@ -6879,16 +6905,19 @@ class $f5f54892fd0c7d9f$export$f34314aa9505732e {
       (0, $68e6625c8d51f847$export$5162a71f252e6122)();
       (0, $8tj43$babelruntimehelpersclassPrivateFieldSet)(this, $f5f54892fd0c7d9f$var$_router, new (0, $ac571292d606f30b$export$7e1297a3a19f10d8)("hard_navigation", query_id_state_key));
       if (on_navigation) (0, $8tj43$babelruntimehelpersclassPrivateFieldGet)(this, $f5f54892fd0c7d9f$var$_router).on_navigation_ = on_navigation;
+      const override_query_id_query_param_names_ = ["query_id_" + unique_instance_key_for_state, "query_id"]; // If you're wondering why this is an array https://gitlab.com/depict-ai/depict.ai/-/merge_requests/7958#note_1511700842
       const sorting_query_param_ = "sorting" + unique_instance_key_for_state;
       const filter_query_param_prefix_ = "f" + unique_instance_key_for_state + "_";
       const {
         selected_filters_: selected_filters_,
         current_sorting_: current_sorting_,
-        sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
+        sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
+        override_query_id_accessor_: override_query_id_accessor_
       } = (0, $9d3d794b62318ecc$export$477caf01aecaeb2a)({
         router_: (0, $8tj43$babelruntimehelpersclassPrivateFieldGet)(this, $f5f54892fd0c7d9f$var$_router),
         sorting_query_param_: sorting_query_param_,
-        filter_query_param_prefix_: filter_query_param_prefix_
+        filter_query_param_prefix_: filter_query_param_prefix_,
+        override_query_id_query_param_names_: override_query_id_query_param_names_
       });
       const [reset_history_state_, state_] = (0, $bc811d9630f9579b$export$9862539c89138352)({
         get_default_values_: () => ({
@@ -6918,6 +6947,7 @@ class $f5f54892fd0c7d9f$export$f34314aa9505732e {
         router_: (0, $8tj43$babelruntimehelpersclassPrivateFieldGet)(this, $f5f54892fd0c7d9f$var$_router),
         selected_filters_: selected_filters_,
         current_sorting_: current_sorting_,
+        override_query_id_accessor_: override_query_id_accessor_,
         sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
         sorting_query_param_: sorting_query_param_,
         filter_query_param_prefix_: filter_query_param_prefix_
@@ -6927,6 +6957,11 @@ class $f5f54892fd0c7d9f$export$f34314aa9505732e {
     });
   }
 }
+/**
+ * This is the CategoryPage component visible outside - exported from @depict-ai/ui.
+ * It wraps the internal, pure CategoryPage component and connects it to the DepictCategory instance and other global state such as the history or page URL.
+ * It is wrapped once again in the js-ui and react-ui packages which exports the final, most simplified interface.
+ */
 var $f5f54892fd0c7d9f$var$_keys_constructed_with = {
   writable: true,
   value: new Set()
@@ -6968,6 +7003,7 @@ function $f5f54892fd0c7d9f$export$e2bf8ce7779e827e(props) {
       },
       current_sorting_: current_sorting_,
       selected_filters_: selected_filters_,
+      override_query_id_accessor_: override_query_id_accessor_,
       reset_history_state_: reset_history_state_,
       depict_api_: depict_api_,
       i18n_: i18n_,
@@ -6985,8 +7021,8 @@ function $f5f54892fd0c7d9f$export$e2bf8ce7779e827e(props) {
       depict_api_: depict_api_,
       min_products_to_fetch_: $f5f54892fd0c7d9f$var$min_products_to_fetch_,
       local_filter_cache_: local_filter_cache_,
+      query_id_: (0, $8tj43$createMemo)(() => !depict_category.disable_override_query_id && override_query_id_accessor_() || depict_category.category_id),
       meta_title_suffix_: () => depict_category.meta_title_suffix,
-      query_id_: () => depict_category.category_id,
       listing_type_: () => depict_category.listing_type,
       i18n_: i18n_,
       show_quicklinks_: (0, $8tj43$createMemo)(() => {

package/latest/index.cjs

@@ -54,7 +54,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "1.4.9";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "1.4.11";
 function $4b455f60dadde8b8$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -5733,11 +5733,10 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   const crumb_data_ = (0, $gVhhF$solidjs.createMemo)(() => plp_results_()?.breadcrumb);
   const quicklinks_data_ = (0, $gVhhF$solidjs.createMemo)(() => plp_results_()?.quick_links);
   const meta_tag_data_ = (0, $gVhhF$solidjs.createMemo)(() => {
-    meta_title_suffix_();
-    return plp_results_()?.metadata?.replace_meta_tags ? {
+    if (plp_results_()?.metadata?.replace_meta_tags) return {
       title: plp_results_()?.metadata?.title + (meta_title_suffix_() || ""),
       description: plp_results_()?.metadata?.description
-    } : null;
+    };
   });
   (0, $gVhhF$depictaiutilishared.edit_current_page_meta_tags)(meta_tag_data_);
   const [sort_or_filter_open_, set_sort_or_filter_open_] = (0, $gVhhF$solidjs.createSignal)(false);
@@ -6076,8 +6075,12 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
   const router_ = options.router_;
   const search_query_url_param_name_ = "search_query_url_param_name_" in options ? options.search_query_url_param_name_ : undefined;
   const search_query_ = search_query_url_param_name_ ? (0, $gVhhF$solidjs.createSignal)("") : undefined;
+  const override_query_id_query_param_names_ = "override_query_id_query_param_names_" in options ? options.override_query_id_query_param_names_ : undefined;
+  const override_query_id_ = override_query_id_query_param_names_ ? (0, $gVhhF$solidjs.createSignal)(null) : undefined;
   const get_search_query_ = search_query_?.[0];
   const set_search_query = search_query_?.[1];
+  const get_override_query_id_ = override_query_id_?.[0];
+  const set_override_query_id = override_query_id_?.[1];
   const current_sorting_ = (0, $gVhhF$solidjs.createSignal)();
   const selected_filters_ = (0, $gVhhF$solidjs.createSignal)([]);
   const sideways_filter_clearing_flag_ = (0, $gVhhF$solidjs.createSignal)(false);
@@ -6122,6 +6125,12 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
         const found_query = searchParams.get(search_query_url_param_name_);
         set_search_query(found_query || "");
       }
+      if (override_query_id_query_param_names_) {
+        const found_override_query_id = override_query_id_query_param_names_.map(n => searchParams.get(n)).find(n => n);
+        set_override_query_id(found_override_query_id || null);
+        if (found_override_query_id) (0, $gVhhF$depictaiutilishared.dlog)("Found override query id:", found_override_query_id); // This stuff might get confusing so better log it
+      }
+
       if (searchParams.get((0, $1ab22f2cd39b3061$export$cf5feb2102aec7f2)) === "true") set_has_sideways_filter_clearing_flag(true);
       if (!writer_started) {
         // The owner here is the createComputed which gets disposed the next time the computation runs - but we actually just want to delay the start of the href_writer until our signals contain the current value of the URL, therefore the runWithOwner
@@ -6145,7 +6154,10 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
       search_query_accessor_: get_search_query_
     } : {
       sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
-    })
+    }),
+    ...(typeof override_query_id_query_param_names_ === "object" ? {
+      override_query_id_accessor_: get_override_query_id_
+    } : {})
   };
 }
 /**
@@ -6331,6 +6343,7 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
   #market_signal = (0, $gVhhF$solidjs.createSignal)();
   #query_id_signal = (0, $gVhhF$solidjs.createSignal)("");
   #meta_title_suffix_ = (0, $gVhhF$solidjs.createSignal)();
+  #disable_override_query_id = (0, $gVhhF$solidjs.createSignal)();
   #listing_type_signal = (0, $gVhhF$solidjs.createSignal)();
   static #keys_constructed_with = new Set();
   get localization() {
@@ -6370,6 +6383,12 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
   set meta_title_suffix(new_suffix) {
     this.#meta_title_suffix_[1](new_suffix);
   }
+  get disable_override_query_id() {
+    return this.#disable_override_query_id[0]();
+  }
+  set disable_override_query_id(new_value) {
+    this.#disable_override_query_id[1](new_value);
+  }
   get on_navigation() {
     // The only non-reactive public property on the class (I don't see it making sense to have it reactive)
     return this.#router.on_navigation_;
@@ -6395,16 +6414,19 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
       (0, $d84fe647b84b5dc5$export$5162a71f252e6122)();
       this.#router = new (0, $e96dd13889871fc0$export$7e1297a3a19f10d8)("hard_navigation", query_id_state_key);
       if (on_navigation) this.#router.on_navigation_ = on_navigation;
+      const override_query_id_query_param_names_ = ["query_id_" + unique_instance_key_for_state, "query_id"]; // If you're wondering why this is an array https://gitlab.com/depict-ai/depict.ai/-/merge_requests/7958#note_1511700842
       const sorting_query_param_ = "sorting" + unique_instance_key_for_state;
       const filter_query_param_prefix_ = "f" + unique_instance_key_for_state + "_";
       const {
         selected_filters_: selected_filters_,
         current_sorting_: current_sorting_,
-        sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
+        sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
+        override_query_id_accessor_: override_query_id_accessor_
       } = (0, $c79fd10a3ab7d6e0$export$477caf01aecaeb2a)({
         router_: this.#router,
         sorting_query_param_: sorting_query_param_,
-        filter_query_param_prefix_: filter_query_param_prefix_
+        filter_query_param_prefix_: filter_query_param_prefix_,
+        override_query_id_query_param_names_: override_query_id_query_param_names_
       });
       const [reset_history_state_, state_] = (0, $26a56f6b44703084$export$9862539c89138352)({
         get_default_values_: () => ({
@@ -6434,6 +6456,7 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
         router_: this.#router,
         selected_filters_: selected_filters_,
         current_sorting_: current_sorting_,
+        override_query_id_accessor_: override_query_id_accessor_,
         sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
         sorting_query_param_: sorting_query_param_,
         filter_query_param_prefix_: filter_query_param_prefix_
@@ -6480,6 +6503,7 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e(props) {
       },
       current_sorting_: current_sorting_,
       selected_filters_: selected_filters_,
+      override_query_id_accessor_: override_query_id_accessor_,
       reset_history_state_: reset_history_state_,
       depict_api_: depict_api_,
       i18n_: i18n_,
@@ -6497,8 +6521,8 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e(props) {
       depict_api_: depict_api_,
       min_products_to_fetch_: $48567ac5b39bac56$var$min_products_to_fetch_,
       local_filter_cache_: local_filter_cache_,
+      query_id_: (0, $gVhhF$solidjs.createMemo)(() => !depict_category.disable_override_query_id && override_query_id_accessor_() || depict_category.category_id),
       meta_title_suffix_: () => depict_category.meta_title_suffix,
-      query_id_: () => depict_category.category_id,
       listing_type_: () => depict_category.listing_type,
       i18n_: i18n_,
       show_quicklinks_: (0, $gVhhF$solidjs.createMemo)(() => props.show_quicklinks ?? true),

package/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "1.4.9";
+export const version = "1.4.11";
 export function ExpandingDetails(props: {
   details_: HTMLDetailsElement;
   summary_: HTMLElement;
@@ -550,6 +550,8 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
   set listing_type(listing_type: ListingType | undefined);
   get meta_title_suffix(): string | undefined;
   set meta_title_suffix(new_suffix: string | undefined);
+  get disable_override_query_id(): boolean | undefined;
+  set disable_override_query_id(new_value: boolean | undefined);
   get on_navigation(): OnNavigation;
   set on_navigation(new_function: OnNavigation);
   constructor({
@@ -562,6 +564,11 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
     ...props_on_class
   }: DepictCategoryConstructorOptions<InputDisplay, OutputDisplay>);
 }
+/**
+ * This is the CategoryPage component visible outside - exported from @depict-ai/ui.
+ * It wraps the internal, pure CategoryPage component and connects it to the DepictCategory instance and other global state such as the history or page URL.
+ * It is wrapped once again in the js-ui and react-ui packages which exports the final, most simplified interface.
+ */
 export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: {
   depict_category: DepictCategory<OriginalDisplay, OutputDisplay>;
   grid_spacing: SDKGridSpacing;
@@ -697,6 +704,11 @@ export class DepictSearch<InputDisplay extends Display, OutputDisplay extends Mo
   set market(market: string);
   fetchSearchResults(query: string, filters?: SearchFilter[], maxResults?: number): Promise<([OutputDisplay] extends [never] ? InputDisplay : ModernDisplayWithPageUrl<OutputDisplay>)[]>;
 }
+/**
+ * This is the SearchPage component visible outside - exported from @depict-ai/ui.
+ * It wraps the internal, pure SearchPage component and connects it to the DepictSearch instance and other global state such as the history or page URL.
+ * It is wrapped once again in the js-ui and react-ui packages which exports the final, most simplified interface.
+ */
 export function SearchPage<OriginalDisplay extends Display, TransformedDisplay extends never | ModernDisplay>(props: {
   depict_search: DepictSearch<OriginalDisplay, TransformedDisplay>;
   include_input_field?: boolean | {
@@ -819,9 +831,18 @@ export type BaseSearchProviderConfig = {
 };
 export type BaseCategoryProviderConfig = {
   /**
-   * Currently used for SEO long tail only. Example: {generatedTitle} + {metaTitleSuffix}
+   * Currently used for SEO long tail only.
+   * Read more about SEO collections here https://docs.depict.ai/other-guides/seo-collections-guide/introduction
+   * @default ""
+   * @example
+   * If the generated SEO title is "Blue Jeans", and you specify metaTitleSuffix to " | My Store", the final SEO title will be "Blue Jeans | My Store".
    */
   metaTitleSuffix?: string;
+  /**
+   * The parameter `query_id=` will override the regular category id that you have configured your SDK to use. You can consider the `query_id` as an escape-hatch if you want to easily set a category id.
+   * However, if your page already sets a query_id, you can disable this behaviour by setting this property to `true` (to avoid a conflict).
+   */
+  disableOverrideQueryId?: boolean;
 };
 export interface BaseProductListingConfig {
   /**