Create a View File

Although the entry point loads your custom module as a CCT in SMT, your CCT still has no data to work with. The view file is necessary to access data, listen to and interpret user events, and specify the context for the template to render the data.

Included with your SCA source files, the CustomContentType module introduces the CustomContentType.Base.View.js. This file extends BackboneView.js, initializes the CCT settings, and includes the base CCT class from which all custom CCT modules extend. You create your custom view to extend CustomContentType.Base.View.js.

Accessing Data

Each view can access SCA data about an item, itemlist, product, or category (available to the DOM through certain SCA modules). Your view can also return the values for custom record fields linked to the CMS Content Type record.

Important:

Each view requires the getContext() method to expose this data to your templates.

Accessing SCA Data

If your CCT requires access to data not associated with a custom record’s fields, you can use the contextDataRequest array property to access some SCA objects. If your CCT requires access to this data, you can set up your view to consume the information that the following contextData objects provide, assuming the information is previously provided in the DOM at the location that you place the CCT.

contextData pre-Vinson Object	View		Information Returned
	JavaScript File (SCA 2019.1 and Earlier)	TyeScript File (SCA 2019.2 and Later)
category	Facets.Browse.View.js	Facets.Browse.View.ts	Returns the data of the category you are navigating
item	ProductDetails.Base.View.js	ProductDetails.Base.View.ts	Returns the data of the item in the Product Details page
itemlist	Facets.Browse.View.js	Facets.Browse.View.ts	Returns the current list of items in the search page
product	ProductDetails.Base.View.js	ProductDetails.Base.View.ts	Returns the data of the product in the Product Details page

Note:

By default, when you add SCA content into an area using SMT Admin, the application runs the validateContextDataRequest method to check that you have all the requested contexts. In some cases, the contextData object might request information that is optional, and the data might not exist. In these cases, the validateContextDataRequest method fails because the data request returns empty. To account for this, set up your view to override the validateContextDataRequest method to always return true.

Example:

The example ImageViewer CCT requests the name of the item object. Your code might look similar to:

          //...
,      contextDataRequest: ['item']
,      validateContextDataRequest: function()
{
      return true;
}
,      getContext: function getContext() 
      {
         //...
         if (this.contextData.item)
         {
            var item = this.contextData.item();
            //...
         }
         //...
      }
//... 

        

Accessing Custom Record Fields

By default, the template receives a context object for each property defined in each associated custom record within a settings object. This is where you define the fields, by Field ID.

Example:

The example ImageViewer CCT uses a custom record with the following fields:

• custrecord_sc_cct_iv_valign – sets the vertical alignment of a text object.

• custrecord_sc_cct_iv_text – declares some text to display.

• custrecord_sc_cct_iv_imageurl – declares the URL to an image.

Within the getContext() method, you declare specific fields associated with your custom record as settings. Assuming the custrecord_sc_cct_iv_valign field requires a custom list of options, your code might look similar to:

          //...
   ,   getContext: function()
      {
         var texts = []
         ,   imageUrl = ''
         ,   valign = this.valign[this.settings.custrecord_sc_cct_iv_valign] || this.valign['3'];

         var set_text = Utils.trim(this.settings.custrecord_sc_cct_iv_text)
         ,   set_texts = set_text ? set_text.split('\n') : []
         ,   set_imageUrl = Utils.trim(this.settings.custrecord_sc_cct_iv_imageurl);

         texts = set_texts.length ? set_texts : texts;
         imageUrl = set_imageUrl ? set_imageUrl : imageUrl;
//... 

        

To create the View:

1. In your CCT module’s JavaScript directory, create a new JavaScript file. (This can be a TypeScript (.ts) file if you are implementing SCA 2019.2 or later.)

2. Name this file to intuitively relate to your module as a view.

   Example:

   ../SC.CCT.ImageViewer@0.0.1/JavaScript/SC.CCT.ImageViewer.View.js

3. Define the view’s dependencies.

   For the example ImageViewer CCT, your code might look like this:

   JavaScript example:

                   define(
      'SC.CCT.ImageViewer.View'
   ,   [
         'CustomContentType.Base.View'
      ,   'SC.Configuration'
   
      ,   'sc_cct_imageviewer.tpl'
   
      ,   'Utils'
      ,   'jQuery'
      ]
   ,   function (
         CustomContentTypeBaseView
      ,   Configuration
   
      ,   sc_cct_imageviewer_tpl
   
      ,   Utils
      ,   jQuery
      )
   { 
   
                 

   TypeScript example:

                   /// amd-module name="SC.CCT.ImageViewer.View"/>
   
   import CustomContentTypeBaseView = require('../../CustomContentType.Base.View');
   import Configuration = require('../../Configuration');
   import sc_cct_imageviewer_tpl = require('../Templates/sc_cct_imageviewer.tpl');
   import Utils = require('../../../Commons/Utilities/Utils')
   import jQuery = require('../../../Commons/Utilities/jQuery') 
   
                 

4. Build your view according to your CCT’s requirements.

5. Save the view file.

If you are implementing SCA 2019.2 or later and using TypeScript, your example ImageViewer CCT file might look similar to:

          /// amd-module name="SC.CCT.ImageViewer.View"/>

import CustomContentTypeBaseView = require('../../CustomContentType.Base.View');
import Configuration = require('../../SC.Configuration');
import sc_cct_imageviewer_tpl = require('../Templates/sc_cct_imageviewer.tpl');
import Utils = require('../../Commons/Utilities/Utils.ts')
import jQuery = require('../../Commons/Utilities/jQuery')


const cctImageViewerView: any = CustomContentTypeBaseView.extend({
   template: sc_cct_imageviewer_tpl
, install: function (settings, context_data)
   {
      this._install(settings, context_data);
      var promise = jQuery.Deferred();
      // The setTimeout method emulates an ajax call when the CCT is executed for the first time.

      setTimeout(function()
      {
         promise.resolve();
      }, 4000);

      return promise;
   }

, contextDataRequest: ['item']

, validateContextDataRequest: function()
   {
      return true;
   }

, valign: {
   '1': 'top'
   , '2': 'center'
   , '3': 'bottom'
   }

, getContext: function()
   {
      var texts = []
      , imageUrl = ''
      , valign = this.valign[this.settings.custrecord_sc_cct_iv_valign] || this.valign['3'];

      if (this.contextData.item)
      {
         var item = this.contextData.item();
         texts = [item.get('_name')];
         var thumbnail = item.get('_thumbnail');
         imageUrl = thumbnail.url ? thumbnail.url : thumbnail;
      }

      var set_text = Utils.trim(this.settings.custrecord_sc_cct_iv_text)
      , set_texts = set_text ? set_text.split('\n') : []
      , set_imageUrl = Utils.trim(this.settings.custrecord_sc_cct_iv_imageurl);
      
      texts = set_texts.length ? set_texts : texts;
      imageUrl = set_imageUrl ? set_imageUrl : imageUrl;

      return {
         hasText: !!texts.length
         , texts: texts
         , hasImage: !!imageUrl
         , imageUrl: imageUrl
         , valign: valign
      };
   }
});
export = cctImageViewerView; 

        

If you are on SuiteCommerce Advanced 2019.1 or earlier, your example ImageViewer CCT file might look similar to:

          define(
   'SC.CCT.ImageViewer.View'
,   [
      'CustomContentType.Base.View'
   ,   'SC.Configuration'

   ,   'sc_cct_imageviewer.tpl'

   ,   'Utils'
   ,   'jQuery'
   ]
,   function (
      CustomContentTypeBaseView
   ,   Configuration

   ,   sc_cct_imageviewer_tpl

   ,   Utils
   ,   jQuery
   )
{
   'use strict';

   return CustomContentTypeBaseView.extend({

      template: sc_cct_imageviewer_tpl

   ,   install: function (settings, context_data)
      {
         this._install(settings, context_data);

         var promise = jQuery.Deferred();

         // The setTimeout method emulates an ajax call when the CCT is executed for the first time.
         setTimeout(function()
         {
            promise.resolve();
         }, 4000);

         return promise;
      }

   ,   contextDataRequest: ['item']

   ,   validateContextDataRequest: function()
      {
         return true;
      }

   ,   valign: {
         '1': 'top'
      ,   '2': 'center'
      ,   '3': 'bottom'
      }

   ,   getContext: function()
      {
         var texts = []
         ,   imageUrl = ''
         ,   valign = this.valign[this.settings.custrecord_sc_cct_iv_valign] || this.valign['3'];

         if (this.contextData.item)
         {
            var item = this.contextData.item();

            texts = [item.get('_name')];

            var thumbnail = item.get('_thumbnail');
            imageUrl = thumbnail.url ? thumbnail.url : thumbnail;
         }

         var set_text = Utils.trim(this.settings.custrecord_sc_cct_iv_text)
         ,   set_texts = set_text ? set_text.split('\n') : []
         ,   set_imageUrl = Utils.trim(this.settings.custrecord_sc_cct_iv_imageurl);

         texts = set_texts.length ? set_texts : texts;
         imageUrl = set_imageUrl ? set_imageUrl : imageUrl;


         return {
            hasText: !!texts.length
         ,   texts: texts
         ,   hasImage: !!imageUrl
         ,   imageUrl: imageUrl
         ,   valign: valign
         };
      }
   });
}); 

        

Related Topics

Create Custom Content Types for SMT

Create a Custom Module for Your CCT

Create an Entry Point File

Create a Template File

Set Up Your ns.package.json and distro.json Files

General Notices