bigcommerce/checkout-js

how to reload checkout total?

Opened this issue · 12 comments

sunilit42 commented

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 commented

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

bc-charlesho commented

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 commented

@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 commented

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

SunilP-WassDigital commented

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

bc-0dp commented

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 commented

@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 commented

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 commented

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 commented

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

sunilit42 commented

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 commented

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