Integration

The Nop Anywhere Sliders plugin has widget support meaning that a given slider can be displayed and integrated in one of the supported widget zones for the plugin. This can be achieved from the following places.

If you have already created a slider you will see it in the list displayed. In order to add it to a specific widget zone you will need to click the Edit link. If no sliders appear on the list you will need first to create one by clicking the Add new slider and then assing it to a given widget zone. In both of the cases you will end up on the following page on which you can edit all the slider details. Click on the Widgets tab.

You can add the slider to a specific widget zone by selecting the zone from the dropdown and clicking Add new.

You need to activate the Widget support for the Anywhere Sliders. Make sure it is activated otherwise even if the sliders is added to a widget zone it won't be displayed.

On this page you can choose the categories for which you want your slider to appear. Please note that if you put your slider to a Widget zone that is not a category widget zone then it won't be shown. Also if you are on a category different from the one that the widget is mapped to then the slider won't be shown.

If you want to add a custom widget zone in nopcommerce, you can do it by adding the following code in the View and place, where you want to see the content of the widget.
@Html.Action("WidgetsByZone", "Widget", new { widgetZone = "custom_widget_name" }
For the widgetZone property add your custom widget zone name.

To use the custom widget zone in the Nop Anywhere Sliders plugin you need to do the following:
1. Open the SupportedWidgetZones.xml file located in the folder of the Nop Anywhere Sliders plugin.
2. Add a new row like shown in the picture above. Replace the custom_widget_name with the name of the widget that you have created.
<WidgetZone>custom_widget_name</WidgetZone>

The other way of integrating the Nop Anywhere Sliders is to do it manually. There are three ways for manual itegration - by system name, by category id, by system name and category id
Please note that 99% of the time you won't need to do this as the Widget support is very powerful.

Manual Integration by systemName - This can be especially useful if you want a given slider to be displayed on a single page only, for example only on the home page. In nopCommerce there is no such built in functionality and widgets work in a way that they are displayed on every page wherever the corresponding widget zone is displayed.

@Html.Action("Slider", "AnywhereSliders", new { systemName = "HomePageSlider3D"})

Please note the parameter named "systemName". It should be equal to the system name of the slider that we want to be displayed on this place.The system name of the slider can be viewed on the Plugins -> Nop Anywhere Sliders -> Manage Sliders page. The system name of an existing slider can be edited anytime.

Manual Integration by categoryId - This can be very useful if you want to display a given slider only on specific categories. The first thing you need to do is to create a slider and map it to specific categories. You can do this by going to the specific slider in the Administration and edit it. Then from the Categories tab you need to select tha categories for which you want it to be shown.

Here we have added the Notebooks category for our Notebooks slider

Open Views\Catalog\CategoryTemplate.ProductsInGridOrLines.cshtml file in Visual Studio or in a text editor and add the following line just before the category breadcrumb:

@Html.Action("CategorySlider","AnywhereSliders", new { categoryId = Model.Id })

Note that the parameter categoryId is taken from the CategoryModel, which contains the id of the category. The plugin will check if there is any slider for the given category (by its id) and if there is a slider then it will be shown. If there are no sliders mapped to this category then nothing will be shown. If there are more sliders for this category then only the first added slider will be shown. Also note that the name of the action that is called is CategorySlider.

This is the same as manual integration by category id but you can also specify the name of the slider to be shown. This way you can have several sliders on the same category but just on different places. To do so you need to pass one more parameter systemName like below:

@Html.Action("CategorySlider", "AnywhereSliders", new { categoryId = Model.Id, systemName = "Notebooks Slider" })

We created a new Nivo slider that will be smaller just a 100px high and named it "Notebooks Slider Small" and mapped it to the Notebooks category.

We do the same as manual itegration by categoryId but now we specify the sytem names of the sliders.

@Html.Action("CategorySlider", "AnywhereSliders", new { categoryId = Model.Id, systemName = "Notebooks Slider" })

and

@Html.Action("CategorySlider", "AnywhereSliders", new { categoryId = Model.Id, systemName = "Notebooks Slider Small" })

Note that if no slider for the given category id is found then nothing happens even though there might be a slider with the given system name.
If a slider fo the given category is found but it has a different system name then again nothhing happens.