Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Puck Holshuijsen 90 posts 352 karma points
    Jun 21, 2017 @ 14:09
    Puck Holshuijsen
    0

    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:

      // 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>
                            &nbsp;
                        </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 enter image description here

    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.enter image description here

    I hope you (or anybody else) can help me, because I am really stuck

    Thanks!

    Puck

  • Alex Meyers 25 posts 106 karma points
    Nov 19, 2018 @ 12:07
    Alex Meyers
    0

    Hi Puck,

    Did you manage to find the solution to this? I'm also having a similar problem to you.

    Alex

  • Puck Holshuijsen 90 posts 352 karma points
    Nov 20, 2018 @ 06:58
    Puck Holshuijsen
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft