4

我们正在使用来自 Algolia 的 vue Instantsearch。

当用户使用一些初始 url 参数登陆页面时，algolia instantsearch 会加载初始搜索，并更改 url 以包含搜索参数。但是，当 algolia 重写 url 时，初始 url 参数不会保留，我们希望它们保留。即。

  • 落在/stuff?myparam=value
  • algolia 设置初始搜索结果并将 url 更改为并删除/stuff?refinementList=...url 参数。myparam有没有办法将其保留在网址中？
4

3 回答 3

0

令人难以置信的是，在整个互联网上没有一个简单的例子来解决这个问题这是我的镜头（vanilla JS）

const algoliaAppId = 'APP_ID';
const algoliaApiKey = 'API_KEY';
const algoliaIndex = 'instant_search';

const search = instantsearch({
  indexName: algoliaIndex,
  algoliasearch(algoliaAppId, algoliaApiKey),
  routing: {
    router: instantsearch.routers.history({

      createURL({ qsModule, location, routeState }) {
        // current search params 
        const indexState = routeState[algoliaIndex] || {};
        const { origin, pathname, hash, search } = location;
        // grab current query string and convert to object
        const queryParameters = qsModule.parse(search.slice(1)) || {};
        
        // if there is an active search
        if (Object.keys(indexState).length ){
          // merge the search params with the current query params
          Object.assign(queryParameters, routeState);
        }else{
          // remove the search params
          delete queryParameters[algoliaIndex];
        }

        let queryString = qsModule.stringify(queryParameters);

        if(queryString.length){
          queryString = `?${queryString}`;
        }

        return `${origin}${pathname}${queryString}${hash}`;
      },

    })
  }

});

search.start();
于 2022-02-08T22:48:23.880 回答
0

默认情况下，Vue InstantSearch 会覆盖查询参数。routing.router您可以通过Vue InstantSearch的选项控制在 URL 中呈现的内容。您可以为history路由器提供自定义createURL功能。您将能够在 URL 中保留“当前”参数。

于 2020-07-11T07:31:23.200 回答
-1

我们需要 ?lang=[LANG_CODE] 例如 ?lang=de 后跟 algolia 的东西。

这就是我们想出的：（注意常量 ICL_LANGUAGE_CODE 由 WPML (WordPress) 设置为当前语言。请记住，当搜索中没有参数时，它不需要有结尾 & 符号。

根据：

routing: '.$routing.'

其中 $routing 定义为：

            $routing = 'true'; // For base language
    if( $needs_custom_routing ) {
    $routing = '{
router: instantsearch.routers.history({

/*
  parseURL({ qsModule, location }) { return qsModule.parse(location.search.slice(1)); },
  */
  
createURL({ qsModule, location, routeState }) {
        const { origin, pathname, hash } = location;

        const queryParameters = {};
        if (routeState.query) {
            queryParameters.query = encodeURIComponent(routeState.query);
        }
        if (routeState.categories) {
            queryParameters.categories = routeState.categories.map(encodeURIComponent);
        }
        if (routeState.page !== 1) {
            queryParameters.page = routeState.page;
        }

    const queryString = qsModule.stringify(routeState);
                

    if( queryString ) {
        return `${origin}${pathname}?lang='.ICL_LANGUAGE_CODE.'&${queryString}`;
    } else {
        return `${origin}${pathname}?lang='.ICL_LANGUAGE_CODE.'`;   
    }
    
},      
  
})
} /* /routing */';
} // /needs_custom_routing
于 2020-12-24T13:13:49.203 回答