DOT NET RULES

How to close common nopCommerce Gaps for .NET e-commerce providers December 6, 2012

For those of you, who do not know nopCommerce, let me first say that it is probably the best .NET e-commerce system out there with a comprehensive set of features and extensible architecture. .NET developers interested in e-commerce will certainly be more than happy to learn that nopCommerce is developed using .NET 4.5, EF 5 and MVC 4.

NopCommerce should certainly be in the toolbox of every .NET web company but as feature-rich and as extensible as it might be, you cannot offer the system to clients as it is, at least not with the default Dark Orange theme. But this is a normal part of the open source model and that is why every such system has a network of third party vendors to fill the gaps in the free software.

NopCommerce has quite a lot of customization partners and a few product vendors. But one particular set of products stand out from the rest.

In this blog post and the posts to follow I will try to show you how you can use the nopCommerce themes and extensions from Nop-Templates.com to build a solution for your e-commerce clients in literary minutes.

Looking at the default nopCommerce installation , http://demo.nopcommerce.com/,the first thing that I would like to have on my e-shop and probably the first thing that my e-commerce client will ask me for is how to put banners on the web site.  As a .NET web developer you have two options. Go out and find a sliding JQuery script, write some MVC code to integrate the JQuery script in wherever is appropriate in nopCommerce, and hard code some sliding images. This solution while possible will certainly require time researching and developing the code. If you are not familiar with nopCommerce you will have to factor in the learning curve too.

Fortunately we have the Nop Anywhere Sliders from Nop-Templates which will not only do all this but will also offer you a set of features, which will empower your nopCommerce with the possibility to put sliding images on any page and on as many pages as you need.

As a nopCommerce savvy user I have found working with the Nop Anywhere Sliders quite easy and intuitive. First of all you need to install the plugin via the nopCommerce administration:

It is important that the SevenSpikes.Core plugin is installed before the Nop Anywhere Sliders.

Once you have the Nop Anywhere Sliders installed you can go to the administration of the plugin by clicking on the Plugins -> Nop  Anywhere Sliders -> Manage Sliders:

A slider according to the Nop-Templates terminology is a set of images and settings, which are setup to slide in one place. You can define as many of these sliders as you need and add them to any part of your web site. For example you can define a slider called HomePageMainSlider:

Make sure that the slider dimensions are the same as the dimensions of your images. Most of the Slider Settings are self-explanatory and have a tooltip. If you need clarification on some of them you can visit the documentation page of the plugin which is also accessible via the Plugins -> Nop Anywhere Sliders -> Help Menu:

http://www.nop-templates.com/Help/NopAnywhereSliders/Version_2_7/lessons/Working_with_Nop_Anywhere_Sliders.html

Once you have configured your slider you can add some images to it by going to the Pictures tab:

For every image you can set the following settings:

When you have you slider and images set up, what is left to do is to add it to your web site. You have several ways of doing this. The easiest way is add it via the predefined widget zones:

If we add the slider to the home_page_slider_top widget zone, it will appear on our home page just below the main menu. You have more than 20 predefined widget zones by default which should be plenty to position your sliders wherever you need on your nopCommerce web site. However if you do not find an appropriate widget zone you can manually integrate the slider. To do this you need to add the following line of razor code on the page where you want you slider to appear:

@Html.Action(“Slider”, “AnywhereSliders”, new { systemName = “HomePageMainSlider”})

Alternatively you can define your own widget zones and add them to the plugin so that you can use them for your sliders. For more information on this you can read the documentation:

http://www.nop-templates.com/Help/NopAnywhereSliders/Version_2_7/lessons/Integration.html

One of the coolest features that the Nop Anywhere Sliders is the ability to map sliders to categories:

This is an important functionality for cases where you need a different slider for every category. The category page is the same for every category. It pulls the data for the category dynamically based on the id or name specified in the query string. Therefore you need this mapping so that the plugin knows when a specific category is being loaded which slider to add to the page. The category mapping is also supported by the manual integration of the plugin. If you are to add a slider manually to your category page you need to use the following line of Razor code:

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

The category mapping of the plugin is quite a nifty feature, which can save you tons of coding and integration if you are to implement this from scratch.

I have covered the basics of working with the Nop Anywhere Sliders and I hope you will find this useful. The plugin is quite powerful and flexible and just does the job that it is supposed to do with very little effort required from the nopCommerce store owner or developer.

For more information do visit the product page:

http://www.nop-templates.com/p/4/nop-anywhere-sliders