spartacus-storefront - SPARTACUS 自定义 SearchboxComponent 服务

Question

问题:我正在处理自定义搜索框配置，因为我们的搜索 API 端点需要 3 个额外参数。应使用动态参数调用端点。

https://localhost:9002/occ/v2/{baseSiteId}/products/customsearch/param1/param2/param3?query=xyz&pageSize=5&lang=en&curr=USD&currentPage=1

到目前为止，我已收到以下说明:

The searchbox component is delegating the actual search to the SearchBoxComponentService. This service is using the SearchboxService which is a facade around the central store and lower level connectors/adapters. The search box configuration is passed into the facade/store, which you could use to extend the search query that is ending up at the backend.

You should start providing a custom version of SearchBoxComponentService, and override the search() method. If the additional search parameters would match the endpoint configuration query parameters, I believe you're good to go, but honestly i'm doing this from top of head so I might miss something.

基于以上我想出了以下几点:

search(query: string, config: SearchBoxConfig): Observable<SearchResults> {
    if (!query || query === '') {
        this.clearResults();
        return;
    }

    if (
        config.minCharactersBeforeRequest &&
        query.length < config.minCharactersBeforeRequest
    ) {
        return;
    }

    if (config.displayProducts) {
        this.ProductSearch(query, {
        pageSize: config.maxProducts,
        }).subscribe(data => {
        return data;
        }, error => {
        });
    }

    if (config.displaySuggestions) {
        this.searchService.searchSuggestions(query, {
        pageSize: config.maxSuggestions,
        });
    }
}

    
// tslint:disable-next-line: typedef
ProductSearch(query: string, searchConfig?: SearchConfig): Observable<SearchResults> {
    const pageSize = searchConfig.pageSize ? searchConfig.pageSize : 5;
    const currentPage = searchConfig.currentPage ? searchConfig.currentPage : 1;
    const fetchUrl = `${this.occEndpointsService.getBaseEndpoint()}/products/markethubsearch/${this.soldTo}/${this.shipTo}/${this.businessCategory}?query=${query}&pageSize=${pageSize}&lang=en&curr=USD&currentPage=${currentPage}`;
    
        return this.http.get<SearchResults>(fetchUrl, {
        params: new HttpParams().set('fields', 'FULL')
        });
}

但是，我仍然无法订阅 SearchResults 可观察对象。你能帮我解决这个问题吗？

Answer 1

感谢您的提问。我想当我最初回答你时，我忽略了一些事情。

首先，SearchBoxComponentService.search 不仅获取搜索配置并将其传递给 SearchboxService。它只从配置中获取细节。因此，我建议改写 SearchboxService，即:

@Injectable({
  providedIn: 'root',
})
export class CustomSearchboxService extends SearchboxService {
  search(query: string, config?: SearchConfig): void {
    super.search(query, { ...config, foo: 'bar' } as SearchConfig);
  }
}

使用此设置，您的配置将最终处于操作状态，因此可在 OccProductSearchAdapter 中使用。适配器将使用 searchConfig 创建端点。

您现在可以通过向 Spartacus 提供配置来使用动态参数来配置您的搜索端点:

provideConfig({
  backend: {
    occ: {
      endpoints: {
        productSearch:
          'products/search?fields=products(code)&foo=${foo}'
      }
    }
  }
})

但是，这将不允许动态路径属性。我会和团队谈谈，看看我们是否可以允许这样做。您也许可以更改端点以改为使用查询参数，这样您就可以开始了。

要使用路径参数，您需要评估这些方法:

• 自定义 OccProductSearchAdapter 并实现 getSearchEndpoint。您可以利用 searchConfig 参数并输入路径参数。
• 引入角度拦截器。这不是很干净，因为所有 http 请求都将通过此拦截器。