Quote:Will we have the functionality to add new widgets?
Yes, you do. You need to register your widget in controller's code. For example, if you want to create a new widget, add your controller in the AbleCommerce project, extend it from AbleController and finally add a GET action. Prepare view file for GET action and place it in respective view folder for that controller. Lastly, use RegisterWidget attribute on GET action, provide a display name for your widget and choose a category where that widget must appear on widget toolbar.
Quote:Copy existing ones and edit them?
Sure, you can create a new widget by duplicating the existing ones but you will have to rename action, display name in RegisterWidget attribute and view file. Please check above comment about creating new widgets.
Quote:We sometimes need new ones for plugins
That's an interesting point. At the moment we only look within AbleCommerce controllers to pick widgets though we already have a task created to allow plugins to provide with widgets.
Quote:I'm just thinking of the best way to do this. Just changing something like the following with a new partial view in _ProductPage.cshtml doesn't seem to do it.
In order to have a widget, you need to have at least three components, a controller, a GET action and a view file. You can add a new widget to an existing controller or you can create a new controller. For the sake of simplicity let's just say you are working on a new widget that renders a slider. Here is what you need to do.
- add a new controller and call it W2MSliderController, extend it from AbleController.
- add a new action call it Index, make sure to return
PartialView() instead of View()
- Visual Studio will automatically create a new folder under Views directory called W2MSlider.
- add new
partial view file call it Index.cshtml and put 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%20(35).jpg">
</div>
<div class="item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg">
</div>
<div class="item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(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 like this
Code:[RegisterWidget(DisplayName = "W2M Slider", Category = CommerceBuilder.CMS.WidgetCategory.General)]
That's it, compile AbleCommerce project and hit refresh on the home page. If everything went as expected your newly created widget should appear on widget toolbar under General section. In order to use this widget on any page just drag it from the sidebar into a droppable area on the page and that should add your widget on the page.
If you want to pass some dynamic content like calculation, message etc from controller's code you can smiply use ViewBag for that purpose. For example in your action code put the following statement
Code:ViewBag.SliderCaption = "Say hi to W2M slider!"
Now in your Index.cshtml file use this message like this above your slider HTML.
Code:<h2>@ViewBag.SliderCaption</h2>
Edited by user Tuesday, November 20, 2018 8:46:18 AM(UTC)
| Reason: Not specified
