I’m now a couple months into exploring Optimizely Configured Commerce and Spire CMS. As much as I’m up to speed with the Configured Commerce side of things (having past experience with Customized commerce), the Spire CMS side is a bit daunting, having worked with traditional Optimizely CMS for a while. We face challenges in figuring out handlers, a key concept in both Customized Commerce and Spire CMS.
And yes there is documentation, but its more high level and not enough to understand the inner functioning of the code (or maybe I just haven’t had the patience to go through it all yet :)).
Needless to say, I took a rather “figure it out by myself” approach here. I find that this is a much better way to learn and remember stuff :).
Here’s to figuring out handlers
In a commerce site, there is Order History for every customer, with a “Reorder” capability. I will tweak the behavior of this Reorder action and prevent adding a specific SKU to cart again when user clicks “Reorder”.
Challenge #1 – Where does the code tied to reorder live?
Depending on what you are looking for and what you need to change, this can be different files in the Frontend source code.
Challenge #2 – How do I find the right file?
I start by searching on keywords like “reorder” which do lead me to some files but they are mostly .tsx files aka React components that had the Reorder button on them. What I’m looking for instead is the actual method that passes the current order lines to add to cart, in order to intercept and tweak.
Challenge #3 – How do I find the file which takes in Order Lines and adds to cart?
I decided it was time to put my browser skills to good use. I launch the site, open Dev tools, and hit Reorder to monitor all the Network calls that occur. And bravo.. I see the api call to Cart API for bulk load, which is what this action does. Here’s what that looks like :
api/v1/carts/current/cartlines/batch
with a Payload of cartlines sent to add to Cart.
Reverse engineering in action
Step #1 – I traced this back in code. Looked for “cartlines/batch” and found 1 file – CartService.ts
Its OOTB code, but for people new to this like me, we don’t know which folder has what. So, I’ll make this one step easier for you by telling you exactly where this file lives. You will find it at
FrontEnd\modules\client-framework\src\Services\CartService.ts
The method that makes the api call is addLineCollection(parameter: AddCartLinesApiParameter).
Step #2 – I now search for files that called this method. I found quite a few files that call this, but for my specific scenario, I stuck to the ones that said “reorder” specifically. These are the Frontend Handlers in Spire CMS.
Here’s the list and paths of the files that are relevant to the context here :
- FrontEnd\modules\client-framework\src\{blueprintName}\Pages\OrderDetails\Handlers\Reorder.ts
- FrontEnd\modules\client-framework\src\{blueprintName}\Pages\OrderHistory\Handlers\Reorder.ts
- FrontEnd\modules\client-framework\src\{blueprintName}\Pages\OrderStatus\Handlers\Reorder.ts
Once I see the line that makes the call to addLineCollection() method, I check how the parameter is being set.
Step #3 – All that’s left now is to update the code that sets the AddCartLinesApiParameter for this call, from the existing Order’s order lines. I add a filter to exclude the one specific SKU that I don’t want re-added to cart on reorder, on the OrderLines collection. Looks something like this :
