Color option thumbnails to another page

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
crizilla
Ensign (ENS)
Ensign (ENS)
Posts: 18
Joined: Thu May 12, 2016 6:29 am

Color option thumbnails to another page

Post by crizilla » Thu May 12, 2016 9:55 am

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.

nadeem
Captain (CAPT)
Captain (CAPT)
Posts: 258
Joined: Tue Jul 31, 2012 7:23 pm

Re: Color option thumbnails to another page

Post by nadeem » Fri May 13, 2016 2:41 am

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.

crizilla
Ensign (ENS)
Ensign (ENS)
Posts: 18
Joined: Thu May 12, 2016 6:29 am

Re: Color option thumbnails to another page

Post by crizilla » Fri May 13, 2016 10:57 am

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"

nadeem
Captain (CAPT)
Captain (CAPT)
Posts: 258
Joined: Tue Jul 31, 2012 7:23 pm

Re: Color option thumbnails to another page

Post by nadeem » Mon May 16, 2016 12:51 am

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).

crizilla
Ensign (ENS)
Ensign (ENS)
Posts: 18
Joined: Thu May 12, 2016 6:29 am

Re: Color option thumbnails to another page

Post by crizilla » Tue May 17, 2016 9:58 am

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.

nadeem
Captain (CAPT)
Captain (CAPT)
Posts: 258
Joined: Tue Jul 31, 2012 7:23 pm

Re: Color option thumbnails to another page

Post by nadeem » Wed May 18, 2016 12:50 am

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.

nadeem
Captain (CAPT)
Captain (CAPT)
Posts: 258
Joined: Tue Jul 31, 2012 7:23 pm

Re: Color option thumbnails to another page

Post by nadeem » Wed May 18, 2016 4:54 am

For Gold here is the code that you can use on ProductItemDisplay control.

Open Website/ConLib/Utility/ProductItemDisplay.ascx
Locate the following line

Code: Select all

<asp:Panel ID="ActionsPanel" runat="server" CssClass="actionsArea">
and replace with

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">
Similarly, open Open Website/ConLib/Utility/ProductItemDisplay.ascx.cs and find & replace the code as instructed below

Locate the following

Code: Select all

using System.Linq;
and replace with

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;
Locate the following

Code: Select all

public Product Item { get; set; }
and replace with

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>();
Locate the following

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;
        }
and replace with

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;
        }
Finally locate the following code

Code: Select all

// SHOW ADD TO CART
            ActionsPanel.Visible = ShowAddToCart;
        }
    }
}
and replace with

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; }
        }
    }
}
After moving all this code, you can refactor and make updates as needed.

crizilla
Ensign (ENS)
Ensign (ENS)
Posts: 18
Joined: Thu May 12, 2016 6:29 am

Re: Color option thumbnails to another page

Post by crizilla » Wed May 18, 2016 6:45 am

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; }
        }
    }
}
      



nadeem
Captain (CAPT)
Captain (CAPT)
Posts: 258
Joined: Tue Jul 31, 2012 7:23 pm

Re: Color option thumbnails to another page

Post by nadeem » Thu May 19, 2016 12:25 am

First of all remove one set of the following using statements from code (these are repeated):

Code: Select all

using System.Collections;
using System.Collections.Generic;
I made those changes and it made some space for the color options below the product now, but the thumbnails still aren't showing.
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}.

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.

crizilla
Ensign (ENS)
Ensign (ENS)
Posts: 18
Joined: Thu May 12, 2016 6:29 am

Re: Color option thumbnails to another page

Post by crizilla » Thu May 19, 2016 11:49 am

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 :/

crizilla
Ensign (ENS)
Ensign (ENS)
Posts: 18
Joined: Thu May 12, 2016 6:29 am

Re: Color option thumbnails to another page

Post by crizilla » Thu May 19, 2016 12:18 pm

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.

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();
Thanks so much for your help.

nadeem
Captain (CAPT)
Captain (CAPT)
Posts: 258
Joined: Tue Jul 31, 2012 7:23 pm

Re: Color option thumbnails to another page

Post by nadeem » Mon May 23, 2016 12:56 am

It was working for me inside Page_Load method as well. Any ways, good to know that you are able to make it work.

crizilla
Ensign (ENS)
Ensign (ENS)
Posts: 18
Joined: Thu May 12, 2016 6:29 am

Re: Color option thumbnails to another page

Post by crizilla » Tue May 24, 2016 9:08 am

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.

crizilla
Ensign (ENS)
Ensign (ENS)
Posts: 18
Joined: Thu May 12, 2016 6:29 am

Re: Color option thumbnails to another page

Post by crizilla » Tue May 24, 2016 11:35 am

Nvm. I just included that ProductItemDIsplay user control into the Featured Products grid and it worked. Thanks again.

Post Reply