Delivery Methods Not Appearing in One Page Checkout

This topic applies to

Applies to

SuiteCommerce Advanced | Mont Blanc | Vinson | Elbrus

 

In some cases, not all delivery methods appear when using the One Page Checkout flow. This issue sometimes occurs after a user enters a zip code when checking out as a guest.

To correct this error, extend the mountToApp() method located in the CheckoutSkipLogin.js file and hide the following line within comment tags:

data.cart && LiveOrderModel.getInstance().set(data.cart);

In addition to making these changes, you must create an ns.package.json file and update your distro.json file for any custom modules you include. You can download the code samples described in this procedure here: OnePageCheckoutDeliveryMethodsPatch.zip.

Step 1: Extend the CheckoutSkipLogin.js File

  1. If you have not done so already, create a directory to store your custom module.

    Following best practices, name this directory extensions and place it in your Modules directory. Depending on your implementation and customizations, this directory might already exist.

  2. Open your extensions directory and create a custom module to maintain your customizations.

    Give this directory a unique name that is similar to the module being customized. For example:

    Modules/extensions/CheckoutSkipLogin.Extension@1.0.0/

  3. In your new module, create a subdirectory named JavaScript.

  4. In your JavaScript subdirectory, create a new JavaScript file.

    Give this file a unique name that is similar to the file being modified. For example:

    Modules/extensions/CheckoutSkipLogin.Extension@1.0.0/JavaScript/CheckoutSkipLogin.Extension.js

  5. Open this file and set it up to extend the mountToApp method of the CheckoutSkipLogin.js file.

    Your file should match the following code snippet:

    define( 'CheckoutSkipLogin.Extension' , [ 'CheckoutSkipLogin' , 'Account.RegisterAsGuest.Model' , 'jQuery' , 'underscore' ] , function ( CheckoutSkipLogin , AccountRegisterAsGuestModel , jQuery , _ ) { 'use strict'; _.extend(CheckoutSkipLogin.prototype, { mountToApp: function(application) { // do nothing if the mode is disabled if (!application.getConfig('checkout.skipLogin')) { return; } //this function is called only if skip login mode is enabled var registerUserAsGuest = function () { var promise = jQuery.Deferred() , profile_model = ProfileModel.getInstance(); if (profile_model.get('isGuest') === 'F' && profile_model.get('isLoggedIn') === 'F') { var checkoutStep = application.getLayout().currentView.currentStep; checkoutStep && checkoutStep.disableNavButtons(); new AccountRegisterAsGuestModel().save().done(function(data) { var skipLoginDontUpdateProfile = profile_model.get('skipLoginDontUpdateProfile'); if(skipLoginDontUpdateProfile && data.user) { _.each(skipLoginDontUpdateProfile, function(attr) { delete data.user[attr]; }); } data.user && profile_model.set(data.user); application.getLayout().currentView.wizard.options.profile = profile_model; //data.cart && LiveOrderModel.getInstance().set(data.cart); data.touchpoints && (application.Configuration.siteSettings.touchpoints = data.touchpoints); promise.resolve(); checkoutStep && checkoutStep.enableNavButtons(); jQuery('[data-action="skip-login-message"]').remove(); }); } else { promise.resolve(); } return promise; }; // add 'this.application' to models that doesn't have it. AddressModel.prototype.application = application; CreditCardModel.prototype.application = application; ProfileModel.prototype.application = application; // wrap save() method to LiveOrderModel, AddressModel and CreditCardModel var wrapper = function(superFn) { var self = this , super_arguments = Array.prototype.slice.apply(arguments, [1, arguments.length]) , promise = jQuery.Deferred(); if (!promiseGuest) { promiseGuest = registerUserAsGuest(); } promiseGuest.done(function () { var result = superFn.apply(self, super_arguments); if (result) { result.done(function () { promise.resolve.apply(result, arguments); }).fail(function() { promise.reject.apply(result, arguments); }); } else { // Notify future promises that a front end validation took place and no promise is returned promise.frontEndValidationError = true; promise.reject.apply(result, super_arguments); } }); _(promise).extend({error: function(){return this;},success: function(){return this;}}); return promise; }; // don't wrap on non-secure domains (Site Builder cart is in Checkout :/ ) if (window.location.protocol !== 'http:') { LiveOrderModel.prototype.save = _.wrap(LiveOrderModel.prototype.save, wrapper); } AddressModel.prototype.save = _.wrap(AddressModel.prototype.save, wrapper); CreditCardModel.prototype.save = _.wrap(CreditCardModel.prototype.save, wrapper); ProfileModel.prototype.save = _.wrap(ProfileModel.prototype.save, wrapper); } }); });
  6. Save the file.

Step 2: Prepare the Developer Tools for Your Customizations

  1. Open the CheckoutSkipLogin.Extension@1.0.0 module.

  2. Create a file in this module and name it ns.package.json.

    Modules/extensions/CheckoutSkipLogin.Extension@1.0.0/ns.package.json

  3. Build the ns.package.json file using the following code

    { "gulp": { "javascript": [ "JavaScript/*.js" ] } }
  4. Save the ns.package.json file.

  5. Open the distro.json file.

    This file is located in the top-level directory of your SuiteCommerce Advanced source code.

  6. Add your custom module to the modules object to ensure that the Gulp tasks include your extension when you deploy.

    Your code should look similar to the following example:

    { "name": "SuiteCommerce Advanced Mont Blanc", "version": "2.0", "buildToolsVersion": "1.1.0", "folders": { "modules": "Modules", "suitecommerceModules": "Modules/suitecommerce", "thirdPartyModules": "Modules/third_parties", "distribution": "LocalDistribution", "deploy": "DeployDistribution" }, "modules": { "extensions/CheckoutSkipLogin.Extension": "1.0.0", "suitecommerce/Account": "2.1.0", //...
  7. Add CheckoutSkipLogin.Extension as a dependency to the SC.Checkout.Starter entry point of the JavaScript object.

    Your code should look similar to the following example:

    //... "javascript": [ //... { "entryPoint": "SC.Checkout.Starter", "exportFile": "checkout.js", "dependencies": [ "Backbone.View.Plugins", //... "CheckoutSkipLogin.Extension" ], //...
  8. Save the distro.json file.

Step 3: Test and Deploy Your Extension

  1. Test your source code customizations on a local server (see SCA on a Local Server) or deploy them to your NetSuite account (see Deploy to NetSuite). If you are currently running SCA on a local server, your changes should appear on your local site immediately.

  2. Confirm your results.

    Upon successful deployment, entering a zip code as a guest displays all delivery method options.

Related Topics