How to Enable Customers to Customize Products

You can add custom controls to the product page which allow your visitors to customize products before adding them to the shopping cart. If you sell greeting cards you can allow customers to enter the card text before adding the card to the shopping cart.

The process of customizing products is very similar to the process of customizing the cart items, which we described in the previous article. But instead of adding custom controls to the cart page, you add controls to the product page. All other steps are similar. You need to use a custom module to extend the cart item and order item models. On the Product page you need to add your custom controls. If you used the our default store as the base for your store, you need to update the product_partial partial. For example, of you have the x_card_text custom field, you can define a corresponding text area with the following code:

<textarea name="item_data[x_card_data]"><?= h(post_array_item('item_data', 'x_card_data')) ?></textarea>

<textarea name="item_data[x_card_data]">{{ post_array_item('item_data', 'x_card_data') }}</textarea>  

Please note that the custom controls names should have the following format: item_data[x_field_name].The post_array_item() function allows you to preserve control values when the product form updates.

Validating data before adding products to the cart

You can validate custom data when the visitor clicks the Add to Cart button. Do to that you need to handle the shop:onBeforeAddToCart event in your new custom module. For example:

public function subscribeEvents()
{
  Backend::$events->addEvent('shop:onBeforeAddToCart', $this, 'before_add');
}

public function before_add($cart_name, $product, $quantity, $options, $extra_options, $custom_data)
{
  if ($product->sku == 'card')
  {
    if (!strlen($custom_data['x_card_text']))
        throw new Phpr_ApplicationException('Please enter the card text!');
  }
}

You can learn more about handling LemonStand events in this article.

Next: How to Support File Uploads on the Product Page
Previous: How to Allow Customers to Provide Item Specific Information
Return to Tips and Tricks