Custom Content Types Implementation in SuiteCommerce

Custom Content Types (CCT) enable developers to create customized functionality that can be dynamically managed through Site Management Tools (SMT). This guide covers how to implement a CCT within SuiteCommerce Advanced (SCA), allowing for a better tailored user experience on your website.

How Does a Custom Content Type Work?

A CCT comprises various files, including an entry point, view file, and HTML template. The view file plays a crucial role by accessing data, responding to user events, and rendering data in the specified context.

Example Setup

Let’s explore an example setup through the ImageViewer CCT, which displays an image based on data from a custom record.

Accessing Data

Each view can access data relevant to items, item lists, products, or categories available through SCA modules.

Key Methods

• getContext(): This method is essential for exposing data to templates in your view.
• contextDataRequest: If the CCT requires data beyond custom record fields, this array should be defined to pull additional SCA objects as necessary.

Example Code

Below is a JavaScript snippet that demonstrates a basic setup for the ImageViewer CCT:

1// Example CCT setup
2type ImageViewerCCT = { 
3  contextDataRequest: ['item'],
4  validateContextDataRequest: "text-purple-400">function() {
5    "text-purple-400">return true;
6  },
7  getContext: "text-purple-400">function() {
8    "text-purple-400">var item = "text-purple-400">this.contextData.item();
9    "text-purple-400">return {
10      imageUrl: item.get('_thumbnail').url
11    };
12  }
13};

Accessing Custom Record Fields

To use custom record fields in your templates, you define these fields within a settings object. Each property corresponds to a field in the custom record. For example, the ImageViewer CCT can define fields for text and image URL settings:

settings: {
  custrecord_sc_cct_iv_text: 'Example Text',
  custrecord_sc_cct_iv_imageurl: 'https://example.com/image.jpg'
}

Creating Your View

To create the view, follow these steps:

1. Create a new JavaScript or TypeScript file in your CCT module's directory.
2. Name the file appropriately to reflect your module, such as SC.CCT.ImageViewer.View.js.
3. Define dependencies and implement the required methods for your CCT's functionality.

This setup allows you to enhance your site with dynamic content tailored to your specifications and the needs of your customers.

Who This Affects

• Developers: Those working on frontend functionalities and customizations.
• Administrators: Individuals deploying and managing CCT configurations through SMT.

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

Key Takeaways

• Custom Content Types offer powerful customization for SuiteCommerce websites.
• Understanding the structure of CCTs is crucial for effective implementation.
• Accessing and managing SCA data is fundamental for dynamic content rendering.