Magento – Update price in checkout page without refresh Magento 2

checkoutcontrollersjavascriptmagento2price

I have a controller where I apply some discount on the checkout page.
Now, I can see the price change just after I refresh the page.

I search for a solution, to refresh the price using a Js file.

define([
        'jquery',
        'Magento_Checkout/js/action/get-totals'
        ], function ($, getTotalsAction) {
        "use strict";

          $.ajax({
                method: "post",
                url: demoUrl, //your ajax Url
                data: {/*here post data*/},
                dataType: "html",
                success: function (resp) {
                   //below two lines refershing cart summary
                    var deferred = $.Deferred();
                    getTotalsAction([], deferred); //this function already created in Magento_Checkout/js/action/get-totals.js file
                }

            });

});

But if I insert this script in my controller, nothing happens!

Does anyone have any idea how can an update the price without refreshing the page?

I know by default Magento 2 has a function to do that. When I enter a valid coupon code the price it's updated without refreshing the page!

Best Answer

Use sections.xml in following location vendor/module_name/etc/frontend/sections.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
    <action name="route/controller/actionname">
        <section name="cart"/>
        <section name="checkout-data"/>
    </action>
</config>

Related Solutions

Magento2.1 – How to Change Product Price with Plugin

The problem is that I placed the di.xml into the frontend subfolder, thinking that this defines the area the plugin applies to. But reading the docu ( http://devdocs.magento.com/guides/v2.1/architecture/archi_perspectives/components/modules/mod_and_areas.html )

Magento area types

Magento is organized into these main areas:

Magento Admin (adminhtml): entry point for this area is index.php or pub/index.php. The Admin panel area includes the code needed for store management. The /app/design/adminhtml directory contains all the code for components you’ll see while working in the Admin panel.

Storefront (frontend): entry point for this area is index.php or pub/index.php. The storefront (or frontend) contains template and layout files that define the appearance of your storefront.

Basic (base): used as a fallback for files absent in adminhtml and frontend areas.

again it seems that frontend refers only to display purposes but not saving or anything.

Magento – Magento 2 – Update quantity and totals of cart page without page reload

Have you tried deferred operation with getTotalsAction or totals-processor?

It's showing ajax process in your cart after calcul

you can use it like this (i minimize your code, just to show you how to use these functions.) :

require(["jquery", "Magento_Customer/js/customer-data","jquery/jquery-storageapi","Magento_Checkout/js/model/cart/totals-processor/default","Magento_Checkout/js/model/cart/cache","Magento_Checkout/js/model/quote","Magento_Checkout/js/action/get-totals"], function ($,defaultTotal,cartCache,quote,getTotalsAction) {
$(document).on("submit","form#form-validate", function (e) {
    e.preventDefault();
    $.ajax({
        url: form.attr("action"),
        data: form.serialize(),
        type: "post",
        success: function (res) {

    var deferred = $.Deferred();
    // this show ajax loader and reload price in cart
    getTotalsAction([], deferred);
    // this one too 
    defaultTotal.estimateTotals();
        },
        error: function () {
            console.log("error");
        }
    });
    console.log("form submitted");
});});

I suggest you to show this post for updating price in cart : How to add fee to order totals in Magento 2 and this one : https://github.com/sivajik34/Custom-Fee-Magento2

Best Answer

Related Solutions

Magento2.1 – How to Change Product Price with Plugin

Magento – Magento 2 – Update quantity and totals of cart page without page reload

Related Topic