Forum
Gallery app and categories
How compatible is the categories with the gallery app?
I am trying to figure a way or doing something and just want to check that it is within the realms of possibilities first before I try and find a way.
I am displaying a series of photos through the gallery app that can be then purchased in various formats and sizes through paypal which all works fine.
However some sizes and formats etc are not available for all images.
I thought if I created sets and categories of all products and added them to my gallery image template as select boxes then just those selected for the relevant image would appear as product options on my page. Could this work in principle?
Currently I have the template image.html
<perch:gallery id="image" type="image" key="small" height="300"/>
<perch:gallery id="image" type="image" key="main" width="640" height="480" />
<perch:gallery id="image" type="image" key="large" width="1000" height="750" />
<perch:gallery id="image" type="image" key="thumb" width="30" height="30" crop="true" />
<perch:gallery id="desc" type="textarea" label="Description" size="s" editor="markitup" />
<perch:gallery id="tag" type="text" label="Keywords / Tags *" help="* Seperate keywords by comma"/>
<perch:gallery id="ref" type="text" label="Reference" />
<perch:categories id="print" label="PRODUCTS | Prints" set="print" display-as="checkboxes" value="1" suppress="true" />
<perch:categories id="canvas" label="Canvas" set="canvas" display-as="checkboxes">
<perch:categories id="acrylic" label="Acrylic" set="acrylic" display-as="checkboxes">
<perch:categories id="cards" label="Cards" set="cards" display-as="checkboxes">
(The categories display correctly in image gallery options on perch.)
Then I also have this portion of code on my gallery display page template which display my product options and paypal buttons...
<div id="products">
<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>
<!----- options 1 ---->
<div id="Print" class="inv">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<input type="hidden" name="business" value="nicklives@btinternet.com">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden"
value="<perch:gallery id="imageAlt" />">
<input type="hidden" name="item_number" value="Image ID: no.<perch:gallery id="imageID" />">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="on0" value="Format">
<select name="os0" style="width:260px;">
<option value="">Choose a size ...</option>
<option value="Print 12x16">12"x16" (305 x 406mm) | £20.00</option>
<option value="Print 16x24">16"x24" (406 x 610mm) | £45.00</option>
<option value="Print 24x36">24"x36" (610 x 915mm | £70.00)</option>
</select>
<!-- Specify the price that PayPal uses for each option. -->
<input type="hidden" name="option_select0" value="Print 12x16">
<input type="hidden" name="option_amount0" value="20.00">
<input type="hidden" name="option_select1" value="Print 16x24">
<input type="hidden" name="option_amount1" value="45.00">
<input type="hidden" name="option_select2" value="Print 24x36">
<input type="hidden" name="option_amount2" value="70.00">
<!-- Display the payment button. -->
<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 id="product-info"><h6>Product Information</h6>
<p>Printed on Fuji Pearl Paper for smooth metallic and striking three-dimensional images. Its unique surface is resistant to tearing and curling, has a standard Archival Value of 100 years in home display and is ready for mounting and framing. Different print sizes available on request.</p></div> </div>
<!----- options 2 ---->
<div id="Canvas" class="inv">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<input type="hidden" name="business" value="nicklives@btinternet.com">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="item_name"
value="<perch:gallery id="imageAlt" />">
<input type="hidden" name="item_number" value="Image ID: no.<perch:gallery id="imageID" />">
<input type="hidden" name="currency_code" value="GBP">
<!-- Dropdown sizes -->
<input type="hidden" name="on0" value="Format">
<select name="os0" style="width:260px;">
<option value="">Choose a size ...</option>
<option value="Canvas 20x30">20"x30" (508 x762mm) | £125.00</option>
</select>
<!-- Specify the price that PayPal uses for each option. -->
<input type="hidden" name="option_select0" value="Canvas 20x30">
<input type="hidden" name="option_amount0" value="125.00">
<!-- Display the payment button. -->
<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 id="product-info"><h6>Product Information</h6>
<p>Canvases are printed on the highest quality 100% natural art canvas material, using the latest Epson wide format printing technology. The image wraps around the edge of the canvas. Each canvas is coated with a protective varnish for proven long lasting uv protection before being hand stretched on to 1.5 inch thick gallery stretcher bars. Different canvas sizes available on request.</p></div> </div>
<!----- options 2 ---->
<div id="Acrylic" class="inv">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<input type="hidden" name="business" value="nicklives@btinternet.com">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="item_name"
value="<perch:gallery id="imageAlt" />">
<input type="hidden" name="item_number" value="Image ID: no.<perch:gallery id="imageID" />">
<input type="hidden" name="currency_code" value="GBP">
<!-- Dropdown sizes -->
<input type="hidden" name="on0" value="Format">
<select name="os0" style="width:260px;">
<option value="">Choose a size ...</option>
<option value="Acrylic 20x30">20"x30" (508 x 762mm) | £215.00</option>
<option value="Acrylic 24x36">24"x36" (610 x 915mm) | £325.00</option>
</select>
<!-- Specify the price that PayPal uses for each option. -->
<input type="hidden" name="option_select0" value="Acrylic 20x30">
<input type="hidden" name="option_amount0" value="215.00">
<input type="hidden" name="option_select1" value="Acrylic 24x36">
<input type="hidden" name="option_amount1" value="325.00">
<!-- Display the payment button. -->
<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 id="product-info"><h6>Product Information</h6>
<p>Acrylic Panels give a real wow-factor. All panels are diamond polished to a high gloss finish and are perfect for any living space or office. Floating style acrylic print panels have no aluminium posts on their face and give the illusion that the panel is floating away from the wall. Your print is pressure bonded onto the reverse of the 10mm thick acrylic panel using special, ultra-thin, double sided optically clear mount film. Different acrylic panel sizes available on request.</p></div> </div>
<div id="Cards" class="inv">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<input type="hidden" name="business" value="nicklives@btinternet.com">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="item_name"
value="<perch:gallery id="imageAlt" />">
<input type="hidden" name="item_number" value="Image ID: no.<perch:gallery id="imageID" />">
<input type="hidden" name="currency_code" value="GBP">
<!-- Dropdown sizes -->
<input type="hidden" name="on0" value="Format">
<select name="os0" style="width:260px;">
<option value="">Choose a size ...</option>
<option value="Cards DL3.9x8.2">DL 3.9"x8.2" (100 x210mm) | £12.50</option>
</select>
<!-- Specify the price that PayPal uses for each option. -->
<input type="hidden" name="option_select0" value="Cards DL3.9x8.2">
<input type="hidden" name="option_amount0" value="12.50">
<!-- Display the payment button. -->
<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 id="product-info"><h6>Product Information</h6>
<p></p></div> </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>
</div>
I am hoping that with the categories and some perch conditionals this should work. Any advice or guidance would be very much appreciate and I hope all is comprehendible.
Page example: https://nickoakleyphotography.com/gallery/image.php?id=112
Gallery predates categories, so things like filtering from the page won't work, but you should be able to use them in the templates.