Customize cart component

Hello there!

I’m using v3.2 and I’m trying to customize the cart component for 2 things:

  1. Add how much is left to get free shipping
  2. Add suggested products

The thing is I don’t want to override the full cart, I’d just like to add a message using the flash-message component above the cart summary. However I’ve checked out the cart template and it looks like that there’s only 2 overridable wrappers, one for the space above the cart header (which looks weird when using the side cart which is the main way our users see the cart) and another one which doesn’t have a specific section so I feel forced to replace the whole component using the default template. Anyway, even if I try to override it fully I get an error when trying to use the “summary-fees” component saying “TypeError: Cannot read property ‘hasShippingAddress’ of undefined” which I haven’t been able to solve

Is there any way to use the free space below the items of the cart without going through so much trouble? Should this be a feature request to add an optional slot there?

Thanks!

1 Like

Hi there,

The best way to do this right now is, as you figured, to use the overridable cart component or its header section. We are constantly trying to improve customization for our users and we take your feedback into account.

For the error you are encountering, you can fix it by changing the Vue :summaryData attribute to :summary-data like so:

<summary-fees
    class="snipcart-cart-summary-fees--reverse"
    :summary-data="summaryFeesProvider"
>

This is an implementation quirk with Vue that makes the use of kebab case mandatory when overriding templates. We logged this issue on our part to make sure we enforce kebab-case ourselves.

Let me know if this works for you,
Cheers!

1 Like

Hello!

That was the trick, I’ve been struggling with this a few days and I didn’t realize I was using camel case.
I could add the message where I wanted to and it works like a charm, even if it meant overriding the whole component but for the moment that’s fine.

Thanks a loooot!