Custom theme: two-step

25/10/2010

Products with personalization can be sold in one step or two step process.

  • One step: all the options, including the personalization form appear on the same page.
  • Two step: the user chooses options and then proceeds to the personalization form.

Normal products have a one step process: the product details page contains all the product options and the user adds it to cart on the same page.

The two step process uses additional functions from ZetaPrints extension. This document explains how the theme should be constructed.

Two step process overview

Both steps (options, personalization) use the same page. The code in the theme must make a choice which part of the page to show, depending on the context. Also, the second step should capture and retain all the parameters submitted from the first step.

Implementation steps

  1. Redirect Add to cart request to product details page
  2. Capture parameters submitted from step 1 in step 2
  3. Choose if to show step 1 (options) or step 2 (personalization) form
  4. Include params from step 1 into Add to cart request at step 2

Functions

  • function is_personalization_step ($context) – Returns true if a request to a page contains personalization parameter.
  • function get_params_from_previous_step ($context) – Returns list of <input> tags for params from step 1. All params are taken from a request to a page.
  • function get_next_step_url ($context) – Returns true if next step is step 2 (personalization) and prints url for the product with additional personalization param, otherwise it returns false.

Affected files

zp2steptheme/template/catalog/product/view.phtml

This file shows form for ordering on product page. This form contains product images, product name, product description, product price, etc.

Section 1: Checking for current step and printing link for a next step. For step 2 (personalization) the link is the product page url with additional personalization param. Otherwise it prints link for add to cart action if the next is not a personalization.

1
<?php if (!$this->helper('webtoprint/personalization-form')->get_next_step_url($this)) echo $this->getAddToCartUrl($_product) ?>

Section 2: Checking if the step is not step 2 (personalization) then show standard magento product page, otherwise it jumps into next section.

1
<?php if(!$this->helper('webtoprint/personalization-form')->is_personalization_step($this)): ?>

Section 3: Showing web-to-print personalization form if current step is step 2 (personalization).

Section 4: Checking if a product has web-to-print features then printing tabs component for switching pages in multipage templates.

1
<?php $this->helper('webtoprint/personalization-form')->get_page_tabs($this); ?>

Section 5: Printing list of input tags for params from step 1 (options).

1
<?php echo $this->helper('webtoprint/personalization-form')->get_params_from_previous_step($this); ?>

Section 6: Checking if Š° product has web-to-print features then printing text fields, stock images choosers, color pickers.

1
2
<?php $this->helper('webtoprint/personalization-form')->get_text_fields($this); ?>
<?php $this->helper('webtoprint/personalization-form')->get_image_fields($this); ?>

Section 7: Checking if a product has web-to-print features then printing Update preview button.

1
<?php $this->helper('webtoprint/personalization-form')->get_preview_button($this); ?>

Section 8: Checking if a product has web-to-print features then printingĀ  JavaScript code for web-to-print personalization form.

1
<?php $this->helper('webtoprint/personalization-form')->get_js($this); ?>

zp2steptheme/template/catalog/product/view/addtocart.phtml

This file shows “Add to cart” button, qty input fields and some other information.

Section 1: Checking if current step is step 1 (options) then show “Personalize” button, otherwise show “Add to cart” button.

1
<?php if(!$this->helper('webtoprint/personalization-form')->is_personalization_step($this)): ?>

Section 2: Printing “Add to cart” button if current step is step 2 (personalization).

zp2steptheme/template/catalog/product/view/media.phtml

This file shows product image, additional images and image zoomer on product page.

Section 1: Checking for personalization step and disabling image resizing for products with web-to-print feature.

1
2
3
4
if (!$this->helper('webtoprint/personalization-form')->is_personalization_step($this))
$this->helper('webtoprint/personalization-form')->get_preview_image($this);
else
echo $_helper->productAttribute($_product, $_img, 'image');

Application of 1- or 2-Step process

You can have 2 identical themes with the only difference in 1 or 2 step process. Choose the most commonly used theme as the default and enable the other theme for some products only.

See also: