Delivery Options Not Appearing After Editing the Cart and Re-entering a Shipping Address

In some cases, delivery method options do not display after editing the cart. If a user performs the following series of events, the delivery method options do not display properly:

Note:

This issue applies to Site Builder Extensions implementations only.

The user adds an item to the cart and proceeds to checkout.
The user enters a shipping address, including a zip code.
The user clicks out of the zip code field and clicks Edit Cart.
Without making any changes, the user again proceeds to Checkout.
The user enters the same shipping information, including the same zip code.

If you experience this issue on your Site Builder Extensions implementation, create a custom module to extend OrderWizard.Module.Shipmethod.js as described in this section.

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: DeliverMethodsNotAppearingPatch---SiteBuilderExtensions.zip.

Step 1: Extend the OrderWizard.Module.Shipmethod.js File

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.
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/OrderWizard.Module.Shipmethod.Extension@1.0.0/
In your new module, create a subdirectory named JavaScript.
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/OrderWizard.Module.Shipmethod.Extension@1.0.0/OrderWizard.Module.Shipmethod.Extension.js

Open this file and set it up to overwrite the shipAddressChange() method of the OrderWizard.Module.Shipmethod.js file.

Your file should match the following code snippet:

                define(
   'OrderWizard.Module.Shipmethod.Extension'
,   [

      'OrderWizard.Module.Shipmethod'

   ,   'jQuery'
   ,   'underscore'
   ]

,   function (
      OrderWizardModuleShipmethod

   ,   jQuery
   ,   _
   )

{

   'use strict';

      _.extend(OrderWizardModuleShipmethod.prototype,
      {
         shipAddressChange: function (model, value)
         {
            this.currentAddress = value;

            var order_address = this.model.get('addresses')
            ,   previous_address = this.previousAddress && (order_address.get(this.previousAddress) || this.addresses.get(this.previousAddress))
            ,   current_address = this.currentAddress && order_address.get(this.currentAddress) || this.addresses.get(this.currentAddress)
            ,   changed_zip = previous_address && current_address && previous_address.get('zip') !== current_address.get('zip')
            ,   changed_state = previous_address && current_address && previous_address.get('state') !== current_address.get('state')
            ,   changed_country = previous_address && current_address && previous_address.get('country') !== current_address.get('country');

            // if previous address is equal to current address we compare the previous values on the model.
            if (this.previousAddress && this.currentAddress && this.previousAddress === this.currentAddress)
            {
               changed_zip = current_address.previous('zip') !== current_address.get('zip');
               changed_country = current_address.previous('country') !== current_address.get('country');
               changed_state = current_address.previous('state') !== current_address.get('state');
            }

            // reload ship methods only if there is no previous address or when change the country or zipcode
            if ((!previous_address && current_address) || changed_zip || changed_country || changed_state)
            {
               // if its selected a valid address, reload Methods
               if (this.model.get('isEstimating') || this.addresses.get(this.model.get('shipaddress')))
               {
                  this.reloadMethods();
               }
            }
            else
            {
               this.render();
            }

            if (value)
            {
               this.previousAddress = value;
            }

            // if we select a new address, bind the sync method for possible address edits
            if (this.currentAddress)
            {
               var selected_address = this.addresses.get(this.currentAddress);
               if(selected_address)
               {
                  selected_address.on('sync', jQuery.proxy(this, 'reloadMethods'), this);
               }

               // if there was a different previous address, remove the sync handler
               if(this.previousAddress && this.previousAddress !== this.currentAddress)
               {
                  var previous_selected_address = this.addresses.get(this.previousAddress);
                  if(previous_selected_address)
                  {
                     previous_selected_address.off('sync');
                  }
               }
            }
         }
      });
});

Save the file.

Step 2: Prepare the Developer Tools for Your Customizations

Open the OrderWizard.Module.Shipmethod.Extension@1.0.0 module.
Create a file in this module and name it ns.package.json.

Modules/extensions/OrderWizard.Module.Shipmethod.Extension@1.0.0/ns.package.json

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

                {
    "gulp": {
        "javascript": [
            "JavaScript/*.js"
        ]
    }
}

Save the ns.package.json file.
Open the distro.json file.

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

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

Your code should look similar to the following example:

                {
    "name": "SuiteCommerce Site Builder - Elbrus",
    "version": "2.0",
    "buildToolsVersion": "1.3.0",
    "folders": {
        "modules": "Modules",
        "suitecommerceModules": "Modules/suitecommerce",
        "thirdPartyModules": "Modules/third_parties",
        "distribution": "LocalDistribution",
        "deploy": "DeployDistribution"
    },
    "modules": {
        "extensions/OrderWizard.Module.Shipmethod.Extension": "1.0.0",
        "suitecommerce/Account": "2.3.0", 
                //...

Include the module definition (OrderWizard.Module.Shipmethod.Extension) as a dependency within the JavaScript SC.Checkout.Starter entry point.

Your distro.json file should look similar to the following:

                "tasksConfig": {
//...
      "javascript": [
         {
             "entryPoint": "SC.Checkout.Starter",
             "exportFile": "checkout.js",
             "dependencies": [
                //...
                   "OrderWizard.Module.Shipmethod.Extension"
             ]
             //...
         }
//...

Save the distro.json file.

Step 3: Test and Deploy Your Extension

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

Upon successful deployment, all delivery options will appear after editing the cart and re-entering a shipping address.

Step 1: Extend the OrderWizard.Module.Shipmethod.js File

Step 2: Prepare the Developer Tools for Your Customizations

Step 3: Test and Deploy Your Extension

Related Topics