Choices in boxes

[graphicz]

Has anyone any ideas how to lay out Attribute Choices in boxes, rather than Radio Buttons, or drop downs?


I have played around changing input type from radio to button for example with little success.

I am happy laying out and styling, I just would value some help making the input type for choices a button or similar.

Thank you.

[NormanRouxel]

Search the built-in Help for "push button".

If you want choice names on the buttons that may require searching the Community or Advanced Guide.

[graphicz]

Thank you Norman.

The push button grid presents a grid of 'Add to Cart' buttons to select the respective choice.
I would like a grid to present buttons to select the choice yet retain the product layout Add to Cart button.

[NormanRouxel]

It can be done. See http://www.drillpine.biz/v10-dynamic...to_Frames.html third product down. However there's a LOT of code involved and it's not quite what you want.

Also you can do this(indeed almost anything) with jQuery. See http://jqueryui.com/button/#radio

[NormanRouxel]

Here's a quick hack to use the http://jqueryui.com/button/#radio. Tested on the demo site. See attached screen-shot for results.

Put the following into the bottom of Standard JavaScript Header Functions

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 <script>
$(function() {
	$( ".radiobuttonset" ).buttonset();
});
</script>

Right-click Radio Button Choice and choose Copy.
Rename the copy to be Fancy Radio Button Choice.
Replace code in Fancy Radio Button Choice with:

<span class="ajs-attr" id="<actinic:variable name="UIWidgetName" />_<Actinic:Variable Name="ChoiceSelectedValue"/>"><input type="radio" id="fancy_<Actinic:Variable Name="UIWidgetName"/>_<Actinic:Variable Name="ChoiceSelectedValue"/>" name="<Actinic:Variable Name="UIWidgetName"/>" value="<Actinic:Variable Name="ChoiceSelectedValue"/>" <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%201">checked="checked"</actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20true" >onclick="ChoiceChanged(this)"</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20FALSE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" >onclick="ChoiceChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />)"</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" >onclick="ChoiceChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />, '<actinic:variable name="ShopID" />')"</actinic:block>/>
<label for="fancy_<actinic:variable name="UIWidgetName" />_<Actinic:Variable Name="ChoiceSelectedValue"/>"><Actinic:Variable Name="ChoiceDisplayLabel"/></label>
</span>

OK out.

Right-click Radio Button Choice List and choose copy.
Rename that copy to be Fancy Radio Button Choice List.
Replace code in Fancy Radio Button Choice List with:

<actinic:variable name="ChoiceLayout" value="Fancy Radio Button Choice" />

Click the Click here to edit list layout settings.
In Overall Design, set Start of list to be:

<div class="radiobuttonset">

Set End Of List to be:

</div>

Click the Edit Rows and Columns tab.
Delete all the Before Row, First Item, Middle Items, Last Item, After Row code.
OK out.

Right-click Standard Radio Button Attribute and choose copy.
Rename the copy to be Fancy Radio Button Attribute.
Replace code in Fancy Radio Button Attribute with:

<Actinic:Variable Name="AttributeDisplayLabel"/>
<br />
<actinic:variable name="ChoiceList" value="Fancy Radio Button Choice List" />

OK out and that's you done.

Select an Attribute in the Content Tree (like the Wedding Rings / Men's Size) and
set its Attribute Layout to be Fancy Radio Button Attribute. You should get a display like the attached.

No Layouts were harmed in the production of this tweak.

[NormanRouxel]

And here's a way to use the power of jQuery to do all the heavy lifting so that SD 2013 radio buttons are automatically converted into jQuery buttons.

You can choose between:

Standard SellerDeck buttons.

A single row buttonset (ignores Column Count For Radio Buttons).
(Capture1.jpg screenshot attached)

A table of buttons (respects Column Count For Radio Buttons).
(Capture2.jpg screenshot attached)

Go to Design / Library / Variables. Right-click Attribute and select New Variable.
Set it as follows:

Name			RadioButtonStyle
Description		Style for Radio Buttons
Prompt			Radio Button Style
Group			Attribute
Place Of Setting	Site, Section, Product, Attribute
Allow <Use parent>...	Checked
Allow <New>...		Unchecked
Panel Name		Layout
Type			List of Choices
Searchable...		Unchecked
Modifiable...		Unchecked
Upload...		Unchecked
Include...		Unchecked

Click the values tab and create 3 Values:

	button-standard
	button-fancy		
	button-fancyset

Go back to the Basic Definition tab and set:

Initial value		Use Parent()
Top Level Value		button-standard

OK out.

Go to Design / Library / Layouts / Attribute Lists.
In standard Attribute List, look for the line (tested in SD 12.0.2):

	<div id="id<Actinic:Variable Name="UIWidgetName"/>_Table">

Replace it with:

	<div id="id<Actinic:Variable Name="UIWidgetName"/>_Table" class="<actinic:variable name="RadioButtonStyle" selectable="false" />">

Repeat the above for Component Attribute List (2 places).
OK out.

Now put the following into the bottom of layout Standard Javascript Header Functions:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>.fancy-button {margin:2px;}</style>
<script>
	$(function() {		// on document ready
		$( "div[id^='idv_'][id$='Table']" ).has( ":radio" ).each(function(){	// radio buttons within this div
			// if we're showing a button set, we need to remove the table tr and td cells
			// we'll replace the table with a div and each td with a span
			if ( $(this).hasClass('button-fancyset') )
				{
				$('table', $(this)).replaceWith(function() {								// we want to replace table
					var html = '';
					$('td', this).each(function() {											// each td
						html += '<span class="dp_radio_td">' + $(this).html() + '</span>';// replace td with a span   
						});
					return '<div class="dp_radio_table">' + html + '</div>';			// wrap in a div so we can locate it		
					});
				}	

			if ( $(this).hasClass('button-fancyset') || $(this).hasClass('button-fancy') )		// only for fancy type buttons
				{
				//	We need to convert (example SD generated HTML):
				//	<span class="ajs-attr" id="v_2_1_1">
				//	<input type="radio" name="v_2_1" value="1" checked="checked" onclick="ChoiceChanged(this)"/>
				//	P
				//	&nbsp;&nbsp;</span>
				
				//	Into:
				
				//	<span class="ajs-attr" id="v_2_1_1">
				//	<input type="radio" id="fancy_v_2_1_1" name="v_2_1" value="1" checked="checked" onclick="ChoiceChanged(this)"/>
				//	<label for"fancy_v_2_1_1">P</label>
				//	</span>
				var buttontype = $(this).hasClass('button-fancyset') ? 'button-fancyset' : 'button-fancy';
				$( "span.ajs-attr", $(this) ).has( ":radio" ).each(function(){							// only radio button lists
					var uniqueid = 'fancy_' + $(this).attr('id');											// create unique ID for each radio
					var radio = $( ":radio", $(this) ).attr('id', uniqueid).addClass(buttontype);	// give radio unique ID and a class
					var radiolabel = $.trim($(this).text());													// textual description
					$(this).contents().filter(function(){return this.nodeName != 'INPUT';}).remove();					// remove everything except radio
					radio.after('<label class="fancy-button" for="' + uniqueid + '">' + radiolabel + '</label>');	// append the label
					});
				}
			});

		// now our radios are compatible with jQuery button
		$( "div.dp_radio_table" ).buttonset();						// only if button set created
		$( "input.button-fancy[id^='fancy']").button();			// only if button crerated
	});
</script>

Your Attribute Details / Layout / Attribute will now have a setting Radio Button Style that you can use to control this feature.

For a real application, you'd probably want to use the jQuery UI download builder to get a minimal set of scripts and styles and replace the first 3 lines with locally saved files. See Capture3.jpg for a Le Frog theme.

Updated 20-09-13: Added a classname "fancy-button" to the label tags and a matching CSS definition near the top of the code.
It's empty above but setting it to (say) width:50px; height:50px; will give you fixed size buttons.

Updated 21-09-13: Deal with SellerDeck Design Mode display quirk.

Updated 21-09-13: Added Radio Button Style setting that you can use to control this feature.

[NormanRouxel]

Updated the above post to have a Radio Button Style setting that you can use to control this feature.

[graphicz]

Thank you very much Norman.

I am a bit maxed out just now but will try applying it this week.

Thanks again.

[NormanRouxel]

I'm doing an easily installable and more configurable version which I'll stick into my library of unannounced add-ons.

It will let you select the drop-down style (standard SD, buttons or buttonset) per Attribute and have tweaks like optionally making all grid buttons adapt to the size of the largest button. And have several themes available.

[graphicz]

Excellent!

[NormanRouxel]

Better test with dynamic prices - like the Solitaire Diamond Ring on the demo site. The SD code that manipulates the radio buttons is breaking the above tweak.

It works fine on standard Attributes (like the Wedding Rings product) where there are no dynamic choices being made.

When I get time, I'll see if this can be overcome.

[NormanRouxel]

I managed to fix the interaction with Dynamic Pricing and now have a multi themed installable version available.

[graphicz]

I have just purchased Norman's new 'Fancy Radio Buttons' plugin for £35 + vat and it is brilliant!

Not only does it do exactly as I wanted in my original post above, it can be styled with jquery UI themes or one can create new themes using css.

Excellent! http://www.drillpine.biz