I can't figure out why my OptionChoices stays null, maybe you can tell me where it is set.
I changed the product options from select boxes, to a product matrix with multiple number inputs in the AddToBasketForm.cshtml
i changed from:
// Generate the drop down boxes to select choices for each option
foreach (var option in Model.ProductOptions)
{
var choices = option.Choices.OrderBy(x => x.SortOrder).Select(choice => new System.Web.Mvc.SelectListItem { Value = choice.Key.ToString(), Text = choice.Name }).ToList();
choices.First().Selected = true;
@Html.LabelFor(x => x.OptionChoices[index], option.Name, new { @class = "control-label" })
<div class="form-group" data-muioption="@option.Key">
@Html.DropDownListFor(x => x.OptionChoices[index], choices, new { name = option.Name.ToLower().Replace(" ", "-"), @class = "form-control", @onchange = "changeImage(this.value)" })
@*@Html.ValidationMessageFor(x => x.OptionChoices, "Please select one")*@
</div>
index = index + 1;
}
to:
ProductOptionDisplay option1 = Model.ProductOptions.ElementAt(0);
ProductOptionDisplay option2 = Model.ProductOptions.ElementAt(1);
var height = option1.Choices.Count();
var width = option2.Choices.Count();
ProductAttributeDisplay[,] result = new ProductAttributeDisplay[height, width + 1];
for (int i = 0; i < height; i++)
{
for (int j = 0; j < width; j++)
{
result[i, 0] = option1.Choices.ElementAt(i);
result[i, j + 1] = option2.Choices.ElementAt(j);
}
}
int rowLength = result.GetLength(0);
int colLength = result.GetLength(1);
var optionKey = option1.Key + "|" + option2.Key;
<table class="table table-striped">
<thead>
<tr>
<th>
</th>
@for (int col = 0; col < colLength; col++)
{
//col == 0 is de linker kolom met maatnaam
if (col > 0)
{
ProductAttributeDisplay column = result[0, col];
<th class="text-center">@column.Name</th>
}
}
</tr>
</thead>
@for (int row = 0; row < rowLength; row++)
{
string kleurKey = string.Empty;
string columnKey = string.Empty;
<tr>
@for (int col = 0; col < colLength; col++)
{
ProductAttributeDisplay column = result[row, col];
columnKey = column.Key.ToString();
if (col == 0)
{
kleurKey = columnKey;
List<string> optionChoices = new List<string>();
optionChoices.Add(kleurKey);
optionChoices.Add(columnKey);
var variant = product.ProductVariants.FirstOrDefault(
x =>
x.Attributes.Count() == optionChoices.Count() // should always be true
&& optionChoices.All(k => x.Attributes.FirstOrDefault(att => att.Key == new Guid(k)) != null));
var imageId = variant.GetPropertyValue("image");
var image = Umbraco.TypedMedia(imageId);
string cropUrl = image.GetCropUrl(height: 100);
<td><img src="@cropUrl" alt="@column.Name" /> @column.Name</td>
}
else
{
List<string> optionChoices = new List<string>();
optionChoices.Add(kleurKey);
optionChoices.Add(columnKey);
var variant = product.ProductVariants.FirstOrDefault(
x =>
x.Attributes.Count() == optionChoices.Count() // should always be true
&& optionChoices.All(k => x.Attributes.FirstOrDefault(att => att.Key == new Guid(k)) != null));
// string[] optionChoices =
string key = kleurKey + "|" + columnKey;
<td data-muioption="@optionKey">
@if (variant.Available)
{
<input data-matrixkey="@key" placeholder="aantal" type="number" />
<p>Voorraad: @variant.TotalInventoryCount</p>
}
</td>
}
// use the message
}
</tr>
}
</table>
I also edited the merchello.ui.js:
getOptionsForProduct: function (frm, key) {
var container = $('[data-muikey="' + key + '"]');
if (container.length > 0) {
var combinedKey = $(frm).find('[data-muioption]');
// var combiKey = combinedKey.split('|');
var options = [];
$.each(combinedKey, function (idx, p) {
options.push($(p).find('input'));
});
return options;
} else {
return [];
}
},
and
findProductDataTableRow: function (frm, key) {
// get all of the options associated with this product so we can
// find the matching data row in the product data table
var options = MUI.AddItem.getOptionsForProduct(frm, key);
var row = undefined;
if (options.length > 0) {
// get the current selections
var keys = [];
var quantity = 0;
$.each(options, function (idx, o) {
var matrixKey = $(o).attr('data-matrixkey');
var splitMatrixKey = matrixKey.split('|');
var val = $(o).val();
if (val !== '') {
quantity = val;
} else {
quantity = 0;
}
if (quantity > 0) {
keys.push(splitMatrixKey[0]);
keys.push(splitMatrixKey[1]);
}
});
var pdt = MUI.AddItem.getProductDataTable(key);
if (pdt !== undefined) {
if (keys.length > 0) {
row = pdt.getRowByMatchKeys(keys);
}
}
}
return row;
},
This all produces this
But when i add the product to the basket, the optionchoices are null public virtual ActionResult AddBasketItem(TAddItem model). I know I am missing something, but i just can't find out where or what.
I hope you (or anybody else) can help me, because I am really stuck
Changed the way of product options, now OptionChoices in AddBasketItem is always null
Hi Rusty,
I can't figure out why my OptionChoices stays null, maybe you can tell me where it is set.
I changed the product options from select boxes, to a product matrix with multiple number inputs in the AddToBasketForm.cshtml
i changed from:
to:
I also edited the merchello.ui.js:
and
This all produces this
But when i add the product to the basket, the optionchoices are null public virtual ActionResult AddBasketItem(TAddItem model). I know I am missing something, but i just can't find out where or what.
I hope you (or anybody else) can help me, because I am really stuck
Thanks!
Puck
Hi Puck,
Did you manage to find the solution to this? I'm also having a similar problem to you.
Alex
Hi Alex,
No, I changed the way of adding the variants to the basket.
https://our.umbraco.com/packages/collaboration/merchello/merchello/87593-adding-multiple-products-to-a-basket-with-different-quantities-from-a-single-button-click
I used that solution. Hope it helps :)
Puck
is working on a reply...