Product Personalization User manual
Product Personalization User manual
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
Table of contents
1. Overview 1.1 General information
1.2 Key features
1.3 About this manual
2. Installation 2.1 Disabling compiler and cache options
2.2 Check your current theme/package
2.3 Extracting the extension files
2.4 Upload files to web server
3. Admin Options
4. Form Options / Working with xml 4.1 Text input area (textarea) form element
4.2 Date Form Element
4.3 Select Box Form Element
4.4 File Form Element
4.5 Check Box Form Element
5. Personalization information in Sale Orders
6. Extension template files
7. More information
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
1. Overview
1.1 General information
Product Personalization extension allows you to create a simple customization with form
fields of your choice, and attach it to your products that support personalization option.
The customers then can enter personalization details, add the product to the shop cart and
continue shopping. Before proceeding to checkout, he will have the option to review the
personalization values that he entered just before he goes on with the checkout process.
After the checkout has been completed, you will see the personalization information he
entered in your Sale Orders section of your Magento administration.
1.2 Key features
Create a custom personalization form and attach it to the products on your
Magento store
Give your Customers the option to personalize the products they are purchasing
View personalized information in Sale Orders
Have the personalization info shown on product details page and/or checkout page
Optionally set the personalization fields as required
1.3 About this manual
This user manual is intended to be used as a step-by-step guide for installing and
configuring Product Personalization extension for Magento.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
2. Installation
The extension comes in a .zip file ready for extraction to your computer or web server.
2.1 Before extracting the files you should make sure that
compilation and caching options are disabled.
Compilation: Log in to your Magento admin panel and go to
System>Tools>Compilation. If the Compiler Status does not read "Disabled", click
the Disable button in the upper right corner.
Cache options: Go to System>Cache Management to view the current status of your
cache. To disable cache options click Select All on the left side, and from the drop-down
menu select Disable, then Submit.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
2.2 Check which package/theme your Magento website uses.
By default, Magento uses default package/theme structure unless you installed a custom
package/theme.
To check your current package/theme, go to System>Configuration and click Design on
the left-hand menu
If the Current Package Name is "default", you are using the default package. If it isn't,
please take a note of the package you are using.
On the same page, in the Themes box, you'll see the name of the theme your Magento
website is using. If the fields are blank, your current theme is default. If not, please take a
note of your current theme.
2.3 Extract the extension files to your local computer.
If your Magento website doesn't use the default package, browse the extension files,
navigate to /app/design/frontend/ folder of the extracted extension files, and rename the
default folder to your package name.
In case your Magento doesn’t use the default theme navigate to
/app/design/frontend/default or your package name/ folder and rename the default
folder to match the name of your theme.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
2.4 Upload extension files to Magento web server.
We recommend that you log out of administration and log back in when you install
extension to your Magento or you could be presented with 404 page when trying to save
the extension settings.
When the upload is completed, log in to your Magento administration. and go to
System>Configuration from your admin menu. On the left submenu of the configuration
page there should be the new tab labeled SMDesign Extensions Config and under it the
Product Customization Config. Please click on the Product Customization Config to access
the extension’s options.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
3. Admin Options
In the General options box you can select the following options:
Visible on product details page: This option, if set to Yes, will display the “Personalize”
button on your product details page (if the product personalization is allowed on that
particular product which will be covered later on ).
Show personalization page right before onepage checkout: This option inserts the
customization page between the shop cart and proceed to checkout steps
If you set both these options to No, “Personalize” button will not be shown on product
details page, and your customers will go straight to checkout from the shop cart page. It
would be as if the extension isn’t installed at all on your Magento.
In the Calendar Options box you can select the skin for the calendar pop up. The
calendar pop up appears on the Personalization form in case you decide to use the
date values for the product personalization.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
You can additionally enable or disable the personalization on each individual product
on your Magento by setting the “Product needs to be personalized” option on each
product to Yes/No.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
You can set the “Personalize” button and block to appear on the product details page.
You can later customize the actual personalization form, as well as the html block and
button to fit to your Magento theme, and to show the customized text. Alternatively, if
you are familiar with the Magento template system, you can change the position of the
“Personalize” html block on the product details page, to fit your Magento theme.
Product Personalization Button on product details page.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
The Product Personalization Form Page, if enabled, will list all the products in the shop cart
which have product personalization enabled, and allow the user to re-check/customize the
values they entered in the form one more time, before they proceed to checkout.
Product Personalization Form page between shop cart and checkout pages.
You can also set personalization options to be required, so the user has to enter them in
order to purchase the product.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
4. Form Options / Working with xml
Following Magento standards for developers, we’ve enabled you to create / customize the
personalization form fields using the Magento’s standard xml configuration documents. If
you are experienced with editing Magento’s layout or config files, you will most likely
recognize the format right away, and won’t have any issues creating your configuration
form. If not, that’s not a problem at all. Just go through this section of the tutorial and as it
explains everything there is to know about creating the personalization form.
The form configuration file can be found in:
/your magento root folder/app/code/community/SMDesign/ProductPersonalization/etc/
folder, and it’s the file named : product_personalization.xml
Please locate the product_personalization.xml file, and open it in your favorite editor. The
start of the file should look something like this (this is the much shorter version of the
config ) :
<?xml version="1.0"?>
<config>
<personalization>
<groups>
<general>
<label>Addiconal information</label>
<frontend_type>text</frontend_type>
<sort_order>10</sort_order>
<fields>
<personal_information>
<label>Personal Information </label>
<frontend_type>textarea</frontend_type>
<required>true</required>
</personal_information>
</fields>
</general>
</groups>
</personalization>
</config>
The important node is the <fields> node , as this is where you need to enter/configure the
form field elements that you want to have on your personalization form. On the example
code above, there’s only one form element defined, and it’s the textarea element named
personal_information and labeled Personal information.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
As an example, here’s how the personalization form with the config above would look
like on the product details page:
And here’s the config code for that element in the form:
<personal_information>
<label>Personal Information </label>
<frontend_type>textarea</frontend_type>
<required>true</required>
</personal_information>
By changing the values in the code, you can change the label, and the type of the element
in the form. You can also set the order of the elements and the “required” option on certain
elements.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
4.1 Text input area form element
To add the textarea (text input area) element to the form you need to create a new
node and add it to the <fields> node of the configuration file, with the
<frontend_type>textarea</frontend_type>
To open a node for the new element, decide how you’d like that element to be called…
For example, if you want the user to enter its name in the personalization form field.
you could name that form element “ user_name”:
<user_name>
*** the rest of the code will go here ***
</user_name>
After you’ve created a node for “user_name”, you can add its label and form element type.
To have the “user_name” textarea form element, you would need to add the
<frontend_type>textarea</frontend_type> in the “user_name” node:
<user_name>
<frontend_type>textarea</frontend_type>
</user_name>
If you would like to have the label explaining the user what to enter, you should add the
label to the “user_name” node:
<user_name>
<label>User Name </label>
<frontend_type>textarea</frontend_type>
</user_name>
Optionally, if you’d like this form field to be required, add the required option to the
“user_name” node:
<user_name>
<label>User Name </label>
<frontend_type>textarea</frontend_type>
<required>true</required>
</user_name>
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
The whole config file would look like this:
<?xml version="1.0"?>
<config>
<personalization>
<groups>
<general>
<label>Additional information</label>
<frontend_type>text</frontend_type>
<sort_order>10</sort_order>
<fields>
<user_name>
<label>User Name </label>
<frontend_type>textarea</frontend_type>
<required>true</required>
</user_name>
</fields>
</general>
</groups>
<personalization>
<config>
And on the Product details page it would look like this:
As you can see, you can customize the textarea filed of the “Personalize Form” to your
liking, including the label text, the name of the field and the option for the field to be
required. You can also add multiple textarea fields to the form (please make sure that
the names are different) and change the position of the form fields by editing the
config file.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
4.2 Date Form Element
To add the date element to the form you need to create a new node and add it to the
<fields> node of the configuration file, with the
<frontend_type>text</frontend_type> and:
<frontend_model>product_personalization/system_config_date</frontend_model>
To open a node for the new element, decide on its name first. For example, if you want
user to enter delivery date in the personalization form field, you could name that form
element “delivery_date”:
<delivery_date>
*** the rest of the code will go here ***
</delivery_date>
After you’ve created a node for “delivery_date”, you can add its label and form element
type. To have the “delivery_date” form element textarea, you would need to add the
<frontend_type>textarea</frontend_type> in the “delivery_date” node:
<delivery_date>
<frontend_type>textarea</frontend_type>
<frontend_model>product_personalization/system_config_date</frontend_model>
</delivery_date>
To explaining the user what he needs to enter, you need to add the label to the
“delivery_date” element:
<delivery_date>
<label>Delivery Date </label> <frontend_type>textarea</frontend_type>
<frontend_model>product_personalization/system_config_date</frontend_model>
</delivery_date>
And if you want this form field to be required, add the required option to the
“delivery_date” node:
<delivery_date>
<label>Delivery Date</label>
<frontend_type>textarea</frontend_type>
<frontend_model>product_personalization/system_config_date</frontend_model>
<required>true</required>
</delivery_date>
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
On product details page it looks like this:
The style/color of the pop up calendar can be set via Magento administration on Product
Personalization Config page.
We recommend that you try out the various themes available for the calendar, and see
which one fits your Magento theme best.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
4.3 Select Box Form Element
To add the select element to the form you need to create a new node and add it to the
<fields> node of the configuration file, with the
<frontend_type>select</frontend_type> and:
<source_model>adminhtml/system_config_source_yesno</source_model>
To open a node for the new element, decide on the name of the element. select_example.
<select_example>
*** the rest of the code will go here ***
</select_example>
After you’ve created a node for select_example, you can add it’s label and form element
type. To have the selext_example form element select box, you would need to add the
<frontend_type>select</frontend_type> in the selext_example node:
<select_example>
<frontend_type>select</frontend_type>
<source_model>adminhtml/system_config_source_yesno</source_model>
</select_example>
If you want to have the label explaining the user what to enter, you should add the label to
the select_example node:
<select_example>
<label>Example of the select box </label>
<frontend_type>select</frontend_type>
<source_model>adminhtml/system_config_source_yesno</source_model>
</select_example>
Optionally, if you can set this form field to be required by adding the required option to the
selext_example node:
<select_example>
<label>Here’s an example of the select box </label>
<frontend_type>select</frontend_type>
<source_model>adminhtml/system_config_source_yesno</source_model>
<required>true</required>
</select_example>
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
On the product detail page, it looks like this:
The code in the example will produce the simplest Yes/No select box values. We found
that this could be useful if you’d like to provide optional customization options to the
users.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
4.4 File Form Element
To add the file upload element to the form you need to create a new node and add it to the
<fields> node of the configuration file, with the
<frontend_type>file</frontend_type> and:
<allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types>
To open a node for the new element, decide how you’d like that element to be called. In
this example we will call it file_example.
<file_example>
*** the rest of the code will go here ***
</file_example>
After you’ve created a node for file_example, you can add its label and form element type.
To have the file_example form element select box, you would need to add the
<frontend_type>file</frontend_type> in the file_example node:
<file_example>
<frontend_type>file</frontend_type>
<allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types>
</file_example>
To add the label that will explain the user what he needs to enter, you should add the label
to the file_example node:
<file_example>
<label>Please upload a file </label>
<frontend_type>file</frontend_type>
<allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types>
</select_example>
To make this form field to required, add the required option to the file_example node:
<file_example>
<label>Please upload a file </label>
<frontend_type>file</frontend_type>
<allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types>
<required>true</required>
</select_example>
If you need to add further explanation of the particular personalization option, we
recommend that you add a comment option:
<file_example>
<label>Please upload a file </label>
<frontend_type>file</frontend_type>
<allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types>
<required>true</required>
<comment><![CDATA[ <p>Allowed file types: png, gif, jpg, jpeg, eps, ai, pdf. Not all browsers
support all these formats!</p> ]]></comment>
</file_example>
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
The end result on the product page:
4.5 Check Box Form Element
To add the check box element to the form you need to create a new node and add it to the
<fields> node of the configuration file, with the
<frontend_type>checkbox</frontend_type>
To open a node for the new element, decide how you’d like that element to be called, in
this example we will call it checkbox_example.
<checkbox_example>
*** the rest of the code will go here ***
</ checkbox _example>
After you’ve created a node for checkbox_example, you can add the label and form
element type. To have the checkbox_example form element check box, you would need to
add the <frontend_type>checkbox</frontend_type> in the checkbox_example node:
<checkbox_example>
<frontend_type>checkbox</frontend_type>
</checkbox_example>
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
To add the label explaining the user what he needs to enter, add the label to the
checkbox_example node:
<checkbox_example>
<label> Example of the check box </label>
<frontend_type>checkbox</frontend_type>
</checkbox_example>
And optionally, to make this form field required, add the required option to the
checkbox_example node:
<checkbox_example>
<label>Example of the check box </label>
<frontend_type>checkbox</frontend_type>
<required>true</required>
</checkbox_example>
It would produce this:
There is no limit to the number of form elements, or the number of form element type
in a form. You can, for example have multiple text areas or multiple checkboxes
combined in one form. You can also combine elements and put them in any order you
want. You can set which elements are required (if any) and add comments and/or
labels to the form elements as you please and name the form elements however it fits
you best.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
5. Personalization information in Sale Orders
Here’s an example of the filled out form with multiple personalization form elements on a demo
configurable product:
Now we will go through with the checkout now, to show you how the product personalization options show up in your Magento administration.
Once the checkout has been completed and the order is placed, please log in to your Magento
administration and select Sales>Orders from the admin menu.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
On the orders page, locate the order that has products with the personalization
options and click on the view link to view the order. You’ll notice the “Product
Personalization” tab. Click on that tab and you will be able to see the values that the
customer entered in the Personalization form.
6. Extension template files
Though the extension has multiple template and layout files, there are two template files
that you might want to locate and customize to fit your magento theme.
The first one is the template that holds the personalization form on the product details
page, it’s called the wrapper.php and it can be found in :
/app/design/frontend/default/default/template/product_personalization/catalog/product/options/
folder. (Please remember to replace the /default/default/package/theme to your
package/theme name in case your Magento system is not using the default/default
package/theme structure).
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
If you open that template for editing, you can see the default text holder content, the
“Lorem ipsum… “ text placed in a paragraph. You can replace that text with the information
relevant to your Magento store, or you can simply remove the text.
7. More information
For more information about Product Personalization, or any other Magento extension by
ExtensionsMall, please visit our website: www.extensionsmall.com .