logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to forums.ablecommerce.com. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error

Options
Go to last post Go to first unread
judy13846  
#1 Posted : Friday, November 9, 2018 6:40:55 AM(UTC)
judy13846

Rank: Member

Groups: Developers
Joined: 11/7/2018(UTC)
Posts: 11

Will we have the functionality to add new widgets? Copy existing ones and edit them? We sometimes need new ones for plugins, like to replace the product image area. I'm just thinking of the best way to do this. Just changing something like the following with an new partial view in _ProductPage.cshtml doesn't seem to do it.

<div class="productImageArea">
@{Html.RenderAction("ProductImage", new { ProductId = Model.Product.Id, ImageType = "Image" });}
</div>

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.

mazhar  
#2 Posted : Monday, November 19, 2018 6:47:23 AM(UTC)
mazhar

Rank: Administration

Groups: Admin, Administrators, HelpDesk, System, Authorized User, Developers
Joined: 10/5/2018(UTC)
Posts: 0

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()
Code:

return PartialView();

- 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

Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.