Custom Header w/ Cart Items and Cart Total

[sschlager]

I have looked and looked for some kind of help with this. I have seen it on several sites and figured there would be a control that did it. That is why I included it in my design. Anyone have a control or know of where to find one that does this. An example is http://www.eurekaclothing.com/ when you add an item, in the right corner, what I am looking for comes up. It is the same in my mock design at http://www.thebackup.com/adamson/511.html Sorry, to ask so many questions.

Thanks,

Shaun

[jmestep]

Here's a custom control I did- it doesn't count the items, though. Only the dollar amount. Put it in Conlib/Custom.
HeaderBasketTotal.ascx

Code: Select all

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HeaderBasketTotal.ascx.cs" Inherits="ConLib_Custom_HeaderBasketTotal" EnableViewState="false" %>
<%--
<conlib>
<summary>Display totals and summary of contents of basket.</summary>
</conlib>
--%>

        <table cellpadding="0" cellspacing="0" class="headerBasket">
             <tr>
                <td style="color:RGB(72,127,159); font-size:14px; font-weight:bold; text-align:right; padding: 24px 16px 0 0 ; margin:24px 16px 0 0 "><asp:Label ID="Total" runat="server"></asp:Label></td>
            </tr>
        </table>

HeaderBasketTotal.ascx.cs

Code: Select all

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using CommerceBuilder.Common;
using CommerceBuilder.Orders;

public partial class ConLib_Custom_HeaderBasketTotal : System.Web.UI.UserControl
{
    //USE PRERENDER TO ALLOW FOR CALCULATIONS TO BASKET CONTENTS
    protected void Page_PreRender(object sender, EventArgs e)
    {
        LSDecimal subtotal = 0;
        LSDecimal shipping = 0;
        LSDecimal taxes = 0;
        LSDecimal coupons = 0;
        LSDecimal total = 0;
        LSDecimal giftwrap = 0;
        Basket basket = Token.Instance.User.Basket;
        foreach (BasketItem item in basket.Items)
        {
            LSDecimal extendedPrice = item.ExtendedPrice;
            switch (item.OrderItemType)
            {
                case OrderItemType.Shipping:
                case OrderItemType.Handling:
                    shipping += extendedPrice;
                    break;
                case OrderItemType.Tax:
                    taxes += extendedPrice;
                    break;
                case OrderItemType.Coupon:
                    coupons += extendedPrice;
                    break;
                case OrderItemType.GiftWrap:
                    giftwrap += extendedPrice;
                    break;
                default:
                    subtotal += extendedPrice;
                    break;
            }
            total += item.ExtendedPrice;
        }
		if (total > 0)
        {
            Total.Text = total.ToString("ulc");
        }
    }

}

[Brewhaus]

This works great, but there is one little change I think would be good. As it stands, if there are no items in the cart, nothing is displayed. How could we get $0.00 to display if nothing is in the cart? That way, a customer knows what the icon (in our case) in the upper corner is for.

[sschlager]

Yes Thanks! It works great but I also was wondering about that. I am not a programer but I believe all you would need is an if statement that says if cart equals zero display $0.00 or Empty. How you write that I have no clue.

[m_plugables]

Change the following part of the code posted by Judy

Code: Select all

if (total > 0)
        {
            Total.Text = total.ToString("ulc");
        }

and make it look like

Code: Select all

if (total > 0)
        {
            Total.Text = total.ToString("ulc");
        }
else
{
Total.Text = "$0.00";
}

If you would like to show any custom text for example Empty Basket etc
just put it with in the double quotes where i put $0.00. For Empty Basket text it would be like

Code: Select all

if (total > 0)
        {
            Total.Text = total.ToString("ulc");
        }
else
{
Total.Text = "Empty Basket";
}

[sschlager]

Thanks! You guys are awesome!

[Brewhaus]

Thanks! I, too, am far from a programmer, so instead of messing with the file (I do that as little as possible ), I thought it better to ask. Besides, I thought that it may be of value to others, as well.

[Brewhaus]

How would one go about adding a second line under the total in the cart showing $x remaining to free shipping? When such a promotion is being run, it may be good for a customer to see how much (or little) they need to add in order to achieve this level. I tinkered a bit with the file, but without success.

[jmestep]

Try this- I haven't tested:

Code: Select all

<tr>
 <td><asp:Label ID="ToFreeShip" runat="server"></asp:Label></td>
            </tr>

Code: Select all

if (total < 100)
        {
            ToFreeShip.Text = (100-total).ToString("ulc");
        }
else
{
ToFreeShip.Text = "Free shipping on orders over $100";
}

I'll post back later if there is a problem- I'm in the middle of an upgrade now, so can't test.

[Brewhaus]

I have tinkered a bit and come up with this:

if (total < 69)
{
ToFreeShip.Text = (69-total).ToString("ulc");
ToFreeShipExtra.Text = "more for free shipping";
}
else
{
ToFreeShip.Text = "Order ships Free";
ToFreeShipExtra.Text = "in the 48 states";
}

but cannot figure out how to get none of this to display if the cart is empty (leaving just the previously discussed "Cart Empty" code). Maybe I am not indenting properly, or maybe you cannot use a second level if / then / else.

[jmestep]

Something like:
if (total < 69) and (total>0) maybe.

[nickc]

Code: Select all

ToFreeShip.Visible = ToFreeShipExtra.Visible = basket.Items.Count > 0 ? true : false;

[Brewhaus]

Thank you for the code suggestion, but where would this be placed exactly- in the ascx or ascx.cs file?

[nickc]

In .cs:

Code: Select all

if (total < 69)
{
ToFreeShip.Text = (69-total).ToString("ulc");
ToFreeShipExtra.Text = "more for free shipping";
}
else
{
ToFreeShip.Text = "Order ships Free";
ToFreeShipExtra.Text = "in the 48 states";
}
ToFreeShip.Visible = ToFreeShipExtra.Visible = basket.Items.Count > 0 ? true : false;

[Brewhaus]

That works perfectly- thank you!

[jmestep]

One more question- How would we get this to refresh in the header when the customer is on the basket page and makes a change to the basket?
Thanks

[Shopping Cart Admin]

Hello Judy,

Use a different header, it's normal not to have the mini-basket on the basket page.

One more question- How would we get this to refresh in the header when the customer is on the basket page and makes a change to the basket?

[jmestep]

I figured out how to refresh the basket total in the header if the total in the basket changes (like adjust quantity and click recalculate). In my code, it is:

Code: Select all

<Ajax:UpdatePanel ID="UpdateBasket" runat="server">
<ContentTemplate>
<span style="color:#9A1C75; font-size:12px; ; text-align:right; padding-right:2px;"><asp:Hyperlink ForeColor="#9a1c75" ID="CartText" NavigateUrl= "~/basket.aspx" runat="server">Shopping Cart:</asp:Hyperlink></span>
<span style="color:#0668b2; font-size:12px; ; text-align:right; padding-right:2px;"><asp:Label ID="Total" runat="server"></asp:Label></span>
</ContentTemplate>
</Ajax:UpdatePanel>

I had to wrap it in the ajax.

[dappy2]

So I've been using this and it isn't quite working right. The price display is perfect but I added an item count and it isn't displaying the count correctly. This issue has been discussed elsewhere (viewtopic.php?f=44&t=6683&hilit=mini+basket , viewtopic.php?f=42&t=8528&hilit=header+basket) however I can't seem to get it to work. The second link seems like it should work but I'm not sure how to combine the code in that post with the code in this post.

Also, the item count works exactly right if I'm logged in. It doesn't work if I'm not logged in - the count of 1 is correct, but as soon as I go to 2 or more items it is 1 short - which probably is because I used the wrong method to get an item count and then subtracted 1. Again, the code posted works if I'm logged in, it seems.

HeaderBasketTotal.ascx

Code: Select all

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HeaderBasketTotal.ascx.cs" Inherits="ConLib_Custom_HeaderBasketTotal" EnableViewState="false" %>
<%--
<conlib>
<summary>Display totals and summary of contents of basket.</summary>
</conlib>
--%>

<Ajax:UpdatePanel ID="UpdateBasket" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Hyperlink NavigateUrl="~/Basket.aspx" CssClass="headBasket" runat="server" id="headerBasketLink">
Basket
<span><asp:Label ID="lblBasketCount" runat="server"></asp:Label></span>
<span><asp:Label ID="lblTotal" runat="server"></asp:Label></span>
</asp:Hyperlink>
</ContentTemplate>
</Ajax:UpdatePanel>

HeaderBasketTotal.ascx.cs

Code: Select all

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using CommerceBuilder.Common;
using CommerceBuilder.Orders;

public partial class ConLib_Custom_HeaderBasketTotal : System.Web.UI.UserControl
{
    //USE PRERENDER TO ALLOW FOR CALCULATIONS TO BASKET CONTENTS
    protected void Page_PreRender(object sender, EventArgs e)
    {
        LSDecimal subtotal = 0;
        LSDecimal shipping = 0;
        LSDecimal taxes = 0;
        LSDecimal coupons = 0;
        LSDecimal total = 0;
        LSDecimal giftwrap = 0;
        int itemCount = 0;
        Basket basket = Token.Instance.User.Basket;
        foreach (BasketItem item in basket.Items)
        {
            itemCount += item.Quantity;
            LSDecimal extendedPrice = item.ExtendedPrice;
            switch (item.OrderItemType)
            {
                case OrderItemType.Shipping:
                case OrderItemType.Handling:
                    shipping += extendedPrice;
                    break;
                case OrderItemType.Tax:
                    taxes += extendedPrice;
                    break;
                case OrderItemType.Coupon:
                    coupons += extendedPrice;
                    break;
                case OrderItemType.GiftWrap:
                    giftwrap += extendedPrice;
                    break;
                default:
                    subtotal += extendedPrice;
                    break;
            }
            total += item.ExtendedPrice;
        }
      if (subtotal > 0)
        {
            lblTotal.Text = subtotal.ToString("ulc");
            headerBasketLink.CssClass = "headBasketFilled";
            itemCount = itemCount - 1;
            if (itemCount > 1)
            {
                lblBasketCount.Text = itemCount.ToString() + " items";
            }
            else
            {
                lblBasketCount.Text = "1 item";
            }
        }
    }

}

I'm really winging it with the code and whatever happens to pop-up for the intelisense in VS2008. But I did manage to get my CSS to change on my basket link when there are items in it which I really like - see attached.

Thanks for any help,
Dappy

[mazhar]

Are you recalculate the basket after increasing the quantity. The basket it updated when you recalculate it. Also check by commenting out the following line of code

Code: Select all

itemCount = itemCount - 1;

and it will show the proper item count after logout as well.

[dappy2]

That's the problem. When I comment that out it works when the user isn't logged in (the correct quantity) but the quantity is 1 higher when logged in.

So:
User not logged in, 1 item in basket = 1 item up top

User logged in, 1 item in basket = 2 items up top.

Is it counting shipping / tax as an item? I just thought of that - how would I exclude items if they aren't an actual product in the catalog?

[mazhar]

hmm, then replace the line of code with the following

Code: Select all

if(!Token.Instance.User.IsAnonymous)
            itemCount = itemCount - 1;

[nickc]

how would I exclude items if they aren't an actual product in the catalog?

Code: Select all

itemCount += item.OrderItemType == OrderItemType.Product ? item.Quantity : 0;

[krittleb]

I realize that this is a really old post and I don't know if people actually see new posts on the old ones or not, but here's a shot...

I was able to get the basket listed in the code above (with the item quantities included) into my conlib and then placed in my scriptlet where I want it. However, it is just plain text by default and being a newbie, I have no idea how to create all of the style sheets and links to the right divs to change the appearance. If someone could give me an example of their styles for this mini basket, I could then just alter it to how I would like it to appear.

Thanks,
Kristi

[mazhar]

I realize that this is a really old post and I don't know if people actually see new posts on the old ones or not, but here's a shot...

I was able to get the basket listed in the code above (with the item quantities included) into my conlib and then placed in my scriptlet where I want it. However, it is just plain text by default and being a newbie, I have no idea how to create all of the style sheets and links to the right divs to change the appearance. If someone could give me an example of their styles for this mini basket, I could then just alter it to how I would like it to appear.

Thanks,
Kristi

Here is a snap for HTML layout and CSS changes for one of the sites using this control