Hi, I have resolved this issue myself.

In the productoverview page of the demo site I just made sure that the results only showed products. That was the first step.
After that, I altered this page to ensure that all clicks went to the productdetail page (so no quick link to the cart).
In the productdetail page I looked at all the variants of the selected product.
If a variant had a property that was prefixed with a certain string that stated that the property was to be used as a filterproperty, I took the values of this property and placed them inside a combobox.
This way different comboboxes could be filled with different values that a user could use to select a specific/single variant with.
Only if all comboboxes had a selectedvalue, a button was shown that allowed a user to add the variant to the cart.

The challenge was to write some nice javascript/jquery that showed the comboboxes and ensured that the comboboxes reacted to one another. Selecting one value changed the values shown in other comboboxes, or even made a combobox dissapear.

Some work, but it does the trick quite nicely :-)

Hi

Could you please post the sample code to get the variants fromt he product. I am new to episerver commerce.

Regards

Sandeep

Hi Sandeep,

Here is the code I used for generating json that I manipulated on the client.
The code retrieves the info from the variants.

using

System;

using

System.Collections.Generic;

using

System.Linq;

using

System.Web;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Text;

using

Mediachase.Commerce.Catalog.Objects;

using

Mediachase.Commerce.Website.Helpers;

using

Mediachase.Commerce.Orders;

using

Mediachase.Commerce.Catalog;

using

Mediachase.Commerce.Catalog.Managers;

using

Mediachase.Commerce.Customization;

using

Mediachase.Commerce.Engine.Navigation;

using

System.Web.Services;

using

Mediachase.Commerce.Assets;

using

Mediachase.BusinessFoundation.Data;

using

System.Runtime.Serialization.Json;

using

System.IO;

 

// example of generated script in method below - the position of each facevalue determines to what variant it belongs

// var Variants = eval('\

// [\

// { ""Code"": ""2123442"", ""Active"": 1 },\

// { ""Code"": ""4634534"", ""Active"": 1 },\

// { ""Code"": ""3452875"", ""Active"": 1 }\

// ]');

// var FacetGroups = eval('\

// [\

// {""Name"": ""Brand"", ""SelectedValue"": """", ""FacetValues"": [{""Value"": ""Canon""}, {""Value"": ""Canon""}, {""Value"": ""Canon""}]},\

// {""Name"": ""Size"", ""SelectedValue"": """", ""FacetValues"": [{""Value"": ""21""}, {""Value"": ""nvt""}, {""Value"": ""nvt""}]},\

// {""Name"": ""Color"", ""SelectedValue"": """", ""FacetValues"": [{""Value"": ""Gray""}, {""Value"": ""Gray""}, {""Value"": ""nvt""}]},\

// {""Name"": ""Price"", ""SelectedValue"": """", ""FacetValues"": [{""Value"": ""200.00""}, {""Value"": ""195.00""}, {""Value"": ""nvt""}]},\

// {""Name"": ""Tires"", ""SelectedValue"": """", ""FacetValues"": [{""Value"": ""nvt""}, {""Value"": ""nvt""}, {""Value"": ""3""}]},\

// {""Name"": ""Height"", ""SelectedValue"": """", ""FacetValues"": [{""Value"": ""nvt""}, {""Value"": ""nvt""}, {""Value"": ""21.10""}]}\

// ]');

publicpartialclassProductConfigurationControl : System.Web.UI.UserControl

{

public Entry CurrentEntry { get; set; }

protectedvoid Page_Load(object sender, EventArgs e)

{

string variantFacetJson = CreateVariantFacetJson();

if (!Page.ClientScript.IsClientScriptBlockRegistered("variantFacetJson"))

{

Page.ClientScript.RegisterClientScriptBlock(

this.GetType(), "variantFacetJson", variantFacetJson, true);

}

}

privatestring CreateVariantFacetJson()

{

// ---------- retrieve facet data from variants of current entry ---------

List<FacetGroup> facetgroupList = newList<FacetGroup>();

List<string> variantList = newList<string>();

int variantCounter = 0;

for (int i = 0; i < CurrentEntry.Entries.TotalResults; i++)

{

Entry variant = CurrentEntry.Entries[i];

variantList.Add(variant.ID.ToString());

// retrieve EMC_ facets (attributes) for current variant

for (int j = 0; j < variant.ItemAttributes.Attribute.Count(); j++)

{

if (!variant.IsActive || variant.StartDate > DateTime.Now || DateTime.Now > variant.EndDate)

{

continue;

}

ItemAttribute attribute = variant.ItemAttributes.Attribute[j];

if (attribute.Name.StartsWith("EMC_"))

{

// find or create facetgroup for current attribute

FacetGroup facetGroup;

if (facetgroupList.Exists(g => g.Name == attribute.FriendlyName))

{

facetGroup = facetgroupList.Find(g => g.Name == attribute.FriendlyName);

}

else

{

facetGroup =

newFacetGroup();

facetGroup.Name = attribute.FriendlyName;

facetgroupList.Add(facetGroup);

}

// if variants do not all share the same properties, fill in "nvt" for properties that are not part of a variant:

// the index - variantcounter - of the facetvalueslist corresponds to a variant in the variantslist at that same index,

// so the facetvalue is connected to its variant by index. Therefore currentindex must be kept in sync with current variantnumber

// and to keep up it is sometimes neccessary to fill previous, missed turns with "nvt".

if (facetGroup.FacetValues.Count() < variantCounter)

{

for (int k = facetGroup.FacetValues.Count(); k < variantCounter; k++)

{

facetGroup.FacetValues.Add(

"nvt");

}

}

// if value is empty, fill in "nvt"

string value = attribute.Value.FirstOrDefault();

if (String.IsNullOrEmpty(value))

{

facetGroup.FacetValues.Add(

"nvt");

}

else

{

facetGroup.FacetValues.Add(attribute.Value.FirstOrDefault());

}

}

}

variantCounter++;

}

// fill up possible empty spots at the end of facetvalues with "nvt"

foreach (FacetGroup facetGroup in facetgroupList)

{

if (facetGroup.FacetValues.Count() < variantList.Count())

{

for (int k = facetGroup.FacetValues.Count(); k < variantList.Count(); k++)

{

facetGroup.FacetValues.Add(

"nvt");

}

}

}

// ----------------------- create script from facet data ------------------------

// ---build variantstring for script---

StringBuilder vb = newStringBuilder();

int v = 0;

for (; v < variantList.Count() - 1; v++)

{

vb.Append(

String.Format(@"{{ ""Code"": ""{0}"", ""Active"": 1 }},\", variantList[v]));

}

if (variantList.Count() > 0)

{

vb.Append(

String.Format(@"{{ ""Code"": ""{0}"", ""Active"": 1 }}", variantList[v])); // last one without trailing comma

}

// ---build facetstring for script---

StringBuilder fb = newStringBuilder();

int f = 0;

for (; f < facetgroupList.Count() - 1; f++)

{

string facetValueScriptString = CreateFacetValueScriptString(facetgroupList[f]);

fb.Append(

String.Format(@"{{""Name"": ""{0}"", ""SelectedValue"": """", ""FacetValues"": [{1}]}},\", facetgroupList[f].Name, facetValueScriptString)); // last one without trailing comma

}

if (facetgroupList.Count() > 0)

{

string facetValueScriptString = CreateFacetValueScriptString(facetgroupList[f]);

fb.Append(

String.Format(@"{{""Name"": ""{0}"", ""SelectedValue"": """", ""FacetValues"": [{1}]}}", facetgroupList[f].Name, facetValueScriptString)); // last one without trailing comma

}

// ---add strings to script---

string script = String.Format(@"

// init variants

var Variants = eval('\

[\

{0}\

]');

// init FacetGroups

var FacetGroups = eval('\

[\

{1}\

]');"

, vb.ToString(), fb.ToString());

return script;

}

privatestring CreateFacetValueScriptString(FacetGroup facetGroup)

{

StringBuilder fvb = newStringBuilder();

int fv = 0;

for (; fv < facetGroup.FacetValues.Count() - 1; fv++)

{

fvb.Append(

string.Format(@"{{""Value"": ""{0}""}}, ", facetGroup.FacetValues[fv]));

}

if (facetGroup.FacetValues.Count() > 0)

{

fvb.Append(

string.Format(@"{{""Value"": ""{0}""}}", facetGroup.FacetValues[fv]));

}

return fvb.ToString();

} 

Thanks for the above solution.

Much appreciated.

Kind Regards

Sandeep