Access Model and Collection Data in a Child View

contextData and contextDataRequest Properties

The key capabilities you are using in this tutorial are the contextData and contextDataRequest properties:

• contextData is a property of every view, but it is only populated with data in some of those views.

• contextDataRequest is a property available to views that are children of views with contextData. You can call contextDataRequest by passing in an array of types of data you want returned.

Views can return four types of objects and each view may support multiple object types. The object types that a view can return is specific to each view class. However, most views do not support requests.

When requests are supported and a data object is returned, its values are specific to the view instance. For example, if you are working on a product details page (PDP), contextData potentially supports requests for the product and item model. Whether contextData supports requests for both the product and item model, or just one of those models, depends on the particular product page the user is viewing.

The following table lists the parent view classes that have contextData properties and also lists the types of data that they can provide to child views.

Keep in mind that the availability shown in the preceding table cascades, which means that you do not have to add your child view directly into the classes listed. If your child view has a parent, grandparent, and so on, that is listed in the preceding table, contextDataRequest will be available.

Practices to Avoid

When working with current releases of SuiteCommerce and SuiteCommerce Advanced, avoid the following practices when developing extensions.

Prerequisites

Before you can complete this tutorial, you need to:

• Install and configure SuiteCommerce or SuiteCommerce Advanced (2020.2 and later versions) as described in Install Your Commerce Website Applications

• Install Node.js

• Install Gulp.js

• Set Up Extension Developer Tools

• Understand the Anatomy of an Extension

• Set up items for your Commerce website as described in Web Store Items

To develop an extension to access model and collection data in a child view

1. Expose the Field to the Relevant Field Set.

2. Create the Extension Framework.

3. Use the PLP component’s addChildViews() method in your entry point file to target an existing view into which you can inject your customized view. See Create the Entry Point File for instructions.

4. Create a custom view using SCView that:

   1. Requests item context data from the parent view.

   2. Accesses the contextData object with contextDataRequest, passing the required field through to the template context.

   3. Conditionally renders the child view if, and only if, the shopper is viewing the page using the List display type.

   See Create the View File for instructions.

5. Create the Template that renders the detailed description, which can include HTML.

6. Test the Extension.

7. Troubleshoot the Extension.

Expose the Field to the Relevant Field Set

Before you start to work with the code for this extension, you need to have the field you want included in the items API response. For this tutorial scenario, you are dealing with search results on a product list page (PLP) that use the (default) search field set. So, add a standard field called Detailed Description (storedetaileddescription) to the default search field set. To learn more about modifying field sets, see Define Field Sets.

After saving the field set and record, make sure you rebuild the search index.

Create the Extension Framework

You can create an extension manually or by using the gulp extension:create command as described in Create a Baseline Extension. For this tutorial, create your extension manually as described in the following steps.

1. Access the top-level extension development directory you created when you installed the extension developer tools.

2. In the top-level extension development directory, unless it already exists, create a new directory named Workspace.

3. In the Workspace directory, set up the folders for this extension so that they look like this:

   Workspace/
       CDRExample
           Modules/
              CDRExample/
                 JavaScript/
                 Templates/ 
   

4. In the Workspace/CDRExample directory, create a manifest.json file and place the following code in that file.

   {
       "name": "CDRExample",
       "fantasyName": "Context Data Request Example",
       "vendor": "ExampleVendor",
       "version": "1.0.0",
       "type": "extension",
       "target": "SCA,SCS",
       "target_version": {
           "SCA": ">=20.2.0",
           "SCS": ">=20.2.0"
       },
       "description": "An example extension to demonstrate contextDataRequest",
       "skins": [],
       "templates": {
           "application": {
               "shopping": {
                   "files": [
                       "Modules/CDRExample/Templates/cdr_example.tpl"
                   ]
               }
           }
       },
       "javascript": {
           "entry_points": {
               "shopping": "Modules/CDRExample/JavaScript/CDRExample.js"
           },
           "application": {
               "shopping": {
                   "files": [
                       "Modules/CDRExample/JavaScript/CDRExample.js",
                       "Modules/CDRExample/JavaScript/CDRExample.View.js"
                   ]
               }
           }
       },
       "local_folder": "Workspace\\CDRExample"
   } 
   

Create the Entry Point File

To show the Detailed Description (storedetaileddescription) field, you need to render a view and template that have access to that information. To create that view, first you need to create an entry point file.

In the Workspace/CDRExample/Modules/CDRExample/JavaScript directory, create an entry point file named CDRExample.js that contains the following code.

define('CDRExample', [
    'CDRExample.View'
], function (
    CDRExampleView
) {
    'use strict';

    return {
        mountToApp: function mountToApp (container) {
            var PLP = container.getComponent('PLP');

            if (PLP) {
                PLP.addChildViews(PLP.PLP_VIEW, {
                    'ItemViews.Price': {
                        'CDRExample.View': {
                            childViewIndex: 0,
                            childViewConstructor: function () {
                                return new CDRExampleView({PLP: PLP})
                            }
                        }
                    } 
                })
            }
        }
    }
}) 

In the preceding code, notice that:

• You are accessing the PLP (Product List Page) component. This is necessary because:

  • You want to use its addChildViews() method.

  • You want to access information it has on the current display type.

• You add the child view using verbose syntax, addChildViews(), which accepts two view injection targets instead of the usual one.

  • The reason for this is you need to be as specific as possible. For example, there could be other instances of ItemsView.Price throughout your Commerce website, and you do not necessarily want to inject your new child view into those.

  • Therefore, you use the verbose method, addChildViews(), attached to a specific visual component (the PLP component) and pass in a reference of the main PLP view, which keeps things in scope. For more information about verbose syntax, see Add a Child View.

Create the View File

The view is where most of the work of the extension takes place. For this tutorial, use the SCView module in the view file that you create.

In the Workspace/CDRExample/Modules/CDRExample/JavaScript directory, create a file named CDRExample.View.js that contains the following JavaScript:

define('CDRExample.View', [
    'SCView',
    'cdr_example.tpl'
], function (
    SCViewModule,
    cdr_example_tpl
) {
    'use strict';

    var SCView = SCViewModule.SCView;

    function CDRExampleView (options) {
        SCView.call(this, options);

        this.template = cdr_example_tpl;
        this.contextDataRequest = ['item'];
        this.displayType = options.PLP.getDisplay().id;
    }

    CDRExampleView.prototype = Object.create(SCView.prototype);
    CDRExampleView.prototype.constructor = CDRExampleView;

    CDRExampleView.prototype.render = function () {
        if (this.displayType == 'list') {
            SCView.prototype.render.call(this);
        }
    }

    CDRExampleView.prototype.getContext = function () {
        return {
            storedetaileddescription: this.contextData.item().storedetaileddescription
        }
    }

    return CDRExampleView
}) 

In the preceding JavaScript, notice the following details about the CDRExampleView function:

• You are making a contextDataRequest for item data.

• You are creating a custom displayType property that uses the PLP component’s getDisplay() method, which returns a data object about the user’s current display type.

After setting the view’s prototype and setting the constructor function, you override the view’s render property with a custom function.

The override you are putting in place for render calls the parent class’s render property if, and only if, the display type ID that is passed in is list. This mechanism prevents the view from being rendered when other display types, like grid or table, are active.

Finally, in the getContext property, you create a function that defines the context object that is sent to the template. You can see that after implementing contextDataRequest in the constructor, it is here in this part of the code where you finally access the contextData.

The item() object is essentially a copy of the item model, which allows you to get the displayType property you want from it.

Create the Template

In the CDRExample/Modules/CDRExampleModule/Templates directory, create a template file named cdr_example.tpl. Put the following line in the file and then save it.

{{{storedetaileddescription}}} 

Notice that the preceding value is wrapped in triple curly braces—a feature of Handlebars that prevents HTML escaping.

In cases where you are certain that the HTML you are passing into the template is safe (that is, valid HTML from a trusted, secure source), you can tell Handlebars to interpret the stringified value as raw HTML. This has the effect of injecting the HTML directly into the template’s source.

Because you expect this field to always be HTML served straight from the item record stored in your NetSuite account, you can use the triple curly braces to prevent HTML escaping.

Test the Extension

Start your local server and then navigate to the local version of your Commerce website. For step-by-step instructions, see Test an Extension on a Local Server.

Visit a product list page and change the display type. When you view the grid and table displays, there is no change, as shown in the following screen shot.

However, when you view the list display type, you should see the detailed description for each listed product:

Troubleshoot the Extension

If you encounter these errors, double-check the code for your extension as described in the following table.