Display product options in Wishlist module - DNN Hotcakes

Question

The current default view for the wish list module shows the product but not the options that were selected.

How can this be changed so that the option label and selected value are displayed as well?

Answer 1

I'm going to make an assumption that you're using Hotcakes 1.xx and not version 2.xx for this, but the code should be the same for both. I just only tested it in 01.10.04.

I've built an example of how to do this based upon the Cart view you'll find in the viewset already.

The original Wish List view looks like this:

@model IEnumerable<Hotcakes.Modules.Core.Areas.Account.Models.SavedItemViewModel>

<h2>@Localization.GetString("SavedItems")</h2>
@Html.Raw((string)TempData["messages"])
<div class="hc-record-list hc-wishlist clearfix">
    @foreach (var item in Model)
    {
        <div class="hc-record">
            <div class="hc-recimage">
                <a href="@item.FullProduct.ProductLink">
                    <img src="@item.FullProduct.ImageUrls.SmallUrl" border="0" alt="@item.FullProduct.ImageUrls.SmallAltText" />
                </a>
            </div>
            <div class="hc-recname">
                <h2>@item.FullProduct.Item.ProductName</h2>
                <div class="hc-recdescription">
                    @Html.Raw(item.FullProduct.Item.LongDescription)
                </div>
            </div>
            <div class="hc-reccontrols">
                <table class="dnnFormItem">
                    <tr>
                        <td class="hc-recprice">
                            @Html.Raw(item.FullProduct.UserPrice.DisplayPrice(true))
                        </td>
                        <td>
                            @if(!item.FullProduct.Item.IsGiftCard && !item.FullProduct.Item.IsUserSuppliedPrice)
                            {
                                using (Html.BeginHccRouteForm(HccRoute.WishList, new { action = "addtocart" }, FormMethod.Post))
                                {
                                    <input type="hidden" name="itemid" value="@item.SavedItem.Id" />
                                    <input class="dnnPrimaryAction" type="submit" value="@Localization.GetString("AddToCart")" />
                                }
                            }
                        </td>
                        <td>
                            @using (Html.BeginHccRouteForm(HccRouteNames.WishList, new { action = "delete" }, FormMethod.Post))
                            {
                                <input type="hidden" name="itemid" value="@item.SavedItem.Id" />
                                <input type="submit"  class="hc-delete" value="@Localization.GetString("RemoveSavedItem")" />
                            }
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    }
</div>

Below the description of the product, I added the following snippet:

@using Hotcakes.Commerce.Catalog
@if (item.SavedItem.SelectionData != null && item.SavedItem.SelectionData.OptionSelectionList != null && item.SavedItem.SelectionData.OptionSelectionList.Count > 0)
{
    <div class="clearfix">
        @Html.Raw(item.FullProduct.Item.Options.CartDescription(item.SavedItem.SelectionData.OptionSelectionList))
    </div>
}

That makes the entire view look like this:

@using Hotcakes.Commerce.Catalog
@model IEnumerable<Hotcakes.Modules.Core.Areas.Account.Models.SavedItemViewModel>

<h2>@Localization.GetString("SavedItems")</h2>
@Html.Raw((string)TempData["messages"])
<div class="hc-record-list hc-wishlist clearfix">
    @foreach (var item in Model)
    {
        <div class="hc-record">
            <div class="hc-recimage">
                <a href="@item.FullProduct.ProductLink">
                    <img src="@item.FullProduct.ImageUrls.SmallUrl" border="0" alt="@item.FullProduct.ImageUrls.SmallAltText" />
                </a>
            </div>
            <div class="hc-recname">
                <h2>@item.FullProduct.Item.ProductName</h2>
                <div class="hc-recdescription">
                    @Html.Raw(item.FullProduct.Item.LongDescription)
                </div>
                @if (item.SavedItem.SelectionData != null && item.SavedItem.SelectionData.OptionSelectionList != null && item.SavedItem.SelectionData.OptionSelectionList.Count > 0)
                {
                    <div class="clearfix">
                        @Html.Raw(item.FullProduct.Item.Options.CartDescription(item.SavedItem.SelectionData.OptionSelectionList))
                    </div>
                }
            </div>
            <div class="hc-reccontrols">
                <table class="dnnFormItem">
                    <tr>
                        <td class="hc-recprice">
                            @Html.Raw(item.FullProduct.UserPrice.DisplayPrice(true))
                        </td>
                        <td>
                            @if(!item.FullProduct.Item.IsGiftCard && !item.FullProduct.Item.IsUserSuppliedPrice)
                            {
                                using (Html.BeginHccRouteForm(HccRoute.WishList, new { action = "addtocart" }, FormMethod.Post))
                                {
                                    <input type="hidden" name="itemid" value="@item.SavedItem.Id" />
                                    <input class="dnnPrimaryAction" type="submit" value="@Localization.GetString("AddToCart")" />
                                }
                            }
                        </td>
                        <td>
                            @using (Html.BeginHccRouteForm(HccRouteNames.WishList, new { action = "delete" }, FormMethod.Post))
                            {
                                <input type="hidden" name="itemid" value="@item.SavedItem.Id" />
                                <input type="submit"  class="hc-delete" value="@Localization.GetString("RemoveSavedItem")" />
                            }
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    }
</div>