Creating a Product Page

On the product page we output the following product-related data:

• Product name
• Product description
• Product images
• Product price
• Grouped products
• Product attributes
• Product options
• Extra options
• List of related products
• Bundle items
• Add To Cart button

Anatomy of a product page

The image below displays a typical anatomy of a product page. The styling and positions of the page element are illustrated. In LemonStand we do not apply any templates or restrictions on the page design you create.

Due to a significant amount of information and corresponding complexity of the page, we divided the product page chapter onto several subchapters, each describing a single task.

Creating a product page

Start with creating a new page and select a suitable template. Assign some title to the page. The page title for the product page is overridden by a specific product name, so you can use a common name like “product” for the product page. Assign a page URL. If products on your website have URLs like /product/red_hat, the URL for you page will be /product.

Click the Action tab and select the shop:product action in the drop-down menu. The shop:product action loads a specific product into the $product variable, which is an instance of the Shop_Product class. To identify a product, it uses its URL name, specified in a current page URL. Also the shop:product action handles the product related actions, like adding a product to the shopping cart.

A value of the $product variable can be null if the requested product was not found. Always check the variable value before displaying the product page.

The shop:product action also creates the $product_unavailable whose value is TRUE if the requested product is disabled or out of stock. Check the value of this variable before displaying the product page:

<? if ($product_unavailable): ?>
  <h2>We are sorry, product unavailable.</h2>
<? elseif(!$product): ?>
  <h2>We are sorry, product not found.</h2>
<? else: ?>
  ... your normal product page ...
<? endif ?>

{% if product_unavailable %}
  <h2>We are sorry, product unavailable.</h2>
{% elseif not product %} ?>
  <h2>We are sorry, product not found.</h2>
{% else %}
  ... your normal product page ...
{% endif %}

Displaying a product name, description, images, price and Add To Cart button

As the $product variable is already loaded by the shop:product action you only need to output specific fields of this variable to the page. The following code outputs a product name, images, description, price and Add To Cart button.

<?= open_form() ?>
  <h2><?= $product->name ?></h2>
  
  <?= flash_message() ?>

  <? foreach ($product->images as $image): ?>
    <img src="<?= $image->getThumbnailPath(100, 100) ?>"/>
  <? endforeach ?>
  
  <?= $product->description ?>
  <p>Price: <?= format_currency($product->price()) ?></p>
  
  <input type="submit" name="add_to_cart" value="Add to cart"/>
</form>

{{ open_form() }}
  <h2>{{ product.name }}</h2>
  
  {{ flash_message() }}

  {% for image in product.images %}
    <img src="{{ image.getThumbnailPath(100, 100) }}"/>
  {% endfor %}
  
  {{ product.description|unescape }}
  <p>Price: {{ product.price()|currency }}</p>
  
  <input type="submit" name="add_to_cart" value="Add to cart"/>
</form>

The first line in the code snippet outputs the FORM tag. Please refer to the open_form function reference for details. The FORM element is needed as we are going to have buttons and drop-down menus on the product page.

The flash_message function outputs a message which could be set by LemonStand in response to some action. For example, when a visitor clicks the Add To Cart button. Refer to the flash_message function API documentation page for details.

Image collection is contained in the $images field. Each element in the collection is an object of the Db_File class, which has a method getThumbnailPath(). This method generates a thumbnail with specific size and returns its URL. In our example, we generated an image with width and height not greater than 100 pixels. Please see the Db_File API documentation page for details.

To fetch a current product class we use the price() method of the product object. Always use this method instead of using the direct access method to determine the price property, as different factors (discounts, for example) could affect a product price. The format_currency function is used to format the product price according to the currency settings.

The Add To Cart button must have a fixed name - “add_to_cart”, otherwise LemonStand will not be able to process the button click.

Displaying the product sale price

If the product is on sale, i.e. if there are catalog price rules, which affect the product price, defined in the Discount Engine, you can display the product sale price. There are two methods defined in Shop_Product class, which you can use to determine whether a product is discounted and to get its sale price: is_on_sale() and get_sale_price(). You can use the following code to display the product sale price:

Price: <?= format_currency($product->price()) ?>
  
<? if ($product->is_on_sale()): ?>
    Sale price: <?= format_currency($product->get_sale_price(1)) ?>
<? endif ?>

Price: {{ product.price()|currency }}
  
{% if product.is_on_sale()  %}
    Sale price: {{ product.get_sale_price(1)|currency }}
<? endif ?>

Displaying the number of items in stock and the expected product availability date

If you track inventory in your store, you can use the following code for displaying a number of items in stock, the "Product is temporary unavailable" message and the expected date of the product availability.

<? if ($product->track_inventory && $product->in_stock > 0): ?>
    <p>Number of items in stock: <strong><?= $product->in_stock ?></strong></p>
<? endif ?>

<? if ($product->is_out_of_stock()): ?>
    <p>
        <strong>This product is temporarily unavailable</strong>
        <? if ($product->expected_availability_date): ?>  
            <br/>The expected availability date is <strong><?= $product->displayField('expected_availability_date') ?></strong>
        <? endif ?>
    </p>
<? endif ?>

{% if product.track_inventory and product.in_stock > 0 %}
  <p>Number of items in stock: <strong>{{ product.in_stock }}</strong></p>
{% endif %}

{% if product.is_out_of_stock() %}
    <p>
      <strong>This product is temporarily unavailable</strong>
      {% if product.expected_availability_date %}
          <br/>The expected availability date is <strong>{{ product.displayField('expected_availability_date') }}</strong>
      {% endif %}
    </p>
{% endif %}

Continue:

See also:

• Shop_Product class
• Db_File class

Next: Creating a Product RSS Feed
Previous: Displaying a List of Products
Return to Products