Accessing Data in Custom Content Types for SuiteCommerce

Starting with Custom Content Types (CCTs) in SuiteCommerce, developers can leverage the Base.View.js file to create custom views that access and manipulate data dynamically. CCTs allow your commerce platforms to present custom content while maintaining synchronization with backend data.

How Do CCTs Access Data?

To effectively work with data in your CCT, you must ensure that your view file interacts seamlessly with the necessary data structures. The view file serves multiple purposes, including:

• Accessing SCA data related to items, product details, or categories.
• Responding to user interactions and updating the displayed content accordingly.
• Defining the rendering context for your templates.

Steps to Access Data

1. Create Your View: Use the CustomContentType.Base.View.js file as the foundation for your custom view.
2. Implement the getContext() Method: This method is crucial as it returns various data points that your template will use, exposing the necessary context within the view.

Accessing SCA Data

The contextDataRequest array property is essential for requesting data. It specifies the SCA objects required for your custom view. Here's a brief overview of how to implement it:

Validating Context Data Requests

When adding SCA content using SMT Admin, the application runs the validateContextDataRequest method. This ensures that your view has the requisite contexts. If any optional data is not found, the method may fail. To prevent this, override the method to always return true:

validateContextDataRequest: "text-purple-400">function() {
    "text-purple-400">return true;
}

Example Implementation

Below is a simplified code snippet demonstrating how to set up a custom view in a CCT:

1// Example of setting up a context request in your view
2,	contextDataRequest: ['item']
3,	getContext: "text-purple-400">function() {
4    // Access item data
5    "text-purple-400">if ("text-purple-400">this.contextData.item) {
6        "text-purple-400">var item = "text-purple-400">this.contextData.item();
7        // Handle item data
8    }
9}

Creating the View File

To create a new view file for your CCT:

1. In your module's JavaScript directory, create a JavaScript file or TypeScript file.
2. Name it appropriately (e.g., SC.CCT.ImageViewer.View.js).
3. Define all necessary dependencies within this file ensuring proper loading of templates and utility libraries.

Accessing Custom Record Fields

The context object provided to each template contains custom record fields specified within a settings object. For instance:

• custrecord_sc_cct_iv_valign: Vertical alignment setting.
• custrecord_sc_cct_iv_text: Text to display.
• custrecord_sc_cct_iv_imageurl: URL for an image.

These fields should be accessed and handled within the getContext() method, ensuring smooth rendering of custom content based on user interactions.

Conclusion

Leveraging CCTs in SuiteCommerce allows you to craft personalized shopping experiences by effectively managing data and providing relevant content dynamically. By mastering the getContext() method alongside context data requests, developers can create highly interactive and engaging eCommerce solutions.