Announcement

Collapse
No announcement yet.

How do I lay out my permutations with radio buttons instead of a drop-down

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    How do I lay out my permutations with radio buttons instead of a drop-down

    If you are using components with attributes and choices, it is possible to include the permutation prices (and associated product names) in the drop down list of choices by selecting a 'Component Layout' of 'Component Layout With Selectable Permutations'.

    By default, this is just a drop down list. If you want your permutations to appear as radio buttons then do the following:

    1. Go to 'Design | Library | Layouts' and expand the 'Components' group.

    2. Right-click on any layout within that group and select 'New Layout'.

    3. Call the new layout 'Permutations As Radio Buttons' and click 'OK'.

    4. Now double-click on that layout and replace all the code there with the following HTML:

    <actinic:block if="%3cactinic%3avariable%20name%3d%22ComponentDisplayLabel%22%20%2f%3e%20%21%3d%20%22%22">
    <br />
    </actinic:block>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsComponentCheckboxShown%22%20%2f%3e">
    <input type="checkbox" name="<Actinic:Variable Name="UIWidgetName"/>" <actinic:block if="%3cactinic%3avariable%20name%3d%22IsSelectedByDefault%22%20%2f%3e">checked="checked"</actinic:block> />
    </actinic:block>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsComponentHiddenFieldIncluded%22%20%2f%3e">
    <input type="hidden" name="<Actinic:Variable Name="UIWidgetName"/>" value="on" />
    </actinic:block>
    <Actinic:Variable Name="ComponentDisplayLabel" />

    <br />
    <actinic:block if="%3cactinic%3avariable%20name%3d%22ComponentIsOptional%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22IsUsedNoneChoiceLabel%22%20%2f%3e%20AND%20%21%3cactinic%3avariable%20name%3d%22IsSelectedByDefault%22%20%2f%3e" >
    <input type="radio" checked="checked" name="<actinic:variable name="PermutationAttributeList" value="Attribute IDs" />" value="-1" /> <actinic:variable name="NoneChoiceLabel" /> <br />
    </actinic:block>
    <actinic:block type="PermutationList" >
    <actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationIsValid%22%20%2f%3e">
    <input type="radio" <actinic:block if="%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%201%29%20AND%20%28%3cactinic%3avariable%20name%3d%22IsUsedNoneChoiceLabel%22%20%2f%3e%20%3d%3d%20false%29" >checked="checked"</actinic:block> name="<actinic:variable name="PermutationAttributeList" value="Attribute IDs" />" value="<actinic:variable name="PermutationChoiceList" value="Permutation Choice ID List" />" />
    <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:variable name="PermutationPrice" />
    <br />
    </actinic:block>
    </actinic:block>

    5. Then save the layout by clicking 'OK' and close the library.

    You will be able to select your new layout within the 'Component Layout' drop down list within the 'Layout' tab of your components.
Working...
X