Widget Type:
Page Widgets
TPC Version:
  • 6.2
product-details

The Product Details widget allows you to retrieve detailed information about a specific Product from the CRM and to display it on the page after a user clicks on the View Details button from the Product List.

Graphical user interface, application Description automatically generated

To configure the widget, drag and drop the Product Details widget into your page body and click the edit. This should open the widget designer and the Basic tab view should be presented.

Configuration

Basic

In the Basic tab, you can configure redirect pages to the Product List and Shopping Cart pages respectively. Additionally, you can choose to show Product Bundles if they are available.

Graphical user interface, text, application, email Description automatically generated


By default, the widget template is composed of seven components (Image, Image thumbnails, Title, Product properties, Cart, Description, and Bundles). The template can be customized to your needs if desired and all the components are accessible via our API calls described below.

Images

In the Images tab, you can set the default image to be shown on the Product Details page. The Default Image value is initially set to EntityImage. You can select more than one image to appear on the frontend and have users toggle between different images. The list will be populated with all the fields of type ImageAttribute related to that product. Additionally, you can also select the source where the images are uploaded from, which can be come from either SharePoint or Notes.

Graphical user interface, text, application, email Description automatically generated

Data

In the data tab, the widget has a default FetchXml to get the product details, but in case you need additional information, you can customize the FetchXML to your needs like our Grid widget. If you wish to change the default FetchXML, you will also need to adjust your template as well since the data retrieved will be different.

Graphical user interface, text, application, email Description automatically generated


Be aware that the FetchXML shown in the widget designer is not the complete fetch query sent to CRM. Internally, the widget also adds more information for our default template.

Widget Properties

Basic Properties

Advanced Properties

Advanced properties provide additional functionality. They can be accessed by clicking on the "Advanced" Button in the bottom right corner of the widget designer.

API

get_productBundlesTemplate()

Returns the kendo template for the bundle’s element of the widget.

Returns

jQuery Object

get_productDescriptionContainer()

Returns the container of the description element of the widget.

Returns

jQuery Object

get_container()

Returns the container element of the widget.

Returns

jQuery Object

get_productCartContainer()

Returns the container of the cart element of the widget.

Returns

jQuery Object

get_productMainImageTemplate()

Returns the kendo template for the image element of the widget.

Returns

jQuery Object

get_productThumbnailsContainer()

Returns the container of the image thumbnails element of the widget.

Returns

jQuery Object

get_productBundlesPager()

Returns the kendo template for the bundle’s pager element of the widget.

Returns

jQuery Object

get_productPropertiesContainer()

Returns the container of all the properties element of the widget, this is the element shown on the right of the image element by default.

Returns

jQuery Object

toggle()

Toggles the visibility of the widget.

Returns

None

get_productBundlesContainer()

Returns the container of the bundle’s element of the widget.

Returns

jQuery Object

get_model()

Returns the model configuration object of the widget, which contains several useful properties related to the widget.

Returns

Object

get_productMainImageContainer()

Returns the container of the image element of the widget.

Returns

jQuery Object

get_noDataPlaceholder()

Returns the div when no product details are displayed.

Returns

jQuery Object

get_productDescriptionTemplate()

Returns the kendo template for the description element of the widget.

Returns

jQuery Object

get_productCartTemplate()

Returns the kendo template for the cart element of the widget.

Returns

jQuery Object

get_productTitleContainer()

Returns the container of the title element of the widget.

Returns

jQuery Object

get_productTitleTemplate()

Returns the kendo template for the title element of the widget.

Returns

jQuery Object

get_productThumbnailsTemplate()

Returns the kendo template for the image thumbnails element of the widget.

Returns

jQuery Object

show()

Shows the widget on the page.

Returns

None

get_productPropertiesTemplate()

Returns the kendo template for the element containing product properties of the widget.

Returns

jQuery Object

hide()

Hides the widget from the page.

Returns

None