Calculating the Price of a product based on customer's input

[Linny3D]

Hello,
im quite new to vendure and i really like it's architecture.
There is one problem i have though.

We are selling cutomizable ceramic products like poolsteps, kitchen counters and such. for example, we have a product with a base size (width, height and depth) and a base-price. The user should be able to freely customize the size of the product on the product-page. The final product-price should then be calculated based on the users input values.

(Think of a product configurator)

My question is:
Is it possible to re-calculate an individual price for a product before it gets added to the shopping cart?
How should we approach this?

best regards

[michaelbromley]

Hi! I'm happy to hear you are enjoying Vendure so far. In answer to your question, it sounds like you might want to use: https://www.vendure.io/docs/typescript-api/orders/order-item-price-calculation-strategy/

Take a look at that and let me know if it would handle your requirement.

[Linny3D]

Thank you very much. Your help is very much appreciated.
OrderItemPriceCalculationStrategy sounds exactly what i was looking for.
I will investigate that topic further on the weekend.

Thanks again for the really quick help.

[subinpauljoy]

Hi, Very new here. Trying to migrate from Woocommerce to vendure. looking for the same solution. Not sure how I would add the logic though. Creating a new plugin? Where do you keep the plugin files? is there any beginner friendly documentation? It would be great if there is a public git hub repo with the engraving text example

[michaelbromley]

Hi @subinpauljoy,
You can put the strategy in a plugin, but it is not strictly necessary since it can be passed directly to your VendureConfig object. My general rule of thumb is that if there are several config settings that belong to one logical unit of functionality, it makes sense to put them in a plugin. E.g. if you define a set of custom fields which are expected by the OrderItemPriceCalculationStrategy, this is one unit and can go in a plugin.

Where do you keep the plugin files?

One convention is to put them in /src/plugins, so you have a structure like this:

src/
├─ index.ts
├─ index-worker.ts
├─ vendure-config.ts
├─ plugins/
│  ├─ plugin1/
│  ├─ plugin2/

An example of this can be seen in the real-world-vendure repo.

So if we take the engraving example, the missing part is that you need to pass the strategy in to your config like this:

export const config: VendureConfig = {
  // ... omitted for brevity
  orderOptions: {
    orderItemPriceCalculationStrategy: new EngravingPriceStrategy(),
  },
};

[subinpauljoy]

It means a lot to receive a reply from CTO on beginner level queries. This inspires me to build on Vendure. I may sound dumb as Im very new to the back end JS ecosystem, Nest JS etc. Even though Plugin is the right way, I was trying to place EngravingPriceStrategy class definition in a js file directly inside "src" the compiler was throwing error that "import" statement can only be used inside a module. Ill try your suggestions, then come back and update here. My end goal is to make a multi channel store with physical and bookable products. Also an external microservice to manage order statuses to leverage the headless nature of Vendure will take the market with a storm if there is a heroku/firebase type plug and play horizontal scaling solutions available. Wishing you all the best

[subinpauljoy]

Figured out that the option to use js to develop was the issue. Looks like compiler doesnt count js files as modules and import statement was a problem. With the new version only works with Typescript, Custom code is recognised without probems in Vendure. Thanks