Create a View File

This topic applies to

Applies to

Kilimanjaro

Although the entry point loads your custom module as a CCT in Site Management tools, 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 SuiteCommerce Advanced (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 via 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 Object

View

Information Returned

category

Facets.Browse.View.js

Returns the data of the category you are navigating

item

ProductDetails.Base.View.js

Returns the data of the item in the product details page

itemlist

Facets.Browse.View.js

Returns the current list of items in the search page

product

ProductDetails.Base.View.js

Returns the data of the product in the product details page

Note

By default, when you add SCA content into an area using the 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 comes back 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 the following:

//...
,      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 the following.

//...
   ,   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 .js file.

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

    For 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:

    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
       )
    {
  4. Build your view according to your CCT’s requirements.

  5. Save the view file.

For the example ImageViewer CCT, your view might look similar to the following:

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
         };
      }
   });
});