Vue storefront: how to override function inside helper?

Question

I need to modify 'preConfigureProduct' function under vuestorefront/core/modules/catalog/helpers/search.ts

https://github.com/vuestorefront/vue-storefront/blob/hotfix/v1.12.3/core/modules/catalog/helpers/search.ts#L51

I need to do the customisation based on my client requirement. Thus I need to override this function in my project. But there is no document about how to override one function from helper. I am also new in vue storefront, so I dont fully understand module extending or mixins.

Thanks in advance.

Answer 1

I have figured out by myself, I will leave a short answer for who is stuck as well. Additionally, I am not really sure it is a good practise, if you know a better way, leave it here please.

From what I understood is if you need to overwrite one function from helper, you also need to 'overwrite' the function which called your helper function.

In my case, I need to overwrite function preConfigureProduct , from module catalog helper.

The function called this preConfigureProduct is one asyc function configureProducts from module catalog-next, https://github.com/vuestorefront/vue-storefront/blob/hotfix/v1.12.3/core/modules/catalog-next/store/category/deprecatedActions.ts#L22. (I know it is deprecatedActions. It is my next job to figure out how to switch to new ones)

Thus, I extended module catalog-next, and literally copy paste configureProducts(because I dont need to modify it), but import preConfigureProduct to my new file.

import { preConfigureProduct } from './helpers/search'

my new search.ts file:

import Vue from 'vue';
import config from 'config';

export const preConfigureProduct = ({ product, populateRequestCacheTags }) => {
    .....
  return product;
};

That is it !

Hopefully it helps others. If there is any mistake, welcome to point it out.