JQuery Mini Basket

Hi Guys,

I have been seeing lots of people asking for mini basket for nopcommerce. Although I had it done already last year but it's about time I should add something to the community as well.

For more information please go to http://www.just4design.co.uk/add-ons.asp to download the basket. There were many changes to explain so I have just put the whole Default Nop1.9 version with jQuery Basket to download. This is easy for someone who don't know much about websites.

For advance customers, I would just let you know which files you need to look for and you can download the whole project and copy just those files to your solution. (Note: You should copy the code & designer files as well for all the aspx files)

NopCommerceStore (folder)
addtocart.aspx

Scripts (folder)
custom.js

images (folder)
unchecked.gif
UpdateProgress.gif

App_Themes\darkOrange (folder)
style.css (only for styling)

Modules (folder)
ProductBox1.ascx
ProductBox2.ascx
MiniShoppingCartBox.ascx

Templates/Products (folder)
OneVariant.ascx

This Free basket only supports one product variant with no extra attributes as I didn't have much time to make it perfect for everything, may be next time. Multiple variants and products with extra attributes are not supported for now but can be done with some coding.

Please let me know if you like it and if you would like some other Add on. I would do it whenever I get some time.

Any feedback welcome.

Thanks,
Atiq

Good contribution to the nop Community...

Thanks, Atiq

Great contribution! Thanks.

Thanks guys. Next is to make the main shopping basket in jquery (which I have already done for a client, just need to do it for default nopcommerce) if I get enough replies and votes ;)

I would LOVE LOVE LOVE features for multiple attributes and gift certificates etc! a fantastic addon! to see something like this feature complete in future versions of nop commerce would be excellent

thomen wrote:
I support 1000% your proposal

thomen wrote:

This the next step.

Excellent contribution; however, I am having some trouble implementing it.  I copied the files to the appropriate folders as noted, but when I tried to open my site, I got a compilation error regarding the MiniShippingCartBox.ascx file that stated ..."no reference to <ul id="basketItems">".  I thought that this had something to do with the DarkOrange stylesheet file so I did a search for the word "basket" in the styles.css to see if and where I should reference “basketItems”, but found nothing.  So I tried to rebuild the solution and now I keep getting a build error on the MiniShoppingCargBox.ascx.cs file that says...'NopSolutions.NopCommerce.Common.Utils.CommonHelper' does not contain a definition for 'BindScriptToPage'.  I didn't want to copy each and every file from the download in order to get this working because I already have some customizations on my site that I don't want to botch up.  Any ideas as to how to get around the 'BindScriptToPage' error when rebuilding?

nicole wrote:

Sorry I forgot to mention additions in commonhelper.cs file, I just thought that these changes might be difficult to implement for everyone so I have put the methods in ascx files, so if you just download from the website again and copy the changes to your solution there wont be any compile errors.

There few things which are required to make this work. In mini basket this code is absolutly required;

<div class="listbox" id="basketItemsWrap">
        <span id="emptybasket"><asp:Literal runat="server" ID="lShoppingCart" EnableViewState="false" /></span>

        <span id="subtotalMiniCart"><asp:Label runat="server" ID="lblOrderSubtotal" CssClass="subtotal" /></span>
        <div class="buttons" id="buttonsMiniCart">
            <asp:Button runat="server" ID="btnCheckout" Text="<% $NopResources:MiniShoppingCartBox.CheckoutButton %>"
                OnClick="BtnCheckout_OnClick" CausesValidation="false" CssClass="minicartcheckoutbutton" />
        </div>

        <asp:PlaceHolder runat="server" ID="plCart" EnableViewState="false">
        <ul id="basketItems">
        <li></li>
        <%= getBasket() %>
        </ul>
        </asp:PlaceHolder>

    </div>

if you look at the code, the items with id are required to have the same id, otherwise it won't work so the best thing to do is copy these changes to your existing solution and the change the styling by class.

Same way in ProductBox1.ascx, ProductBox2.ascx, Templates/Products/OneVariant.ascx, there are couple of things you need to look for

<div class="picture" id="productImageWrapID_<%# Eval("ProductId") %>">
        <asp:HyperLink ID="hlImageLink" runat="server" />
    </div>

this is required to make the image animation, and

<div class="buttons" id="addtocartbtns">
        
            <asp:Button runat="server" ID="btnProductDetails" OnCommand="btnProductDetails_Click"
                Text="<% $NopResources:Products.ProductDetails %>" ValidationGroup="ProductDetails"
                CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridproductdetailbutton" />
            <asp:PlaceHolder ID="plAddToCart" runat="server">
                <br />
            <a href="/addtocart.aspx?action=addToBasket&productID=<%#Eval("ProductId") %>" class="productgridaddtocartbutton" onclick="return false;"><span id='<%#Eval("ProductId") %>'><%= GetLocaleResourceString("Products.AddToCart")%></span></a>
           </asp:PlaceHolder>  
           <asp:Button runat="server" ID="btnAddToCart" OnCommand="btnAddToCart_Click" Text="<% $NopResources:Products.AddToCart %>"
                ValidationGroup="ProductDetails" CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridaddtocartbutton" />
        </div>

this is required for addtocart button.

Download from the website again and see if it works for you, otherwise you can leave your website here and I would have a look for you.