Images next to product options - permutation confusion

[dave_m]

Hi

I have managed to have images appearing next to my product radio button options fine thanks to the great advanced users guide. However, one of my options has price permutations and the images arent appearing. If I uncheck 'include prices' the images appear but the price difference text disappears!

I thought I was doing great but I cannot find a way around this at all. Does anyone please have any pointers (Ive read through the manuals umpteen times over)?!

Thanks in advance

Dave

[NormanRouxel]

If you have only one Attribute per Component, then Actinic doesn't display the radio buttons via layout Radio Button Choice. It instead uses the Radio Button Permutation Entry layout.

It should be possible to extend this to work with Permutations and Radio Button Permutation Entry.

1) Do to Design / Library / Variables / Permutation. Right-click Permutation and create a new Variable "PermutationImage" as below:

Name: PermutationImage
Description: An image to use with this Permutation.
Prompt: Image
Group: <leave as 'Permutation'>
Place of Setting: Permutation
Allow <Use Parent>... <unchecked>
Panel Name: <leave as-is>
Type: Filename
Allow Empty Value: Checked
Initial Value: <blank>
Top Level Value: <blank>


2) Go to Design / Library / Layouts / Permutation Row Layout. Right-click Permutation Choice ID and choose Copy. Rename that copy to be Permutation Image. Double click Permutation Image and replace its contents with:

<actinic:variable name="PermutationImage" />

3) Go to Design / Library / Layouts / Permutation Choice List. Right-click Permutation Choice ID List and choose Copy. Rename that copy to be Permutation Choice Image List. Double click Permutation Choice Image and replace its contents with:

<actinic:variable name="PermutationChoice" value="Permutation Image" />

3) Go to Design / Library / Layouts / Permutation Row Layout / Radio Button Permutation Entry. Replace all code there with:

<actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationIsValid%22%20%2f%3e" >
	<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPermutationHidden%22%20%2f%3e%20%3d%3d%20FALSE%0dOR%0d%28%3cactinic%3avariable%20name%3d%22IsPermutationHidden%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsAssociatedProductInStock%22%20%2f%3e%20%3d%3d%20TRUE%29" >
		<input type="radio" name="<actinic:variable name="PermutationAttributeList" value="Attribute IDs" />" value="<actinic:variable name="PermutationChoiceList" value="Permutation Choice ID List" />" <actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsUsedNoneChoiceLabel%22%20%2f%3e%20%3d%3d%20FALSE%29%0dOR%0d%28%28%3cactinic%3avariable%20name%3d%22IsUsedNoneChoiceLabel%22%20%2f%3e%20%3d%3d%20TRUE%29%20AND%20%28%3cactinic%3avariable%20name%3d%22IsSelectedByDefault%22%20%2f%3e%20%3d%3d%20FALSE%29%29" ><actinic:block php="true" >
			echo ($bOptionSelected == false) ? 'checked="checked"' : '';
			$bOptionSelected = true;
			</actinic:block></actinic:block> >
		<actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationAssociatedNameIsUsed%22%20%2f%3e%20%3d%3d%20FALSE">
			<actinic:variable name="PermutationChoiceList" value="Permutation Choice Name List" />
		</actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationAssociatedNameIsUsed%22%20%2f%3e">
			<actinic:variable name="AssociatedProduct::ProductName" />
		</actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPriceShownForComponents%22%20%2f%3e">
			<actinic:variable name="PermutationPrice" />
		</actinic:block>
		<actinic:block php="true">
		$choiceimage = '<actinic:variable name="PermutationChoice" value="Permutation Image" encoding="perl" selectable="false" />';
		if ( $choiceimage )
			{
			list($width, $height, $type, $attr) = getimagesize($choiceimage);
			if ( $width )
				{
				echo " <img src=\"$choiceimage\" width=\"$width\" height=\"$height\" />";
				}
			else
				{
				echo "<font color=\"red\"><b> BAD IMAGE</b></font>";
				}
			}
		</actinic:block>
	</actinic:block>
</actinic:block>

That should be it.

Note that you set the images for these type of products by selecting the Component. Then look in the Component Detail / Permutations pane. Click each Permutation in turn and under Permutation Properties there will be an entry for Image.

Note that if using Actinic V11, this seems to display errors while in the Design tab but is OK on Preview and live.

[dave_m]

Hi Norman

Thanks for the help but it still isnt working im afraid! Now, whether I check the 'include prices' checkbox or not, the images dont show at all, it just shows the options with price difference. Also, even though I have column count for radion buttons set to 4, they are now just appearing in the standard 1 column vertical list.

Is there anything else that I might have forgotten to do?

In the component, I have the component layout set to 'component layout with selectable permutations' and permutation layout set to 'permutation radio button list'.

Please help!

[dave_m]

Just a quick update. Disregard my last message, I had tried editing other files in my frustration to get things to work.

I have now reset everything and started over and included the code from the advanced users guide as well as Normans suggestion. Im now back in the position I was in before, ie: the images show as long as I uncheck the 'include prices' and now the column count works again. Still, the images do not appear if I chose 'include prices'.

Im still in need of help if you have any ideas?!

[NormanRouxel]

Reread the bottom of my post #2. If these are Permutations then you set the images in a different way (via Permutations tab) than for simple Attributes / Choices.

Also re-check the entire post #2 as I amended it an hour or so after its original post.

[dave_m]

Hi Norman

I really appreciate you trying to help me out here, cheers. Yep, I have used your latest suggestions but im still not getting any joy. I have included a screenshot from my current project. In it, you can see I have no image select option in the permutations. Also, you can see the permutation I am having problems with, 'Shape'.

I hope this image may help in some way?!

[dave_m]

Anybody?!

[NormanRouxel]

Reread post #5. Redo everything from scratch.

[dave_m]

Hi Norman

Im on my third effort from scratch now (everything 100% reset to factory in the library, just so there are definately no conflicts)

I have followed everything to a t. Can I just ask, do you know for a fact that the code you suggested works or is it theoretical? Also, im assuming when you say add an image in the permutations, you mean in the screenshot I posted above? Should there be a field in there with the ability to choose an image?

Cheers

Dave

[NormanRouxel]

Not theoretical. See screenshots!

[NormanRouxel]

Also, I've told you twice (post #2 and post #5) that you set the images via the Permutations tab.

You say you're following everything exactly but you're ignoring that.

[dave_m]

Norman, Im embarressed to say I didnt even see the image option in the permutations panel as I didnt notice the scroll bar to get down to it. Oh well, sorted now and happy, thanks for your help!

Remember kids, always look for hidden away fields!