I'm trying to implement variant images for Merchello (i.e. when you change the product attributes it changes not only the price, but also the picture), but I'm having trouble getting to the image data. What is the best way to do that?

The merchello.bazaar.js script calls via ajax the BazzarSiteApiController, specifically the GetProductVariantPriceAndInventory method. That returns JSON for the specified variant and changes the price:

[HttpGet]
public object GetProductVariantPriceAndInventory(Guid productKey, string optionChoiceKeys) {
  var optionsArray = optionChoiceKeys.Split(',').Where(x => !string.IsNullOrEmpty(x)).Select(x => new Guid(x)).ToArray();

  // changed in 1.9.1 to use the MerchelloHelper for performance and to include the data modifiers
  var product = _merchello.Query.Product.GetByKey(productKey);
  var variant = product.GetProductVariantDisplayWithAttributes(optionsArray);

  var data = new {
    variant.OnSale,
    SalePrice = ModelExtensions.FormatPrice(variant.SalePrice, _currency),
    Price = ModelExtensions.FormatPrice(variant.Price, _currency),
    TracksInventory = variant.TrackInventory,
    variant.TotalInventoryCount
  };

  return data;
}

I would like to add the image data to that--if the variant has an image, return it, otherwise return the parent product's image.

Images are stored in the Extended Content or ProductDetachedContent, but getting there from here seems pretty painful. I started looking for this data and ended up with something like this:

private string GetImage(ProductVariantDisplay variant, ProductDisplay product) {
  var content = variant.DetachedContents.FirstOrDefault();
  if (content == null) {
    content = product.DetachedContents.FirstOrDefault();
    if(content == null) return String.Empty;
  }
  var values = content.DetachedDataValues;
  if (values == null) return String.Empty;
  var imageValue = values.SingleOrDefault(x => x.Key == "image");
  if (imageValue.Value == null) return String.Empty;
  return imageValue.Value;
}

Besides being pretty rough, this returned JSON, which got formatted as unusable escaped text inside the returned JSON:

{"onSale":false,"salePrice":"$0.00","price":"$6.95","image":"{\r\n  \"focalPoint\": {\r\n    \"left\": 0.5,\r\n    \"top\": 0.5\r\n  },\r\n  \"src\": \"/media/1042/image000.jpg\"\r\n}","tracksInventory":false,"totalInventoryCount":0}

I could fix that by deserializing the json so that it could be properly reserialized properly, but really?! This all can't scale well, can it?

return new JavaScriptSerializer().Deserialize<dynamic>(imageValue.Value);

Of course then I still need to get the optimized image from cropper, which is done how, I'm not sure, yet.

I'm pretty sure I'm going about this entirely the wrong way. So is there a shortcut here?

Thanks!

Tony