Creating Entry Point File for Custom Views in SuiteCommerce

To display the Detailed Description (storedetaileddescription) field in SuiteCommerce, you'll need to create an entry point file that manages the rendering of specific child views within the application. This step is crucial for customizing how product details are presented on your eCommerce site.

How to Create the Entry Point File

Step-by-Step Instructions

1. Navigate to the Workspace/CDRExample/Modules/CDRExample/JavaScript directory.
2. Create a new entry point file named CDRExample.js and include the following code:

1define('CDRExample', [
2    'CDRExample.View'
3], function (
4    CDRExampleView
5) {
6    'use strict';
7 
8    return {
9        mountToApp: function mountToApp (container) {
10            var PLP = container.getComponent('PLP');
11 
12            if (PLP) {
13                PLP.addChildViews(PLP.PLP_VIEW, {
14                    'ItemViews.Price': {
15                        'CDRExample.View': {
16                            childViewIndex: 0,
17                            childViewConstructor: function () {
18                                return new CDRExampleView({PLP: PLP})
19                            }
20                        }
21                    } 
22                })
23            }
24        }
25    }
26})

Code Explanation

• The code accesses the PLP (Product List Page) component, necessary for implementing custom views. The access provides you with the addChildViews() method, which allows for more detailed view injections.
• The addChildViews() method is used instead of addChildView() for clarity, as it lets you specify precisely where to inject your new child view, minimizing conflicts with other views.

Key Considerations

• Ensure that you have defined the child view and its template beforehand. For this, refer to the relevant sections on defining views and templates.
• If embedding a child view within a Backbone.Collection, all views belonging to that collection will display the same child view, which can be beneficial for uniformity across views.

Before You Begin

Before adding a child view, complete the following:

• Choose between Short or Verbose Syntax: You can use addChildView() for a simple addition or addChildViews() for detailed placement.
• Identify the Placeholder: Knowing where to place the child view is critical. You can use data-view or data-cms-area attributes to identify suitable placeholder areas.

When using a data-cms-area, include the prefix cms: in the value.

Example of Adding a Child View

Here’s an example syntax for adding a child view in a data-cms-area:

pdp.addChildView('cms:header_banner_top', function() { ... });

Note: Ensure you reference the relevant guide for further details about creating views and templates for best practices.