Product Personalization User manual
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> <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.
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>
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.
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>
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 <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>
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 <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>
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>
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.
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.