product

The product.twig view is used to display details about the product being viewed.

It also includes the product add to basket form which allows the page visitor to add the product to their basket.

Product details

The product.twig view has access to the product object to display details about the product being viewed.

Other objects are also available on the product.twig view in order to display different information about the product:

• Product reviews
• Product reward points
• Product questions & answers

The brand object can be used to display details about the brand that a product belongs to through the product.brand object.

Similarly, if tags are enabled on the account, you can use the tag object to display details about the tag the product belongs to through the product.tag object. You can read more about the different things that can be achieved with tags in this article.

Social media sharing buttons

The product.twig view has access to an automatic file which will display social media sharing icons using the code shown below.

{% include 'shopwired/share_buttons.twig' %}

Related products

The product.twig view has access to related products set for the current product being viewed, in order to display details about them. This is usually included through the items partial, e.g.

{% if product.related_products|length %}
    <div class="related-items">
        <h2>
            Related Products
        </h2>
        {% include 'partials/items.twig' with { 'items': product.related_products } %}
    </div>
{% endif %}

Soft add to basket

If the soft add to basket app is enabled on the account then adding the product to the basket will keep the user on the current page (instead of directing them through to the shopping basket page).

A modal window can be displayed showing the user the current items in the shopping basket.

This action can be detected using the {% if soft_add_button %} variable.

Product reviews

If enabled on the account, you can use the product reviews object to access reviews left on the product.

You can use the product reviews form to allow visitors to submit new reviews.

Errors

Including the code {{ theme.errors(errors) }} will output any errors that the platform responds with when the product form is submitted.

Including the code {{ theme.errors(review_errors) }} will output any errors that the platform responds with when the product reviews form is submitted.

The wishlist

Each product can be added to a visitor's wishlist.

A product is added to the wishlist by visiting a specific URL, i.e.

<a href="/wishlist?action=add&amp;product_id={{ product.id }}">ADD TO WISHLIST</a>

A product is removed from the wishlist by visiting a corresponding URL, i.e.

<a class="button wishlist" href="/wishlist?action=remove&amp;product_id={{ product.id }}">

The variable {% if product.in_wishlist %} will return true if a product is already in a visitor's wishlist.

Stock status

For a product that doesn't have variations (that have separate SKU codes and stock quantities set) a product can be detected as either in stock or out of stock when the product page loads.

The variable product.in_stock will return true if a product is in stock.

Active status

A product that has been marked as inactive is unable to be added to the shopping basket.

The variable product.can_be_added will return true if a product can be added to the basket (i.e. has not been marked as inactive).

Sale price

A product can have a normal price and a sale price (if set).

product.sale_price will return the sale price for a product.

product.price will return the normal price for a product.

It's usual to display the normal product price crossed out or minimised in some way if the product has a sale price, but not so if the product doesn't have a sale price.

Variations

If the product has variations (e.g. different sizes or colours), the selection of a variation combination (known as a variant) can change the information pertinent to the product:

• The product image assigned to the variant
• The price of the variant
• The SKU code of the variant
• The stock status of the variant (either in or out of stock)

To retrieve information about a specific variation, an AJAX (POST) request needs to be sent to the product URL, with get_info as 1 (or any other non empty value) and value (containing the selected values). The platform will return a JSON response with:

price (including currency)
salePrice (including currency)
hasSalePrice (returns either true or false depending on whether the product has a sale price)
sku
weight
canBeAdded (returns either true or false depending on whether the variation can be added to the basket)
rewardPoints (the number of reward points that will be earned if the variation is purchased)
photo (the number of the product image selected to represent this variation)
inStock (returns either true or false depending on whether the variation is in stock or not)
quantityAvailable (the amount of the variation in stock)

There is also a feature that can be activated using get_bulk_info=1 and also submitting quantity.

This will add two more variables: bulk_price and original_price (both numbers).