AJAX accordion for product variants page

Hi all,

I've created a new productvariantsInGrid.ascx page. I now show the product variants in an AJAX accordion control.

I use the repeater to databind the data, because of the accVariants_ItemDataBound. If someone has a better solution to databind the data, please let me know.

The css is also changed by adding some css classes. These are not included in this Topic.

<div class="product-variant-list">

    <ajaxToolkit:Accordion ID="accVariants" runat="server"
        onitemdatabound="accVariants_ItemDataBound"
        onitemcommand="accVariants_ItemCommand"
        SuppressHeaderPostbacks="true"
        FadeTransitions="true"
        TransitionDuration="250"
        FramesPerSecond="40"
        HeaderCssClass="accordionHeader"
        HeaderSelectedCssClass="accordionHeaderSelected"
        ContentCssClass="accordionContent">
    <HeaderTemplate>
        <a href="" class="accordionLink"><%#Server.HtmlEncode(Eval("LocalizedName").ToString())%></a>
    </HeaderTemplate>
    <ContentTemplate>
    <div class="product-variant-line">
                <div class="description">
                    <asp:Literal runat="server" ID="lDescription" Visible='<%# !String.IsNullOrEmpty(Eval("LocalizedDescription").ToString()) %>'
                        Text='<%# Eval("LocalizedDescription")%>'>
                    </asp:Literal>
                    <asp:Label runat="server" ID="ProductVariantId" Text='<%#Eval("ProductVariantId")%>' Visible="false" />
                </div>
                <asp:Panel runat="server" ID="pnlDownloadSample" Visible="false" CssClass="downloadsample">
                    <span class="downloadsamplebutton">
                        <asp:HyperLink runat="server" ID="hlDownloadSample" Text="<% $NopResources:Products.DownloadSample %>">
                        </asp:HyperLink>
                    </span>
                </asp:Panel>
                <nopCommerce:TierPrices ID="ctrlTierPrices" runat="server" ProductVariantId='<%#Eval("ProductVariantId") %>'>
                </nopCommerce:TierPrices>
                <div class="clear">
                </div>
                <div class="attributes">
                    <nopCommerce:ProductAttributes ID="ctrlProductAttributes" runat="server" ProductVariantId='<%#Eval("ProductVariantId") %>'>
                    </nopCommerce:ProductAttributes>
                </div>
                <div class="clear">
                </div>
                <asp:Panel ID="pnlStockAvailablity" runat="server" class="stock">
                    <asp:Label ID="lblStockAvailablity" runat="server">
                    </asp:Label>
                </asp:Panel>
                <asp:PlaceHolder runat="server" ID="phSKU">
                    <div class="clear">
                    </div>
                    <div class="sku">
                        <%=GetLocaleResourceString("Products.SKU")%>
                        <asp:Literal runat="server" ID="lSKU" />
                    </div>
                </asp:PlaceHolder>
                <div class="clear">
                </div>
                <nopCommerce:GiftCardAttributes ID="ctrlGiftCardAttributes" runat="server" ProductVariantId='<%#Eval("ProductVariantId") %>' />
                <div class="clear">
                </div>
                <div class="price">
                    <nopCommerce:ProductPrice1 ID="ctrlProductPrice" runat="server" ProductVariantId='<%#Eval("ProductVariantId") %>' />
                    <nopCommerce:DecimalTextBox runat="server" ID="txtCustomerEnteredPrice" Value="1"
                        RequiredErrorMessage="<% $NopResources:Products.CustomerEnteredPrice.EnterPrice %>"
                        MinimumValue="0" MaximumValue="100000000" Width="100" />
                </div>
                <div class="add-info">
                    <nopCommerce:NumericTextBox runat="server" ID="txtQuantity" Value="1" RequiredErrorMessage="<% $NopResources:Products.EnterQuantity %>"
                        RangeErrorMessage="<% $NopResources:Products.QuantityRange %>" MinimumValue="1"
                        MaximumValue="999999" Width="50"></nopCommerce:NumericTextBox>
                    <asp:Button ID="btnAddToCart" runat="server" Text="<% $NopResources:Products.AddToCart %>"
                        CommandName="AddToCart" CommandArgument='<%#Eval("ProductVariantId")%>' CssClass="productvariantaddtocartbutton">
                    </asp:Button>
                    <asp:Button ID="btnAddToWishlist" runat="server" Text="<% $NopResources:Wishlist.AddToWishlist %>"
                        CommandName="AddToWishlist" CommandArgument='<%#Eval("ProductVariantId")%>' CssClass="productvariantaddtowishlistbutton">
                    </asp:Button>
                </div>
                <div class="clear">
                </div>
                <asp:Label runat="server" ID="lblError" EnableViewState="false" CssClass="error" />
    </div>
    </ContentTemplate>
    </ajaxToolkit:Accordion>
  </div>

    <asp:Repeater ID="rptVariants" runat="server">
        <ItemTemplate />
    </asp:Repeater>

And in the code behind


        protected void BindData()
        {
            var product = ProductManager.GetProductById(this.ProductId);
            if (product != null)
            {
                var productVariants = product.ProductVariants;
                if (productVariants.Count > 0)
                {

                    rptVariants.DataSource = productVariants;
                    rptVariants.DataBind();

                    accVariants.DataSource = rptVariants.DataSource;
                    accVariants.DataBind();

                }
                else
                    this.Visible = false;
            }
            else
                this.Visible = false;
        }


        protected void accVariants_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
        {
            if (e.AccordionItem.ItemType != AjaxControlToolkit.AccordionItemType.Header)
            {
                var productVariant = e.AccordionItem.DataItem as ProductVariant;
                var pnlDownloadSample = e.AccordionItem.FindControl("pnlDownloadSample") as Panel;
                var hlDownloadSample = e.AccordionItem.FindControl("hlDownloadSample") as HyperLink;
                var iProductVariantPicture = e.AccordionItem.FindControl("iProductVariantPicture") as Image;
                var pnlStockAvailablity = e.AccordionItem.FindControl("pnlStockAvailablity") as Panel;
                var lblStockAvailablity = e.AccordionItem.FindControl("lblStockAvailablity") as Label;
                var phSKU = e.AccordionItem.FindControl("phSKU") as PlaceHolder;
                var phSKU2 = (PlaceHolder)e.AccordionItem.FindControl("phSKU");
                var lSKU = e.AccordionItem.FindControl("lSKU") as Literal;
                var txtCustomerEnteredPrice = e.AccordionItem.FindControl("txtCustomerEnteredPrice") as DecimalTextBox;
                var txtQuantity = e.AccordionItem.FindControl("txtQuantity") as NumericTextBox;
                var btnAddToCart = e.AccordionItem.FindControl("btnAddToCart") as Button;
                var btnAddToWishlist = e.AccordionItem.FindControl("btnAddToWishlist") as Button;

                if (iProductVariantPicture != null)
                {
                    var productVariantPicture = productVariant.Picture;
                    string pictureUrl = PictureManager.GetPictureUrl(productVariantPicture, SettingManager.GetSettingValueInteger("Media.Product.VariantImageSize", 125), false);
                    if (String.IsNullOrEmpty(pictureUrl))
                        iProductVariantPicture.Visible = false;
                    else
                        iProductVariantPicture.ImageUrl = pictureUrl;
                    iProductVariantPicture.ToolTip = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), productVariant.LocalizedName);
                    iProductVariantPicture.AlternateText = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), productVariant.LocalizedName);
                }

                btnAddToWishlist.Visible = SettingManager.GetSettingValueBoolean("Common.EnableWishlist");

                //stock
                if (pnlStockAvailablity != null && lblStockAvailablity != null)
                {
                    string stockMessage = PriceHelper.FormatStockMessage(productVariant);
                    if (!String.IsNullOrEmpty(stockMessage))
                    {
                        lblStockAvailablity.Text = stockMessage;
                    }
                    else
                    {
                        pnlStockAvailablity.Visible = false;
                    }
                }
                //sku
                if (SettingManager.GetSettingValueBoolean("Display.Products.ShowSKU") &&
                    !String.IsNullOrEmpty(productVariant.SKU))
                {
                    phSKU.Visible = true;
                    lSKU.Text = Server.HtmlEncode(productVariant.SKU);
                }
                else
                {
                    phSKU.Visible = false;
                }

                //price entered by a customer
                if (productVariant.CustomerEntersPrice)
                {
                    int minimumCustomerEnteredPrice = Convert.ToInt32(Math.Ceiling(CurrencyManager.ConvertCurrency(productVariant.MinimumCustomerEnteredPrice, CurrencyManager.PrimaryStoreCurrency, NopContext.Current.WorkingCurrency)));
                    int maximumCustomerEnteredPrice = Convert.ToInt32(Math.Truncate(CurrencyManager.ConvertCurrency(productVariant.MaximumCustomerEnteredPrice, CurrencyManager.PrimaryStoreCurrency, NopContext.Current.WorkingCurrency)));
                    txtCustomerEnteredPrice.Visible = true;
                    txtCustomerEnteredPrice.ValidationGroup = string.Format("ProductVariant{0}", productVariant.ProductVariantId);
                    txtCustomerEnteredPrice.Value = minimumCustomerEnteredPrice;
                    txtCustomerEnteredPrice.MinimumValue = minimumCustomerEnteredPrice.ToString();
                    txtCustomerEnteredPrice.MaximumValue = maximumCustomerEnteredPrice.ToString();
                    txtCustomerEnteredPrice.RangeErrorMessage = string.Format(GetLocaleResourceString("Products.CustomerEnteredPrice.Range"), minimumCustomerEnteredPrice, maximumCustomerEnteredPrice);
                }
                else
                {
                    txtCustomerEnteredPrice.Visible = false;
                }

                //buttons
                if (!productVariant.DisableBuyButton)
                {
                    txtQuantity.ValidationGroup = string.Format("ProductVariant{0}", productVariant.ProductVariantId);
                    btnAddToCart.ValidationGroup = string.Format("ProductVariant{0}", productVariant.ProductVariantId);
                    btnAddToWishlist.ValidationGroup = string.Format("ProductVariant{0}", productVariant.ProductVariantId);

                    txtQuantity.Value = productVariant.OrderMinimumQuantity;
                }
                else
                {
                    txtQuantity.Visible = false;
                    btnAddToCart.Visible = false;
                    btnAddToWishlist.Visible = false;
                }

                //sample downloads
                if (pnlDownloadSample != null && hlDownloadSample != null)
                {
                    if (productVariant.IsDownload && productVariant.HasSampleDownload)
                    {
                        pnlDownloadSample.Visible = true;
                        hlDownloadSample.NavigateUrl = DownloadManager.GetSampleDownloadUrl(productVariant);
                    }
                    else
                    {
                        pnlDownloadSample.Visible = false;
                    }
                }

                //final check - hide prices for non-registered customers
                if (!SettingManager.GetSettingValueBoolean("Common.HidePricesForNonRegistered") ||
                        (NopContext.Current.User != null &&
                        !NopContext.Current.User.IsGuest))
                {
                    //
                }
                else
                {
                    txtCustomerEnteredPrice.Visible = false;
                    txtQuantity.Visible = false;
                    btnAddToCart.Visible = false;
                    btnAddToWishlist.Visible = false;
                }
            }
        }

        protected void accVariants_ItemCommand(object sender, CommandEventArgs e)
        {
            if (e.CommandName == "AddToCart" || e.CommandName == "AddToWishlist")
            {
                    var txtQuantity = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("txtQuantity") as NumericTextBox;
                    var txtCustomerEnteredPrice = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("txtCustomerEnteredPrice") as DecimalTextBox;
                    var productVariantId = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("ProductVariantId") as Label;
                    var ctrlProductAttributes = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("ctrlProductAttributes") as ProductAttributesControl;
                    var ctrlGiftCardAttributes = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("ctrlGiftCardAttributes") as GiftCardAttributesControl;
                    var lblError = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("lblError") as Label;


                    var pv = ProductManager.GetProductVariantById(Convert.ToInt32(productVariantId.Text));
                    if (pv == null)
                        return;

                    string attributes = ctrlProductAttributes.SelectedAttributes;
                    decimal customerEnteredPrice = txtCustomerEnteredPrice.Value;
                    decimal customerEnteredPriceConverted = CurrencyManager.ConvertCurrency(customerEnteredPrice, NopContext.Current.WorkingCurrency, CurrencyManager.PrimaryStoreCurrency);
                    int quantity = txtQuantity.Value;

                    //gift cards
                    if (pv.IsGiftCard)
                    {
                        string recipientName = ctrlGiftCardAttributes.RecipientName;
                        string recipientEmail = ctrlGiftCardAttributes.RecipientEmail;
                        string senderName = ctrlGiftCardAttributes.SenderName;
                        string senderEmail = ctrlGiftCardAttributes.SenderEmail;
                    

protected void accVariants_ItemCommand(object sender, CommandEventArgs e)
        {
            if (e.CommandName == "AddToCart" || e.CommandName == "AddToWishlist")
            {
                    var txtQuantity = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("txtQuantity") as NumericTextBox;
                    var txtCustomerEnteredPrice = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("txtCustomerEnteredPrice") as DecimalTextBox;
                    var productVariantId = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("ProductVariantId") as Label;
                    var ctrlProductAttributes = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("ctrlProductAttributes") as ProductAttributesControl;
                    var ctrlGiftCardAttributes = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("ctrlGiftCardAttributes") as GiftCardAttributesControl;
                    var lblError = ((AjaxControlToolkit.AccordionCommandEventArgs)e).Container.FindControl("lblError") as Label;

                    //var test =  accVariants.Panes[accVariants.SelectedIndex].FindControl("txtCustomerEnteredPrice") as DecimalTextBox;


                    var pv = ProductManager.GetProductVariantById(Convert.ToInt32(productVariantId.Text));
                    if (pv == null)
                        return;

                    string attributes = ctrlProductAttributes.SelectedAttributes;
                    decimal customerEnteredPrice = txtCustomerEnteredPrice.Value;
                    decimal customerEnteredPriceConverted = CurrencyManager.ConvertCurrency(customerEnteredPrice, NopContext.Current.WorkingCurrency, CurrencyManager.PrimaryStoreCurrency);
                    int quantity = txtQuantity.Value;

                    //gift cards
                    if (pv.IsGiftCard)
                    {
                        string recipientName = ctrlGiftCardAttributes.RecipientName;
                        string recipientEmail = ctrlGiftCardAttributes.RecipientEmail;
                        string senderName = ctrlGiftCardAttributes.SenderName;
                        string senderEmail = ctrlGiftCardAttributes.SenderEmail;
                        string giftCardMessage = ctrlGiftCardAttributes.GiftCardMessage;

                        attributes = ProductAttributeHelper.AddGiftCardAttribute(attributes,
                            recipientName, recipientEmail, senderName, senderEmail, giftCardMessage);
                    }

                    try
                    {
                        if (e.CommandName == "AddToCart")
                        {
                            string sep = "<br />";
                            List<string> addToCartWarnings = ShoppingCartManager.AddToCart(
                                ShoppingCartTypeEnum.ShoppingCart,
                                pv.ProductVariantId,
                                attributes,
                                customerEnteredPriceConverted,
                                quantity);
                            if (addToCartWarnings.Count == 0)
                            {
                                if (SettingManager.GetSettingValueBoolean("Display.Products.DisplayCartAfterAddingProduct"))
                                {
                                    //redirect to shopping cart page
                                    Response.Redirect(SEOHelper.GetShoppingCartUrl());
                                }
                                else
                                {
                                    //display notification message
                                    this.DisplayAlertMessage(GetLocaleResourceString("Products.ProductHasBeenAddedToTheCart"));
                                }
                            }
                            else
                            {
                                StringBuilder addToCartWarningsSb = new StringBuilder();
                                for (int i = 0; i < addToCartWarnings.Count; i++)
                                {
                                    addToCartWarningsSb.Append(Server.HtmlEncode(addToCartWarnings[i]));
                                    if (i != addToCartWarnings.Count - 1)
                                    {
                                        addToCartWarningsSb.Append(sep);
                                    }
                                }
                                string errorFull = addToCartWarningsSb.ToString();
                                lblError.Text = errorFull;
                                if (SettingManager.GetSettingValueBoolean("Common.ShowAlertForProductAttributes"))
                                {
                                    this.DisplayAlertMessage(errorFull.Replace(sep, "\\n"));
                                }
                            }
                        }

                        if (e.CommandName == "AddToWishlist")
                        {
                            string sep = "<br />";
                            var addToCartWarnings = ShoppingCartManager.AddToCart(
                                ShoppingCartTypeEnum.Wishlist,
                                pv.ProductVariantId,
                                attributes,
                                customerEnteredPriceConverted,
                                quantity);
                            if (addToCartWarnings.Count == 0)
                            {
                                Response.Redirect(SEOHelper.GetWishlistUrl());
                            }
                            else
                            {
                                var addToCartWarningsSb = new StringBuilder();
                                for (int i = 0; i < addToCartWarnings.Count; i++)
                                {
                                    addToCartWarningsSb.Append(Server.HtmlEncode(addToCartWarnings[i]));
                                    if (i != addToCartWarnings.Count - 1)
                                    {
                                        addToCartWarningsSb.Append(sep);
                                    }
                                }
                                string errorFull = addToCartWarningsSb.ToString();
                                lblError.Text = errorFull;
                                if (SettingManager.GetSettingValueBoolean("Common.ShowAlertForProductAttributes"))
                                {
                                    this.DisplayAlertMessage(errorFull.Replace(sep, "\\n"));
                                }
                            }
                        }
                    }
                    catch (Exception exc)
                    {
                        LogManager.InsertLog(LogTypeEnum.CustomerError, exc.Message, exc);
                        lblError.Text = Server.HtmlEncode(exc.Message);
                    }
                }
        }

Hi can you post any link to see this stuff in live site? thanks.

Hey,

Sorry project isn't live yet. As soon it's live I will notify you guys.

Thanks I will wait for it:)

DonPasquale wrote:
That would be great. Thanks in advance