Developer forum

Forum » Templates » what is the best way to implement variant selector interface

what is the best way to implement variant selector interface

Hans Ravnsfjall
Hans Ravnsfjall
Reply

Hi

We don´t do a lot of webshops, to this challenge is not an everyday challenge for us. We have built a webshop, that sells clothing. It´s PIM based, and the variants are combined via the PIM interface. The two dimensions of variants, are "colo" and "size"

On a productpage, what is the best way to switch between the variants? Preferrably, we don´t want to reload the page everytime we select a variant, but what we want to do - is change the images and productid and url (via pushState or similar), and of course - make shure that the add to cart command is matching the selected variants at all times. And, we also want to make shure that its only possible to order products that exist. So the relationship between variants, must be updated on all times - so that if I select color  "blue", and blue os only available in XS - than all other size options must vanish.

In short - on a product page - where can i get all the data on all avaible variants of the currrent product, so that i can manipulate the correct "reaction" to the visitors interactions?

/Hans


Replies

 
Nicolai Pedersen
Nicolai Pedersen
Reply

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>
 
Hans Ravnsfjall
Hans Ravnsfjall
Reply

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

 
Nicolai Pedersen
Nicolai Pedersen
Reply

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

 
Hans Ravnsfjall
Hans Ravnsfjall
Reply

Thank you veru much Nicolai 👍🏻

 

/Hans

 
Hans Ravnsfjall
Hans Ravnsfjall
Reply

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

 
Nicolai Pedersen
Nicolai Pedersen
Reply

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

 

You must be logged in to post in the forum