FeaturedProductsGrid as a repeater

For general questions and discussions specific to the AbleCommerce 7.0 Asp.Net product.
Post Reply
dappy2
Commander (CMDR)
Commander (CMDR)
Posts: 114
Joined: Wed Jan 18, 2006 5:53 pm
Contact:

FeaturedProductsGrid as a repeater

Post by dappy2 » Thu Sep 30, 2010 5:58 am

Is it possible to turn the featured products conlib in to a custom control using a repeater instead of a datalist? I need to be able to output very specific HTML in order to create a cool product carousel. I've been looking at the CategoryListPage for ideas since that uses a repeater but I'm confused about the DataKeyField in the datalist since a repeater doesn't have that.

I'll gladly share my final html/css/javascript (mostly jquery) for others to use.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: FeaturedProductsGrid as a repeater

Post by mazhar » Thu Sep 30, 2010 8:52 am

When it comes to repeater control then it means you are going totally custom. You will mange every things. In case of data list, unique key of record is manged by control in DataKeyField. If you are going with repeater then you need to manage it your self. For example you can create a hidden field in repeater and then put your record id for each record in there. For example

Code: Select all

<table>
    <asp:Repeater ID="FeaturedProductRepeater" runat="server">
        <ItemTemplate>
            <tr>
                <td>
                    <asp:HiddenField="HiddenProductId" runat="server" Value='<%#Eval("ProductId") %>' />
                </td>
                <td>
                    <%#Eval("Name") %>
                </td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>
</table>
In case of featured product grid if you look into its CS file you will see although DataKeyField is specified for data list but its never used in back end code. I don't think so you will be required to mange keys in repeater. All that you need is to provide some controls their corresponding product id and that would be same as its at the moment like

Code: Select all

<uc:AddToCartLink ID="AddToCartLink1" runat="server" ProductId='<%#Eval("ProductId")%>' />

dappy2
Commander (CMDR)
Commander (CMDR)
Posts: 114
Joined: Wed Jan 18, 2006 5:53 pm
Contact:

Re: FeaturedProductsGrid as a repeater

Post by dappy2 » Fri Oct 01, 2010 9:18 am

Well that was surprisingly easy actually.

I've attached my final one in a zip with the images I used for buttons/arrows and the jquery plugin (http://sorgalla.com/jcarousel/) and some CSS for an example.
Requires you to download jquery: http://code.jquery.com/jquery-1.4.2.min.js

DISCLAIMER
This isn't exactly easy - you need to be comfortable with AbleCommerce/C# (doesn't require much - but you need to add the links to the javascript files) and very comfortable with HTML/CSS based layouts. Don't expect to drop this on your homepage and have it look great on the site. I'd also appreciate it if you didn't reuse my image buttons - they are just there for example working version.

Options include the default Able Caption for text to appear above (like featured products) and Size for the number of featured products to use.
FeaturedProductCarouselImage.png

Post Reply