Visual Product Options (and Radio Options), Use images, radio options or checkboxes to display product options Options

[estelle]

Visual Product Options (and Radio Options)

About the Author: I have a wide range of mods, all top quality and backed by great support. I am a long time member of the CubeCart community, writing mods for over 2 years (October 2005)! -- View my feedback -- Visit Estelle's Mod Store
Mod Version: 1.4
Mod License: Commercial: per Web Server Installation
Cost: $24.95




This mod is perfect for any stores that use product options, particular when products come in a variety of colours, fabrics, sizes, etc.

Description:
This mod will allow you to display your product options as visual options (ie: a set of images is used to help customers make a choice), radio options, checkboxes and standard drop down boxes. It comes with around 7 display types built in.

Visual options allow you to illustrate each choice with an image. For example, you may want to use images to show the available colours, or for a store that prints business cards (etc) you could illustrate the different fonts.

Radio options are very useful because a customer can see all of the possible options, so they are more likely to make a correct choice, or purchase additional features/services/etc.

Checkboxes are designed to be used when you want your customer to be able to choose multiple options, and checkboxes also allow your customer to choose no options.

Features:

• For Visual Options, the images are unique to each product
• You can create your own display types for your product options (advanced users only!)

Compatibility:
This mod is compatible with all mods available through my store, including my full variety of "product option" mods:
Stock Levels for Product Options :: Quick Edit Product Options :: Text Input Fields for Products :: Visual Product Options (and Radio Options)
Radio Product Options (and Checkboxes) :: Force Selection of Product Options :: Dynamic Product Prices :: Percentage Prices for Product Options


>>> Full info & purchase <<<





>>> Full info & purchase <<<

[texanweb]

OK I got several questions on this mod. I am using the Checkboxes (listed vertically) feature.

- How do I move "Style of Logo" up instead of it being in the middle?

- How do I un-bold the "Style of Logo"? I want it to blend into my other text input fields.

- How do I by default deselect the "Antique" checkboxes?


Please see attachment!!!

Attached File(s)

 pic1.JPG ( 25.64K ) Number of downloads: 102

 

[estelle]

Adam, sorry I don't always see new posts in the forums. The best way to contact me is via the contact form at my store.

1. Deselecting the first checkbox can be done by removing the following from the two checkbox options: {VAL_SELECTED}
   
   I.e. Change this line:
   CODE
                   <input type="checkbox" name="productOptions_{VAL_OPTION_ID}[]" value="{VAL_ASSIGN_ID}" {VAL_SELECTED} onChange="{JS_UPDATE_PRICE} {JS_UPDATE_STOCK_LEVEL}" /> {VAL_VALUE_NAME}
   
   
   To this (TWICE!):
   CODE
                   <input type="checkbox" name="productOptions_{VAL_OPTION_ID}[]" value="{VAL_ASSIGN_ID}" onChange="{JS_UPDATE_PRICE} {JS_UPDATE_STOCK_LEVEL}" /> {VAL_VALUE_NAME}
   
   
2. To move the titles to the top find these two lines:
   CODE
           <!-- BEGIN: repeat_extended_options -->
           <tr>
   
   
   Change to this:
   CODE
           <!-- BEGIN: repeat_extended_options -->
           <tr valign="top">
   
   
3. To remove the boldness find this line *** note that it follows SHORTLY AFTER this line: <!-- BEGIN: repeat_extended_options -->
   CODE
               <td><strong>{VAL_OPTS_NAME}</strong></td>
   
   
   Change to this:
   CODE
               <td>{VAL_OPTS_NAME}</td>
   
   
4. Also another improvement is to change "onChange" to "onclick" for the 2 checkbox options only.

1, 2 and 4 (above) are improvements that are all planned to go into version 1.1 of "Radio Product Options" and version 1.3 of "Visual Product Options", along with other improvements.

[Pardon__Me]

This mod is great! It gives you a huge number of possibilities to display your product options, besides letting you create your own!!!

I've been using it for a while now!

Pardon__Me

[texanweb]

Estelle forgot to say what file to edit it for Post #3

The file you need to edit is ...\includes\content\viewProd.inc.php

[Chris]

I am having problems with it displaying some of the options correctly. If you click here you will see they are not spaced out correctly:
http://www.wightcanvas.co.uk/shop/browse-b...t/prod_204.html

This only happens on my Portrait/Landscape sizes the Square/Panoramic options display fine.

Anyone got any ideas??

[estelle]

For anyone else experiencing this same problem, it can be fixed with the following changes.

EDIT within styleTemplates/content/viewProd.tpl

FIND this block (or something similar... look for BEGIN: repeat_extended_options):

<!-- BEGIN: repeat_extended_options -->
<tr valign="top">
<td style="padding: 1.5em 5px 0 0;"><strong>{VAL_OPTS_NAME}:</strong></td>
<td style="padding: 1.5em 0 0 0;">

REPLACE with the following block (or just insert the 'width="..."' after each '<td' as shown below). You can adjust these percentages if you wish to adjust the width of the left and right columns where product options are displayed:

<!-- BEGIN: repeat_extended_options -->
<tr valign="top">
<td width="20%" style="padding: 1.5em 5px 0 0;"><strong>{VAL_OPTS_NAME}:</strong></td>
<td width="80%" style="padding: 1.5em 0 0 0;">

Cheer.

[Chris]

For anyone else experiencing this same problem, it can be fixed with the following changes.

EDIT within styleTemplates/content/viewProd.tpl

FIND this block (or something similar... look for BEGIN: repeat_extended_options):

<!-- BEGIN: repeat_extended_options -->
<tr valign="top">
<td style="padding: 1.5em 5px 0 0;"><strong>{VAL_OPTS_NAME}:</strong></td>
<td style="padding: 1.5em 0 0 0;">

REPLACE with the following block (or just insert the 'width="..."' after each '<td' as shown below). You can adjust these percentages if you wish to adjust the width of the left and right columns where product options are displayed:

<!-- BEGIN: repeat_extended_options -->
<tr valign="top">
<td width="20%" style="padding: 1.5em 5px 0 0;"><strong>{VAL_OPTS_NAME}:</strong></td>
<td width="80%" style="padding: 1.5em 0 0 0;">

Cheer.

Thank You for your help with that

[estelle]

New features have been added to the most recent version of this mod (released earlier this year).

The display of visual options has been dramatically improved by adding javascript and CSS styles.

1. When a visual option is selected it will be highlighted - the background colour and border colour will change to make it really obvious which option is selected.
2. Also customers do not have to click precisely on the radio button (which is a tiny target), now they can click anywhere within the image.

[Fuzquia]

As the 'wightcanvas' example is no longer live, from reading this post I thought this solution would change the box size of the visual options as they do not fit when the horizontal option is selected (i.e. still run vertical). However this solution only seems to centre the visual option boxes for me (i.e. change the white space left/right) which is not what I am looking for.

So I think 'well that didn't work, so just delete the width="..."part again and it will be back to the original'. How wrong was I??? Even though the viewprod.tpl code 'looks' exactly like the original, my page for the product I tested is completely messed up? Simply by deleting the width="..." text? So I have had to add the width="..." part back in to at least get my page looking normal again!

Anyone have any experience of this? I just want to reduce the size of the visual product option box to fit horizontally when the horizontal option is selected? It seems a bit silly to have a horizontal product option if they still run vertically? So I am presuming I have done something wrong!

Any help would be appreciated, thanks

[Fuzquia]

ok so I have changed the dimensions of the visual option boxes and they still appear vertical instead of horizontal.

Does anyone know how to make the options appear side by side? i.e. horizontal as per estelles example in the first post? Just to re-cap, the visual option settings are set to horizontal already but they still appear one under the other i.e. vertical.

Any help would be greatly appreciated. Thank you.

[estelle]

@Fuzquia - Are you sure the changes have been applied to your layout.css file (or style.css file)? Sorry for the late reply, as explained in my signature I am unable to visit these forums very often. Please contact me using the link in my signature if you need any further help with this mod.