Hi,
we are using the @klevu-core for the project, developed using Next Js and we want to run some snippet code after search functionality which is available in klevu documentation, I referred to the functionality of SearchResultPage.tsx from GitHub pages. Also, I used the same functionality from Klevu Documentation but render it multiple times like 3 to 4 times. So is there any solution for running snippet code after the search functionality and a solution to prevent multiple renders in use callback function? We refer below documentation for our Project.
const initialFetch = useCallback(async () => {
const modifiers = [
listFilters({
include: ["color", "", "size", "designer"],
rangeFilterSettings: [
{
key: "klevu_price",
minMax: true,
},
],
filterManager: manager,
}),
applyFilterWithManager(manager),
sendSearchEvent(),
]
if (props.personlisationEnabled) {
modifiers.push(personalisation())
}
const functions = [
search(
query.get("q"),
{
id: "search",
limit: 36,
sort: sorting,
},
...modifiers
),
]
const res = await KlevuFetch(...functions)
const searchResult = res.queriesById("search")
if (!searchResult) {
return
}
nextFunc = searchResult.next
clickManager = searchResult.getSearchClickSendEvent()
setShowMore(Boolean(searchResult.next))
setOptions(manager.options)
setSliders(manager.sliders)
setProducts(searchResult.records ?? [])
}, [sorting, query])
const fetchMore = async () => {
const nextRes = await nextFunc({
filterManager: manager,
})
const searchResult = nextRes.queriesById("search")
setProducts([...products, ...(searchResult?.records ?? [])])
nextFunc = searchResult.next
setShowMore(Boolean(searchResult.next))
}
const handleFilterUpdate = () => {
setOptions(manager.options)
setSliders(manager.sliders)
initialFetch()
}
React.useEffect(() => {
const stop = KlevuListenDomEvent(
KlevuDomEvents.FilterSelectionUpdate,
handleFilterUpdate
)
// cleanup this component
return () => {
stop()
}
}, [location.pathname, query, sorting])
useEffect(() => {
initialFetch()
}, [sorting, query, location.pathname])
Hi,
we are using the @klevu-core for the project, developed using Next Js and we want to run some snippet code after search functionality which is available in klevu documentation, I referred to the functionality of SearchResultPage.tsx from GitHub pages. Also, I used the same functionality from Klevu Documentation but render it multiple times like 3 to 4 times. So is there any solution for running snippet code after the search functionality and a solution to prevent multiple renders in use callback function? We refer below documentation for our Project.
const initialFetch = useCallback(async () => {
const modifiers = [
listFilters({
include: ["color", "", "size", "designer"],
rangeFilterSettings: [
{
key: "klevu_price",
minMax: true,
},
],
filterManager: manager,
}),
applyFilterWithManager(manager),
sendSearchEvent(),
]
}, [sorting, query])
const fetchMore = async () => {
const nextRes = await nextFunc({
filterManager: manager,
})
}
const handleFilterUpdate = () => {
setOptions(manager.options)
setSliders(manager.sliders)
initialFetch()
}
React.useEffect(() => {
const stop = KlevuListenDomEvent(
KlevuDomEvents.FilterSelectionUpdate,
handleFilterUpdate
)
}, [location.pathname, query, sorting])
useEffect(() => {
initialFetch()
}, [sorting, query, location.pathname])