Product
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
1. Overview
1.1
General information
Product Personalization extensionallows 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
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
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
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
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.
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.
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.
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>
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>
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>
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>
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>
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.
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>
On the product detail page, it looks like this:
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>
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>
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
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.
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/
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.
