These are chat archives for reactioncommerce/reaction

6th
May 2019
Allie Reilly
@acreilly
May 06 19:26
Hey everyone. I am not sure how I can go about overriding the component CartItem. I just want to change the render method for it, nothing else.
Loan Laux
@loan-laux
May 06 19:27
Oh, hey @acreilly. Is that on the Next.js starter kit or on the Meteor storefront?
Allie Reilly
@acreilly
May 06 19:27
I believe the starter kit, but it is within the node modules, I am a bit confused by the setup
node_modules/@reactioncommerce/component/CartItem/v1/CartItem.js
Loan Laux
@loan-laux
May 06 19:29
Yeah it's changed quite a bit. What I'd recommend is to maintain a fork of the Reaction Design System with your own structural changes. But are you 100% sure you can't work around that by doing your modifications outside of this component?
For example in the MiniCart component?
Allie Reilly
@acreilly
May 06 19:31
No, I don't think so. It is structural changes to the html
I already created a custom MiniCart
but there is CartItemsList > CartItems > CartItem
Loan Laux
@loan-laux
May 06 19:32
Alright, so I'd say go for forking the Reaction Design System, especially if you'll have other structural changes like this. If not, you can work around that by creating your own CartItem replacement component and using it instead of RC's one. As you feel.
Allie Reilly
@acreilly
May 06 19:33
Yeah, I was hoping there was a better way, like how it used to be, where I could just change one function or something.. that is not the case anymore?
Loan Laux
@loan-laux
May 06 19:35

No, because Reaction has switched to being an API first and a storefront second. Now you completely own the storefront, so that means a bit more tinkering around. There's no concept of front-end plugins anymore.

The starter-kit is there to serve its demo purpose, but you're free (and encouraged) to start from scratch using whatever other technology you may want to use.

Allie Reilly
@acreilly
May 06 19:36
Ok thank you.
Loan Laux
@loan-laux
May 06 19:36
All in all, more flexibility for the enterprise world, and less magic in the code for developers. :)
Patrick Newell
@pnewell4_twitter
May 06 19:37
@acreilly it's way easier than that!
check out _app.js, and look for <ComponentsProvider value={components}>
components here is an object of components
Loan Laux
@loan-laux
May 06 19:38

Yeah, my bad, that's what I meant by "If not, you can work around that by creating your own CartItem replacement component and using it instead of RC's one."

Should've given an example — thanks @pnewell4_twitter

Patrick Newell
@pnewell4_twitter
May 06 19:38
I suggest 1) you extend the CartItem (say what you want about subclasses, but it's perfect here). 2) replace CartItem with your version in the components object
class MyCartItem extends CartItem {
  render() {
    // ...
  }
}
<ComponentsProvider value={{ ...components, CartItem: MyCartItem }}>
haha, I hadn't even read all of your responses. When I saw the gitter notification and read "fork the Reaction Design System" I started typing!
Loan Laux
@loan-laux
May 06 19:41
lolz, yeah should've emphasized that this is for big projects with lots of changes to lots of components only