We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum

Forum

Thread tagged as: Problem, Shop

Product variants

Hi,

For some reason my product variants are not appearing on the product.php page. Can someone let me know what I've done wrong. This is the product.html template

<perch:shop id="slug" type="slug" editable="true" suppress="true" indelible="true" label="Slug" for="title sku" order="10" divider-before="Meta data" />
<perch:shop id="image" type="image" label="Main product image" order="4" width="800" height="1000" crop="true" suppress="true" />
<perch:shop id="image" type="image" label="Main product image" order="4" width="263" height="224" crop="true" suppress="true"/>
<!-- Page Content -->
            <main class="page-main">
                <div class="block">
                    <div class="container">
                        <ul class="breadcrumbs">
                            <li><a href="index.php"><i class="icon icon-home"></i></a></li>
                            <li style="text-transform: uppercase;">/<span><perch:shop id="title" type="text" label="Title" required="true" order="2" /></span></li>
                        </ul>
                    </div>
                </div>
                <div class="container">
                    <!-- Two columns -->
                    <div class="row row-table">

                        <!-- Center column -->
                        <div class="col-md-9">
                            <!-- Page Title -->
                            <div class="page-title">
                                <div class="title">
                                    <h1 style="text-transform: uppercase;"><perch:shop id="title" type="text" label="Title" required="true" order="2" /></h1>
                                </div>
                            </div>
                            <!-- /Page Title -->


                            <div class="block product-block">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-5 col-md-3 col-lg-5">
                                <!-- Product Gallery -->
                                <div class="main-image">
                                    <img src="<perch:shop id="image" type="image" label="Main product image" order="4" width="800" />" class="zoom" alt="" data-zoom-image="<perch:shop id="image" type="image" label="Main product image" order="4" width="800" />" />
                                    <div class="dblclick-text"><span>Double click for enlarge</span></div>
                                    <a href="<perch:shop id="image" type="image" label="Main product image" order="4" width="800" />" class="zoom-link"><i class="icon icon-zoomin"></i></a>

                                </div>

                                <perch:if not-exists="image">
                                <div class="main-image">
                                    <img src="images/product-coming-soon.jpg" class="zoom" alt="" data-zoom-image="images/product-coming-soon.jpg" />
                                    <div class="dblclick-text"><span>Double click for enlarge</span></div>
                                    <a href="images/product-coming-soon.jpg" class="zoom-link"><i class="icon icon-zoomin"></i></a>

                                </div>
                                </perch:if>

                            </div>
                            <div class="col-sm-7 col-md-9 col-lg-7">
                                <div class="product-info-block classic">
                                    <div class="product-info-top">
                                        <div class="product-sku">SKU: <span><perch:shop id="sku" type="text" label="SKU" required="true" order="1" /></span></div>

                                    </div>
                                    <div class="product-name-wrapper">
                                        <h1 class="product-name"><p><perch:shop id="title" type="text" label="Title" required="true" order="2" /></p></h1>

                                    </div>
                                    <div class="product-availability">Availability: <span><perch:shop id="stock_status" type="shop_stock_status" label="Stock status" divider-before="Stock" required="true" /></span><!--<a href="#" class="btn btn-sm btn-loading" style="margin-left: 20px;"><i class="icon icon-heart"></i> Add to favourites</a>--></div>
                                    <div class="product-description">
                                        <p><perch:shop id="description" type="textarea" label="Description" editor="markitup" order="3" markdown="true" size="s" /></p>
                                    </div>
                                    <perch:shop id="brand" type="shop_brand" label="Brand" allowempty="true" suppress="true" />

<perch:categories id="category" set="products" label="Category" suppress="true">
    <perch:category id="catTitle" suppress="true" />
</perch:categories>

                                    <div class="price">
                                                    <span class="special-price"><span>



                                                    <perch:if exists="on_sale">
                                                        <perch:shop id="on_sale" type="checkbox" value="1" label="Use sale price"  suppress="true"/>
                                                            <span class="old-price">RRP <perch:shop id="price" type="shop_currency_value" label="Price" divider-before="Pricing" size="s" min="0" step="any"/></span>
                                                            <perch:shop id="sale_price" type="shop_currency_value" label="Sale price" size="s" min="0" step="any" /></perch:if>
                                                    <perch:member has-tag="trader">
                                                        <perch:shop id="trade_price" type="shop_currency_value" label="Standard Trade price" size="s" min="0" step="any"/>




                                                    <perch:else:member />
                                                        <perch:shop id="price" type="shop_currency_value" label="Price" divider-before="Pricing" size="s" min="0" step="any"/>
                                                        </perch:member>











<perch:shop id="tax_group" type="shop_tax_group" label="Tax group" required="true" suppress="true" /></span></span><small>excluding VAT</small>
                                                </div>

                                    <perch:if id="catalog_only" value="0">
  <perch:form id="add_to_cart" app="perch_shop" action="cart.php">

    <perch:if exists="has_variants">
      <perch:productopts>
        <h3><perch:productopt id="title" /></h3>
        <perch:productvalues>
          <perch:before><ul class="size-list"></perch:before>
            <li class="value">

                <perch:input id="options" class="form-control input-sm size-variants" name="opt-<perch:productvalue id="optionID" />[]"
                  value="<perch:productvalue id="valueID" />" type="radio" required="required" />
                <perch:productvalue id="valueTitle" />

            </li>
          <perch:after></ul></perch:after>
        </perch:productvalues>
      </perch:productopts>
    </perch:if>
    <br><br>
      <label>Quantity</label>
    <perch:input id="qty" value="1" type="number" min="0" placeholder="1" class="form-control"/>
    <perch:input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
    <perch:input type="submit" value="Add to cart" class="btn btn-lg btn-loading"/>
                                        </perch:form>

<perch:else />
  <p>This item is available in-store only.</p>
</perch:if>


                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="block">
                    <div class="tabaccordion">
                        <div class="container">
                            <!-- Nav tabs -->
                            <ul class="nav-tabs product-tab" role="tablist">
                                <li><a href="#Tab1" role="tab" data-toggle="tab"><perch:shop id="spec" type="text" label="Tab 1 Title" order="5"/></a></li>
                                <li><a href="#Tab3" role="tab" data-toggle="tab"><perch:shop id="guide" type="text" label="Tab 2 Title" order="7"/></a></li>

                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane" id="Tab1">
                                    <p><perch:shop id="specdescription" type="textarea" label="Tab 1 Details" editor="markitup" order="6" markdown="true" size="s" /></p>

                                </div>

                                <div role="tabpanel" class="tab-pane" id="Tab3">
                                    <perch:shop id="guidedescription" type="textarea" label="Tab 2 Details" editor="markitup" order="8" markdown="true" size="s" />
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                        </div>
                        <!-- /Center column -->

                    <perch:shop id="stock_level" type="number" label="Stock level" size="s" suppress="true"/>
<perch:shop id="stock_location" type="shop_stock_location" label="Count stock"  suppress="true"/>
<perch:shop id="max_in_cart" type="number" label="Max quantity in cart" size="s" suppress="true" />

<perch:shop id="requires_shipping" type="shop_requires_shipping" label="Requires shipping" divider-before="Shipping" suppress="true" />
<perch:shop id="weight" type="number" label="Shipping weight" size="s" suppress="true" />
<perch:shop id="width" type="number" label="Width" size="s"  suppress="true"/>
<perch:shop id="height" type="number" label="Height" size="s" suppress="true" />
<perch:shop id="depth" type="number" label="Depth" size="s" suppress="true" />


Jade Marling

Jade Marling 0 points

  • 2 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Can you show us what you've done?

Well my product.html template is above and this is my product.php page

<?php perch_shop_product(perch_get('s'), [
    'template' => 'products/product.html',
]) ?>
Duncan Revell

Duncan Revell 78 points
Registered Developer

As per the docs https://docs.grabaperch.com/functions/shop/products/perch-shop-product/ you need to tell the function to provide variant details.

There's also an example here to show how to call the variants in your template:

https://docs.grabaperch.com/templates/apps/shop/products/