Insert items in hits comes at the end on page 2 & onwards

[Abhi-Tejuri]

Dear Team,

I am inserting items in the hits using transformItems.

Reference used to insert items https://codesandbox.io/s/instantsearchjs-app-forked-z4xh7?file=/src/app.js

On page 1 everything is fine but on page 2 and onwards the items added to the hits came at the end of the page

Refer to the screenshot attached for the issue.

Thanks in Advance

[jerome.schneider]

Hi! I worked on the sandbox you provided and could not reproduce the issue. I see the inserted items at the positions you set them to be, even on pages > 1.

Here’s the fork of your sandbox: https://codesandbox.io/s/instantsearchjs-app-forked-t7sqp?file=/src/app.js

[Abhi-Tejuri]

Yeah !!! In the sandbox, it seems to be working fine but when I am integrating it with my code base it seems to be behaving weirdly. And on the 2nd page onwards the inserted items are displayed at the end of the page. As shown in the screenshot attached

So, just wanted to check if any known issue has occurred previously or if you can guide me in the right direction to troubleshoot and resolve the issue

Thanks
@jerome.schneider

[jerome.schneider]

Hi,

I could not find a know issue about this on instantsearch.js.

Some pointers that might help:

• check your version of Instantsearch, and how it relates to the one you use on your sandbox
• check that the logic for transforming items is rigourously the same as on the sandbox
• check if your display logic is not interfering (templates that might be different?)
• check that it is not a CSS issue
• debug the transformItems() method in chrome or firefox, by setting a breakpoint on the code, and running step by step first on the codesandbox code, then on your implementation, to spot the difference in behaviour; you can trigger the debugger by setting a breakpoint manually on a code line inside the method, or by putting the expression debugger; as the first line of the method

Hope this helps,
Jerome

[Abhi-Tejuri]

Hi @jerome.schneider,

Sorry for the late response.

Yeah, the version is different from the one in a sandbox.

I am using
/*! InstantSearch.js 4.6.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch.js */

Check the sandbox for the issue https://codesandbox.io/s/instantsearchjs-app-forked-q5497?file=/index.html

Thanks.

[Abhi-Tejuri]

Hi @jerome.schneider & Team,

I was looking for options to add the items in hits using transformItems() but I was not able to find a solution that will help to figure this out.

The version of InstantSearch I am using is */*! InstantSearch.js 4.9.1 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch.js /

Do you have any detailed documentation for this to which I can refer to?

Thanks
Abhi

[eunjae.lee]

Hello @Abhi-Tejuri,
I guess using transformItems mutated hits and it might’ve duplicated the changes.

You can create a custom hits using connectHits. I’ve made this example for you:

instantsearch.js-app (forked) - CodeSandbox

It adds the manual items right before rendering. So it should be fine.
You can read this to learn more about customizing hits widget.

Let me know how it goes and if you have any question

[Abhi-Tejuri]

@eunjae.lee,

I tried implementing the sample you share to our code but still it is not working as expected.

Here is the sandbox created with the sample of our actual implementation

Hidubai deals sample - CodeSandbox

Please check and let me know what I am missing.

Thanks in Advance

[Abhi-Tejuri]

Hi @eunjae.lee & @jerome.schneider

Wish you a very Happy New Year !!!

I tried to customize the widget as you suggested but I wasn’t successful in rendering the items in the exact order as required.

Do you have any updates?

Thanks in Advance

[eunjae.lee]

Hello @Abhi-Tejuri
Sorry for the late response. I’m off, so didn’t see your message.

If I understand correctly, the custom items are correctly inserted after every 4 items.
Could you tell me what is wrong with the current result?