Product Personalization Extension for Magento...Product Personalization extension allows you to...

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


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.


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.


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.


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.


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.


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.


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.


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.


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.


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>



</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.


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


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>


</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>


</user_name>

Optionally, if you’d like this form field to be required, add the required option to the

“user_name” node:

<user_name>




</user_name>


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>




</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.


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>


</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>



</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>


</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>




</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.

We recommend that you try out the various themes available for the calendar, and see

which one fits your Magento theme best.


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


<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>


</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>


</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>



</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>




</select_example>


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.


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


<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>


</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>


</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>



</select_example>

To make this form field to required, add the required option to the file_example node:

<file_example>





</select_example>

If you need to add further explanation of the particular personalization option, we

recommend that you add a comment option:

<file_example>





<comment><![CDATA[ <p>Allowed file types: png, gif, jpg, jpeg, eps, ai, pdf. Not all browsers

support all these formats!</p> ]]></comment>

</file_example>


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


<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>


</ 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>


</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>


</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>



</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.


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.


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).


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 .

Product Personalization Extension for Magento...Product Personalization extension allows you to...

Documents

Transcript of Product Personalization Extension for Magento...Product Personalization extension allows you to...