Hi I'm having a problem implementing a mini shopping cart drop down in the header to show the user all the products they have in their shopping cart. It seems the only solution for this is Ajax, and I've looked all over and can't find anything that I could possibly use with web forms.
At the moment I've managed to populate a shopping cart entity with the customer's products, and in that entity I have a customer guid which is stored as cookie and in the database to keep track of the user and their products.
The problem I am having, as previously mentioned is showing customer the products they have in their shopping without them having to be directed to another page, kind of like how most of the online shops these days are doing it.
so far this is what I've tried and it's not working:
<div class="shopping-cart" style="background-color:#808080">
<div class="shopping-cart-header">
<i class="fa fa-shopping-cart cart-icon" aria-hidden="true"></i>
<span class="badge"></span>
<div class="shopping-cart-total">
<span class="lighter-text">Total:</span>
<span class="main-text"> $5000</span>
</div>
</div>
<asp:ListView
ID="shoppingCartListView"
runat="server"
DataKeyNames="Id"
ItemType="OnlineShoppingApplication.DataAccess.ShoppingCartItem"
ItemPlaceholderID="shopping_cart"
SelectMethod="GetShoppingCartItems">
<EmptyDataTemplate>
<p class="main-text">0 Items in cart</p>
</EmptyDataTemplate>
<EmptyItemTemplate>
<p class="main-text">0 Items in cart</p>
</EmptyItemTemplate>
<ItemTemplate>
<ul class="shopping-cart-items">
<li class="clear-fix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/cart-item1.jpg" alt="Item1"/>
<div class="item-details">
<span class="item-name"><%#:Item.PWItem.PWItemDescription%></span>
<span class="item-price"><%#:Item.PWItem.PWItemDetails.FirstOrDefault().PWItemDetailRetailPrice %></span>
<span class="item-quantity"><%#Item.Quantity %></span>
</div>
</li>
</ul>
</ItemTemplate>
<LayoutTemplate>
<div runat="server" id="shopping_cart">
</div>
</LayoutTemplate>
</asp:ListView>
</div> <%--End of mini shopping cart(global)--%>
<div class="navbar-second-layer">
<div class="container">
<div class="navbar-collapse collapse" id="product-details-second-navbar-layer">
<ul class="nav navbar-nav navbar-left" style="letter-spacing:1.3px;color:#ffffff">
<li><a runat="server" style="color:#ffffff;" href="#"> Home</a></li>
<li><a runat="server" style="color:#ffffff;" href="#"> Women</a></li>
<li><a runat="server" style="color:#ffffff;" href="#"> Men</a></li>
<li><a runat="server" style="color:#ffffff;" href="#"> Kids</a></li>
<li><a runat="server" style="color:#ffffff;" href="#"> Brands</a></li>
<li class="visible-xs"><a runat="server" style="color:#ffffff;" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span> Log in</a></li>
<li class="visible-xs"><a runat="server" style="color:#ffffff;" href="#"><span class="glyphicon glyphicon-gift"></span> Wish List<span id="wish_list_count_mobile" class="badge" runat="server"></span></a></li>
<li class="visible-xs"><a runat="server" style="color:#ffffff;" href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Cart<span id="cart_list_count_mobile" class="badge" runat="server"></span></a></li>
</ul>
</div>
</div> <%--End of navbar second layer--%>
</div> <%--End of navbar second layer, container--%>
</div>
</header> <%--End of header section global--%>Above is the code I have in my site.master page, I tried using a listview in the header section in of the site.master and the select method for listview is "GetShoppingCartItems" when there's no items in the cart it says '0 items in cart' as specified as soon as I click 'add to cart', the text '0 items in cart' disappears but it does not show the cart items.
Heres the select method:
public IQueryable<ShoppingCartItem> GetCartItems()
{
if (CustomerCreated())
{
CustomerGuid = _customer.CustomerGuid;
var shoppingCart = _db.ShoppingCartItems.Where
(c => c.Customer.CustomerGuid == CustomerGuid);
return shoppingCart;
}
else
return null;
}Heads up, I know I could go with open source e-commerce solutions but I'm not at the level where I could possibly manipulate their code and create plugins.
Thanks in advance. :)
