I'm currently trying to show only available variants for a product in a list.
But I can't select on the term "Available". As it only shows Key, Name, OptionKey, SortOrder and SKU. Below is the standard code used within Bazaar.
foreach (var option in Model.Product.ProductOptions)
{
var choices = option.Choices.OrderBy(x => x.SortOrder).Select(choice => new SelectListItem { Value = choice.Key.ToString(), Text = choice.Name }).ToList();
}
I've done some googling but can't find anything that's relevant. I've seen some info but that was at a higher product level and not at variant level. Does anyone have anything better to use?
Your right that options cannot be used to determine variant availability as they can (in instances of multiple options) only part of a variant definition.
ProductVariants have an Attributes collection (which are the options).
var available = product.ProductVariants.Where(x => x.Available);
If you want all of the options associated with this variants, the use the attributes collection on the variant.
We've done a bit more JavaScript in the 2.2.0 release in the FastTrack starter (which we're working on releasing later today) that disables the submit button when selections are made that result in unavailable variants. This could be altered to remove the choices altogether based on the selected options ...
Consider:
Option - Color -> Red, Green
Option - Size -> Small, Medium
Where the variant Medium, Green is not available ...
In this situation
Green Small is available
Green Medium is not available
Red Small is available
Red Medium is available
So marking the option choice (attribute) Green would not be valid since the small is available.
Marking the option choice Medium as not available would likewise not be valid.
I was actually working on something similar yesterday which might help you and it limits the options displayed based on those with available inventory/stock.
var variantsInStock = Model.Product.ProductVariants.Where(v => v.Available && v.TotalInventoryCount > 0).ToArray();
foreach (var option in Model.Product.ProductOptions)
{
var choices = (from choice in option.Choices from variant in variantsInStock where variant.Attributes.Any(a => a.Key == choice.Key) select choice).ToList();
var choicesList = choices.Distinct().OrderBy(c => c.Name).Select(choice => new System.Web.Mvc.SelectListItem() { Value = choice.Key.ToString(), Text = choice.Name }).ToList();
if (choicesList.Any())
{
choicesList.First().Selected = true;
<div class="size-select-wrap">
@Html.LabelFor(x => x.OptionChoices[index], string.Concat("Please select your ", option.Name))
@Html.DropDownListFor(x => x.OptionChoices[index], choicesList, new { name = option.Name.ToLower().Replace(" ", "-"), id = option.Key, @class = "form-control ProductVariants select shoesize" })
@Html.ValidationMessageFor(x => x.OptionChoices)
</div>
index = index + 1;
}
}
}
}
Thanks Simon, with yours and Rusty's options I've got what I need. I
needed to get the ProductAttribute info due to the standard price showing for variants on the AddToCart view for the Bazaar site. So your code help me get that from the Product variants list. Unless Rusty knows of a direct code sample to get the ProductAttributeKey using the ProductVariantKey???
var available = Model.Product.ProductVariants.Where(x => x.Available);
var selection = (from choice in option.Choices from varient in available where varient.Attributes.Any(a => a.Key == choice.Key) select choice).ToList();
var choiceList = selection.Distinct().OrderBy(c => c.Name).Select(choice => new SelectListItem() { Value = choice.Key.ToString(), Text = choice.Name }).ToList();
I only need to do this for one product as it's a list of words to be generated on a pdf on the fly and they want to be able to switch which ones on or off. It's not going to have any stock so didn't need that side of things. But good to know for future reference!
Just an update on the code, the .OrderBy() wasn't working correctly no matter where I put it. So updated the selection linq query to the following
var selection = (from choice in option.Choices from varient in available where varient.Attributes.Any(a => a.Key == choice.Key) orderby choice.Name select choice).ToList();
I've saved this thread so that I can go back and read through when go through another round of adding extension methods to the higher level API to make things easier in the future.
It's pretty neat seeing all the different things that people are doing with Merchello - but it's difficult to anticipate all of the use cases =) Discussions like this are great!
I am sure there is probably a much more efficient way of achieving this in the long run but variant availability is something I am sure most stores would be needing.
I agree and I will definitely look at creating ways to make these sorts of things more efficient / perform better.
I've found the UI / presentation aspects of Merchello to be some of the most difficult (conceptually at least) to develop as there are so many different ways people are using it with a ton of use cases. One size, never fits all =)
It's also sort of a different beastie than Umbraco in the sense that people appreciate the fact that Umbraco is essentially a blank slate on install, whereas with eCommerce, there are quite a few front end pieces that are essential to every install and you could still have literally hundreds of different work flows.
I'd love to see a community driven Merchello extension project surface (similar to uComponents in the early days or nuPickers currently) pop up to sort of vet these ideas and give people an idea of different ways other people are doing things. I think it'd also take away some of the trepidation people have when looking a Merchello's volume of source code to explore entry points that are not always easy to convey with a simple starter kit.
Know this has been resolved, but on another project and am needing to disable the drop-down list options once a selection is made, as it has up to three different variant options, so more than likely will need to do this within the Merchello js file.
Just wandered if you knew of anyone that has already done this or how I could do it.
List only available Product Variants.
I'm currently trying to show only available variants for a product in a list.
But I can't select on the term "Available". As it only shows Key, Name, OptionKey, SortOrder and SKU. Below is the standard code used within Bazaar.
I've done some googling but can't find anything that's relevant. I've seen some info but that was at a higher product level and not at variant level. Does anyone have anything better to use?
Hey Michelle,
Your right that options cannot be used to determine variant availability as they can (in instances of multiple options) only part of a variant definition.
ProductVariants have an Attributes collection (which are the options).
If you want all of the options associated with this variants, the use the attributes collection on the variant.
We've done a bit more JavaScript in the 2.2.0 release in the FastTrack starter (which we're working on releasing later today) that disables the submit button when selections are made that result in unavailable variants. This could be altered to remove the choices altogether based on the selected options ...
Consider:
Option - Color -> Red, Green Option - Size -> Small, Medium
Where the variant Medium, Green is not available ...
In this situation
So marking the option choice (attribute) Green would not be valid since the small is available.
Marking the option choice Medium as not available would likewise not be valid.
thanks Rusty, this helped!
Hi Michelle,
I was actually working on something similar yesterday which might help you and it limits the options displayed based on those with available inventory/stock.
I hope this helps!
Thanks Simon, with yours and Rusty's options I've got what I need. I needed to get the ProductAttribute info due to the standard price showing for variants on the AddToCart view for the Bazaar site. So your code help me get that from the Product variants list. Unless Rusty knows of a direct code sample to get the ProductAttributeKey using the ProductVariantKey???
I only need to do this for one product as it's a list of words to be generated on a pdf on the fly and they want to be able to switch which ones on or off. It's not going to have any stock so didn't need that side of things. But good to know for future reference!
Just an update on the code, the .OrderBy() wasn't working correctly no matter where I put it. So updated the selection linq query to the following
I've saved this thread so that I can go back and read through when go through another round of adding extension methods to the higher level API to make things easier in the future.
It's pretty neat seeing all the different things that people are doing with Merchello - but it's difficult to anticipate all of the use cases =) Discussions like this are great!
I am sure there is probably a much more efficient way of achieving this in the long run but variant availability is something I am sure most stores would be needing.
I agree and I will definitely look at creating ways to make these sorts of things more efficient / perform better.
I've found the UI / presentation aspects of Merchello to be some of the most difficult (conceptually at least) to develop as there are so many different ways people are using it with a ton of use cases. One size, never fits all =)
It's also sort of a different beastie than Umbraco in the sense that people appreciate the fact that Umbraco is essentially a blank slate on install, whereas with eCommerce, there are quite a few front end pieces that are essential to every install and you could still have literally hundreds of different work flows.
I'd love to see a community driven Merchello extension project surface (similar to uComponents in the early days or nuPickers currently) pop up to sort of vet these ideas and give people an idea of different ways other people are doing things. I think it'd also take away some of the trepidation people have when looking a Merchello's volume of source code to explore entry points that are not always easy to convey with a simple starter kit.
Hey Rusty,
Know this has been resolved, but on another project and am needing to disable the drop-down list options once a selection is made, as it has up to three different variant options, so more than likely will need to do this within the Merchello js file.
Just wandered if you knew of anyone that has already done this or how I could do it.
regards, Michelle
Hey Michelle,
That file is built from the Merchello.Mui.Client project. If you run
npm installin that directory you should be able to use the grunt scripts after you have made any modifications.I'm guessing your tweaks would need to be in this file:
https://github.com/Merchello/Merchello/blob/merchello-dev/src/Merchello.Mui.Client/src/jquery/mui/modules/additem/additem.js
is working on a reply...