Interactive personalization theme

28/07/2011

Interactive personalization on a web-to-print product gives users an option of using a “point and click” method during personalization. It can be enabled using our zpadvancedtheme for that product or for the entire site.

Interactive personalization is a convenient way of editing a web-to-print preview image, but sometimes it is easier to fill in a form. You may want to enable this in-preview editing for all products on the site or only some.

InPreview feature is available in web-to-print extension starting Version 1.9.1 beta 14.

Interactive web-to-print per-product

Lets activate the interactive personalization feature on a web-to-print product. Navigate to the product information page in Magento admin panel (Top menu / Catalog / Manage Products / Product name) and click on Design tab. From the Custom Design drop-down menu, select zpadvancedtheme and save your changes.

Magento web-to-print image fields

This will activate the interactive personalization feature for that product. Users will be able to click on a variable web-to-print area and use a pop-up form to personalize it.

Site-wide interactive web-to-print

All products in a web-to-print store can have interactive personalization set by default. Instead of assigning it separately for each product as explained above, you can do so on a global level. Navigate to System / Configuration / Design tab / Themes in Magento Admin panel and set zpadvancedtheme in the Layout field.

Magento zpadvancedtheme global activation

Overlapping fields

Magento web-to-print overlapping fields

Overlapping fields (Ex. Text on top of a background image) show together in the same pop-up form, but as separate tabs.

This means that if you layer variable fields to overlap in the template file, clicking on the area they cover will bring up all of the fields in that area represented by a separate tab.

Custom themes

The interactive personalization can be activated on a custom theme as well.

Lets say you’re using one of the HelloThemes for your web-to-print store. If you follow the method explained above and assign zpadvancedtheme as the theme for the product, the HelloTheme will get overwritten and the product page will have that blue default Magento look. To avoid this, instead of setting zpadvancedtheme as the custom design theme, paste the following code in the Custom Layout Update field:

1
2
3
4
<reference name="head">
<action method="addItem"><type>skin_js</type><name>js/zp-in-preview-edit.js</name></action>
<action method="addItem"><type>skin_css</type><name>css/zp-in-preview-edit.css</name></action>>
</reference>

This update can be done to every template individually or you can use bulk attribute update to apply it all products in 1 go. You can also assign the interactive personalization XML update at a category level.

CSS changes

The default style of the image and text fields that customers encounter during the interactive personalization process can be customized using CSS. To change the looks of the different components involved, edit zp-in-preview-edit.css file located in skin/frontend/base/default/css folder of your Magento installation.

Highlighting shapes are represented by .zetaprints-field-shape css class, while the pop-up forms can be stylized using classes with “fieldbox” prefix.

See also: