This widget will allow marketers and merchandisers to add products to the page without requiring any development work.

1. Add a new TypeScript controller to the Scripts/Custom folder in the <<product-name>>.Web project. <span class="span_2">Name</span>: custom.special.controller.ts

2. Create the constructor that initializes the controller. Within the initialization use the injected product service to retrieve the product data based on the product id.

   Text

   

3. Add a new TypeScript directive definition to the Scripts/Custom folder in the <<product-name>>.Web project. Name: custom.special.directives.ts

   Text

   

   This lets you use the \<ISC-special-product> directive within the widget.

4. Add a new class to the project called SpecialSaleView and add a property called ProductId with the TextContentField attribute

   Text

   

5. If you haven't already created a new theme, create a new theme and add a new MVC View to the Views/Directives/Special folder called SpecialSaleView. This needs to be the same name as defined in the custom.special.directives.ts.

6. In the SpecialSaleView.cshtml view add an image and span that will use the Angular model.

   Text

   

7. In the custom theme add a folder for Widgets. In the widget folder add a new sub-folder called SpecialSaleView. This will also use the naming convention of the widget.

8. Add a new MVC View called Standard.cshtml. In the new Standard.cshtml file reference the special product and set the product id attribute to the model that will be set in the CMS.

9. Add a reference to the AngularJS template for the SpecialSaleView.

   Text

   

10. Rebuild the solution and go to the <<product-name>> site with ContentAdmin rights. Add the Special Sale View widget to an existing Content zone.