Product Landing Page

To use this functionality, create a page with the slug-name product-details. When an item in a Product List page is clicked, the user will be taken to this page, with the cat_id as a GET parameter.

You can also use this in marketing campaigns, to send visitors to a dynamically-created product details page. It is also used to show the details for products displayed on a Product List page.

The syntax is:

data-content="product"
data-item-list="item_detail"

The plugin will dynamically create the following structure, which is easy to style via CSS (note that all elements are contained within the captina_products_wrapper):

<div class=”captina_products_wrapper”>
    <h1>{product description}</h1>
    <div class=”captina_products_inner”>
        <div class=”product”>
            <div class=”captina_product_overview”>
                {overview section of romance copy}
            </div>
            <!-- [0..12 pairs, if label and data are non-blank, of...] -->
            <div class=”captina_romance_label”>
                {label for romance section}
            </div>
            <div class=”captina_romance_info”>
                {data from that section of romance copy}
            </div>
        </div>
        <!-- “product” -->
        <div class=”captina_product_detail_image”>
            <img <!--using the primary image file for the item --> />
        </div>
    </div>
    <!-- “captina_products_inner” -->
    <div class=”call_to_action”>
        <input class=”lz_buckbox int”/> <!-- qty; default 1 -->
        @
        <span>{price}</span>
        <span class=”price_extra”>
    <!-- constraint info if present, such as “club-only” or “allocated” -->
       </span>
        <button class=”captina_add_to_cart_btn”>
            <!-- string from prefs; default “add to cart” -->
        </button>
        <button id=”go_to_checkout”>
            <!-- initially hidden, until add-to-cart clicked -->
            “go to checkout”
        </button>
    </div>
    <!-- “call_to_action” -->
</div> <!-- “captina_products_wrapper” -->

Note that the title (description) always heads the page.

The sequence of the image and the romance copy can be reversed by setting a CSS rule for the element captina_products_inner to
display: flex; flex-flow: wrap-reverse;

The final stylesheet is at Administration->Stylesheets for Plugins->Product and Product List stylesheet.