Add products to Wishlist from the Thumbnails view - Ecommerce - Ecommerce - Progress Community

Add products to Wishlist from the Thumbnails view

 Ecommerce

Add products to Wishlist from the Thumbnails view

  • Add products to Wishlist from the Thumbnails view
  • fb780487-4cb5-6f77-96ac-ff0000ae3c70_wishlist.png
    Hi team,

    I'd like to know how I can add an 'Add to wishlist button' beneath each product when I'm in the 'Thumbnail' mode.

    I have a button for 'Add to cart', based on a blogpost.

    Is this possible?

    Daniel
  • Hi Daniel,

    It is possible with some modifications. The default AddToWishlistWidget is expecting some things that won't be there in the thumbnails view.

    First you need to create a new class that inherits from AddToWishlistWidget. You can't override the default event handler for the AddToWishlistButton.Command event but you can override InitializeControls and point it to your modified event handler.
    protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
        AddToWishlistButton.Command += new CommandEventHandler(AddToWishlistButton_Command2);
    The default event handler tries to get the quantity and OptionsDetails from the page so we need to change that to quantity of 1 and a new OptionsDetails object.
    protected void AddToWishlistButton_Command2(object sender, CommandEventArgs e)
        int quantity = 1;
        OptionsDetails optionDetails = new OptionsDetails();
        string defaultCurrencyName = Config.Get<EcommerceConfig>().DefaultCurrency;
        Guid userId = SecurityManager.GetCurrentUserId();
        try
        
            if (userId != null && userId != Guid.Empty)
            
                IWishlistAdder wishlistAdder = new WishlistAdder();
                wishlistAdder.AddItemToWishlist(this.Product, optionDetails, quantity, defaultCurrencyName, userId);
                this.AddedToWishlistMessage.ShowPositiveMessage(Res.Get<OrdersResources>("AddedToWishlist"));
            
            else
            
                throw new ArgumentException(Res.Get<OrdersResources>("NotAddedToWishlistAnonymous"));
            
        
        catch (ArgumentException ex)
        
            this.AddedToWishlistMessage.ShowNegativeMessage(ex.Message);
        
        catch (Exception)
        
            this.AddedToWishlistMessage.ShowNegativeMessage(Res.Get<OrdersResources>("NotAddedToWishlist"));
        
    Everything else is the same.

    Now you can edit the Thumbnails template in the ProductList widget designer and add your new control. Here is the customized template:
    <%@ Control Language="C#" %>
    <%@ Import Namespace="Telerik.Sitefinity.Model" %>
    <%@ Register TagPrefix="sfCatalog" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields" Assembly="Telerik.Sitefinity.Ecommerce"%>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI" Assembly="Telerik.Sitefinity.Ecommerce" %>
    <%@ Register TagPrefix="sfwa" Namespace="SitefinityWebApp.UserControls.AddToWishlist" Assembly="SitefinityWebApp" %>
       
    <div id="widgetStatus" runat="server" visible="false" class="sfErrorSummary sfTopMsg">
        <asp:Label ID="widgetStatusMessage" runat="server" />
    </div>
     
    <asp:Placeholder id="widgetBody" runat="server">
        <div class="sfClearfix">
        <div class="sfProductsSortByWrp" id="productSortControlWrp" runat="server">
            <sf:SortProductsControl ID="sortProductsControl" runat="server" />
        </div>
         
        <sf:TotalProductsControl runat="server" ID="totalProductsControlTop" CssClass="sfCatalogTotalCount" />
     
        <sf:Pager id="topPager" runat="server" DisplayCount="3" ShowPrevAndNext="true" CssClass="sfCatalogPager" />
         
         
        <sf:ItemsPerPageSelector ID="itemsPerPageSelectorTop" runat="server" GroupingKey="Products" CssClass="sfitemsPerPageWrp" />
     
        <telerik:RadListView ID="productsListView"
                             runat="server"
                             ItemPlaceholderID="ProductContainer"
                             EnableEmbeddedSkins="false"
                             EnableEmbeddedBaseStylesheet="false">
            <LayoutTemplate>
                <ul class="sfproductsList">
                    <asp:PlaceHolder ID="ProductContainer" runat="server" />
                </ul>
            </LayoutTemplate>
            <ItemTemplate>
                <li class="sfproductListItem">
                    <div class="sfproductTmbWrp">
                        <sf:DetailsViewHyperLink ID="thumbnailLink" runat="server" ImageUrl='<%# Eval("ThumbnailUrl") %>' Text='<%# Eval("ThumbnailAlternativeText") %>' ToolTip='<%# Eval("Title") %>' />
                    </div>
                    <h2 class="sfproductTitle">
                        <sf:DetailsViewHyperLink Text='<%# (Eval("Title").ToString()).TruncateString(56, SitefinityExtensions.TruncateOptions.IncludeEllipsis) %>' runat="server" CssClass="sfproductTitleLnk" />
                    </h2>
                    <div class="sfproductPrice">
                        <sfCatalog:DisplayPriceField id="displayPriceField" ObjectType="Product" ObjectId='<%# Eval("Id") %>' runat="server" />
                    </div>
                    <%--NOTE: Uncomment the next line to display custom product fields--%>
                    <%--<sf:ProductDynamicFields id="productDynamicFields" runat="server"></sf:ProductDynamicFields>--%>
                    <div class="sfAddToWishlistWidget">
                        <sfwa:AddToWishlistWidgetCustom ID="addToWishlistWidget" ProductId='<%# Eval("Id") %>' runat="server" />
                    </div> 
                </li>
            </ItemTemplate>
        </telerik:RadListView>
        <sf:TotalProductsControl runat="server" ID="totalProductsControlBottom" CssClass="sfCatalogTotalCount" />
        <sf:Pager id="pager" runat="server" DisplayCount="3" ShowPrevAndNext="true" CssClass="sfCatalogPager" />
        <sf:ItemsPerPageSelector ID="itemsPerPageSelectorBottom" runat="server" GroupingKey="Products" CssClass="sfitemsPerPageWrp" />
     
        </div>
    </asp:Placeholder>

    Please note I don't have an AddToCart widget on this template sample.

    That's all there is to it. Let me know if you have any questions.

    All the best,
    Randy Hodge
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hi Randy,

    Thanks for your solution. I had thought of creating a class and inherit from the AddToWishlistWidget, but I thought that maybe there would be another way, like how it is done with the AddToCart widget.

    I'm already have so much customizations... ;)
    Anyway, I'm going to try this.

    Kind regards,
    Daniel
  • Hello Daniel,

    Sounds good. Let me know if you have more questions.

    Greetings,
    Randy Hodge
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • i tried this. but i got the error 'Error parsing the template'. plz send me example
  • Hello Cormac,

     Clear our app_Data/sitefinity/logs. Reproduce the error parsing the template and paste the new entry here. We can see what exactly the error is and help you get past it.

    Regards,
    Patrick Dunn
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items