1. Commerce
  2. Commerce Developer Documentation
  3. Commerce Patches and Upgrades
  4. SCA Patches
  5. Patch Instructions
  6. Enhanced Page Content Disappears when Resizing the Browser

Enhanced Page Content Disappears when Resizing the Browser

Users might experience cases where enhanced pages do not maintain content when dynamically resizing the browser window. A typical scenario might include a user shrinking the browser window to such a point where the enhanced content disappears from view. Enlarging the browser window should cause any enhanced content to reinsert and appear. However, users might experience some cases where the enhanced content does not reappear in the browser.

To prevent this from happening, extend the ApplicationSkeleton.Layout.js and Content.js files as described in the steps below.

For more information on Enhanced Pages, see Pages.

Note:

Before proceeding, familiarize yourself with the Best Practices for Customizing SCA.

You can download the code samples described in this procedure here: ApplicationSkeletonExtension@1.0.0.zip

Step 1: Extend the ApplicationSkeleton.Layout.js File

  1. To extend the ApplicationSkeleton.Layout.js file, which is located in the ApplicationSkeleton module, create a directory to store your custom module. For example:

    Modules/extensions

  2. Open this directory and create a subdirectory to maintain your customizations.

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

    Modules/extensions/ApplicationSkeletonExtension@1.0.0

  3. In your new ApplicationSkeletonExtension@1.0.0 module, create a subdirectory called JavaScript.

    Modules/extensions/ApplicationSkeletonExtension@1.0.0/JavaScript

  4. In your new JavaScript subdirectory, create a JavaScript file to extend ApplicationSkeleton.Layout.js.

    Name this file according to best practices. For example:

    ApplicationSkeleton.Layout.Extension.js

  5. Open this file and extend the initialize() method of the original module to include the following line:

                    self.trigger('resize', self.currentView);

    Assuming that you have followed best practices outlined in this procedure, your extension should look like this:

                    define(
   'ApplicationSkeleton.Layout.Extension'
,   [
      'ApplicationSkeleton.Layout'
   ,   'Header.View'
   ,   'Footer.View'
   ,   'Backbone.CompositeView'
   ,   'underscore'
   ,   'jQuery'   
   ]
,   function (
      ApplicationSkeletonLayout
   ,   HeaderView
   ,   FooterView
   ,   BackboneCompositeView
   ,   _
   ,   jQuery
   )
{
   'use strict';

      _.extend(ApplicationSkeletonLayout.prototype,
      {
         initialize: function (Application)
            {
               BackboneCompositeView.add(this);

               this.headerView = this.originalHeaderView = HeaderView;
               this.footerView = this.originalFooterView = FooterView;

               this.application = Application;
               this.windowWidth = jQuery(window).width();

               // @property {‌jQuery.Deferred} afterAppendViewPromise a promise that is resolve only if one view was shown in this layout
               this.afterAppendViewPromise = jQuery.Deferred();

               var self = this;

               this.once('afterAppendView', function ()
               {
                  self.afterAppendViewPromise.resolve();
               });

               jQuery(window).on('resize', _.throttle(function ()
               {

                  if (_.getDeviceType(self.windowWidth) === _.getDeviceType(jQuery(window).width()))
                  {
                     return;
                  }

                  _.resetViewportWidth();

                  self.updateHeader();
                  self.updateFooter();

                  self.trigger('resize', self.currentView);

                  self.updateLayoutSB && self.updateLayoutSB();

                  self.windowWidth = jQuery(window).width();

               }, 1000));
            }
      });
});

  6. Save the file.

Step 2: Extend the Content.js File

  1. In this step, you will extend the Content.js file, which is located in the Content module. The code required for your Content.js extension is the same for all versions of SCA. However, the original Content.js file differs slightly for each version of SCA. This procedure provides code examples for each version of SCA.

    Download the appropriate code sample according to the implementation of SCA that you are customizing:

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

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

    Modules/extensions/ContentExtension@1.0.0

  3. In your new ContentExtension@1.0.0 module, create a subdirectory called JavaScript.

    Modules/extensions/ContentExtension@1.0.0/JavaScript

  4. In your new JavaScript subdirectory, create a JavaScript file to extend Content.js.

    Name this file according to best practices. For example:

    Content.Extension.js

  5. Open this file and extend the mountToApp() method.

    1. In your new mountToApp() method, search for the following line:

                          Layout.showInModal = _.wrap(Layout.showInModal, show_content_wrapper);

    2. Below this line, add the following:

                          Layout.on('resize', function(view)
{
   show_content_wrapper(function() { return jQuery.Deferred().resolve(); }, view);
});

  6. Save the file.

Step 3: Prepare the Developer Tools for Your Customizations

  1. Open the ApplicationSkeletonExtension@1.0.0 module.

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

    Modules/extensions/ApplicationSkeletonExtension@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. Repeat steps 2–4 for the ContentExtension@1.0.0 module. The two ns.package.js files should be identical.

  6. Open the distro.json file.

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

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

    In this example, the modules are added at the beginning of the list of modules. However, you can add the module anywhere in the modules object. The order of precedence in this list does not matter.

    Note:

    The following example depicts the Distro.json file for Elbrus release. However, your customization of the modules object should look similar to what is depicted below.

                    {
    "name": "SuiteCommerce Advanced Elbrus",
    "version": "2.0",
    "buildToolsVersion": "1.3.0",
    "folders": {
        "modules": "Modules",
        "suitecommerceModules": "Modules/suitecommerce",
        "extensionsModules": "Modules/extensions",
        "thirdPartyModules": "Modules/third_parties",
        "distribution": "LocalDistribution",
        "deploy": "DeployDistribution"
    },
         "modules": {
               "extensions/ApplicationSkeletonExtension": "1.0.0",
               "extensions/ContentExtension": "1.0.0",
               "suitecommerce/Account": "2.2.0",
               "suitecommerce/Address": "2.3.0",
               ...

  8. Include the file definition (“Content.Extension”) in the dependencies array of the Shopping, Checkout, and MyAccount applications of the JavaScript object.

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

                    "tasksConfig": {
//...
"javascript": [
         //...
         {
               "entryPoint": "SC.Shopping.Starter",
               "exportFile": "shopping.js",
               "dependencies": [
                  //...
                     "Newsletter",
                     "ProductDetailToQuote",
                     "Content.Extension"
               ],
         //...
         {
               "entryPoint": "SC.MyAccount.Starter",
               "exportFile": "myaccount.js",
               "dependencies": [
                  //...
                     "Location.Model",
                     "StoreLocator.Model",
                     "Content.Extension"
               ],
         //...
         {
               "entryPoint": "SC.Checkout.Starter",
               "exportFile": "checkout.js",
               "dependencies": [
                  //...
                     "StoreLocatorAccessPoints",
                     "StoreLocator",
                     "Content.Extension"
               ],
         //...

  9. Save the distro.json file.

Step 4: Test and Deploy Your Extension

  1. 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.

  2. Confirm your results.

    After a successful deployment, dynamically resizing a browser window on a page with enhanced content results in no errors. The enhanced content appears on the page after enlarging the window to its original size.

Related Topics

SCA Patches

General Notices