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 Dynamicweb Employee
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 Dynamicweb Employee
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

 

You must be logged in to post in the forum