Magento Custom Options

1
Dynamic Product Options for Magento
CMS and e-Commerce Solutions
User Guide version 1.0 created by
IToris IToris
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
2
CMS and e-Commerce Solutions Table of
contents 1. Introduction ........................
..................................................
..................................................
...3 1.1. Purpose.................................
..................................................
.............................................3 2.
Installation and License.......................
..................................................
.....................................3 2.1. System
Requirements ...................................
..................................................
.....................3 2.2. Installation..........
..................................................
..................................................
.............3 2.3. License .....................
..................................................
..................................................
.......3
3.
How to Use .......................................
..................................................
.......................................4
3.1. 3.2.
Activation........................................
..................................................
..................................4 Template
..................................................
..................................................
.........................4
3.2.1. Template Creation ........................
..................................................
..............................4 3.2.2. Loading
Existing Template.................................
..................................................
........7 3.2.3. Editing/Updating Existing
Template .........................................
....................................7 3.3. Product
Options Creation .............................
..................................................
....................8 3.3.1. Pre-loading from
Template .........................................
..................................................
8 3.3.2. Creating from Scratch...................
..................................................
..............................8
3.4. 3.5.
Product Options Settings.......................
..................................................
.............................9 Product Options
Configuration ....................................
..................................................
......9
3.5.1. General Settings .........................
..................................................
..............................10 3.5.1.1. Conditio
nal Branching...................................
..................................................
................... 10 3.5.2. Input Box
..................................................
..................................................
...............12 3.5.3. Text Area
..................................................
..................................................
...............13 3.5.4. File ...................
..................................................
..................................................
......13 3.5.5. Drop Down........................
..................................................
.......................................14 3.5.6. R
adio Buttons.....................................
..................................................
......................14 3.5.7. Checkboxes
..................................................
..................................................
............15 3.5.8. Multiple Select
..................................................
..................................................
.......16 3.5.9. Date.............................
..................................................
.............................................16 3.
5.10. Date and Time............................
..................................................
...........................17 3.5.11. Time
..................................................
..................................................
...................17 3.5.12. Image...............
..................................................
..................................................
...17 3.5.13. DIV/HTML Text......................
..................................................
.............................18 3.6. Configurable
and Bundle Products.............................
..................................................
......18
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
3

• CMS and e-Commerce Solutions
• Introduction
• Purpose
• This document is a User Guide for Dynamic Product
  Options module for Magento. It describes how work
  with the extension.
• This module is a replacement of standard Magento
  custom options.
• It allows creating any type/style of options for
  products, both simple and complex ones. There is
  a WYSIWYG editor for creating and managing the
  options in minutes.
• There are several ways the options can be
  organized and appear on product pages - in a
  column, in several columns, with the default
  appearance or in a modal window.
• Installation and License
• System Requirements
• The extension works under Magento from 1.4.x and
  higher.
• The extension works with Apache 1.3.x and higher,
  PHP 5, Linux or IIS.
• The extensions correct work is guaranteed with
  the following browsers
• IE7

Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
4

• CMS and e-Commerce Solutions
• Multi-host license provides ability to install
  the module to an unlimited number of hosts. It is
  100 open- sourced and is installed as an
  archive.
• You can switch the license from one website to
  another login to http//www.itoris.com using
  the credentials you will receive after the
  purchase. Go to My Downloads area, find your key
  there and reset it from the current website.
  Then use it again to activate another website.
• All licenses also include free life-time updates
  for the extension.
• How to Use
• Activation
• To enable the module select System gtIToris
  extensions gt Dynamic Product Options

• Extension Enabled - this setting activates the
  module
• There is ability to activate/deactivate the
  module for selected stores/storeviews (use Choose
  Store View drop- down).
• Template
• In case the same or similar set of options should
  be applied to several products - you can create
  an options template.
• It can be created separately or inside a product.
  After that it can be uploaded to the appropriate
  products and adjusted for them individually.
• Template Creation
• To create a template separately select Catalog
  gtProduct Options Templates

There all your created templates are kept. You
can create new ones or edit existing ones.
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
5
CMS and e-Commerce Solutions To create a new
template press Add New Template button. To edit a
template select it. The following settings are
available

• Name
• This name will be used for inner purposes only,
  for you to find templates easily
• Form Style
• There are 3 styles available
• List DIV/based - simple structure. Options go one
  under another
• Table-based - table structure. Options can go in
  several rows
• Table-based with sections - table structure. Plus
  options divided into sections, each having its
  own options table and title.
• Appearance
• On Product View - the options will be displayed
  on the product pages, below the main product
  details (similar to Magentos options display)
• In a Popup after clicking Add to Cart- options
  will be displayed in a modal window when the
  product is added to the cart
• In a Popup after clicking Configure - there
  will be a button Configure on products pages.
  Pressing it will open up options in a modal
  window

Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
6
CMS and e-Commerce Solutions

• Options Configuration
• Add New Section - this button will be available
  only when Form Style Table-based with Sections.
  It adds a new section with options
• Section Label - sections name that will be
  visible to the customers
• Columns/Rows - how many columns and rows there
  will be for options. Available only for Form
  Style
• Table-based and Form Style Table-based with
  Sections
• Remove All - removes all created sections and
  their options
• CSS Adjustments (for advanced use only)
• This area is to adjust the options CSS.
• After the template has been created - press Save
  or Save and Continue Edit button. Now the
  template can be used in the products.

Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
7
CMS and e-Commerce Solutions 3.2.2.Loading
Existing Template To load a template open the
product that needs the templates options to be
added. Select the tab Custom Options
There is a section Product Options Templates.
Here you can upload an existing template or
create a new one. To upload an existing template
select it from the list of available templates
and press Load button.
The template with all its created options will be
uploaded. The options will appear on the same
page below. 3.2.3. Editing/Updating Existing
Template There is ability to edit an existing
template directly in templates area or from a
product page. To edit a template in templates
area select Catalog gtProduct Options
Templates Choose a template and click it. It will
be opened for editing. To update a template from
a product page create/edit all the options you
need on a product. Then Select a templates name
in Create or Update Existing Template drop-down
and press Update button. The template will be
changed to have the current products options.
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
8
CMS and e-Commerce Solutions

• Product Options Creation
• There are two ways you can create options for a
  product - either create a template first and then
  upload the template to a product, so that all
  the templates options appear as product options,
  or create the options for a product from
  scratch.
• If a product has unique options - then creating
  them from scratch directly on the product page
  would work better. If you have the same or
  similar options shared between several products -
  creating a template with these options and
  uploading it would fasten the job.
• Pre-loading from Template
• To pre-load options from an existing template
  open a product Catalog -gt Manage Products -gt
  product
• On the product page select Custom Options tab.
• Select the template to be loaded in Load Existing
  Template drop-down. The templates options will
  be populated on the page below.

Now you can modify the products options the way
you need or leave them unchanged and save the
product. 3.3.2.Creating from Scratch Products
options can be created from scratch in Options
Configuration area. Here you have a table that
you can modify on the fly.
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
9
CMS and e-Commerce Solutions
By default there is one section that has a table
with 3 columns and 3 rows. You can add more
sections by pressing Add New Section
button. Each section will have its own table
with a set of options. Section Label - this is
the sections title your customers will
see. There are 2 drop-downs under each section -
Columns and Rows. Re-select the number of columns
and/or rows for the table there. To create a
new option put your mouse in a cell of the table.
You will see Edit icon. Click it to see the
available options configuration.

• To remove all products options and sections
  press Remove All button.
• 3.4. Product Options Settings
• Set how the options should be displayed on the
  products page in Product Options Settings area.
  The settings are the same as in templates
  creation
• Form Style
• There are 3 styles available
• List DIV/based - simple structure. Options go one
  under another
• Table-based - table structure. Options can go in
  several rows
• Table-based with sections - table structure. Plus
  options divided into sections, each having its
  own options table and title.
• Appearance
• On Product View - the options will be displayed
  on the product pages, below the main product
  details (similar to Magentos options display)
• In a Popup after clicking Add to Cart- options
  will be displayed in a modal window when the
  product is added to the cart
• In a Popup after clicking Configure - there
  will be a button Configure on products pages.
  Pressing it will open up options in a modal
  window
• 3.5. Product Options Configuration
• Each option can be configured - you can select
  its type (input box, drop-down, etc.), validation
  and properties. Each option type has its own
  number of settings - some shared between all
  types and some are unique.

Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
10
CMS and e-Commerce Solutions When you press Edit
icon for options - there appears a new window
with options setting. Select the type in the
top right drop down and the options properties
will change accordingly.

• 3.5.1.General Settings
• All options share a number of settings while the
  rest are unique for each of them.
• Title - this is the options name/label your
  customers will see. For example, Please select
• Field ID - this ID is for information purposes
  and for CSS.
• Required - select if the option is required or
  not
• Price - if the options selection implies
  increased price, then set it here the same as in
  default Magento
• Price Type - select if the additional charge
  should be fixed (amount) or percentage from the
  default price
• SKU - enter the options SKU if needed
• Visibility, Make it - this setting is for
  conditional branching. You can make the field
  visible by default and make it invisible if a
  condition is met (and create the condition), or
  vs.
• Customer Group - options can be set to be
  available for select customer groups only. For
  example, you want additional information to be
  entered by wholesale customers only. Select which
  customer group(s) will see the option.
• Comment - this text will appear under the field
  (for example The format is XXXXX)
• CSS Class - advanced users only
• HTML Argument - advanced users only
• Buttons - Apply adds the option to the product.
  Cancel - closes the window without
  adding/changing the option. Remove - removes the
  option.

3.5.1.1. Conditional Branching There is ability
to create conditional branching for the options -
make options behavior depend on what has been
selected previously. Each option provides this
ability with Visibility, Make it and If
settings. For example, you have a radio button
Have you ever tried these products? with
options Yes/No. When Yes option is selected -
there appears a drop-down Please select the
product you have tried. If No is selected -
this drop-down is not visible. To create this
functionality first add the radio button.
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
11
CMS and e-Commerce Solutions
Then add the drop-down.
Set Visibility hidden, Make it visible. If -
press the icon near the field to create a
condition.
Select that the radio button should be Yes.
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
12
CMS and e-Commerce Solutions
Save the changes. Now on the front-end there will
be the following
By default the drop-down is not displayed. When
Yes is selected - it becomes visible
3.5.2.Input Box To create an input box select
Input Box from the top right drop-down. The
following additional settings will be available
(for general settings please see this chapter)
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
13
CMS and e-Commerce Solutions

• Validation - what type of data should this field
  contain. There are several pre-created validators
• Email
• Number
• Money
• Phone
• Date
• Zip
• Max Len - how many symbols are allowed to be
  entered maximum
• Default Value - the text to be displayed in the
  field by default, for example Please enter your
  name
• Hide on focus - the default text will disappear
  as soon as the field is on focus when this
  checkbox is checked.
• 3.5.3.Text Area
• To create a text area select Text Area from the
  top right drop-down. The following additional
  settings will be available (for general settings
  please see this chapter)

• Default Value - the text to be displayed in the
  field by default, for example Please enter your
  name
• Hide on focus - the default text will disappear
  as soon as the field is on focus when this
  checkbox is checked.
• 3.5.4.File
• To allow your customers uploading file select
  File from the top right drop-down. The following
  additional settings will be available (for
  general settings please see this chapter)

Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
14
CMS and e-Commerce Solutions

• Allowed File Extension - which types of files are
  allowed for uploading. Add all allowed comma-
  separated (png, jpeg, etc.)
• Maximum Image Size - if images are planned to be
  uploaded, you can set the maximum width and
  height of the images in px.
• 3.5.5.Drop Down
• To add a drop-down to the options select Dropdown
  from the top right drop-down. The following
  additional settings will be available (for
  general settings please see this chapter)

• Options - the selection of the options the
  drop-down will have

Each option will have the following settings
separately Title - options name
o o o o o
Price - this is the additional charge to be set
when this drop-downs option is selected Price
Type - type of the charge (fixed/percent) SKU -
SKU for this drop-down option Def - if the option
is shown (selected) in the drop-down by
default Visibility, Make it If - ability to
create conditional branching, so that the option
is displayed
o
or not depending on the selected conditions
o o o
User Group - the drop-down option will be visible
for selected customer group(s) only CSS Class -
for advanced users only Add Option - adds one
more option
3.5.6.Radio Buttons
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
15
CMS and e-Commerce Solutions To add a set of
radio buttons to the options select Radio Buttons
from the top right drop-down. The following
additional settings will be available (for
general settings please see this chapter)

• Options - the selection of the radio buttons will
  have

o o o o o o
Title - the text will be displayed near the radio
button Upload Image - if you prefer custom look
of the radio buttons - you can upload their
image(s) Price - this is the additional charge to
be set when this radio button is selected Price
Type - type of the charge (fixed/percent) SKU -
SKU for this radio button Def - if this radio
button should be defaulted Visibility, Make it,
If - ability to create conditional branching, so
that the radio button is
o
displayed or not depending on the selected
conditions
o o
User Groups- the radio button will be visible for
selected customer group(s) only Carriage Returns
- this setting allows organizing radio buttons in
rows. If you want them to go
in one line, do not check it. If you for example
want them to go in rows, two radio buttons in
each, check every second setting o CSS Class-
for advanced users only o Add Option - adds one
more radio button 3.5.7.Checkboxes To add check
boxes to the options select Check Boxes from the
top right drop-down. The following additional
settings will be available (for general settings
please see this chapter)

• Options - the checkbox(es) will have
• Title - the text will be displayed near the
  checkbox
• Upload Image - if you prefer custom look of the
  check box(es) - you can upload their image(s)
• Price - this is the additional charge to be set
  when this checkbox is checked
• Price Type - type of the charge (fixed/percent)
• SKU - SKU for this checkbox

Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
16
CMS and e-Commerce Solutions
o
Def - if this checkbox should be checked by
default Visibility, Make it, If - ability to
create conditional branching, so that the
checkbox is displayed
o
or not depending on the selected conditions
o
User Groups- the checkbox will be visible for
selected customer group(s) only Carriage Returns
- this setting allows organizing checkboxes in
rows. If you want them to go in
o
one line, do not check it. If you for example
want them to go in rows, two checkboxes in each,
check every second setting o CSS Class- for
advanced users only o Add Option - adds one more
checkbox 3.5.8.Multiple Select To add a
multi-select to the options select Multiple
Select from the top right drop-down. The
following additional settings will be available
(for general settings please see this chapter)

• Options - the selection of the options the
  multi-select will have Each option will have the
  following settings separately

o o o o o
Title - name of the options in the
multi-select Price - this is the additional
charge to be set when this option is
selected Price Type - type of the charge
(fixed/percent) SKU - SKU for this drop-down
option Def - if the option is shown (selected) in
the multi-select by default Visibility, Make it
If - ability to create conditional branching, so
that the option is displayed
o
or not depending on the selected conditions
o o o
User Group - the multi-selects option will be
visible for selected customer group(s) only CSS
Class - for advanced users only Add Option -
adds one more option
3.5.9.Date To add a date selection option to the
options select Date from the top right drop-down.
For general settings please see this chapter.
This option adds an input box and date selector
(calendar).
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
17
CMS and e-Commerce Solutions
3.5.10. Date and Time To add a date and time
selection option to the options select Date
Time from the top right drop-down. For general
settings please see this chapter. This option
adds an input box and date and time selector
(calendar).
3.5.11. Time To add time selection option to the
options select Time from the top right drop-down.
For general settings please see this chapter.
This option adds an input box and time selector
(calendar).
3.5.12. Image You can add an image to the
options with this setting. The following
additional settings will be available (for
general settings please see this chapter)
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
18
CMS and e-Commerce Solutions

• Upload Image - select the image to be uploaded
• Image Alt
• Image Title
• 3.5.13. DIV/HTML Text
• With this element you can embed a video to the
  options, or insert a tracking code, etc. Its main
  area allows inserting raw HTML.

3.6. Configurable and Bundle Products The module
adds new features to configurable and bundle
products as well. First of all, you can change
the appearance of the selections for
configurable/bundle products to be displayed in
a modal window
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com
19
CMS and e-Commerce Solutions
Plus, you can add custom options to
bundle/configurable products, that will go below
their configurations selection
Please note - in case a bundle product has a
dynamic price - custom options cannot be added to
it.
Please, visit us at http//www.itoris.com or
contact directly by email sales_at_itoris.com