I’ve setup a script allowing users to automatically apply a discount to their checkout amount depending on how much discount point they have and the total of their checkout (including shipping price).
In order to be sure to include the shipping price, all this calculation is made when the user select a shipping method in order to be sure to have the proper price.
But as a result it’s showing stuff like 0 in total value for the customer and our client was not happy about it. So to avoid undoing everything, we kept our discount system who is working, we kept checkout data as they are also in database, we simply went for a small trick being to show specific values to the customer when they apply this discount.
To do such a thing, I’ve been extending the default shipping js adding this checkCreditUsage.
app/design/frontend/Vendor/default/Magento_Checkout/web/js/view/shipping.js
/**
* Set shipping information handler
*/
setShippingInformation: function () {
if (this.validateShippingInformation()) {
quote.billingAddress(null);
checkoutDataResolver.resolveBillingAddress();
/**
* Fetches credit usage status and updates Knockout observable
*/
setShippingInformationAction().done(() => {
stepNavigator.next();
this.checkCreditUsage();
});
}
},
Himself is defined like this
checkCreditUsage: function () {
let self = this;
let quoteId = quote.getQuoteId();
let data = {
quote_id: quoteId
};
$.ajax({
url: '/subscription/ajax/iscreditused',
type: 'GET',
data: data,
contentType: 'application/json',
dataType: 'json'
}).done(function (response) {
console.log("Credit Used:", response.is_credit);
self.isCreditUsed(response.is_credit);
self.getCreditUsed(response.credit_used);
self.getTotalInclWithCredit(response.total_incl_with_credit);
self.getTotalExclWithCredit(response.total_excl_with_credit);
location.reload();
});
},
Obviously outside of the method all observable are defined
/**
* Observable to track credit usage
*/
isCreditUsed: ko.observable(false),
getCreditUsed: ko.observable(false),
getTotalInclWithCredit: ko.observable(false),
getTotalExclWithCredit: ko.observable(false),
As I’m using koJs observable, I was expecting data to update by themselves…Sadly it’s not…that’s why I’ve been adding to the code this location.reload()
With the location reload everything updates as expected…but UX for the user is obviously super bad…
Is there something I’m missing there ?
About the templates, values are being called in multiple templates
My first thought was that …well shipping js must only be known from shipping/html…which might explain why the other templates do not updated themselves dynamically. But i don’t know
Actually, the checkCreditUsage is duplicated to be known from everywhere…but it’s only on the shipping.js one that I had to put the location.reload…all the other do not have it. There is something I’m missing obviously but can’t tell what it is.
