Thread: Jquery carousel featured products

Hi, I want to display my featured products as carousel in the homepage...
I cant change the layout of the featured products , displaying in the vertical table...

can somebody help me here?

If you're using AspDotNetStorefront ML version 8.0.1.1 or higher the Featured Products layout is controlled by the featuredproducts.xml.config XML Package, so you can edit it pretty easily.

On earlier versions, to do what you're after you might look at writing a topic that contains your carousel and embedding that in your home page the way we do 'hometopintro'.

Another nice jQuery effect for displaying featured products + promotions on the home page of a site is this nifty bit of script from jqueryfordesigners.com:

http://jqueryfordesigners.com/coda-slider-effect/

You can see it in use at: http://www.naturalbundles.com/

I cant find featuredproducts.xml.config in *Display Format XmlPackage: how can I activate this so I can select?

Can I put in xsl ? sorry im new in xsl...

Hello.. how can my featured products, have a jquery effect like this...
http://sorgalla.com/projects/jcarous...atic_auto.html

I have done exactly this at:

http://www.foxchapelpublishing.com/

We use one of the vector categories to build this. We feature this just on our homepage. To implement it, we added the jquery includes our hometemplate.ascx along with the normal:

C#/VB.NET Code:

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
}); 


on the template we include the following where we want the carousel placed:

C#/VB.NET Code:

<ul class="jcarousel-skin-tango" id="mycarousel">
                                    (!XmlPackage Name="rev.featured"!)
                                </ul> 


then have a special XMLpackage in our skins\Skin_1\XmlPackages directory called rev.featured.xml.config. The XML package is almost verbatim the same as the category packages in the same directory except we hard code the vectorID into the stored procedure call so that we always get vectorID=1 which we use for featured products and we add some formatting for the products in the carousel.

here's a copy:

C#/VB.NET Code:

<?xml version="1.0" standalone="yes" ?>
<package version="2.1" displayname="Featured Products" debug="false" includeentityhelper="true">
<!--
    <query name="Products" rowElementName="Product">
        <sql>
            <![CDATA[
                exec dbo.aspdnsf_GetProducts 
                    @categoryID = 0,
                    @sectionID = 0,
                    @manufacturerID = 0,
                    @distributorID = 0,
                    @genreID = 0,
                    @vectorID = 1,
                    @localeName = @locale,
                    @CustomerLevelID = @CustLevelID,
                    @affiliateID = @AffID,
                    @ProductTypeID = @ProdTypeID, 
                    @ViewType = 1,
                    @pagenum = 1,
                    @pagesize = null,
                    @StatsFirst = 0,
                    @publishedonly = 1,
                    @ExcludePacks = 0,
                    @ExcludeKits = 0,
                    @ExcludeSysProds = 0,
                    @InventoryFilter = @InvFilter,
                    @sortEntityName = @entityname
            ]]>
        </sql>
        <queryparam paramname="@locale"      paramtype="runtime"   requestparamname="LocaleSetting"                                 sqlDataType="varchar" defvalue="en-US"  validationpattern="" />
        <queryparam paramname="@CustLevelID" paramtype="runtime"   requestparamname="CustomerLevelID"                               sqlDataType="int"     defvalue="0"      validationpattern="" />
        <queryparam paramname="@AffID"       paramtype="runtime"   requestparamname="AffiliateID"                                   sqlDataType="int"     defvalue="0"      validationpattern="" />
        <queryparam paramname="@ProdTypeID"  paramtype="runtime"   requestparamname="ProductTypeFilterID"                           sqlDataType="int"     defvalue="1"      validationpattern="" />
        <queryparam paramname="@pgnum"       paramtype="request"   requestparamname="pagenum"                                       sqlDataType="int"     defvalue="1"      validationpattern="" />
        <queryparam paramname="@InvFilter"   paramtype="appconfig" requestparamname="HideProductsWithLessThanThisInventoryLevel"    sqlDataType="int"     defvalue="0"      validationpattern="" />
        <queryparam paramname="@entityname"  paramtype="runtime"   requestparamname="EntityName"  sqlDataType="varchar" defvalue=""       validationpattern="" />
    </query>
-->

    <query name="Products" rowElementName="Product">
        <sql>
            <![CDATA[
                exec dbo.FCP_GetProducts 
                    @categoryID = @CatID,
                    @sectionID = @SecID,
                    @manufacturerID = @ManID,
                    @distributorID = @DistID,
                    @genreID = @GenreID,
                    @vectorID = @VectorID,
                    @localeName = @locale,
                    @CustomerLevelID = @CustLevelID,
                    @affiliateID = @AffID,
                    @ProductTypeID = @ProdTypeID, 
                    @ViewType = 1,
                    @pagenum = @pgnum,
                    @pagesize = null,
                    @StatsFirst = 0,
                    @publishedonly = 1,
                    @ExcludePacks = 0,
                    @ExcludeKits = 0,
                    @ExcludeSysProds = 0,
                    @InventoryFilter = @InvFilter,
                    @sortEntityName = @entityname
            ]]>
        </sql>
        <queryparam paramname="@CatID" paramtype="runtime" requestparamname="CatID" sqlDataType="int" defvalue="0"  validationpattern="" />
        <queryparam paramname="@SecID" paramtype="runtime" requestparamname="SecID" sqlDataType="int" defvalue="0"  validationpattern="" />
        <queryparam paramname="@ManID" paramtype="runtime" requestparamname="ManID" sqlDataType="int" defvalue="0"  validationpattern="" />
        <queryparam paramname="@DistID" paramtype="runtime" requestparamname="DistID" sqlDataType="int" defvalue="0"  validationpattern="" />
        <queryparam paramname="@GenreID" paramtype="runtime" requestparamname="GenreID" sqlDataType="int" defvalue="0"  validationpattern="" />
        <queryparam paramname="@VectorID" paramtype="runtime" requestparamname="VectorID" sqlDataType="int" defvalue="1"  validationpattern="" />
        <queryparam paramname="@locale" paramtype="runtime" requestparamname="LocaleSetting" sqlDataType="varchar" defvalue="en-US"  validationpattern="" />
        <queryparam paramname="@CustLevelID" paramtype="runtime" requestparamname="CustomerLevelID" sqlDataType="int" defvalue="0"  validationpattern="" />
        <queryparam paramname="@AffID" paramtype="runtime" requestparamname="AffiliateID" sqlDataType="int" defvalue="0"  validationpattern="" />
        <queryparam paramname="@ProdTypeID" paramtype="runtime" requestparamname="ProductTypeFilterID" sqlDataType="int" defvalue="1"  validationpattern="" />
        <queryparam paramname="@pgnum" paramtype="request" requestparamname="pagenum" sqlDataType="int" defvalue="1"  validationpattern="" />
        <queryparam paramname="@InvFilter" paramtype="appconfig" requestparamname="HideProductsWithLessThanThisInventoryLevel" sqlDataType="int" defvalue="0"  validationpattern="" />
        <queryparam paramname="@entityname" paramtype="runtime" requestparamname="EntityName" sqlDataType="varchar" defvalue="vector"  validationpattern="" />
    </query>


    <PackageTransform>

            <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:aspdnsf="urn:aspdnsf" exclude-result-prefixes="aspdnsf">
          <xsl:output method="html" omit-xml-declaration="yes" />
                
                
                <xsl:template match="/">
                    <xsl:apply-templates select="root/Products/Product" />
                </xsl:template>
                
                <xsl:template match="/root/Products/Product">
                
                    <xsl:param name="pName" select="aspdnsf:GetMLValue(Name)"></xsl:param>
                    <xsl:param name="pImage" select="aspdnsf:LookupImage(ProductID, 'product', 'icon', 1)"></xsl:param>
                    <xsl:variable name="ReplaceIcon" select="'/icon/'" />
                    <xsl:variable name="ReplacePromoMedium" select="'/promo_medium/'" />
                    <xsl:variable name="Intermediary" select="concat(substring-before($pImage, $ReplaceIcon), $ReplacePromoMedium, substring-after($pImage, $ReplaceIcon))" />
                    <xsl:variable name="breakOn" select="'.png'"/>
                    <xsl:variable name="replaceWith" select="'.gif'"/>
                    <li>
                        <center>
                        
                            <a class="bscroll" href="{aspdnsf:ProductLink(ProductID, $pName, 0, 0)}">
                                <xsl:value-of select="concat(substring-before($Intermediary,$breakOn),$replaceWith, substring-after($Intermediary,$breakOn))"  disable-output-escaping="yes" />
                            </a><br />
                            <span class="scrollTitle">
                             <a class="bscroll" href="{aspdnsf:ProductLink(ProductID, $pName, 0, 0)}">
                                                        <xsl:value-of select="$pName" disable-output-escaping="yes" />
                            </a>
                            </span><br />
                            <div class="moreInfo">
                            <a class="bscroll" href="{aspdnsf:ProductLink(ProductID, $pName, 0, 0)}">
                            <img height="21" border="0" width="63" src="/skins/Skin_1/images/more_info_button.gif"/>
                            </a></div>    
                        </center>
                    </li>
        </xsl:template>
       
      </xsl:stylesheet>
    </PackageTransform>
</package>

So the hometemplate.ascx acts as a wrapper and the XMLpackage builds the <li> items and styles them the way we want. We can then feature products by simply placing them in this vector category and use the native sorting functions built into ASPDNSF to determine where on the carousel we want our products.

That is a very nicely done site!!

Hi guys... I have also solve it now.... i edited the featuredproducts.xml
here it is.
http://barbecue-king.com.mytempweb.com/default.aspx

This is a very cool idea to have on your site. Could someone please explain how I can incorporate this into my site. I am fairly new to the .net.

Thank you

I've followed your steps on adding the carousel but for some reason when the carousel calls the products it only displays three of the seven products I added to the vector. When I unpublished on of the three, that show, only two stay there. Which means the other four aren't showing up at all. any idea? thanks for your help.

Okay I figured out why it was only showing three. It's because for some reason the vector is only showing on category. How do i get it to pull from more than one cat?

I'm not sure what you mean by showing a category. The vector should display the same as any category or section using any of your other XML packages, you may want to load it and see if it displays all of your products.

I believe the default web.config needs to enable a line section to view vectors with their SEname (I can't recall the default setting ASPDNSF ships with):

C#/VB.NET Code:

<rule url="/v-([0-9]*)-([\w-]*)\.aspx(?:\?(.*))?" rewrite="/showvector.aspx?VectorID=$1&amp;SEName=$2&amp;$3"/> 


If that is enabled, set a known working XML package in your Admin for your vector, then visit:

http://www.yourdomain.com/v-ID-something.aspx

Where ID is the vector ID for your specific vector. The page should display your products as it would any other category using the same XML package. That should help troubleshoot what is causing some products to not display. You can use the XML package's debug facility to delve further down into why certain products are not displaying.

Originally Posted by cdub

I have done exactly this at:

http://www.foxchapelpublishing.com/

That is very nice.

We recently implemented something similar to this on the home page of our Dog Supplies site.

We used the agile carousel on jquery (http://www.agilecarousel.com/examples/full_example)

Using jquery for the carousel is such an improvement over a flash based carousel.

The SEs really love it too.

Chaz.

I'm not able to map any product to the Featured Product Vector. It seems to pull from only one category.

Can someone send the the sp file? I want to see where you edited the file. Or just the section you changed. Thanks.

sp file? what do you mean by this?

nevermind, I figured it out. thanks for the reply

for the carousel you could just pull the files from jquery(or the site below) and pop them in your scripts folder and link them up from your template file and then just edit the controls on the javascript file. They give explanations on what to edit and what affects what. Here is a good site for a j.carousel with instructions - http://www.gmarwaha.com/jquery/jcarousellite/