Forum

Thread tagged as: Runway, Forms, Shop

Perch Forms Inside Shop Product Template

I am trying to add a perch form into the details of my shop products so that customers can enquire about a product via the form. The form uses a hidden field for the product title so that the email generated by the form is unique to each product. I have done this by adding the form to the product.html template from the shop app.

The form works fine but I have now noticed that it is stopping the products from being added to the cart. Clicking the add to cart button displays the cart and says the cart is empty. If I remove the form the cart starts to work again.

Is what I am trying to achieve possible or should I be looking at an alternative way?

Product.html

<div class="row">   
<div class="col-md-12">

    <div class="page-header">
        <h1 class="text-xs-center text-md-left"><perch:shop id="title" type="text" label="Title" required="true" order="2" /> </h1> 
    </div>
</div>  <!-- /col -->
</div> <!-- /row -->



<div class="row">   
<div class="col-md-5 text-xs-center text-md-left">

<perch:shop id="slug" type="slug" editable="true" indelible="true" label="Slug" for="title sku" order="10" suppress="true" divider-before="Meta data" />




<img src="<perch:shop id="image" type="image" label="Main product image" order="5" width="800" />" alt="<perch:shop id="title" type="text"/>" class="img-responsive img-thumbnail" />



<perch:shop id="image" type="image" label="Main product image" order="5" width="800" suppress="true" />
<perch:shop id="image" type="image" width="80" height="80" density="1.6" crop="true" suppress="true" />



<perch:shop id="status" type="shop_status" label="Status" suppress="true" />


</div>  <!-- /col -->

<div class="col-md-4 text-xs-center text-md-left">







<perch:shop id="catalog_only" type="shop_catalog_only" label="Catalog only" suppress="true" />


<!-- Check for not for online sale products and do not display price -->

<perch:if id="catalog_only" value="0">


<h4>Price: <perch:shop id="price" type="shop_currency_value" label="Price" divider-before="Pricing" size="m" min="0" step="any" /> <small>+VAT</small></h4>
<hr>

<perch:else />
    <h5>Price On Application.</h5>
</perch:if>



<perch:shop id="sale_price" type="shop_currency_value" label="Sale price" size="m" min="0" step="any" 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_status" type="shop_stock_status" label="Stock status" divider-before="Stock" 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" />
<perch:shop id="weight" type="number" label="Shipping weight" size="s" />
<perch:shop id="width" type="number" label="Width" size="s" />
<perch:shop id="height" type="number" label="Height" size="s" />
<perch:shop id="depth" type="number" label="Depth" size="s" />

<perch:if id="catalog_only" value="0">
  <perch:form id="add_to_cart" app="perch_shop" action="/shop/cart">
    <perch:if exists="has_variants">
      <perch:productopts>
        <h4><perch:productopt id="title" /></h4>
        <perch:productvalues>

       <ul class="list-group">

          <perch:before><ul class="list-group text-xs-left"></perch:before>
            <li class="list-group-item">

             <div class="radio custom-control custom-radio">

              <label>
                <perch:input id="options" name="opt-<perch:productvalue id="optionID" />[]"
                  value="<perch:productvalue id="valueID" />" type="radio" required="required" />


                  <span class="custom-control-indicator"></span>


                <perch:productvalue id="valueTitle" />
              </label>
            </li>
          <perch:after></ul></perch:after>
        </perch:productvalues>
      </perch:productopts>
    </perch:if>
    <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="btn btn-pill btn-primary" />










  </perch:form>
<perch:else />
<div class="alert alert-warning" role="alert">This item is not available to buy online. Please call for a custom quote.</div>
</perch:if>

<hr>
<h4>Product Categories</h4>

<perch:categories id="category" set="products" label="Category">
<a href="/../shop/category/<perch:category id="catSlug" />"<button type="button" class="btn btn-xs btn-info-outline"><perch:category id="catTitle" /></button></a>
</perch:categories>



</div>  <!-- /col -->

<div class="col-md-3 m-t-lg"> 
<div class="text-center">   
    <h5>Call Now:</h5>
<a href="tel:08001234567"><button type="button" class="btn btn-pill btn-default"><i class="fa fa-phone" aria-hidden="true"></i> 0800 1234567</button></a>
    <hr>

    <h5>More Information:</h5>








    <!-- Button trigger modal -->


    <button type="button" class="btn btn-pill btn-success" data-toggle="modal" data-target="#myModal">
  Enquire Online
</button>   

</div>      


<!-- Modal -->


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Make an Enquiry</h4>
      </div>
      <div class="modal-body">
        <p>For more information about: <strong><perch:shop id="title" type="text" label="Title" /></strong> please complete this form</p>



       <perch:form id="contact" method="post" app="perch_forms">

<perch:content id="introtext" type="textarea" label="Form Intro Text" textile="true" editor="markitup" />

<div class="form-group">
    <perch:label for="name">Name</perch:label>
    <perch:input type="text" id="name" required="true" class="form-control" placeholder="Name" label="Name" /> 
    <perch:error for="name" type="required"><div class="alert alert-danger">Please add your name</div></perch:error>
</div>

<div class="form-group">
    <perch:label for="email">Email address</perch:label>
    <perch:input type="email" id="email" required="true" class="form-control" placeholder="you@example.com" label="Email" />



    <perch:error for="email" type="format">
    <div class="alert alert-danger">Please check email format.</div>
    </perch:error>
</div>

<div class="form-group">
    <perch:label for="phone">Phone Number</perch:label>
    <perch:input type="text" id="phone" class="form-control" label="phone" placeholder="01254123456" />
    <perch:error for="name" type="required"><div class="alert alert-danger">Please add your phone number</div></perch:error>
</div>

<div class="form-group">

    <perch:input type="hidden" id="product" value="<perch:shop id="title" type="text" label="Product Name" />" class="form-control" label="product" />
</div>

<div class="form-group">
    <perch:label for="message">Your Enquiry Details</perch:label>
    <perch:input type="textarea" id="message" class="form-control" label="Message" placeholder="Your Message" />
</div>





<perch:success>
<div class="alert alert-success">
    Your Enquiry Has Been Sent
</div>
</perch:success>





      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

       <perch:input type="submit" value="Submit" class="btn btn-primary"/>

        </perch:form>
      </div>
    </div>
  </div>
</div>





<hr>    
<div class="text-center">   
    <h5>Share This Product</h5>

    <div class="ssk-group">
    <a href="" class="ssk ssk-facebook"></a>
    <a href="" class="ssk ssk-twitter"></a>
    <a href="" class="ssk ssk-google-plus"></a>
    <a href="" class="ssk ssk-tumblr"></a>
    <a href="" class="ssk ssk-email"></a>
    </div>
</div>  
    <hr>





</div>  <!-- /col -->

</div> <!-- /row -->


<div class="row m-t-lg">    
<div class="col-md-12">

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#details" aria-controls="details" role="tab" data-toggle="tab">Details</a></li>
    <li role="presentation"><a href="#specification" aria-controls="specification" role="tab" data-toggle="tab">Specification</a></li>
    <li role="presentation"><a href="#downloads" aria-controls="downloads" role="tab" data-toggle="tab">Downloads</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active m-a" id="details">
        <p><strong>SKU:</strong> <perch:shop id="sku" type="text" label="SKU" required="true" order="1" /></p>
        <p><strong>Manufacturer:</strong> <perch:shop id="brand" type="shop_brand" label="Brand" allowempty="true" /></p>
        <p><strong>Manufacturers Product Code:</strong> <perch:shop id="mfr_code" type="text" label="Manufacturer Code" order="3"/></p>
        <div class="well well-sm">
            <h6>Product Description</h6>
            <p><perch:shop id="description" type="textarea" label="Description" editor="markitup" order="4" markdown="true" size="s" /></p>
        </div>
    </div>

    <div role="tabpanel" class="tab-pane fade m-a" id="specification">

            <p><perch:shop id="specification" type="textarea" label="specification" editor="markitup" order="6" markdown="true" size="l" /></p>


    </div>
    <div role="tabpanel" class="tab-pane fade" id="downloads"><p>test downloads</p></div>

  </div>

</div>


</div>  <!-- /col -->

</div> <!-- /row -->




Diagnostic:

Perch Runway: 2.8.32, PHP: 7.0.10, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: 241ae00989d1995ffcbbf63d579943635faf9972 $, with PDO
Server OS: Darwin, apache2handler
Installed apps: content (2.8.32), assets (2.8.32), categories (2.8.32), perch_blog (5.0), perch_forms (1.8.3), perch_shop_orders (1.0.9), perch_shop_products (1.0.9), perch_shop (1.0.9), perch_members (1.5)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_forms', 'perch_blog', 'perch_members', 'perch_shop', );
PERCH_LOGINPATH: /perch
PERCH_PATH: /Users/greg/Sites/millers/trunk/perch
PERCH_CORE: /Users/greg/Sites/millers/trunk/perch/core
PERCH_RESFILEPATH: /Users/greg/Sites/millers/trunk/perch/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M
F1: 2edba60ed1f613d6dd804feb202456a2
Resource folder writeable: Yes
HTTP_HOST: millers
DOCUMENT_ROOT: /Users/greg/Sites/millers/trunk
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
Greg Riley

Greg Riley 1 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

That should work fine. What HTML output do you get for the product when the form doesn't work?

Not sure what you mean, the form works but it stops the product from being added to the cart. When I click add to cart button on the product I go to /shop/cart as expected but it displays as:

<h1>Your cart</h1>

<p>Your cart is empty.</p>

If I remove the form from product.html the add to cart button works as expected and displays using my cart template:

    Using template: /templates/shop/cart/cart_with_shipping.html

Hi Drew,

I have got a bit further with this problem. When I click add to cart and the cart page is displayed the debug shows:

Time    Δ   Debug Message
0.0413  0   [27] SELECT p.pagePath, pr.routePattern, pr.routeRegExp, p.pageTemplate FROM perch2_pages p LEFT JOIN perch2_page_routes pr ON p.pageID=pr.pageID ORDER BY pr.routeOrder ASC, p.pagePath ASC
0.0427  0.0014  Matched page: /shop/cart, so not using routes.
0.0428  0.0001  Using master page: /templates/pages/shop/cart.php
0.0474  0.0046  [1] SELECT * FROM perch2_pages WHERE pagePath='/shop/cart' LIMIT 1
0.0526  0.0052  [1] SELECT * FROM perch2_shop_cart WHERE cartID=234
0.0579  0.0054  [1] SELECT * FROM perch2_shop_cart WHERE cartID=234
0.0589  0.001   [35] SELECT DISTINCT settingID, settingValue FROM perch2_settings WHERE userID=0
0.0642  0.0052  
Array
(
    [name] => required
    [email] => required
)
0.0645  0.0003  Using template: /templates/pages/attributes/default.html
0.0646  0.0001  Using sub-template: /templates/pages/attributes/seo.html

...and so on

comparing it to the debug when a product is successfully added to the cart it seems to be this bit that is stopping it:

Array
(
    [name] => required
    [email] => required
)

So I had a look at the form and if I remove the required="true" from:

<perch:label for="name">Name</perch:label>
    <perch:input type="text" id="name" required="true" class="form-control" placeholder="Name" label="Name" /> 

and do the same for the email field all works fine, but I have no error checking.

Drew McLellan

Drew McLellan 2638 points
Perch Support

The issue may be having two forms in one template. I would have thought that should be ok, but perhaps not.

The two forms are working but with no error checking on the contact form which is not ideal, as I think it will lead to lots of empty contact emails.

If I was to put the contact form on a different page and just link to it from the product display how could I pass the product title to the form?

At the moment I have this in the form, but I am already on the page for whichever product I want the contact enquiry to be about.

<perch:input type="hidden" id="product" value="<perch:shop id="title" type="text" label="Product Name" />" class="form-control" label="product" />
Drew McLellan

Drew McLellan 2638 points
Perch Support

It doesn't need to be on a different page, necessarily. Just possibly in a different template.

Can I call a different template from the product.html template?

Using:

<perch:template path="content/product_enquiry.html" />

within product.html I still get the same error of the product not being added to cart.

If I add form in separate template via product.php using <?php perch_content('Product Enquiry'); ?> The product adds to cart if I do this first but if I enquire about the product using the form and then try to add to the cart I get no product in the cart (it shows as empty cart) and the debug says Limiting based on stock. The stock for this product is set to unlimited.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Can you show me?

Do you mean on the site? if so https://www.millers.teap.co.uk/shop/products/gregs-product-abc123

You can add product to cart successfully but if you use the "enquire online" green button then try and add the product to cart it fails due to stock.

Was that what you wanted?