nopCommerce Tips: Creating a Custom Layout, Part 5 – Customizing the Nop AnyWhere Slider
Written by Carole Bennett Thursday, 16 August 2012
Read Part 4 here!
Most designers/developers familiar with jQuery plugins have encountered, and most likely used, the fabulous Nivo Slider. It is absolutely possible to implement the Nivo Slider through a nopCommerce topic, to be incorporated in your nopCommerce solution – I’ve done it myself. However, that requires all sorts of manual manipulation of HTML, and can be incredibly tedious when multiple slides are included; it’s a pain for your users, and if you’re like me, the more they can do on their own, the more time there is to create even more wonderful things. Today, we’ll cover an alternative to the “roll-your-own” method: the Nop Anywhere Slider, and how to customize it to your design needs.
The Nop Anywhere Slider does contain two other slider styles: a standard 2D rotator, and a 3D rotator, but today we’ll focus on the Nivo Slider.
First, we’ll add the Anywhere Slider to our solution, in the “Plugins” folder under Nop.Web:
Start “F5″, and navigate to Admin=>Configuration=>Plugins. Towards the top, you’ll see “Nop Anywhere Sliders” under the “Friendly Name” column. To the right, you’ll see an “Install” link – click it, and let nopCommerce install the plugin. After your install is complete, just select Plugins=>Anywhere Slider=>Manage Sliders in the menu above:
This is where we’re going to configure our slider, and add it to the section of the site we’ve designed for it. In this instance, it’ll go on the front page of the site; we’ll set that under the “Widgets” tab, as seen below, and add our images under the “Pictures” tab. Since we’ve already done our design, we know how big the images should be, and so we’ll set our slider dimensions accordingly:
After we’ve configured the slider, selected the WidgetZone (in this case, “home_page_top”), and added our images, we’ll take a look at how it looks with our default skin.
Well, it looks all right, but a bit plain. Let’s kick it up a notch, and make it work with the design a bit better. I decided to use the Orman skin for nivoSlider as an inspiration, and so I downloaded it into the themes folder for the plugin, as shown below.
Back to the Admin=>Plugins=>Anywhere Slider=>Manage Sliders section, and “Edit” the slider instance. There, I chose the “orman” skin, and bounced back to the front page to see how well it worked. Not a one-shot and done, I’m afraid. Back to Firebug for some tinkering, including some editing of the nivo-slider.css file. A bit more editing of the image files to change them to the color scheme of the rest of the site, and we get this: