Color option thumbnails to another page
Color option thumbnails to another page
I'm trying to copy over the color options from the BuyProductDialog page into the ProductItemDisplay page. Not sure how I would go about doing this. Any help is appreciated. When I tried copying over the code I got an error. Looks like the ProductItemDisplay page can't access the options class or whatever like the BuyProductDialog page does. ASP.NET only allows you to inherit from one class per page.
Re: Color option thumbnails to another page
You can move all the option related code to ProductItemDisplay control. If you are talking about accessing the OptionChoiceItem in BuyProductDialog class, you can create same class inside ProductItemDisplay control or change the class access modifier from protected to public.
You need to move OptionsList repeater control and it's related code to ProductItemDisplay page. If you can provide more details of how you want it to be, and what problems are you facing that would help to provide you more assistance.
You need to move OptionsList repeater control and it's related code to ProductItemDisplay page. If you can provide more details of how you want it to be, and what problems are you facing that would help to provide you more assistance.
Re: Color option thumbnails to another page
when i copy the class from the buyproductdialog ascx.cs file into the productitemdisplay i get a bunch of red underlined code with the error "x does not exist in the current context"
Re: Color option thumbnails to another page
Seems you are missing the required using directives. To add these references, right click on the code with error, you will see an expandable icon. Click on the icon and you will see the available using statements that you can add.
For example, if you are seeing this error for ScriptManager, you can will see System.Web.UI; and System.Web.UI.ScriptManager. You can add one of them by clicking on the statement.
Note: System.Web.UI; statement will be added and applicable for the same control on whole current page while System.Web.UI.ScriptManager will be added only for the current control (e.g. ScriptManager).
For example, if you are seeing this error for ScriptManager, you can will see System.Web.UI; and System.Web.UI.ScriptManager. You can add one of them by clicking on the statement.
Note: System.Web.UI; statement will be added and applicable for the same control on whole current page while System.Web.UI.ScriptManager will be added only for the current control (e.g. ScriptManager).
Re: Color option thumbnails to another page
i saw a lot of pieces of code that had the word "option" in it. Not sure which was which so i tried copying the entire BuyProductDialog.ascx code into ProductItemDisplay.ascx and it still didnt work. I saw the repeater of the optionsList....tried that first, didnt work either. I'm thinking i need to use a for loop or something to loop through each product and spit out the thumbnail color options.
Re: Color option thumbnails to another page
I am sorry, I forgot to ask about which version you using? Is this ablecommerce version 7.0.x or ablecommerce Gold R.x? I was assisting you for able Gold, if you are using 7.0.x, I can help you for that specific version as well.
Re: Color option thumbnails to another page
For Gold here is the code that you can use on ProductItemDisplay control.
Open Website/ConLib/Utility/ProductItemDisplay.ascx
Locate the following line
and replace with
Similarly, open Open Website/ConLib/Utility/ProductItemDisplay.ascx.cs and find & replace the code as instructed below
Locate the following
and replace with
Locate the following
and replace with
Locate the following
and replace with
Finally locate the following code
and replace with
After moving all this code, you can refactor and make updates as needed.
Open Website/ConLib/Utility/ProductItemDisplay.ascx
Locate the following line
Code: Select all
<asp:Panel ID="ActionsPanel" runat="server" CssClass="actionsArea">
Code: Select all
<asp:Repeater ID="OptionsList" runat="server">
<ItemTemplate>
<tr>
<th class="rowHeader" >
<%#GetOptionName(Container.DataItem)%>
</th>
<td runat="server" Visible='<%#!((ProductOption)Container.DataItem).Option.ShowThumbnails%>'>
<asp:DropDownList ID="OptionChoices" runat="server" DataTextField="ChoiceName" DataValueField="ChoiceId" AutoPostBack="true" DataSource='<%#GetOptionChoices(Container.DataItem, Container.ItemIndex)%>' EnableViewState="true" OnDataBinding="OptionChoices_DataBinding" OnDataBound="OptionChoices_DataBound" AppendDataBoundItems="true" ></asp:DropDownList>
<asp:RequiredFieldValidator ID="OptionRequiredValidator" runat="server" ControlToValidate="OptionChoices" Text="*" ValidationGroup="AddToBasket" ErrorMessage='<%#string.Format("Please make your selection for {0}.", GetOptionName(Container.DataItem))%>' />
<asp:HiddenField ID="OptionID" runat="server" Value='<%#Eval("OptionId")%>' />
</td>
<td runat="server" Visible='<%#((ProductOption)Container.DataItem).Option.ShowThumbnails%>'>
<cb:OptionPicker ID="OptionPicker" runat="server" CssClass="optionPicker" AutoPostBack="true" OptionId='<%#Eval("OptionId")%>' ForceToLoadAllChoices='<%#ShowAllOptions%>' SelectedChoices='<%#_SelectedOptionChoices%>' OnLoad="OptionPicker_Load" RetainLargerImageAspectRatio="true" LargerImageMaxHeight="300" LargerImageMaxWidth="300" />
<cb:OptionPickerValidator ID="OptionPickerValidator" runat="server" ControlToValidate="OptionPicker" Text="*" ValidationGroup="AddToBasket" ErrorMessage='<%#string.Format("Please make your selection for {0}.", GetOptionName(Container.DataItem))%>' />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:Panel ID="ActionsPanel" runat="server" CssClass="actionsArea">
Locate the following
Code: Select all
using System.Linq;
Code: Select all
using System.Linq;
using System.Web.UI.WebControls;
using System.Collections.Generic;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Collections;
using CommerceBuilder.Extensions;
using CommerceBuilder.UI.WebControls;
Code: Select all
public Product Item { get; set; }
Code: Select all
public Product Item { get; set; }
Hashtable _OptionDropDownIds = new Hashtable();
Hashtable _OptionPickerIds = new Hashtable();
protected Dictionary<int, int> _SelectedOptionChoices = new Dictionary<int, int>();
Code: Select all
public ProductItemDisplay()
{
ShowName = true;
ShowImage = true;
ImageType = "THUMBNAIL";
ShowPrice = true;
ShowSku = true;
ShowRating = true;
ShowManufacturer = false;
ShowSummary = false;
ShowAddToCart = false;
MaxSummaryLength = -1;
}
Code: Select all
private bool _ShowAllOptions = false;
[Browsable(true), DefaultValue(false)]
[Description("If true all product options are displayed")]
public bool ShowAllOptions
{
get { return _ShowAllOptions; }
set { _ShowAllOptions = value; }
}
public ProductItemDisplay()
{
ShowName = true;
ShowImage = true;
ImageType = "THUMBNAIL";
ShowPrice = true;
ShowSku = true;
ShowRating = true;
ShowManufacturer = false;
ShowSummary = false;
ShowAddToCart = false;
MaxSummaryLength = -1;
}
protected void Page_Load(object sender, EventArgs e)
{
if (ViewState["OptionDropDownIds"] != null)
{
_OptionDropDownIds = (Hashtable)ViewState["OptionDropDownIds"];
}
else
{
_OptionDropDownIds = new Hashtable();
}
if (ViewState["OptionPickerIds"] != null)
{
_OptionPickerIds = (Hashtable)ViewState["OptionPickerIds"];
}
else
{
_OptionPickerIds = new Hashtable();
}
OptionsList.DataSource = GetProductOptions();
OptionsList.DataBind();
}
protected IList<ProductOption> GetProductOptions()
{
if (Item == null)
return new List<ProductOption>();
return Item.ProductOptions;
}
Code: Select all
// SHOW ADD TO CART
ActionsPanel.Visible = ShowAddToCart;
}
}
}
Code: Select all
// SHOW ADD TO CART
ActionsPanel.Visible = ShowAddToCart;
ViewState.Add("OptionDropDownIds", _OptionDropDownIds);
ViewState.Add("OptionPickerIds", _OptionPickerIds);
}
protected void OptionPicker_Load(object sender, EventArgs e)
{
OptionPicker op = (OptionPicker)sender;
if (op != null)
{
int optionId = op.OptionId;
Option opt = OptionDataSource.Load(optionId);
if (opt != null && opt.ShowThumbnails)
{
if (!_OptionPickerIds.Contains(optionId))
{
_OptionPickerIds.Add(optionId, op.UniqueID);
}
//Trace.Write(string.Format("OptionId:{0} PickerId:{1}", optionId, op.UniqueID));
if (_SelectedOptionChoices.ContainsKey(optionId))
{
op.SelectedChoiceId = _SelectedOptionChoices[optionId];
}
}
}
}
protected List<OptionChoiceItem> GetOptionChoices(Object objOption, int index)
{
ProductOption productOption = objOption as ProductOption;
if (productOption == null)
return GetOptionChoiceValues(new List<OptionChoice>());
IList<OptionChoice> availableChoices;
if (index < ProductVariant.MAXIMUM_ATTRIBUTES)
{
availableChoices = OptionChoiceDataSource.GetAvailableChoices(Item.Id, productOption.OptionId, _SelectedOptionChoices);
}
else
{
availableChoices = productOption.Option.Choices;
}
return GetOptionChoiceValues(availableChoices);
}
protected string GetOptionChoiceName(Object obj)
{
OptionChoice choice = obj as OptionChoice;
if (choice == null) return string.Empty;
string modifierStr = string.Empty;
if (choice.PriceModifier.HasValue && choice.PriceModifier != 0)
{
string plus = choice.PriceModifier > 0 ? "+" : "";
modifierStr = string.Format(" ({0})", plus + choice.PriceModifier.LSCurrencyFormat("ulc"));
}
return choice.Name + modifierStr;
}
protected List<OptionChoiceItem> GetOptionChoiceValues(IList<OptionChoice> optCol)
{
List<OptionChoiceItem> optChoiceValues = new List<OptionChoiceItem>();
foreach (OptionChoice oc in optCol)
{
string choiceName = GetOptionChoiceName(oc);
string choiceId = GetOptionChoiceId(oc);
optChoiceValues.Add(new OptionChoiceItem(oc.OptionId, choiceId, choiceName, oc.Selected));
}
return optChoiceValues;
}
protected string GetOptionChoiceId(Object obj)
{
OptionChoice choice = obj as OptionChoice;
if (choice == null) return string.Empty;
if (choice.Id == 0) return string.Empty;
return choice.Id.ToString();
}
protected string GetOptionName(Object obj)
{
ProductOption productOption = obj as ProductOption;
if (productOption == null) return string.Empty;
return productOption.Option.Name;
}
protected string GetOptionHeaderText(Object obj)
{
ProductOption productOption = obj as ProductOption;
if (productOption == null) return string.Empty;
return productOption.Option.HeaderText;
}
protected void OptionChoices_DataBinding(object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
if (ddl != null)
{
List<OptionChoiceItem> ds = (List<OptionChoiceItem>)ddl.DataSource;
if (ds != null && ds.Count > 0)
{
// ADD FIRST CHOICE EITHER EMPTY OR WITH THE SPECIFIED HEADER TEXT
int optionId = ds[0].OptionId;
Option opt = OptionDataSource.Load(optionId);
ddl.Items.Add(new ListItem(opt.HeaderText, string.Empty));
}
}
}
protected void OptionChoices_DataBound(object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
if (ddl != null)
{
List<OptionChoiceItem> ds = (List<OptionChoiceItem>)ddl.DataSource;
if (ds != null && ds.Count > 0)
{
int optionId = ds[0].OptionId;
Option opt = OptionDataSource.Load(optionId);
OptionChoiceItem oci = ds.FirstOrDefault<OptionChoiceItem>(c => c.Selected);
if (oci != null)
{
ListItem item = ddl.Items.FindByValue(oci.ChoiceId.ToString());
if (item != null)
{
ddl.ClearSelection();
item.Selected = true;
}
}
if (opt != null && !opt.ShowThumbnails)
{
if (!_OptionDropDownIds.Contains(optionId))
{
_OptionDropDownIds.Add(optionId, ddl.UniqueID);
}
if (_SelectedOptionChoices.ContainsKey(optionId))
{
ListItem selectedItem = ddl.Items.FindByValue(_SelectedOptionChoices[optionId].ToString());
if (selectedItem != null)
{
ddl.ClearSelection();
selectedItem.Selected = true;
}
}
StringBuilder imageScript = new StringBuilder();
imageScript.Append("<script type=\"text/javascript\">\n");
imageScript.Append(" var " + ddl.ClientID + "_Images = {};\n");
string imageUrl = string.Format("~/GetImage.ashx?Path={0}&maintainAspectRatio=true&maxHeight={1}&maxWidth={1}", Server.UrlEncode(Item.ImageUrl), 300);
imageScript.Append(" var _DefaultImageUrl = '" + this.Page.ResolveUrl(imageUrl) + "';\n");
string tempUrl = string.Empty;
foreach (OptionChoice choice in opt.Choices)
{
if (!string.IsNullOrEmpty(choice.ImageUrl))
{
tempUrl = string.Format("~/GetImage.ashx?Path={0}&maintainAspectRatio=true&maxHeight={1}&maxWidth={1}", HttpUtility.UrlEncode(choice.ImageUrl), 300);
imageScript.Append(" " + ddl.ClientID + "_Images[" + choice.Id.ToString() + "] = '" + this.Page.ResolveUrl(tempUrl) + "';\n");
}
}
imageScript.Append("</script>\n");
ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
if (scriptManager != null)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), ddl.ClientID, imageScript.ToString(), false);
}
else
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), ddl.ClientID, imageScript.ToString());
}
}
}
ddl.Attributes.Add("onChange", "OptionSelectionChanged('" + ddl.ClientID + "');");
}
}
protected class OptionChoiceItem
{
public OptionChoiceItem()
{
}
public OptionChoiceItem(int optionId, string choiceId, string choiceName, bool selected)
{
_OptionId = optionId;
_ChoiceId = choiceId;
_ChoiceName = choiceName;
Selected = selected;
}
int _OptionId;
public int OptionId
{
get { return _OptionId; }
set { _OptionId = value; }
}
string _ChoiceName = string.Empty;
public string ChoiceName
{
get { return _ChoiceName; }
set { _ChoiceName = value; }
}
string _ChoiceId = string.Empty;
public string ChoiceId
{
get { return _ChoiceId; }
set { _ChoiceId = value; }
}
public bool Selected { get; set; }
}
}
}
Re: Color option thumbnails to another page
Yes, GOLD. thanks a lot for the help. I made those changes and it made some space for the color options below the product now, but the thumbnails still aren't showing. Looks like we are on the right path, though. Here is my productItemDisplay.ascx.cs code:
Code: Select all
namespace AbleCommerce.ConLib.Utility
{
using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Linq;
using System.Web.UI.WebControls;
using System.Collections.Generic;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Collections;
using CommerceBuilder.Extensions;
using CommerceBuilder.UI.WebControls;
using CommerceBuilder.Products;
using CommerceBuilder.Common;
using AbleCommerce.Code;
[Description("Displays a product item")]
public partial class ProductItemDisplay : System.Web.UI.UserControl
{
public Product Item { get; set; }
Hashtable _OptionDropDownIds = new Hashtable();
Hashtable _OptionPickerIds = new Hashtable();
protected Dictionary<int, int> _SelectedOptionChoices = new Dictionary<int, int>();
[Browsable(true)]
[DefaultValue(true)]
[Description("If true product name is displayed")]
public bool ShowName { get; set; }
[Browsable(true)]
[DefaultValue(true)]
[Description("If true product image is displayed")]
public bool ShowImage { get; set; }
[Browsable(true)]
[DefaultValue("THUMBNAIL")]
[Description("The type of image to display. Valid values are THUMBNAIL, ICON and IMAGE")]
public string ImageType { get; set; }
[Browsable(true)]
[DefaultValue(true)]
[Description("If true price is displayed")]
public bool ShowPrice { get; set; }
[Browsable(true)]
[DefaultValue(true)]
[Description("If true SKU is displayed")]
public bool ShowSku { get; set; }
[Browsable(true)]
[DefaultValue(false)]
[Description("If true manufacturer is displayed")]
public bool ShowManufacturer { get; set; }
[Browsable(true)]
[DefaultValue(true)]
[Description("If true rating stars are displayed")]
public bool ShowRating { get; set; }
[Browsable(true)]
[DefaultValue(false)]
[Description("If true summary text is displayed")]
public bool ShowSummary { get; set; }
[Browsable(true)]
[DefaultValue(false)]
[Description("If true add-to-cart button is displayed")]
public bool ShowAddToCart { get; set; }
/// <summary>
/// Specify the maximum lenght if you want truncate the summary text.
/// </summary>
[Browsable(true)]
[DefaultValue(-1)]
[Description("Maximum number of characters to display for summary. Value of 0 or less means no restriction.")]
public int MaxSummaryLength { get; set; }
private bool _ShowAllOptions = false;
[Browsable(true), DefaultValue(false)]
[Description("If true all product options are displayed")]
public bool ShowAllOptions
{
get { return _ShowAllOptions; }
set { _ShowAllOptions = value; }
}
public ProductItemDisplay()
{
ShowName = true;
ShowImage = true;
ImageType = "THUMBNAIL";
ShowPrice = true;
ShowSku = true;
ShowRating = true;
ShowManufacturer = false;
ShowSummary = false;
ShowAddToCart = false;
MaxSummaryLength = -1;
}
protected void Page_Load(object sender, EventArgs e)
{
if (ViewState["OptionDropDownIds"] != null)
{
_OptionDropDownIds = (Hashtable)ViewState["OptionDropDownIds"];
}
else
{
_OptionDropDownIds = new Hashtable();
}
if (ViewState["OptionPickerIds"] != null)
{
_OptionPickerIds = (Hashtable)ViewState["OptionPickerIds"];
}
else
{
_OptionPickerIds = new Hashtable();
}
OptionsList.DataSource = GetProductOptions();
OptionsList.DataBind();
}
protected IList<ProductOption> GetProductOptions()
{
if (Item == null)
return new List<ProductOption>();
return Item.ProductOptions;
}
protected void Page_PreRender(Object sender, EventArgs e)
{
if (Item == null)
{
this.Visible = false;
return;
}
//Item.ProductOptions[0].Option..Choices[0].ThumbnailUrl;
ProductPrice.Product = Item;
ProductAddToCart.ProductId = Item.Id;
// SHOW PRODUCT THUMBNAIL, ICON OR IMAGE
ThumbnailPanel.Visible = ShowImage;
if (ShowImage)
{
ThumbnailPanel.Visible = true;
ProductThumbnailLink.Visible = true;
ProductThumbnail.Visible = true;
switch (ImageType.ToUpper())
{
case "THUMBNAIL":
if (!string.IsNullOrEmpty(Item.ThumbnailUrl))
{
ProductThumbnail.ImageUrl = Item.ThumbnailUrl;
ProductThumbnail.AlternateText = Item.ThumbnailAltText;
}
else
{
ProductThumbnail.Visible = false;
NoThumbnail.Visible = true;
}
break;
case "ICON":
if (!string.IsNullOrEmpty(Item.IconUrl))
{
ProductThumbnail.ImageUrl = Item.IconUrl;
ProductThumbnail.AlternateText = Item.IconAltText;
}
else
{
ProductThumbnail.Visible = false;
NoIcon.Visible = true;
}
break;
case "IMAGE":
if (!string.IsNullOrEmpty(Item.ImageUrl))
{
ProductThumbnail.ImageUrl = Item.ImageUrl;
ProductThumbnail.AlternateText = Item.ImageAltText;
}
else
{
ProductThumbnail.Visible = false;
NoImage.Visible = true;
}
break;
default:
if (!string.IsNullOrEmpty(Item.ThumbnailUrl))
{
ProductThumbnail.ImageUrl = Item.ThumbnailUrl;
ProductThumbnail.AlternateText = Item.ThumbnailAltText;
}
else
{
ProductThumbnail.Visible = false;
NoThumbnail.Visible = true;
}
break;
}
ProductThumbnailLink.NavigateUrl = Item.NavigateUrl;
}
// SHOW PRODUCT NAME
NamePanel.Visible = ShowName;
if (ShowName)
{
if (!string.IsNullOrEmpty(Item.Name))
{
ProductName.Text = Item.Name;
ProductName.NavigateUrl = Item.NavigateUrl;
}
else
NamePanel.Visible = false;
}
//SHOW PRODUCT MANUFACTURER
ManufacturerPanel.Visible = ShowManufacturer;
if(ShowManufacturer)
{
Manufacturer manufacturer = Item.Manufacturer;
if (manufacturer != null)
{
ProductManufacturer.Text = manufacturer.Name;
ProductManufacturer.NavigateUrl = NavigationHelper.GetSearchPageUrl() + string.Format("?m={0}", manufacturer.Id);
}
else
ManufacturerPanel.Visible = false;
}
// SHOW PRODUCT PRICE
PricePanel.Visible = ShowPrice;
if (ShowPrice)
{
if (!string.IsNullOrEmpty(Item.Price.ToString()))
ProductPrice.Visible = true;
else
PricePanel.Visible = false;
}
// SHOW PRODUCT SKU
SkuPanel.Visible = ShowSku;
if (ShowSku)
{
if (!string.IsNullOrEmpty(Item.Sku))
ProductSku.Text = Item.Sku;
else
SkuPanel.Visible = false;
}
// SHOW PRODUCT RATINGS
RatingPanel.Visible = false;
if (ShowRating)
{
if (AbleContext.Current.Store.Settings.ProductReviewEnabled != CommerceBuilder.Users.UserAuthFilter.None)
{
RatingPanel.Visible = true;
ProductRating.Rating = Item.Rating;
// SHOW TOTAL REVIEWS
ProductRating.TotalReviews = Item.Reviews.Where(pr => pr.IsApproved).Count();
}
}
// SHOW PRODUCT SUMMARY
SummaryPanel.Visible = ShowSummary;
if (ShowSummary)
{
if (!string.IsNullOrEmpty(Item.Summary))
{
if (MaxSummaryLength > 0 && Item.Summary.Length > MaxSummaryLength) ProductSummary.Text = Item.Summary.Substring(0, MaxSummaryLength) + "...";
else ProductSummary.Text = Item.Summary;
}
else
SummaryPanel.Visible = false;
}
// SHOW ADD TO CART
ActionsPanel.Visible = ShowAddToCart;
ViewState.Add("OptionDropDownIds", _OptionDropDownIds);
ViewState.Add("OptionPickerIds", _OptionPickerIds);
}
protected void OptionPicker_Load(object sender, EventArgs e)
{
OptionPicker op = (OptionPicker)sender;
if (op != null)
{
int optionId = op.OptionId;
Option opt = OptionDataSource.Load(optionId);
if (opt != null && opt.ShowThumbnails)
{
if (!_OptionPickerIds.Contains(optionId))
{
_OptionPickerIds.Add(optionId, op.UniqueID);
}
//Trace.Write(string.Format("OptionId:{0} PickerId:{1}", optionId, op.UniqueID));
if (_SelectedOptionChoices.ContainsKey(optionId))
{
op.SelectedChoiceId = _SelectedOptionChoices[optionId];
}
}
}
}
protected List<OptionChoiceItem> GetOptionChoices(Object objOption, int index)
{
ProductOption productOption = objOption as ProductOption;
if (productOption == null)
return GetOptionChoiceValues(new List<OptionChoice>());
IList<OptionChoice> availableChoices;
if (index < ProductVariant.MAXIMUM_ATTRIBUTES)
{
availableChoices = OptionChoiceDataSource.GetAvailableChoices(Item.Id, productOption.OptionId, _SelectedOptionChoices);
}
else
{
availableChoices = productOption.Option.Choices;
}
return GetOptionChoiceValues(availableChoices);
}
protected string GetOptionChoiceName(Object obj)
{
OptionChoice choice = obj as OptionChoice;
if (choice == null) return string.Empty;
string modifierStr = string.Empty;
if (choice.PriceModifier.HasValue && choice.PriceModifier != 0)
{
string plus = choice.PriceModifier > 0 ? "+" : "";
modifierStr = string.Format(" ({0})", plus + choice.PriceModifier.LSCurrencyFormat("ulc"));
}
return choice.Name + modifierStr;
}
protected List<OptionChoiceItem> GetOptionChoiceValues(IList<OptionChoice> optCol)
{
List<OptionChoiceItem> optChoiceValues = new List<OptionChoiceItem>();
foreach (OptionChoice oc in optCol)
{
string choiceName = GetOptionChoiceName(oc);
string choiceId = GetOptionChoiceId(oc);
optChoiceValues.Add(new OptionChoiceItem(oc.OptionId, choiceId, choiceName, oc.Selected));
}
return optChoiceValues;
}
protected string GetOptionChoiceId(Object obj)
{
OptionChoice choice = obj as OptionChoice;
if (choice == null) return string.Empty;
if (choice.Id == 0) return string.Empty;
return choice.Id.ToString();
}
protected string GetOptionName(Object obj)
{
ProductOption productOption = obj as ProductOption;
if (productOption == null) return string.Empty;
return productOption.Option.Name;
}
protected string GetOptionHeaderText(Object obj)
{
ProductOption productOption = obj as ProductOption;
if (productOption == null) return string.Empty;
return productOption.Option.HeaderText;
}
protected void OptionChoices_DataBinding(object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
if (ddl != null)
{
List<OptionChoiceItem> ds = (List<OptionChoiceItem>)ddl.DataSource;
if (ds != null && ds.Count > 0)
{
// ADD FIRST CHOICE EITHER EMPTY OR WITH THE SPECIFIED HEADER TEXT
int optionId = ds[0].OptionId;
Option opt = OptionDataSource.Load(optionId);
ddl.Items.Add(new ListItem(opt.HeaderText, string.Empty));
}
}
}
protected void OptionChoices_DataBound(object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
if (ddl != null)
{
List<OptionChoiceItem> ds = (List<OptionChoiceItem>)ddl.DataSource;
if (ds != null && ds.Count > 0)
{
int optionId = ds[0].OptionId;
Option opt = OptionDataSource.Load(optionId);
OptionChoiceItem oci = ds.FirstOrDefault<OptionChoiceItem>(c => c.Selected);
if (oci != null)
{
ListItem item = ddl.Items.FindByValue(oci.ChoiceId.ToString());
if (item != null)
{
ddl.ClearSelection();
item.Selected = true;
}
}
if (opt != null && !opt.ShowThumbnails)
{
if (!_OptionDropDownIds.Contains(optionId))
{
_OptionDropDownIds.Add(optionId, ddl.UniqueID);
}
if (_SelectedOptionChoices.ContainsKey(optionId))
{
ListItem selectedItem = ddl.Items.FindByValue(_SelectedOptionChoices[optionId].ToString());
if (selectedItem != null)
{
ddl.ClearSelection();
selectedItem.Selected = true;
}
}
StringBuilder imageScript = new StringBuilder();
imageScript.Append("<script type=\"text/javascript\">\n");
imageScript.Append(" var " + ddl.ClientID + "_Images = {};\n");
string imageUrl = string.Format("~/GetImage.ashx?Path={0}&maintainAspectRatio=true&maxHeight={1}&maxWidth={1}", Server.UrlEncode(Item.ImageUrl), 300);
imageScript.Append(" var _DefaultImageUrl = '" + this.Page.ResolveUrl(imageUrl) + "';\n");
string tempUrl = string.Empty;
foreach (OptionChoice choice in opt.Choices)
{
if (!string.IsNullOrEmpty(choice.ImageUrl))
{
tempUrl = string.Format("~/GetImage.ashx?Path={0}&maintainAspectRatio=true&maxHeight={1}&maxWidth={1}", HttpUtility.UrlEncode(choice.ImageUrl), 300);
imageScript.Append(" " + ddl.ClientID + "_Images[" + choice.Id.ToString() + "] = '" + this.Page.ResolveUrl(tempUrl) + "';\n");
}
}
imageScript.Append("</script>\n");
ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
if (scriptManager != null)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), ddl.ClientID, imageScript.ToString(), false);
}
else
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), ddl.ClientID, imageScript.ToString());
}
}
}
ddl.Attributes.Add("onChange", "OptionSelectionChanged('" + ddl.ClientID + "');");
}
}
protected class OptionChoiceItem
{
public OptionChoiceItem()
{
}
public OptionChoiceItem(int optionId, string choiceId, string choiceName, bool selected)
{
_OptionId = optionId;
_ChoiceId = choiceId;
_ChoiceName = choiceName;
Selected = selected;
}
int _OptionId;
public int OptionId
{
get { return _OptionId; }
set { _OptionId = value; }
}
string _ChoiceName = string.Empty;
public string ChoiceName
{
get { return _ChoiceName; }
set { _ChoiceName = value; }
}
string _ChoiceId = string.Empty;
public string ChoiceId
{
get { return _ChoiceId; }
set { _ChoiceId = value; }
}
public bool Selected { get; set; }
}
}
}
Re: Color option thumbnails to another page
First of all remove one set of the following using statements from code (these are repeated):
You also have to make sure that 'Show Thumbnails' option is enabled from editoption page i.e. /Admin/Products/Variants/EditOption.aspx?ProductId={YourProductId}&OptionId={YourOptionId}.
Hopefully, you will be able to make it work now. Let me know if you have any issue.
Code: Select all
using System.Collections;
using System.Collections.Generic;
This should work. I suspect you haven't setup correctly. Have you specified the thumbnails for option choices? This will be added from admin editchoices page i.e. /Admin/Products/Variants/EditChoices.aspx?ProductId={YourProductId}&OptionId={YourOptionId}.I made those changes and it made some space for the color options below the product now, but the thumbnails still aren't showing.
You also have to make sure that 'Show Thumbnails' option is enabled from editoption page i.e. /Admin/Products/Variants/EditOption.aspx?ProductId={YourProductId}&OptionId={YourOptionId}.
Hopefully, you will be able to make it work now. Let me know if you have any issue.
Re: Color option thumbnails to another page
Still can't get them to show. Yes, thumbnails are enabled. The color option thumbnails show just fine on the main product detail page after you click on a product. For the category grid page, though, they still aren't showing. I attached a screenshot of where they are suppose to show. The red circle is where I put the repeater element....unfortunately I can't get anything to display there :/
Re: Color option thumbnails to another page
Ok I got it to work. The problem was the order of the functions in correlation with the Page_PreRender and Page_Load functions. I moved this into Page_PreRender and got it to work.
Thanks so much for your help.
Code: Select all
if (ViewState["OptionDropDownIds"] != null)
{
_OptionDropDownIds = (Hashtable)ViewState["OptionDropDownIds"];
}
else
{
_OptionDropDownIds = new Hashtable();
}
if (ViewState["OptionPickerIds"] != null)
{
_OptionPickerIds = (Hashtable)ViewState["OptionPickerIds"];
}
else
{
_OptionPickerIds = new Hashtable();
}
OptionsList.DataSource = GetProductOptions();
OptionsList.DataBind();
Re: Color option thumbnails to another page
It was working for me inside Page_Load method as well. Any ways, good to know that you are able to make it work.
Re: Color option thumbnails to another page
Hi Nadeem, I'm trying to do the same thing but this time with the Featured Products Grid (FeaturedProductsGrid.ascx). I tried the same method/changes as we just did but was getting the same errors. Is there anything different I need to change? I noticed there's not a Pre_Render function in FeaturedProductsGrid.ascx.cs. That might be causing some issues.
Re: Color option thumbnails to another page
Nvm. I just included that ProductItemDIsplay user control into the Featured Products grid and it worked. Thanks again.