Git Product home page Git Product logo

m1-skip-shipping-checkout-step's Introduction

How the progress block works in Magento Onepage Checkout

Flow

  • When a checkout step is loaded, the relevant JavaScript object is loaded for that step (Billing, Shipping, ShippingMethod, Payment or Review). This object binds an event listener to the onSave callback of the save Ajax request.
skin/frontend/base/default/js/opcheckout.js:289

// billing
var Billing = Class.create();
Billing.prototype = {
    initialize: function(form, addressUrl, saveUrl){
        this.form = form;
        if ($(this.form)) {
            $(this.form).observe('submit', function(event){this.save();Event.stop(event);}.bind(this));
        }
        this.addressUrl = addressUrl;
        this.saveUrl = saveUrl;
        this.onAddressLoad = this.fillForm.bindAsEventListener(this);
        this.onSave = this.nextStep.bindAsEventListener(this); // Bind nextStep() to onSave() event
        this.onComplete = this.resetLoadWaiting.bindAsEventListener(this);
    },
  • When the customer clicks the Continue button, the save() method of the object is called.
app/design/frontend/base/default/template/checkout/onepage/billing.phtml:197

    <div class="buttons-set" id="billing-buttons-container">
        <!-- Note billing.save() in onclick attribute -->
        <button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Continue')) ?>" class="button" onclick="billing.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>
        ...
    </div>
  • Once this method completes, the event listener calls nextStep(). This method receives the Ajax response and passes it to checkout.setStepResponse().
skin/frontend/base/default/js/opcheckout.js:388

// billing
var Billing = Class.create();
Billing.prototype = {
    
    // Other methods omitted for brevity
    
    /**
     This method recieves the AJAX response on success.
     There are 3 options: error, redirect or html with shipping options.
     */
    nextStep: function(transport){
        var response = transport.responseJSON || transport.responseText.evalJSON(true) || {};
        ...
        checkout.setStepResponse(response);
        ...
    }
};
  • setStepResponse() handles the JSON response from Mage_Checkout_OnepageController. If the JSON response contains a goto_section index, then checkout.gotoSection() is called with the section name and the flag true.
skin/frontend/base/default/js/opcheckout.js:261

var Checkout = Class.create();
Checkout.prototype = {

    // Other methods omitted for brevity
    
    setStepResponse: function(response){
        ...
        if (response.goto_section) {
            this.gotoSection(response.goto_section, true);
            return true;
        }
        ...
    }
};
  • In gotoSection(), we finally call reloadProgressBlock() if the flag from gotoSection was true. Then the relevant section is opened.
skin/frontend/base/default/js/opcheckout.js:130

var Checkout = Class.create();
Checkout.prototype = {

    // Other methods omitted for brevity
    
    gotoSection: function (section, reloadProgressBlock) {

        if (reloadProgressBlock) {
            this.reloadProgressBlock(this.currentStep);
        }
        this.currentStep = section;
        var sectionElement = $('opc-' + section);
        sectionElement.addClassName('allow');
        this.accordion.openSection('opc-' + section);
        if(!reloadProgressBlock) {
            this.resetPreviousSteps();
        }
    },
};
  • The reloadProgressBlock() method has two functions: The first is to reload the toStep progress block by passing it onto reloadStep(). The second is to check if the customer chose the 'Use same shipping as billing address' option, in which case the shipping information step is skipped. The syncBillingShipping flag ensures that the shipping progress step is reloaded as well as the billing step.
    /**
     * Reload relevant checkout progress step
     * 
     * @param toStep string One of billing, shipping, shipping_method, payment
     */
    reloadProgressBlock: function(toStep) {
        this.reloadStep(toStep);
        if (this.syncBillingShipping) {
            this.syncBillingShipping = false;
            this.reloadStep('shipping');
        }
    }

m1-skip-shipping-checkout-step's People

Contributors

processeight avatar tngadmin avatar

Watchers

 avatar  avatar

Forkers

tboulogne

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.