Do I need to create a new entry point file for customizing the product list page in SuiteCommerce?

Yes, you will need to create an entry point file as it serves as the initial load point for your SuiteCommerce extension, specifying dependencies such as the collection view.

Is there a specific component I should use to render items in a custom layout on the product list page?

You should use the SCCollectionView component to render modeled items in the desired grid layout for your custom product list page.

What is the role of the cell view in displaying specific items on the product list page?

The cell view is responsible for displaying each item in your collection and determining the context, such as item name, price, thumbnail, and URL, for each cell.

How do I set up search parameters for the items I want to display?

Set up a collection with search parameters using the Search component's getUrl method. Specify details such as item attributes and limits to control which items are retrieved and displayed.

Displaying Specific Items on Product...

TL;DR Opening

This article demonstrates how to use the Search component in SuiteCommerce to display specific items on the product list page. It covers creating an entry point, collection view, and the necessary templates to achieve this functionality.

How to Display Specific Items on the Product List Page?

To display specific items on your product list page, you will implement the Search component using several key steps:

Steps:

Create the entry point file: This file serves as the initial load point for your SuiteCommerce extension, specifying dependencies such as the collection view.
Create a collection view: Utilize the SCCollectionView component to render modeled items in the desired grid layout.
Create a collection: Set up a collection that interacts with the Search component, specifying any search parameters.
Create a cell view: Each model in your collection requires a cell view for display purposes.
Create templates: Develop templates for your collection and cell views that will format the item display on your web page.
Create a Sass file: Define styles that align with your web store’s aesthetic.

Detailed Implementation

Create the Entry Point File

Each SuiteCommerce extension starts with an entry point file that loads dependencies like PLP and Search. You will implement the mountToApp() method to register these components.

JavaScript/MyCompany.OrangeZoneExtension.js

javascript

1"text-purple-400">define(
2  'MyCompany.OrangeZoneExtension', 
3  [
4    'MyCompany.OrangeZoneExtension.Collection.View'
5  ],
6  "text-purple-400">function(MyCompanyOrangeZoneExtensionCollectionView) {
7    'use strict';
8 
9    "text-purple-400">return {
10      mountToApp: "text-purple-400">function mountToApp (container) {
11        "text-purple-400">var PLP = container.getComponent('PLP');
12        "text-purple-400">var Search = container.getComponent('Search');
13 
14        "text-purple-400">if (PLP && Search) { 
15          PLP.addChildViews(PLP.PLP_VIEW, {
16            'Facets.Items': {
17              'MyCompany.OrangeZoneExtension.CollectionView': {
18                childViewIndex: 1,
19                childViewConstructor: "text-purple-400">function () {
20                  "text-purple-400">return "text-purple-400">new MyCompanyOrangeZoneExtensionCollectionView({
21                    application: container
22                  })
23                }
24              }
25            }
26          })
27        }
28      }
29    }
30  }
31);

Create a Collection View

Define a collection view using the SCCollectionView component. This will manage how your items are rendered on the webpage.

JavaScript/MyCompany.OrangeZoneExtension.Collection.View.js

javascript

1"text-purple-400">define(
2  'MyCompany.OrangeZoneExtension.Collection.View', 
3  [
4    'SCCollectionView',
5    'MyCompany.OrangeZone.Collection',
6    'MyCompany.OrangeZone.Cell.View',
7    'mycompany_orangezone_collection.tpl' 
8  ], 
9  "text-purple-400">function (SCCollectionViewModule, MyCompanyOrangeZoneCollection, MyCompanyOrangeZoneCellView, mycompany_orangezone_collection_tpl) {
10    'use strict';
11 
12    "text-purple-400">var SCCollectionView = SCCollectionViewModule.SCCollectionView;
13 
14    "text-purple-400">function MyCompanyOrangeZoneExtensionCollectionView (options) {
15      SCCollectionView.call("text-purple-400">this, options.collection);
16      "text-purple-400">this.application = options.application;
17      "text-purple-400">this.collection = "text-purple-400">new MyCompanyOrangeZoneCollection([], options);
18      "text-purple-400">this.template = mycompany_orangezone_collection_tpl;
19    }
20 
21    MyCompanyOrangeZoneCollectionView.prototype = Object.create(SCCollectionView.prototype);
22    MyCompanyOrangeZoneCollectionView.prototype.constructor = MyCompanyOrangeZoneCollectionView;
23 
24    MyCompanyOrangeZoneCollectionView.prototype.getCellViewInstance = "text-purple-400">function (model) {
25      "text-purple-400">return "text-purple-400">new MyCompanyOrangeZoneCellView({
26        application: "text-purple-400">this.application,
27        model: model
28      })
29    }
30 
31    MyCompanyOrangeZoneCollectionView.prototype.getCellViewsPerRow = "text-purple-400">function () {
32      "text-purple-400">return 5;
33    }
34 
35    MyCompanyOrangeZoneCollectionView.prototype.render = "text-purple-400">function () {
36      "text-purple-400">var self = "text-purple-400">this;
37      "text-purple-400">this.collection.fetch().done("text-purple-400">function () { 
38        SCCollectionView.prototype.render.call(self);
39      })
40    }
41 
42    MyCompanyOrangeZoneCollectionView.prototype.getContext = "text-purple-400">function () { 
43      "text-purple-400">return {}
44    }
45 
46    "text-purple-400">return MyCompanyOrangeZoneCollectionView;
47  }
48);

Create the Collection

To handle items returned from the item search API, you will create a collection that structure these models.

JavaScript/MyCompany.OrangeZone.Collection.js

javascript

1"text-purple-400">define(
2  'MyCompany.OrangeZone.Collection',
3  [
4    'SCCollection',
5    'SCModel',
6    'underscore' 
7  ],
8  "text-purple-400">function(
9    SCCollectionModule,
10    SCModelModule,
11    _
12  ) {
13    'use strict';
14 
15    "text-purple-400">var SCCollection = SCCollectionModule.SCCollection;
16    "text-purple-400">var SCModel = SCModelModule.SCModel;
17 
18    "text-purple-400">function MyCompanyOrangeZoneCollection(models, options) {
19      SCCollection.call("text-purple-400">this, models, options);
20      "text-purple-400">this.model = SCModel;
21 
22      "text-purple-400">var searchParams = {
23        'custitem31': 'orange',
24        'limit': '5',
25        'fields': 'displayname,itemimages_detail,onlinecustomerprice_formatted,urlcomponent'
26      }
27      "text-purple-400">var searchUrl = options.application.getComponent('Search').getUrl(searchParams);
28 
29      "text-purple-400">this.url = "text-purple-400">function url () { 
30        "text-purple-400">return searchUrl
31      }
32 
33      "text-purple-400">this.parse = "text-purple-400">function parse(response) {
34        "text-purple-400">return _.compact(response.items) || []
35      }
36    }
37 
38    MyCompanyOrangeZoneCollection.prototype = Object.create(SCCollection.prototype);
39    MyCompanyOrangeZoneCollection.prototype.constructor = MyCompanyOrangeZoneCollection;
40 
41    "text-purple-400">return MyCompanyOrangeZoneCollection;
42  }
43);

Create the Cell View

Define the cell view responsible for displaying each item and determining the context for each cell.

JavaScript/MyCompany.OrangeZoneExtension.Cell.View.js

javascript

1"text-purple-400">define('MyCompany.OrangeZoneExtension.Cell.View',
2  [
3    'SCView',
4    'Utils',
5    'mycompany_orangezoneextension_cell.tpl'
6  ],
7  "text-purple-400">function(
8    SCViewModule,
9    Utils,
10    mycompany_orangezoneextension_cell_tpl
11  ) {
12    'use strict';
13 
14    "text-purple-400">var SCView = SCViewModule.SCView;
15 
16    "text-purple-400">function MyCompanyOrangeZoneExtensionCellView(options) {
17      SCView.call("text-purple-400">this, options);
18      "text-purple-400">this.model = options.model;
19      "text-purple-400">this.template = mycompany_orangezoneextension_cell_tpl,
20      "text-purple-400">this.Environment = options.application.getComponent('Environment');
21 
22      "text-purple-400">var self = "text-purple-400">this;
23      "text-purple-400">this.getThumbnail = "text-purple-400">function getThummbnail(item) {
24        "text-purple-400">var images = item.get('itemimages_detail');
25        "text-purple-400">var separator = 'media';
26 
27        "text-purple-400">var color = 'orange';
28 
29        "text-purple-400">var thumbnail = {
30          alt: item.get('displayname'),
31          url: Utils.getThemeAbsoluteUrlOfNonManagedResources(
32            'img/no_image_available.jpeg',
33            self.Environment.getConfig('imageNotAvailable')
34          )
35        };
36 
37        "text-purple-400">if (images && images[separator] && images[separator][color]) {
38          "text-purple-400">var image = images[separator][color].urls[0];
39 
40          thumbnail.url = image.url || thumbnail.url;
41          thumbnail.alt = image.altimagetext || thumbnail.alt;
42        }
43 
44        "text-purple-400">return thumbnail;
45      }
46    }
47 
48    MyCompanyOrangeZoneCellView.prototype = Object.create(SCView.prototype);
49    MyCompanyOrangeZoneCellView.prototype.constructor = MyCompanyOrangeZoneCellView;
50 
51    MyCompanyOrangeZoneCellView.prototype.getContext = "text-purple-400">function () {
52      "text-purple-400">return {
53        name: "text-purple-400">this.model.get('displayname'),
54        price: "text-purple-400">this.model.get('onlinecustomerprice_formatted'),
55        thumbnail: "text-purple-400">this.getThumbnail("text-purple-400">this.model),
56        url: "text-purple-400">this.model.get('urlcomponent')
57      }
58    }
59 
60    "text-purple-400">return MyCompanyOrangeZoneCellView;
61  }
62);

Create Templates for the Collection View and Cell View

Templates are essential for defining how your items are visually arranged and styled on the page.

Templates/mycompany_orangezoneextension_collection.tpl

html

<div class="mycompany-orangezone-collection">
  <h3 class="mycompany-orangezone-heading"{{translate 'Check Out Our Great Orange Products!'}}></h3>
  <div data-type="backbone.collection.view.rows"></div>
</div>

Templates/mycompany_orangezoneextension_cell.tpl

html

<div class="mycompany-orangezone-item">
  <a href="{{url}}"><img height="100" src="{{resizeImage thumbnail.url 'tinythumb'}}" alt="{{thumbnail.alt}}"></a>
  <a href="{{url}}" class="mycompany-orangezone-item-name">{{name}}</a>
  <p>{{price}}</p>
</div>

Create the Sass File

Adjust your styling with a custom SCSS file if needed. This example includes styling that enhances layout and visibility across devices.

Sass/mycompany-orangezone.scss

css

1.mycompany-orangezoneextension-collection {
2  border: 3px solid $sc-color-secondary;
3  margin: 0 $sc-margin-lv4 $sc-margin-lv4 $sc-margin-lv4;
4  padding: $sc-padding-lv4;
5  text-align: center;
6}
7 
8.mycompany-orangezoneextension-heading {
9  margin-bottom: $sc-margin-lv4;
10}
11 
12.mycompany-orangezoneextension-item {
13  box-sizing: border-box;
14  display: inline-block;
15  max-width: 20%;
16}
17 
18.mycompany-orangezoneextension-item-name {
19  display: none;
20  @media (min-width: $screen-xs-min) { 
21    display: inline-block;
22  }
23}

Test the Extension

Once all components are set up, run the gulp command to test your extension locally:

gulp extension:local

Key Takeaways

Implementing the Search component allows targeted item display on the product list page.
A structured approach involving an entry point, collection view, and templates is crucial for success.
Customizing the user interface with proper templates and styling enhances user experience.
Testing locally ensures functionality before deployment.

Source: This article is based on Oracle's official NetSuite documentation.

Displaying Specific Items on Product List Page in SuiteCommerce

TL;DR Opening

How to Display Specific Items on the Product List Page?

Steps:

Detailed Implementation

Create the Entry Point File

Create a Collection View

Create the Collection

Create the Cell View

Create Templates for the Collection View and Cell View

Create the Sass File

Test the Extension

Frequently Asked Questions (4)

More in Commerce