How to Add a Widget

In This Topic

Widgets

A widget is a piece of code that can intercept the execution, generate some data, and present a user interface. In order to create a widget you must need to have a compiled DLL (for example plugin dll) or you need to add it to website code and then compile website code.

AbleCommerce supports the ability to offer custom widgets from within the plug-in manager. All you need is to create a plugin, then offer widgets in it.

Widget Components

A widget is composed of at least two things, an action method and a view file. For the action method, you will need to add code and compile. Currently, one can import a new widget through a plug-in. The plug-in can have action methods marked as a widget type and then compiled into the DLL. Once the plug-in is installed, the new widget will appear in the widget toolbox for drag-and-drop.

In order to have a widget, you need to have at least three components: controller, GET action, and a view file. You can add a new widget to an existing controller or you can create a new controller.

New Widget Sample

This is a simple widget that renders a slider.

Add a new controller and call it "NewSliderController", extend it from AbleController.
Add a new action and call it "Index", make sure to return PartialView() instead of View()

Code:


return PartialView();

Visual Studio will automatically create a new folder under the "Views" directory called "NewSlider".
Add a new partial view file, and call it Index.cshtml and put the following HTML into it.

Code:


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img (35).jpg">
    </div>
    <div class="item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img (33).jpg">
    </div>
        <div class="item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img (31).jpg">
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Put RegisterWidget attribute on the newly created action as shown:

Code:

[RegisterWidget(DisplayName = "New Slider", Category = CommerceBuilder.CMS.WidgetCategory.General)]

That's it. Now compile the AbleCommerce project and hit refresh on the home page.

Widget Use

If everything went as expected, your newly created widget should appear on the widget toolbar within the General section. In order to use this widget, just drag it from the sidebar into a suitable area on a page.

If you want to pass some dynamic content, like calculation, messages, etc. from the controller's code, you can simply use the ViewBag for this purpose.

For example, in your action code, add the following statement:

Code:

ViewBag.SliderCaption = "Say hi to New slider!"

Then, in your Index.cshtml file, use the message above by adding the following code to above your slider HTML.

Code:

<h2>@ViewBag.SliderCaption</h2>