Forum

Thread tagged as: Question, Configuration, Suggestions

categories in form options

Hello I'm looking for the best way to integrate categories into a paypal payment form on my portfolio item template.

This is the kind of form I am using but need to add the list of categories selected in the select options. What would be the best way of doing this?

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" style="margin: 0px">
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="business" value="your@email.com">
    <input type="hidden" name="item_name" value="Your Item Name">
    <input type="hidden" name="custom" value="">
    <input type="hidden" name="return" value="https://your-domain.com/thanks-payment.htm">
    <input type="hidden" name="no_note" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="quanity" value="1">
    <input type="hidden" name="add" value="1">

<select name="amount" style="width:150px;font:9px;margin-top:4px">
<option value="35.00">Price Option 1 $35.00</option>
<option value="55.00">Price Option 2 $55.00</option>
<option value="75.00">Price Option 3 $75.00</option>
</select><br>

<input type="hidden" name="on0" value="Add your item description">
<input type="hidden" name="os0" value="Item Details or Name">

<input type="image" src="picts/cart-add.gif" border="0" name="submit" alt="Add to Cart" vspace="4"><br>

</form>

Thank you

Denise Courtney

Denise Courtney 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Ok, how can we help?

I have managed to just about do it al but the only issue I have is passing the catTitle through the form to paypal as a hidden field. I cannot seem to find a way to include this with the perch:categories tags and still keep the form options working correctly.

My template currently looks like this

      <div id="imagecontainer">
<div id="imagebox">
<div id="box"><a href="<perch:content type="image" id="image" label="image" crop="true"  order="1" width="1000" height="750"/>"  data-lightbox="image-1" data-title="<perch:content id="title" />">
 <img class="styling" src="<perch:content type="image" id="image" label="image" crop="true"  order="1" width="640" height="480"/>"  alt="<perch:content type="text" id="title" label="title" required="true" title="true" order="2" />" /></a><br /><span class="clickview">Click image for larger view</span>

</div></div></div>

<div id="imageinfo">
<div style="position:relative; float:left; width:215px;">
  <div id="titleid"><div style="width:95px; position:relative; float:left;  margin-bottom:3px; "><span class="titles">TITLE:</span></div>
 <div style="width:120px; position:relative; float:left; line-height:normal; margin-bottom:3px; "> <perch:content id="title" /></div>
</div>
    <div id="titleid"> <div style="width:95px; position:relative; float:left;  margin-bottom:3px; "><span class="titles">IMAGE ID:</span></div>  
 <div style="width:120px; position:relative; float:left;  margin-bottom:3px; ">no.<perch:content id="imageID" type="text" required="true" label="Image ID"  /></div></div></div>
   <div id="thumb"><image src="<perch:content id="image" />" width="30" height="30" crop="true"/></div>
  <div id="deskeygroup">
 <div id="description"> <div id="destitle">DESCRIPTION:</div>
<div id="destext">  <perch:content id="desc" type="text" label="Description" /></div></div>
 <div id="keywords"> <div id="keytitle">KEYWORDS: </div>
 <div id="keytext"> <perch:content id="tag" type="text" label="Keywords" /></div></div>
  <br />

  </div>

</div>       


     <perch:categories id="albums" label="Select relevent album(s)" set="albums" required="true" divider-before="Photo Galleries"  display-as="checkboxes">
   </perch:categories>
   <div style="position:relative; float:left; width:260px; padding:15px; border:1px solid #666; border-radius:5px; color:#eee; font-family:Verdana, Geneva, sans-serif; margin-bottom:20px; margin-top:5px; text-align:left">
<h5 style="margin:0px;">Product Options </h5>

  <!----- options ---->  
     <p class="select">Select of print format</p>

  <select style="width:260px" id="target">
            <option value="">Select...</option>
      <option value="Print">PRINTS</option>
    <option value="Canvas">CANVAS</option>
    <option value="Acrylic">ACRYLIC PANELS (10mm float)</option>
     <option value="Cards">CARDS (pack of 5)</option>
        </select>

  <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" style="margin: 0px">
<input type="hidden" name="business" value="test@test.com">
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="add" value="1">
    <input type="hidden" name="item_name"
        value="Image: <perch:content id="title" />">
  <input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="quanity" value="1">
    <input type="hidden" name="add" value="1">
<input type="hidden" name="on0" value="<perch:content id="title"/>">&nbsp;<input type="hidden" name="os0" value="no.<perch:content id="imageID" />">

   <div id="Print" class="inv">  <select name="amount" style="width:260px;">
        <perch:categories id="prints" label="Select available PRINT sizes" set="prints" display-as="checkboxes">
    <perch:before>  <ul><option value="">Choose a size ...</option>
             </perch:before>

                <option value="<perch:category id="catPrice"/>"><perch:category id="catTitle"/> | £<perch:category id="catPrice"/> </option>

      <perch:after>
        </ul> 
<textarea rows="8" readonly="readonly"><perch:category id="desc"/> </textarea>
      </perch:after>

   </perch:categories></select></div>
   <!----> 
      <div id="Canvas" class="inv">  
    <select name="amount" style="width:260px;">
   <perch:categories id="canvas" label="Select available CANVAS sizes" set="canvas" display-as="checkboxes">
    <perch:before>  <ul><option value="">Choose a size ...</option>
             </perch:before>
                <option value="<perch:category id="catPrice"/>"><perch:category id="catTitle"/> | £<perch:category id="catPrice"/></option>

      <perch:after>
        </ul>
      </perch:after>

   </perch:categories></select> </div>
 <!---->

    <div id="Acrylic" class="inv">  
 <select name="amount" style="width:260px;">

        <perch:categories id="panelsacrylic" label="Select available ACRYLIC PANELS sizes" set="panelsacrylic" display-as="checkboxes">
    <perch:before>  <ul><option value="">Choose a size ...</option>
             </perch:before>
                <option value="<perch:category id="catPrice"/>"><perch:category id="catTitle"/><perch:if exists="catPrice"/> | £<perch:category id="catPrice"/></perch:if></option>

      <perch:after>
        </ul>
      </perch:after>

   </perch:categories></select> </div>
    <!---->

       <div id="Cards" class="inv">  
    <select name="amount" style="width:260px;">
   <perch:categories id="cards" label="Select available CARD sizes" set="cards" display-as="checkboxes">
    <perch:before>  <ul><option value="">Choose a size ...</option>
             </perch:before>
                <option value="<perch:category id="catPrice"/>"><perch:category id="catTitle"/><perch:if exists="catPrice"/> | £<perch:category id="catPrice"/></perch:if></option>

      <perch:after>
        </ul>
      </perch:after>

   </perch:categories></select> </div>

 <div id="cart-margin"> <input type="image" name="submit" border="0" src="../../../images/add-to-cart.png"

        alt="PayPal - The safer, easier way to pay online">
    <img alt="" border="0" width="1" height="1"
        src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >
   </div>

</form>


   </div>
   <script>
            document
                .getElementById('target')
                .addEventListener('change', function () {
                    'use strict';
                    var vis = document.querySelector('.vis'),   
                        target = document.getElementById(this.value);
                    if (vis !== null) {
                        vis.className = 'inv';
                    }
                    if (target !== null ) {
                        target.className = 'vis';
                    }
            });
        </script>

Any ideas? So basically I am using perch categories for various product options and need to include somewhere something like this <input type="hidden" name="item_name" value="<perch:category id="catTitle" />"> to show my product selection in perch.

Hope you can help.