Sorry for the edit, should explain a little better:
How can I change the display of Products/VariantsInGrid to horizontal, and add column values like two or three columns, such as as can be done in Categories/ProductsInGrid?
Thanks in advance for any help!
Display VariantsInGrid as Horizontal columns
- 6
- 26
- 1/17/2011
- United States
Hi,
Don't know if this helps you (no one has replied for you yet so figured I would help) but it may help others out there if they want a horizontal style list but with the ability to input individual quantity numbers for each item. To make best use of this (the sole reason of this is to allow people to quickly add products with separate quantities without having to hit the back button each time) would be to check or uncheck the box that tells the shopping cart to redirect to the cart checkout when you click "add to cart". You want it to just popup the message (JS Prompt) for each button click thus preventing the user from having to click the back button and wasting time.
With my store I modified the ProductBox3.ascx file but you can just create a new one and call it 4 if you like.
Here is the ascx code for ProductBox3.ascx:
Here is the code for ProductBox3.cs:
NOTE: I commented out the image and description b/c of room but you may want to include those and make it work (create a mouseover of a short description that displays the long description, etc.). Don't forget you will need to add the corresponding ascx controls to the ascx page!
Don't know if this helps you (no one has replied for you yet so figured I would help) but it may help others out there if they want a horizontal style list but with the ability to input individual quantity numbers for each item. To make best use of this (the sole reason of this is to allow people to quickly add products with separate quantities without having to hit the back button each time) would be to check or uncheck the box that tells the shopping cart to redirect to the cart checkout when you click "add to cart". You want it to just popup the message (JS Prompt) for each button click thus preventing the user from having to click the back button and wasting time.
With my store I modified the ProductBox3.ascx file but you can just create a new one and call it 4 if you like.
Here is the ascx code for ProductBox3.ascx:
<%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.ProductBox3Control"
CodeBehind="ProductBox3.ascx.cs" %>
<%@ Register TagPrefix="nopCommerce" TagName="ProductPrice2" Src="~/Modules/ProductPrice2.ascx" %>
<tbody>
<tr class="cart-item-row">
<td class="product-title">
<asp:Button runat="server" ID="btnProductDetails" OnCommand="btnProductDetails_Click"
Text="<% $NopResources:Products.ProductDetails %>" ValidationGroup="ProductDetails"
CommandArgument='<%# Eval("ProductId") %>' CssClass="productlistproductdetailbutton" />
</td>
<td class="product-title">
<asp:HyperLink ID="hlProduct" runat="server" />
</td>
<td class="product-title">
<nopCommerce:ProductPrice2 ID="ctrlProductPrice" runat="server" ProductID='<%#Eval("ProductId") %>' />
</td>
<td class="product-title">
<asp:TextBox ID="txtQuantity" size="4" runat="server" Text="1" />
</td>
<td class="product-title">
<asp:Button runat="server" ID="btnAddToCart" OnCommand="btnAddToCart_Click" Text="<% $NopResources:Products.AddToCart %>"
ValidationGroup="ProductDetails" CommandArgument='<%# Eval("ProductId") %>' CssClass="productlistaddtocartbutton" />
</td>
</tr>
</tbody>
Here is the code for ProductBox3.cs:
NOTE: I commented out the image and description b/c of room but you may want to include those and make it work (create a mouseover of a short description that displays the long description, etc.). Don't forget you will need to add the corresponding ascx controls to the ascx page!
//------------------------------------------------------------------------------
// The contents of this file are subject to the nopCommerce Public License Version 1.0 ("License"); you may not use this file except in compliance with the License.
// You may obtain a copy of the License at https://www.nopcommerce.com/License.aspx.
//
// Software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or implied.
// See the License for the specific language governing rights and limitations under the License.
//
// The Original Code is nopCommerce.
// The Initial Developer of the Original Code is NopSolutions.
// All Rights Reserved.
//
// Contributor(s): _______.
//------------------------------------------------------------------------------
using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Configuration;
using System.Data;
using System.Text;
using System.Threading;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using NopSolutions.NopCommerce.BusinessLogic;
using NopSolutions.NopCommerce.BusinessLogic.Configuration.Settings;
using NopSolutions.NopCommerce.BusinessLogic.Directory;
using NopSolutions.NopCommerce.BusinessLogic.Localization;
using NopSolutions.NopCommerce.BusinessLogic.Media;
using NopSolutions.NopCommerce.BusinessLogic.Orders;
using NopSolutions.NopCommerce.BusinessLogic.Products;
using NopSolutions.NopCommerce.BusinessLogic.SEO;
using NopSolutions.NopCommerce.BusinessLogic.Tax;
using NopSolutions.NopCommerce.Common.Utils;
using NopSolutions.NopCommerce.BusinessLogic.Infrastructure;
namespace NopSolutions.NopCommerce.Web.Modules
{
public partial class ProductBox3Control: BaseNopFrontendUserControl
{
Product product = null;
public override void DataBind()
{
base.DataBind();
this.BindData();
}
private void BindData()
{
if (product != null)
{
string productURL = SEOHelper.GetProductUrl(product);
hlProduct.NavigateUrl = productURL;
hlProduct.Text = Server.HtmlEncode(product.LocalizedName);
var picture = product.DefaultPicture;
if (picture != null)
{
//hlImageLink.ImageUrl = this.PictureService.GetPictureUrl(picture, this.ProductImageSize, true);
// hlImageLink.ToolTip = String.Format(GetLocaleResourceString("Media.Product.ImageLinkTitleFormat"), product.LocalizedName);
//hlImageLink.Text = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
}
else
{
//hlImageLink.ImageUrl = this.PictureService.GetDefaultPictureUrl(this.ProductImageSize);
//hlImageLink.ToolTip = String.Format(GetLocaleResourceString("Media.Product.ImageLinkTitleFormat"), product.LocalizedName);
//hlImageLink.Text = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
}
//hlImageLink.NavigateUrl = productURL;
//lShortDescription.Text = product.LocalizedShortDescription;
var productVariantCollection = product.ProductVariants;
if (productVariantCollection.Count > 0)
{
if (!product.HasMultipleVariants)
{
var productVariant = productVariantCollection[0];
btnAddToCart.Visible = (!productVariant.DisableBuyButton);
if (!this.SettingManager.GetSettingValueBoolean("Common.HidePricesForNonRegistered") ||
(NopContext.Current.User != null &&
!NopContext.Current.User.IsGuest))
{
//nothing
}
else
{
btnAddToCart.Visible = false;
}
}
else
{
btnAddToCart.Visible = false;
}
}
else
{
btnAddToCart.Visible = false;
}
}
}
protected void btnProductDetails_Click(object sender, CommandEventArgs e)
{
int productId = Convert.ToInt32(e.CommandArgument);
string productURL = SEOHelper.GetProductUrl(productId);
Response.Redirect(productURL);
}
protected void btnAddToCart_Click(object sender, CommandEventArgs e)
{
int productId = Convert.ToInt32(e.CommandArgument);
int productVariantId = 0;
if (this.ProductService.DirectAddToCartAllowed(productId, out productVariantId))
{
var addToCartWarnings = this.ShoppingCartService.AddToCart(ShoppingCartTypeEnum.ShoppingCart,
productVariantId, string.Empty, decimal.Zero, Convert.ToInt32(txtQuantity.Text));
if (addToCartWarnings.Count == 0)
{
bool displayCart = true;
if (this.RedirectCartAfterAddingProduct.HasValue)
displayCart = this.RedirectCartAfterAddingProduct.Value;
else
displayCart = this.SettingManager.GetSettingValueBoolean("Display.Products.DisplayCartAfterAddingProduct");
if (displayCart)
{
//redirect to shopping cart page
Response.Redirect(SEOHelper.GetShoppingCartUrl());
}
else
{
//display notification message
this.DisplayAlertMessage(GetLocaleResourceString("Products.ProductHasBeenAddedToTheCart"));
}
}
else
{
string productURL = SEOHelper.GetProductUrl(productId);
Response.Redirect(productURL);
}
}
else
{
string productURL = SEOHelper.GetProductUrl(productId);
Response.Redirect(productURL);
}
}
public Product Product
{
get
{
return product;
}
set
{
product = value;
}
}
public int ProductImageSize
{
get
{
if (ViewState["ProductImageSize"] == null)
return this.SettingManager.GetSettingValueInteger("Media.Product.ThumbnailImageSize", 125);
else
return (int)ViewState["ProductImageSize"];
}
set
{
ViewState["ProductImageSize"] = value;
}
}
/// <summary>
/// Gets or sets a value whether we redirects a customer to shopping cart page after adding a product to the cart (overrides "Display.Products.DisplayCartAfterAddingProduct" settings)
/// </summary>
public bool? RedirectCartAfterAddingProduct
{
get
{
if (ViewState["RedirectCartAfterAddingProduct"] == null)
return null;
else
return (bool)ViewState["RedirectCartAfterAddingProduct"];
}
set
{
ViewState["RedirectCartAfterAddingProduct"] = value;
}
}
}
}
- 6
- 26
- 1/17/2011
- United States
Here is an image of the Horizontal List with the ability to change individual quantities for each product item (I can't guarantee it will be up for very long because this is a staging site):
http://kuraraydental.openvision.com/images/Not-Important/HorizontalList.jpg
http://kuraraydental.openvision.com/images/Not-Important/HorizontalList.jpg
- 6
- 26
- 1/17/2011
- United States
Just realized it cut my code off so there is a text size limit per post. Here is the next section:
OK now I added a new ascx file in Templates/Categories/ called ProductsKuraray.ascx but again you can name it what you wish.
Here is the ascx code to ProductsKuraray.ascx:
Here is the code for ProductsKuraray.ascx.cs:
OK now I added a new ascx file in Templates/Categories/ called ProductsKuraray.ascx but again you can name it what you wish.
Here is the ascx code to ProductsKuraray.ascx:
<%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Templates.Categories.ProductsKuraray"
CodeBehind="ProductsKuraray.ascx.cs" %>
<%@ Register TagPrefix="nopCommerce" TagName="ProductBox3" Src="~/Modules/ProductBox3.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="PriceRangeFilter" Src="~/Modules/PriceRangeFilter.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="ProductSpecificationFilter" Src="~/Modules/ProductSpecificationFilter.ascx" %>
<div class="category-page">
<% if (this.SettingManager.GetSettingValueBoolean("Media.CategoryBreadcrumbEnabled"))
{ %>
<div class="breadcrumb">
<a href='<%=CommonHelper.GetStoreLocation()%>'>
<%=GetLocaleResourceString("Breadcrumb.Top")%></a> /
<asp:Repeater ID="rptrCategoryBreadcrumb" runat="server">
<ItemTemplate>
<a href='<%#SEOHelper.GetCategoryUrl(Convert.ToInt32(Eval("CategoryId"))) %>'>
<%#Server.HtmlEncode(Eval("LocalizedName").ToString())%></a>
</ItemTemplate>
<SeparatorTemplate>
/
</SeparatorTemplate>
</asp:Repeater>
<br />
</div>
<div class="clear">
</div>
<% } %>
<div class="category-description">
<asp:Literal runat="server" ID="lDescription"></asp:Literal>
</div>
<div class="clear">
</div>
<div class="sub-category-grid">
<asp:DataList ID="dlSubCategories" runat="server" RepeatColumns="3" RepeatDirection="Horizontal"
RepeatLayout="Table" OnItemDataBound="dlSubCategories_ItemDataBound" ItemStyle-CssClass="item-box">
<ItemTemplate>
<div class="sub-category-item">
<h2 class="category-title">
<asp:HyperLink ID="hlCategory" runat="server" />
</h2>
<div class="picture">
<asp:HyperLink ID="hlImageLink" runat="server" />
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
<div class="clear">
</div>
<asp:Panel runat="server" ID="pnlFeaturedProducts" class="featured-product-grid">
<div class="title">
<%=GetLocaleResourceString("Products.FeaturedProducts")%>
</div>
<div>
<asp:DataList ID="dlFeaturedProducts" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
RepeatLayout="Table" ItemStyle-CssClass="item-box">
<ItemTemplate>
<nopCommerce:ProductBox3 ID="ctrlProductBox" Product='<%# Container.DataItem %>'
runat="server" />
</ItemTemplate>
</asp:DataList>
</div>
</asp:Panel>
<div class="clear">
</div>
<asp:Panel runat="server" ID="pnlSorting" CssClass="product-sorting">
<%=GetLocaleResourceString("ProductSorting.SortBy")%>
<asp:DropDownList ID="ddlSorting" runat="server" OnSelectedIndexChanged="ddlSorting_SelectedIndexChanged"
AutoPostBack="true" />
</asp:Panel>
<div class="clear">
</div>
<asp:Panel runat="server" ID="pnlFilters" CssClass="product-filters">
<div class="filter-title">
<asp:Label runat="server" ID="lblProductFilterTitle">
<%=GetLocaleResourceString("Products.FilterOptionsTitle")%>
</asp:Label>
</div>
<div class="filter-item">
<nopCommerce:PriceRangeFilter ID="ctrlPriceRangeFilter" runat="server" />
</div>
<div class="filter-item">
<nopCommerce:ProductSpecificationFilter ID="ctrlProductSpecificationFilter" runat="server" />
</div>
</asp:Panel>
<div class="clear">
</div>
<div class="product-grid">
<asp:DataList ID="dlProducts" runat="server" RepeatColumns="1" RepeatDirection="Horizontal"
RepeatLayout="Table" ItemStyle-CssClass="item-box">
<HeaderTemplate>
<div class="order-summary-content">
<table class="cart" width="100%">
<thead>
<tr class="cart-header-row">
<th style="width:75px"></th>
<th style="width:325px">
Product Name
</th>
<th style="width:100px">
Price
</th>
<th style="width:100px">
Quantity
</th>
<th style="width:75px">
</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<nopCommerce:ProductBox3 ID="ctrlProductBox" Product='<%# Container.DataItem %>' runat="server" />
</ItemTemplate>
<FooterTemplate>
</table>
</div>
</FooterTemplate>
</asp:DataList>
</div>
<div class="clear">
</div>
<div class="product-pager">
<nopCommerce:Pager runat="server" ID="productsPager" FirstButtonText="<% $NopResources:Pager.First %>"
LastButtonText="<% $NopResources:Pager.Last %>" NextButtonText="<% $NopResources:Pager.Next %>"
PreviousButtonText="<% $NopResources:Pager.Previous %>" CurrentPageText="Pager.CurrentPage" />
</div>
</div>
Here is the code for ProductsKuraray.ascx.cs:
//------------------------------------------------------------------------------
// The contents of this file are subject to the nopCommerce Public License Version 1.0 ("License"); you may not use this file except in compliance with the License.
// You may obtain a copy of the License at https://www.nopcommerce.com/License.aspx.
//
// Software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or implied.
// See the License for the specific language governing rights and limitations under the License.
//
// The Original Code is nopCommerce.
// The Initial Developer of the Original Code is NopSolutions.
// All Rights Reserved.
//
// Contributor(s): _______.
//------------------------------------------------------------------------------
using System;
using System.Collections;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml;
using NopSolutions.NopCommerce.BusinessLogic;
using NopSolutions.NopCommerce.BusinessLogic.Categories;
using NopSolutions.NopCommerce.BusinessLogic.Configuration.Settings;
using NopSolutions.NopCommerce.BusinessLogic.Directory;
using NopSolutions.NopCommerce.BusinessLogic.Localization;
using NopSolutions.NopCommerce.BusinessLogic.Media;
using NopSolutions.NopCommerce.BusinessLogic.Products;
using NopSolutions.NopCommerce.BusinessLogic.SEO;
using NopSolutions.NopCommerce.Common.Utils;
using NopSolutions.NopCommerce.BusinessLogic.Infrastructure;
namespace NopSolutions.NopCommerce.Web.Templates.Categories
{
public partial class ProductsKuraray : BaseNopFrontendUserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
FillDropDowns();
BindData();
}
}
protected void FillDropDowns()
{
if (this.SettingManager.GetSettingValueBoolean("Common.AllowProductSorting"))
{
ddlSorting.Items.Clear();
var ddlSortPositionItem = new ListItem(GetLocaleResourceString("ProductSorting.Position"), ((int)ProductSortingEnum.Position).ToString());
ddlSorting.Items.Add(ddlSortPositionItem);
var ddlSortNameItem = new ListItem(GetLocaleResourceString("ProductSorting.Name"), ((int)ProductSortingEnum.Name).ToString());
ddlSorting.Items.Add(ddlSortNameItem);
var ddlSortPriceItem = new ListItem(GetLocaleResourceString("ProductSorting.Price"), ((int)ProductSortingEnum.Price).ToString());
ddlSorting.Items.Add(ddlSortPriceItem);
}
else
{
pnlSorting.Visible = false;
}
}
protected void BindData()
{
var category = this.CategoryService.GetCategoryById(this.CategoryId);
//breadcrumb
rptrCategoryBreadcrumb.DataSource = this.CategoryService.GetBreadCrumb(this.CategoryId);
rptrCategoryBreadcrumb.DataBind();
lDescription.Text = category.LocalizedDescription;
//subcategories
var subCategories = this.CategoryService.GetAllCategoriesByParentCategoryId(category.CategoryId);
if (subCategories.Count > 0)
{
dlSubCategories.DataSource = subCategories;
dlSubCategories.DataBind();
}
else
dlSubCategories.Visible = false;
//featured products
var featuredProducts = category.FeaturedProducts;
if (featuredProducts.Count > 0)
{
dlFeaturedProducts.DataSource = featuredProducts;
dlFeaturedProducts.DataBind();
}
else
{
pnlFeaturedProducts.Visible = false;
}
//price ranges
this.ctrlPriceRangeFilter.PriceRanges = category.PriceRanges;
//page size
int totalRecords = 0;
int pageSize = 50;
if (category.PageSize > 0)
{
pageSize = category.PageSize;
}
//price ranges
decimal? minPrice = null;
decimal? maxPrice = null;
decimal? minPriceConverted = null;
decimal? maxPriceConverted = null;
if (ctrlPriceRangeFilter.SelectedPriceRange != null)
{
minPrice = ctrlPriceRangeFilter.SelectedPriceRange.From;
if (minPrice.HasValue)
{
minPriceConverted = this.CurrencyService.ConvertCurrency(minPrice.Value, NopContext.Current.WorkingCurrency, this.CurrencyService.PrimaryStoreCurrency);
}
maxPrice = ctrlPriceRangeFilter.SelectedPriceRange.To;
if (maxPrice.HasValue)
{
maxPriceConverted = this.CurrencyService.ConvertCurrency(maxPrice.Value, NopContext.Current.WorkingCurrency, this.CurrencyService.PrimaryStoreCurrency);
}
}
//specification filter
var psoFilterOption = ctrlProductSpecificationFilter.GetAlreadyFilteredSpecOptionIds();
//sorting
ProductSortingEnum orderBy = ProductSortingEnum.Position;
if (this.SettingManager.GetSettingValueBoolean("Common.AllowProductSorting"))
{
CommonHelper.SelectListItem(this.ddlSorting, CommonHelper.QueryStringInt("orderby"));
orderBy = (ProductSortingEnum)Enum.ToObject(typeof(ProductSortingEnum), int.Parse(ddlSorting.SelectedItem.Value));
}
var productCollection = this.ProductService.GetAllProducts(this.CategoryId,
0, 0, false, minPriceConverted, maxPriceConverted,
string.Empty, false, pageSize, this.CurrentPageIndex,
psoFilterOption, orderBy, out totalRecords);
if (productCollection.Count > 0)
{
this.productsPager.PageSize = pageSize;
this.productsPager.TotalRecords = totalRecords;
this.productsPager.PageIndex = this.CurrentPageIndex;
this.dlProducts.DataSource = productCollection;
this.dlProducts.DataBind();
}
else
{
this.dlProducts.Visible = false;
this.pnlSorting.Visible = false;
}
}
protected void ddlSorting_SelectedIndexChanged(object sender, EventArgs e)
{
string url = CommonHelper.GetThisPageUrl(true);
url = CommonHelper.ModifyQueryString(url, "orderby=" + ddlSorting.SelectedItem.Value, null);
Response.Redirect(url);
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
ctrlPriceRangeFilter.ExcludedQueryStringParams = productsPager.QueryStringProperty;
ctrlProductSpecificationFilter.ExcludedQueryStringParams = productsPager.QueryStringProperty;
ctrlProductSpecificationFilter.CategoryId = this.CategoryId;
ctrlProductSpecificationFilter.ReservedQueryStringParams = "CategoryId,";
ctrlProductSpecificationFilter.ReservedQueryStringParams += "orderby,";
ctrlProductSpecificationFilter.ReservedQueryStringParams += ctrlPriceRangeFilter.QueryStringProperty;
ctrlProductSpecificationFilter.ReservedQueryStringParams += ",";
ctrlProductSpecificationFilter.ReservedQueryStringParams += productsPager.QueryStringProperty;
}
protected override void OnPreRender(EventArgs e)
{
this.pnlFilters.Visible = ctrlPriceRangeFilter.Visible || ctrlProductSpecificationFilter.Visible;
base.OnPreRender(e);
}
protected void dlSubCategories_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
var category = e.Item.DataItem as Category;
string categoryURL = SEOHelper.GetCategoryUrl(category);
var hlImageLink = e.Item.FindControl("hlImageLink") as HyperLink;
if (hlImageLink != null)
{
hlImageLink.ImageUrl = this.PictureService.GetPictureUrl(category.PictureId, this.SettingManager.GetSettingValueInteger("Media.Category.ThumbnailImageSize", 125), true);
hlImageLink.NavigateUrl = categoryURL;
hlImageLink.ToolTip = String.Format(GetLocaleResourceString("Media.Category.ImageLinkTitleFormat"), category.LocalizedName);
hlImageLink.Text = String.Format(GetLocaleResourceString("Media.Category.ImageAlternateTextFormat"), category.LocalizedName);
}
var hlCategory = e.Item.FindControl("hlCategory") as HyperLink;
if (hlCategory != null)
{
hlCategory.NavigateUrl = categoryURL;
hlCategory.ToolTip = String.Format(GetLocaleResourceString("Media.Category.ImageLinkTitleFormat"), category.LocalizedName);
hlCategory.Text = Server.HtmlEncode(category.LocalizedName);
}
}
}
public int CurrentPageIndex
{
get
{
int _pageIndex = CommonHelper.QueryStringInt(productsPager.QueryStringProperty);
_pageIndex--;
if (_pageIndex < 0)
_pageIndex = 0;
return _pageIndex;
}
}
public int CategoryId
{
get
{
return CommonHelper.QueryStringInt("CategoryId");
}
}
}
}
- 6
- 26
- 1/17/2011
- United States
Finally the last section:
I did modify the ".order-summary-content .cart" css in the App_Themes/darkOrange/styles.css file. You may wish to modify to your liking but I will post what I changed.
Here is the code that I changed for the horizontal grid for the file App_Themes/darkOrange/styles.css (NOTE: I only put the part I modified so do a search, then replace):
I did modify the ".order-summary-content .cart" css in the App_Themes/darkOrange/styles.css file. You may wish to modify to your liking but I will post what I changed.
Here is the code that I changed for the horizontal grid for the file App_Themes/darkOrange/styles.css (NOTE: I only put the part I modified so do a search, then replace):
.order-summary-content .cart, .wishlist-content .cart
{
width: 100%;
border-collapse: collapse;
text-align: center;
vertical-align: middle;
}
.wishlist-content .cart
{
margin-bottom: 0px;
}
.order-summary-content .cart td, .wishlist-content .cart td
{
padding: 0px;
}
.order-summary-content .cart .cart-header-row, .wishlist-content .cart .cart-header-row
{
font-weight: bold;
}
.order-summary-content .cart .cart-header-row th, .wishlist-content .cart .cart-header-row th
{
background: url('images/cart-header-bg.gif') repeat-x 50%;
color: #FFF;
border-right: solid 1px #6a6a6a;
height: 20px;
padding: 2px 8px;
vertical-align: middle;
white-space: nowrap;
}
.order-summary-content .cart .cart-header-row th.picture, .wishlist-content .cart .cart-header-row th.picture
{
border: none;
}
.order-summary-content .cart .cart-header-row th.end, .wishlist-content .cart .cart-header-row th.end
{
text-align: right;
padding-right: 5px;
}
.order-summary-content .cart .cart-item-row, .wishlist-content .cart .cart-item-row
{
}
.order-summary-content .cart .cart-item-row td, .wishlist-content .cart .cart-item-row td
{
border-bottom: 1px solid #c5c5c5;
vertical-align: middle;
line-height: 20px;
}
.order-summary-content .cart .cart-item-row td.product, .wishlist-content .cart .cart-item-row td.product
{
text-align: left;
padding: 0px 10px 0px 10px;
}
.order-summary-content .cart .cart-item-row td.product a, .wishlist-content .cart .cart-item-row td.product a
{
font-weight: bold;
}
.order-summary-content .cart .cart-item-row td.end, .wishlist-content .cart .cart-item-row td.end
{
text-align: right;
font-weight: bold;
color: Green;
padding-right: 5px;
}
- 6
- 26
- 1/17/2011
- United States
:) Well it looks like I put a ton of effort but most of that code is just pulled from the other user controls and modified to work. It was actually quite simple and that is really why I like this shopping cart over all others out there right now and the fact that it is OS is icing on the cake. I have used every one of the ASP.NET shopping carts as well up to the $4k range (every one).
Glad this helps I will check back if you run into an issue or have a question.
Glad this helps I will check back if you run into an issue or have a question.