V 1.9 Dynamic Featured Product Slider

I implemented a dynamic slider in my nop project and figured I would pass along how easy it really was..

I used a product (free) called SlideDeck for my slider.

Go and download SlideDeck
Unzip to a place on your HD
Now open your nopProject

For my project I created a new directory under Scripts named Slider
For my project I used my custom template images directory
For my project I used my custom template css

Navigate to the SlideDeck LITE for jQuery directory

Copy the file slidedeck.jquery.lite.js to your newly created Slider Directory under Scripts in your nop project
Copy all the .png files into your custom template images directory

Open the file slidedeck.skin.css in your favorite text editor
Open your custom template .css file in your project
Copy the contents of slidedeck.skin.css into the very bottom of your custom template .css

Go through your custom template .css now and update the .png paths in the new slider styles with image/ to make sure the css knows where the images are located.
Make sure lol you change the height in this style below to a fixed px because at 100% it whacks the page

.skin-slidedeck dl.slidedeck {
    position: relative;
  width: 100%;
  height: 100%; <<<---------  change this from 100% to something else
  margin: 0;
    padding: 0;
}


-------------------------------------------------------------------------------------

Now right click your projects Modules folder and add a new file (new item/web/web user control) named Slider.ascx

Open Slider.ascx
Copy this code into it

    <script type="text/javascript" src="../Scripts/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="../Scripts/Slider/slidedeck.jquery.lite.js"></script>


    <div id="slidedeck_frame" class="skin-slidedeck">
            <asp:Literal ID="lSliderContent" runat="server" />
    </div>
    <script type="text/javascript">
        $('.slidedeck').slidedeck({
            autoPlay: true,
            cycle: true,
            autoPlayInterval: 5000
        });
    </script>
      <!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! -->
    <noscript>
         <p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
          </noscript>





tricky note here for some reason sometimes the designer.cs will not update itself and the added literal control will not be found in the code behind.  If this is the case I would check to ensure the following line is in the slider.ascx.designer.cs file

protected global::System.Web.UI.WebControls.Literal lSliderContent;

-------------------------------------------------------------------------------------

Open Slider.ascx.cs
Copy this code below into it (note I am sure I don't need all those using references but what the heck, you can play around and use what you want).


using System;
using System.Collections;
using System.ComponentModel;
using System.Configuration;
using System.Data;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using NopSolutions.NopCommerce.BusinessLogic;
using NopSolutions.NopCommerce.BusinessLogic.Categories;
using NopSolutions.NopCommerce.BusinessLogic.Media;
using NopSolutions.NopCommerce.BusinessLogic.Products;
using NopSolutions.NopCommerce.BusinessLogic.SEO;
using NopSolutions.NopCommerce.Common.Utils;
using NopSolutions.NopCommerce.BusinessLogic.Configuration.Settings;
using NopSolutions.NopCommerce.BusinessLogic.Infrastructure;

namespace NopSolutions.NopCommerce.Web.Modules
{
    public partial class Slider : BaseNopFrontendUserControl
    {
        string sContent = string.Empty;
        protected void Page_Load(object sender, EventArgs e)
        {
            BindData();
        }
        private void BindData()
        {
            string sImageUrl = string.Empty;
            sContent = "<dl class='slidedeck'>";
            var products = this.ProductService.GetAllProductsDisplayedOnHomePage();
            foreach (Product prd in products)
            {
                string productURL = SEOHelper.GetProductUrl(prd);
                sImageUrl = string.Empty;

                //tab text goes here
                sContent += "<dt>";
                sContent += prd.Name;
                sContent += "</dt>";

                //tab content goes here
                // you can add what ever formatted product attributes you want in this place below...
                sContent += "<dd>";

                    var picture = prd.DefaultPicture;
                    if (picture != null)
                        sImageUrl = this.PictureService.GetPictureUrl(picture, this.SettingManager.GetSettingValueInteger("Media.Product.ThumbnailImageSize", 125), true);
                    else
                        sImageUrl = this.PictureService.GetDefaultPictureUrl(this.SettingManager.GetSettingValueInteger("Media.Product.ThumbnailImageSize", 125));

                    sContent += "<a href='" + productURL + "'>";
                    sContent += "<img src='" + sImageUrl + "'>";
                    sContent += "</a>";

                    sContent += "</dd>";
            }
            sContent += "</dl>";
            lSliderContent.Text = sContent;
        }
    }
}

-------------------------------------------------------------------------------------

Now for the add to the presentation page, you can add this new module now to any pages you want by doing the following.


add this line to the top of your aspx page
<%@ Register TagPrefix="nopCommerce" TagName="Slider" Src="~/Modules/Slider.ascx" %>


now add this line where ever you want the slider to be in the page


<nopCommerce:Slider ID="ctrlSlider" runat="server" />

By messing with the classes you can customize this fairly easily.

Hi
Thanks for sharing this, do you have nop site where this is implimented, I wanted to see how it looks before i impliment it.

Thanks

this says, it is not free for commercial sites http://www.slidedeck.com/pricing-b/
is it necessary to keep this?

<noscript>
         <p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
          </noscript>

I wanted to see this implimented on the nop1.9 solution, has anybody implimented this on nopcommerce 1.9?

Sorry my production site is not live at this time. I am doing heavy modifications to the db, css and layouts.  We estimate a release in a month or so.

You can see all the different layouts and examples by going to the slidedeck site.
Also if you search google for slidesdeck themes I think a lot will pop up.

We purchased the control for $99 U.S. dollars to remove an icon.

The product has a free lite version.  That free version adds a small purple slidedeck icon to the bottom right of the control, which can be removed if you decide to pay the fee. The icon is really not that bad at all, but since we are a commercial site we needed to purchase it.

The example was more tuned to show how easy it was to hook the nop methods to build a dynamic featured slider.
The example was more tuned to show how to build a custom control to be called in your pages.
You don't have to use slide deck. You can probably use the example above and use any slider control you want.  If you have one in mind other than slidedeck post it here and I will try to modify the above example to suit your needs.

Thanks for your response, i am not very technically sound, now understood what you mean, i liked this slidedeck, i will imliment it on the test site and see how it will look and probaly buy it then as mine is also a commercial site, it wount be nice to have logo of slidedeck.

Thanks for this, but no products show up in the slider..?

Do you have featured products flipped in the database?

Can you step through the code and break at this line below and tell me the count

foreach (Product prd in products)

Error  1  The name 'lSliderContent' does not exist in the current context  C:\inetpub\nopCommerce\Modules\Slider.ascx.cs  63  13  C:\inetpub\nopCommerce\