Forum

Thread tagged as: Question, Shop

Perch Shop - Quantity option on product template

Hi guys,

I'm looking to add a quantity dropdown/number field on my product template, however I can't seem to get the field to show up.

Here's my current code:

<div class="product-detail">
  <div class="left-col"> 
    <img class="main-image" src="<perch:shop id="image" type="image" label="Main product image" order="4" />" alt="<perch:content id="alt" type="text" label="Image description" order="3" />" />
    <div class="thumb-holder">
        <perch:repeater id="product-thumbs" label="Product Thumbs">
            <img class="product-thumb" src="<perch:shop id="thumb" type="image" label="Product Thumb" />" alt="<perch:content id="thumb-alt" type="text" label="Product Thumb Alt" />"/>
        </perch:repeater>
    </div>
  </div>
  <!-- /div.left-col -->

  <div class="right-col">
    <h1><perch:shop id="title" type="text" label="Title" required="true" order="2" /></h1>
    <span><perch:shop id="sku" type="text" label="SKU" required="true" order="1" /></span>
    <span class="product-price"><perch:shop id="price" type="shop_currency_value" label="Price" divider-before="Pricing" size="m" min="0" step="any" /></span> 

    <!-- sale price -->
    <perch:if exists="on_sale">
        <div class="sale-price">
          <perch:shop id="sale_price" type="shop_currency_value" label="Price" size="m" min="0" step="any" />
          <p>Sale price! Usually
            <perch:shop id="price" type="shop_currency_value" label="Price" size="m" min="0" step="any" />
          </p>
        </div>
    </perch:if>
    <!-- /div.sale-price -->

    <p><perch:shop id="stock_level" type="number" label="Stock level" size="s" /> left in stock</p>


      <p>Quantity: <perch:input id="qty" value="1" type="number" min="0" placeholder="1"/></p>

    <!-- add to cart button -->
    <perch:form id="add_to_cart" app="perch_shop">
      <perch:input id="product" type="hidden" env-autofill="false" value="<perch:shop id="productID" type="hidden" env-autofill="false" />
      " />
      <perch:input type="submit" value="Add to cart" class="shop-btn" />
    </perch:form>


        <p><span class="delivery-information">Free delivery on all orders over £50</span></p>


    <perch:shop id="slug" type="slug" editable="true" indelible="true" label="Slug" for="title sku" order="10" divider-before="Meta data" suppress="true" />
    <p>
      <perch:shop id="description" type="textarea" label="Description" editor="markitup" order="3" markdown="true" size="s" />
    </p>
    <h3>Product Dimensions</h3>
    W<perch:shop id="width" type="number" label="Width" size="s" /> X H<perch:shop id="height" type="number" label="Height" size="s" /> X D<perch:shop id="depth" type="number" label="Depth" size="s" />
    <h3>Product Weight</h3>
    <perch:shop id="weight" type="number" label="Shipping weight" size="s" />KG
    <perch:shop id="status" type="shop_status" label="Status" suppress="true"/>
    <perch:categories id="category" set="products" label="Category" suppress="true">
      <perch:category id="catTitle" />
    </perch:categories>
  </div>
  <!-- /div.right-col -->

  <perch:shop id="catalog_only" type="shop_catalog_only" label="Catalog only" suppress="true" />
  <perch:shop id="trade_price" type="shop_currency_value" label="Trade price" size="m" min="0" step="any" runway="true" suppress="true" />
  <perch:shop id="on_sale" type="checkbox" value="1" label="Use sale price" suppress="true" />
  <perch:shop id="tax_group" type="shop_tax_group" label="Tax group" required="true" suppress="true" />
  <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" />
</div>
<!-- /div.product-detail -->


<perch:showall />

Any advice? Thanks!

Harry Ray

Harry Ray 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Are you able to see any changes you make to this template? (i.e. are you editing the correct template?)

Hi Drew,

Yep - this is the product template.

The word "Quantity:" shows up, but there's nothing to the right of it (where the "qty" field appears in the code).

Drew McLellan

Drew McLellan 2638 points
Perch Support

What do you see if you view source on the page?

<p>Quantity: <perch:input id="qty" value="1" type="number" min="0" placeholder="1"/></p>

Drew McLellan

Drew McLellan 2638 points
Perch Support

Can you try just cleaning up the syntax:

<perch:input id="qty" value="1" type="number" min="0" placeholder="1" />

Hi Drew,

I've put that code in, in place of the existing code.

It's rendering as it was before, nothing's coming up but it shows in the source.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Are the other fields rendering correctly?

All other fields are rendering as expected.

Drew McLellan

Drew McLellan 2638 points
Perch Support

The field is not inside the form.

Yep! That'd do it!

Thanks Drew!