Variant image behavior
Variant image behavior
Would someone who has some variant setups mind checking something for me?
There are two display options for a variant setup, Swatches or No Swatches.
Take a variant you have the DOES use swatches and Uncheck the swatches checkbox. Then preview the product.
Does the product image change when you select a variant from the dropdown? It's a dropdown now because the swatches checkbox is off. That makes sense.
But I swear the product image changed whether the variant selection was a swatch or a dropdown. My system isn't changing the image on dropdown variant setups, only if the swatches checkbox is checked.
Shouldn't the product image change (if a variant image is specified) regardless of whether I use swatches or a dropdown to make my selection?
There are two display options for a variant setup, Swatches or No Swatches.
Take a variant you have the DOES use swatches and Uncheck the swatches checkbox. Then preview the product.
Does the product image change when you select a variant from the dropdown? It's a dropdown now because the swatches checkbox is off. That makes sense.
But I swear the product image changed whether the variant selection was a swatch or a dropdown. My system isn't changing the image on dropdown variant setups, only if the swatches checkbox is checked.
Shouldn't the product image change (if a variant image is specified) regardless of whether I use swatches or a dropdown to make my selection?
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com
Ok thank you for confirming.
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com
- KullySupply
- Lieutenant, Jr. Grade (LT JG)
- Posts: 28
- Joined: Wed Feb 20, 2008 10:50 am
- Contact:
I too encountered this problem. I had to add some custom code to make it work:
App_Code/ProductHelper.cs -> BuildProductOptions function:
Within the BuildProductOptions function:
I created a custom ConLib which contains placeholders for the product image and options menu. I did this using elements from the BuyProductDialog and ProductImage ConLib files.
ConLib/Custom/Product.aspx.cs (Page_Init function):
Also notice above "KullyHelper.BuildProductOptions" ... I created a separate file in the App_Code folder which I add my custom functions to. This way I can keep all custom functions separate from the original helper files.
I hope I didn't leave anything out. Here's the code in action (keep in mind, our store is not live and still has a long ways to go!):
http://www.kullysupplyinc.com/Generic-F ... 64C18.aspx
It's kind of annoying how the table bounces when the image changes. It would help if all my images were the same width.
App_Code/ProductHelper.cs -> BuildProductOptions function:
Code: Select all
// Notice the extra variable "PlaceHolder phProductImage"
public static Dictionary<int> BuildProductOptions(Product product, PlaceHolder phOptions, PlaceHolder phProductImage)
{
Code: Select all
// SEE WHETHER A VALID VALUE FOR THIS FIELD IS PRESENT IN FORM POST
string selectedValue = request.Form[aspOptions.UniqueID];
if (!string.IsNullOrEmpty(selectedValue))
{
ListItem selectedItem = aspOptions.Items.FindByValue(selectedValue);
if (selectedItem != null)
{
int val = AlwaysConvert.ToInt(selectedValue);
if (val != 0)
{
selectedChoices.Add(option.OptionId, val);
selectedItem.Selected = true;
// ----------------------------------------------------------------------> Custom
OptionChoiceCollection availableOptions = OptionChoiceDataSource.GetAvailableChoices(product.ProductId, option.OptionId, selectedChoices);
foreach (OptionChoice optionOption in availableOptions)
{
//Change image if necessary
if(!string.IsNullOrEmpty(optionOption.ImageUrl)) {
phProductImage.Controls.Clear();
phProductImage.Controls.Add(new LiteralControl("<img src=\"" + page.ResolveUrl(optionOption.ImageUrl) + "\" />"));
}
}
// ----------------------------------------------------------------------> End Custom
}
}
}
ConLib/Custom/Product.aspx.cs (Page_Init function):
Code: Select all
//BUILD PRODUCT ATTRIBUTES
_SelectedOptions = KullyHelper.BuildProductOptions(_Product, phOptions, phProductImage);
//BUILD PRODUCT CHOICES
ProductHelper.BuildProductChoices(_Product, phOptions);
I hope I didn't leave anything out. Here's the code in action (keep in mind, our store is not live and still has a long ways to go!):
http://www.kullysupplyinc.com/Generic-F ... 64C18.aspx
It's kind of annoying how the table bounces when the image changes. It would help if all my images were the same width.
That's completely awesome code you posted, thanks so much!
I will see how I fare in getting mine to do the same thing.
By the way, I use a nifty little $20 program that batch resizes image files, converts them on-the-fly and even resizes the canvas of the image. Works wonders for getting a bunch of odd-sized images consistent for a website.
http://www.softorbits.com/
I will see how I fare in getting mine to do the same thing.
By the way, I use a nifty little $20 program that batch resizes image files, converts them on-the-fly and even resizes the canvas of the image. Works wonders for getting a bunch of odd-sized images consistent for a website.
http://www.softorbits.com/
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com
Ok I figured mine out without having to modify ProductHelper
Just wrap the ProductImage placeholder in an AjaxPanel like this:
Then you can manipulate it right in Page_PreRender of the BuyProductDialog user control:
Just wrap the ProductImage placeholder in an AjaxPanel like this:
Code: Select all
<ajax:UpdatePanel ID="ImageAjax" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:PlaceHolder ID="phProductImage" runat="server"></asp:PlaceHolder>
</ContentTemplate>
</ajax:UpdatePanel>
Code: Select all
if (allProductOptionsSelected && productVariantId != 0)
{
OptionChoice _OptionChoice = OptionChoiceDataSource.Load(ProductVariantDataSource.Load(productVariantId).Option1);
if (_OptionChoice.Option.ShowThumbnails == false)
{
PlaceHolder phProductImage = (PlaceHolder)PageHelper.RecursiveFindControl(this.Parent, "phProductImage");
UpdatePanel AJImagePanel = (UpdatePanel)PageHelper.RecursiveFindControl(this.Parent, "ImageAjax");
string _ImageURL = _OptionChoice.ImageUrl;
string _ImageAltText = _Product.ImageAltText + " (" + _OptionChoice.Name + ")";
phProductImage.Controls.Clear();
phProductImage.Controls.Add(new LiteralControl("<img id=\"ProductImage\" src=\"" + Page.ResolveClientUrl(_ImageURL) + "\" border=\"0\" alt=\"" + Server.HtmlEncode(_ImageAltText) + "\" />"));
AJImagePanel.Update();
}
}
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com
- mfreeze
- Commodore (COMO)
- Posts: 421
- Joined: Mon Jan 24, 2005 2:07 pm
- Location: Washington, NJ
- Contact:
Re: Variant image behavior
Joe,
I put the Ajax panel code in the ProductImage.ascx but where did you put your code in the BuyProductsDialog code? I can't seem to figure out where to put it.
I put the Ajax panel code in the ProductImage.ascx but where did you put your code in the BuyProductsDialog code? I can't seem to figure out where to put it.
Mary E Freeze
Freeze Frame Graphics
Web Hosting and Design, ASP and CFMX Development
http://www.ffgraphics.com
Freeze Frame Graphics
Web Hosting and Design, ASP and CFMX Development
http://www.ffgraphics.com
Re: Variant image behavior
Hmmm haven't looked at that code in quite a while. I'm not sure what I was thinking when I posted the code snippet above - might have been a late night
I've denoted where my mods start and stop with the BEGIN: Solunar Mod comment lines.
Here's the first section of my page_PreRender():
I've denoted where my mods start and stop with the BEGIN: Solunar Mod comment lines.
Here's the first section of my page_PreRender():
Code: Select all
protected void Page_PreRender(object sender, EventArgs e)
{
//GET THE SELECTED KIT OPTIONS
GetSelectedKitOptions();
string optionList = ProductVariantDataSource.GetOptionList(_ProductId, _SelectedOptions, true);
//SET THE CURRENT CALCULATED PRICE
OurPrice.Product = _Product;
OurPrice.OptionList = optionList;
OurPrice.SelectedKitProducts = _SelectedKitProducts;
bool allProductOptionsSelected = (_SelectedOptions.Count == _Product.ProductOptions.Count);
bool requiredKitOptionsSelected = ProductHelper.RequiredKitOptionsSelected(_Product, _SelectedKitProducts);
//BEGIN: Solunar Mod
// DETERMINE THE PRODUCT VARIANT ID
int productVariantId = ProductVariantDataSource.GetProductVariantId(_ProductId, _SelectedOptions, true);
if (allProductOptionsSelected && productVariantId != 0)
{
OptionChoice _OptionChoice = OptionChoiceDataSource.Load(ProductVariantDataSource.Load(productVariantId).Option1);
if (_OptionChoice.Option.ShowThumbnails == false)
{
PlaceHolder phProductImage = (PlaceHolder)PageHelper.RecursiveFindControl(this.Parent, "phProductImage");
UpdatePanel AJImagePanel = (UpdatePanel)PageHelper.RecursiveFindControl(this.Parent, "ImageAjax");
string _ImageURL = _OptionChoice.ImageUrl;
string _ImageAltText = _Product.ImageAltText + " (" + _OptionChoice.Name + ")";
if (!string.IsNullOrEmpty(_OptionChoice.ImageUrl))
{
phProductImage.Controls.Clear();
phProductImage.Controls.Add(new LiteralControl("<img id=\"ProductImage\" src=\"" + Page.ResolveClientUrl(_ImageURL) + "\" border=\"0\" alt=\"" + Server.HtmlEncode(_ImageAltText) + "\" />"));
AJImagePanel.Update();
}
}
}
//END: Solunar Mod
InventoryManagerData inv = null;
//SHOW SUBSCRIPTIONS
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com
-
- Lieutenant (LT)
- Posts: 79
- Joined: Thu Oct 04, 2007 9:23 am
- Location: West Hartford, CT
- Contact:
Re: Variant image behavior
The ajax example works perfectly - very clean - thank you!
David Rollins
SDC Solutions, Inc.
Information Management, Web Site and Intranet Solutions
http://www.sdcsol.com
http://www.rhinogift.com
SDC Solutions, Inc.
Information Management, Web Site and Intranet Solutions
http://www.sdcsol.com
http://www.rhinogift.com
Re: Variant image behavior
From what I can deduct, the code described above will allow the option of defining swatches to variants, but not actually displaying the swatches and utilizing a drop-down instead. When an option is selected from the drop-down, the main image will change according to the swatches built-in.
What I need is to have both the drop-down AND the swatches show. When a drop-down item is selected, the main image will change or when a swatch is clicked, the main image will change as well. I think that this is workable by using the same variant options in two different variant set-ups. However, the kicker is that I need them to be inter-dependent where when a swatch is clicked, it automatically "selects" the same option in the drop-down so that the customer can choose their colors by the swatches or by the drop-down.
Would a modification of the above code be able to do this? I think the only change would be that BOTH the drop-down and swatches would need to show and that clicking a swatch would select the matching variant in the drop-down.
Please let me know if this is feasible!
Thanks
Kristi
What I need is to have both the drop-down AND the swatches show. When a drop-down item is selected, the main image will change or when a swatch is clicked, the main image will change as well. I think that this is workable by using the same variant options in two different variant set-ups. However, the kicker is that I need them to be inter-dependent where when a swatch is clicked, it automatically "selects" the same option in the drop-down so that the customer can choose their colors by the swatches or by the drop-down.
Would a modification of the above code be able to do this? I think the only change would be that BOTH the drop-down and swatches would need to show and that clicking a swatch would select the matching variant in the drop-down.
Please let me know if this is feasible!
Thanks
Kristi
Re: Variant image behavior
Most probably this change will effect the ProductHelper class. The function BuildProductOptions(Product product, PlaceHolder phOptions) is building swatches or drop downs. You need to change the method in a way that it adds both swatches and drop down lists.krittleb wrote:From what I can deduct, the code described above will allow the option of defining swatches to variants, but not actually displaying the swatches and utilizing a drop-down instead. When an option is selected from the drop-down, the main image will change according to the swatches built-in.
What I need is to have both the drop-down AND the swatches show. When a drop-down item is selected, the main image will change or when a swatch is clicked, the main image will change as well. I think that this is workable by using the same variant options in two different variant set-ups. However, the kicker is that I need them to be inter-dependent where when a swatch is clicked, it automatically "selects" the same option in the drop-down so that the customer can choose their colors by the swatches or by the drop-down.
Would a modification of the above code be able to do this? I think the only change would be that BOTH the drop-down and swatches would need to show and that clicking a swatch would select the matching variant in the drop-down.
Please let me know if this is feasible!
Thanks
Kristi
Re: Variant image behavior
Joe,
Code works great! One question...When I have multiple options for a product, I need the image to update based on the the option combination. As I implemented it, the codes works as needed for single option images just fine. If I copy/paste (repeat) the code block and substitute "Option 1" for "Option 2", the effect is what I'm looking for to happen, but then when I go back to a single option product, the update errors out probably because there isn't an "Option 2" for said product.
In short, I need help making the image change in a similar fashion as the SKU# changes when a option is selected. I have a single image associated with every option. Any suggestions?
Thanks,
Ben
Code works great! One question...When I have multiple options for a product, I need the image to update based on the the option combination. As I implemented it, the codes works as needed for single option images just fine. If I copy/paste (repeat) the code block and substitute "Option 1" for "Option 2", the effect is what I'm looking for to happen, but then when I go back to a single option product, the update errors out probably because there isn't an "Option 2" for said product.
In short, I need help making the image change in a similar fashion as the SKU# changes when a option is selected. I have a single image associated with every option. Any suggestions?
Thanks,
Ben
Re: Variant image behavior
One quick thought...I think that I could achieve what I am trying to do by constructing a conditional statement basically stating "if Option 1 is selected...run the script as Joe posted, else if option 2 is selected, run the code that Joe posted". I can conceptulize this but am having trouble coding it. Any suggestions?
Thanks again,
Ben K
Thanks again,
Ben K
Re: Variant image behavior
Help! I'm trying to implement this but having no luck. Maybe I didn't put in the right code? I've put everything in and its not changing my picture when I select a variant.
I also implemented the "mouseover" image code too. Would that make this not work?
Or can someone post a single message with all the changes I need to do here? maybe I got confused with all the messages and what to change.
Thanks
I also implemented the "mouseover" image code too. Would that make this not work?
Or can someone post a single message with all the changes I need to do here? maybe I got confused with all the messages and what to change.
Thanks
Re: Variant image behavior
solid fix. Just implemented the ajax change and my main images are changing based on the variant's image.
thanks for this, Able really needed it.
thanks for this, Able really needed it.