Developer forum

You get that information from VariantInfoViewmodel when creating a product detail template using the ProductViewmodel

https://doc.dynamicweb.com/api/html/a0d09fc7-bd4a-d3e8-ae71-34ac952c8475.htm

You get some information from that structure - i.e the price and a photo, but not all.

Here is a simple sample using the viewmodels:

@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Ecommerce.ProductCatalog.ProductViewModel>
@using Dynamicweb

@{
    string groupIdQueryParameter = string.IsNullOrEmpty(Dynamicweb.Context.Current.Request["GroupID"])
        ? string.Empty
        : "&amp;GroupID=" + Dynamicweb.Context.Current.Request["GroupID"];
    string productLink = "/Default.aspx?ID=" + Pageview.Page.ID + groupIdQueryParameter + "&amp;ProductID=" + Model.Id;
}

<div class="row" id="asyncFetchPlaceholder">
    <div class="col">
        <span class="d-inline-block h-100 align-middle"></span><img src="@Model.DefaultImage.Value" alt="@Model.Name @Model.Number" class="mw-100 align-middle">
        @{
            foreach (var img in Model.ImagePatternImages)
            {
                <div>@img.Value</div>
            }

            foreach (var assetcategory in Model.AssetCategories)
            {
                foreach (var asset in assetcategory.Assets)
                {
                    <div>@asset.Value</div>
                }

            }
        }
    </div>
    <div class="col">
        <p></p>
        <h2><a href="@productLink">@Model.Name</a></h2>
        <small>@Model.Number (@Model.Id)</small>
        <div>@Model.VariantId</div>
        <p class="lead">
            @Model.ShortDescription
        </p>
        <div class="price text-primary">Wiht VAT: <strong id="@Model.Id">@Model.Price.ShowPricesWithVat (Model.Price.ShowPricesWithVat)</strong> (@Dynamicweb.Ecommerce.Common.Context.DisplayPricesWithVat)</div>
        <div class="price text-primary"><strong id="@Model.Id">@Model.Price.PriceFormatted (Model.Price.PriceFormatted)</strong></div>
        <div class="price text-muted font-size-xs">@Model.Price.PriceWithoutVatFormatted (Model.Price.PriceWithoutVatFormatted)</div>
        <div class="price text-muted font-size-xs">@Model.Price.PriceWithVatFormatted (Model.Price.PriceWithVatFormatted)</div>
        <p></p>
        In stock: @Model.StockLevel

        <p></p>
        @if (Model.PriceInformative.Price > 0)
        {
            <div class="price text-primary"><strong id="@Model.Id">Usual price: @Model.PriceInformative.PriceFormatted</strong></div>
        }

        @if (Model.PriceBeforeDiscount.Price != Model.Price.Price)
        {
            <div class="price text-secondary font-size-xs"><del>@Model.PriceBeforeDiscount.PriceFormatted</del></div>
        }

        @if (Model.VariantInfo.VariantInfo != null)
        {
            <p></p>
            <h5>Variants</h5>
            <ul>
                <li>
                    @Model.VariantInfo.VariantInfoGroupName
                    <ul>
                        @{
                            foreach (var variant in Model.VariantInfo.VariantInfo)
                            {
                                <li>
                                    @variant.OptionName <span>(@variant.VariantID / @variant.OptionColor / STOCK: @variant.Stock / @variant.ProductID)<br /><small>@variant.ProductName</small></span>

                                    <ul>
                                        <li>
                                            @variant.VariantInfoGroupName
                                            <ul>
                                                @foreach (var size in variant.VariantInfo)
                                                {
                                                    <li>@size.OptionName <small>(@size.VariantID / STOCK: @size.Stock / @size.ProductName / @size.ProductNumber)</small></li>
                                                }
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            }
                        }
                    </ul>

                </li>
            </ul>
        }

        <hr />

        <div>@Model.LongDescription</div>

    </div>
</div>

Ok, thank you Nicolai 👍🏻 

A really dumb question, but I don´t have to use ViewModel templates in order to use the "Product catalog for ViewModel" ?

As I am still sitting in a Mac Environ, that would be problematic for me to do - but I hear you have a solution for working with intellisence on Mac environment coming up? Looking forward to the guide on how to set this up.

/Hans

Attached find a sample template with a variant selector for the classic product catalog app.

Thank you veru much Nicolai 👍🏻

/Hans

Is there a simpler way of achieving a solution, where you can only select available variants. eg. would it be possible to use the index to lookup combinations that match, and then update the select options asyncronous?

Or does anyone have a more simple take on this?

/Hans

You have variant groups, i.e. color and sizes.

On a product you can have i.e. red, blue in colors and small, medium and large in sizes.

Like this

• Red
  • Small
  • Large
• Blue
  • Medium

That will give you 2 variant groups (Color and Sizes), 5 variant options (Red, Blue, Small, Large, Medium) and 3 combinations (Red-small, Red-Large, Blue-Medium).

Now you have to render out 2 select boxes - one for each group

• Color
  • Red
  • Blue
• Size
  • Small
  • Medium
  • Large

By using the combinations (Which are available in the viewmodel or in the template tags), you can make the logic. If red is chosen the user can only select small and large, and if blue is selected only blue.

I understand this is requires a good large cup of coffee and some logic coding skills to do. This is implemented on Rapido (Catalog with tags), Swift (Catalog with viewmodels) and in the template you have been given (Catalog with tags).

The even simpler solution is to just print out the variant combinations (Loop in the tags template, or variantinfo leafs in the viewmodels).

That will give you a select like this:

• Choose variant
  • Red/Small
  • Red/Large
  • Blue/Medium

That is simple and can be done with no javascript...

BR Nicolai