how to reload checkout total?

[sunilit42]

Hello,

My client want to to remove tax class based on customer field, i already implement but not i want to reload the checkout total without pageload.

Is there any way to possible to reload total using js code?

[theromulans]

Hi @sunilit42, would you mind providing more context: which tax class are you removing from which entity? Thanks!

[bc-charlesho]

Hi @sunilit42, currently we don't have a way for you to reload the checkout using js without a hard browser refresh.

We are open to consider making checkout reload possible without a full browser refresh in a future release.

[sunilit42]

@bc-charlesho

• just listen event into checkout js and we can fire event for update total, i think quick think possible and very good useful

[bc-0dp]

Basically a way to trigger a state reload from outside checkout-js

[SunilP-WassDigital]

@bc-0dp can you please me how to do it?

[bc-0dp]

Well that's the thing, you can't. You'd have to move away from Optimized One Page Checkout and implement your logic into your own checkout-js fork.

[SunilP-WassDigital]

@bc-0dp
i already did b2b Optimized One Page Checkout fork, but not able to do it

i added packages/core/src/app/shipping/Shipping.tsx

async componentDidMount(): Promise<void> {
.....................
 let that = this;
document.addEventListener("reload-checkout", function(updateCheckout) { // (1)
                              that.props.updateCheckout({ customerMessage: '' }
        });

.................................

[bc-0dp]

Firstly, since it's async I believe you need await.
Secondly, I am not sure if updateCheckout is the right function, instead you might need loadCheckout

[SunilP-WassDigital]

Hello @bc-0dp

document.addEventListener("reload-checkout", function() { // (1) console.log(that) that.props.loadCheckout(that.props.checkoutId, { params: { include: [ 'cart.lineItems.physicalItems.options', 'cart.lineItems.digitalItems.options', 'customer', 'customer.customerGroup', 'payments,promotions.banners', 'consignments.availableShippingOptions' ] as any, // FIXME: Currently the enum is not exported so it can't be used here. }, }) });

i want to first reload but it is just getting data

[bc-0dp]

I would have to dig more around to understand how it's implemented.

[sunilit42]

One more thing i found
https://developer.bigcommerce.com/docs/storefront/cart-checkout/guide/consignments

i m using this API, to update tax but if i m passing same request it does not update total, even i remove tax class
BigCommerce need to update total, seems like they are doing caching of that, is same request then don't update it

[Johnnypkoo]

Thought I'd add a comment in here as I recently encountered a similar issue, not with tax but currency. We change the currency in checkout but there is no way to refresh the state of SDK so we were presented with the mini cart showing the original currency and a message saying we will be charged in the new currency. It would be great if we could own the state and then refresh this as required. I managed to get around this by reloading the checkout with the new currency id in the query param (setCurrencyId).
I would've thought that calling loadCheckout() and passing in the new cart ID would resolve this but it was unsuccessful