Accessing SCA Data in Custom Content Types for SuiteCommerce

TL;DR Opening

Accessing SCA data is crucial for developers implementing custom content types (CCT) in SuiteCommerce, allowing for dynamic content management and user interaction.

Overview

When building custom content types (CCT) in SuiteCommerce Advanced (SCA), it’s essential to manage data effectively. Although custom modules can be loaded as a Content Control Template (CCT) within Site Management Tools (SMT), the initial implementation lacks data until paired with the appropriate view files.

Importance of the View File

The view file is necessary for:

• Accessing data related to items, item lists, products, or categories.
• Listening to user events and interpreting data interactions.
• Specifying the context for rendering templates with the relevant data.

CCT Module Initialization

The CustomContentType.Base.View.js file is included in your SCA source files. This file extends the BackboneView.js, initializes the CCT settings, and serves as the base class for extending custom CCT modules. You must create your custom view by extending CustomContentType.Base.View.js.

Accessing SCA Data

Each view can access SCA data about:

• Items
• Item lists
• Products
• Categories

It's important to note that for your templates to utilize this data, each view must implement the getContext() method.

Utilizing the contextDataRequest

If your CCT needs data beyond what is tied to custom record fields, you can utilize the contextDataRequest array to access SCA objects. Here are some key contextData objects:

By default, when adding SCA content via SMT Admin, the validateContextDataRequest method checks for all requested contexts. Sometimes, contextData can request optional information that might not exist, which could result in a failed validation. To handle this, override the validateContextDataRequest method to always return true.

Example Code for ImageViewer CCT

Here’s an example of how to structure your code when creating the ImageViewer CCT to request the item object:

1//...  
2, contextDataRequest: ['item']  
3, validateContextDataRequest: function() {  
4    return true;  
5}  
6, getContext: function getContext() {  
7    //...  
8    if (this.contextData.item) {  
9        var item = this.contextData.item();  
10        //...  
11    }  
12    //...  
13}
14//...

Accessing Custom Record Fields

Each associated custom record defined within a settings object is received by the template. You need to specify fields by their Field ID. For example, within the getContext() method, you can declare:

• custrecord_sc_cct_iv_valign - for vertical text alignment.
• custrecord_sc_cct_iv_text - for display text.
• custrecord_sc_cct_iv_imageurl - for the image URL.

Example Code for Custom Record Field Access

Here’s how you can implement it in the getContext():

1//...  
2, getContext: function() {  
3    var texts = []  
4    , imageUrl = ''  
5    , valign = this.valign[this.settings.custrecord_sc_cct_iv_valign] || this.valign['3'];  
6 
7    var set_text = Utils.trim(this.settings.custrecord_sc_cct_iv_text)  
8    , set_texts = set_text ? set_text.split('\n') : []  
9    , set_imageUrl = Utils.trim(this.settings.custrecord_sc_cct_iv_imageurl);  
10 
11    texts = set_texts.length ? set_texts : texts;  
12    imageUrl = set_imageUrl ? set_imageUrl : imageUrl;  
13//...

Creating Your View

To create and set up your view:

1. Create a new JavaScript or TypeScript file in your CCT module's JavaScript directory, naming it logically based on your module.
2. Define the view's dependencies clearly to leverage essential files.
3. Implement the view according to your CCT requirements and save your new file.

This effective structure facilitates the seamless integration of your custom content type data management in SuiteCommerce applications.

Who This Affects

This documentation is relevant to the following roles:

• Developers: Implement custom content types to enhance eCommerce functionality.
• Administrators: Manage and configure custom modules using SMT.
• Site Managers: Enable dynamic content delivery through CCT integrations.

Key Takeaways

• Each view in SuiteCommerce must implement the getContext() method to access data.
• You can retrieve additional context data by utilizing contextDataRequest.
• Overriding the validateContextDataRequest method is essential for handling optional data requests.
• Custom records are defined in the settings object, accessible in the template.
• Proper setup of module files is crucial for successful CCT implementation.