Phoca Gallery can be used with Simple Caddy e-commerce solution. "Add to cart" button can be displayed below image thumbnails in Category View or below image detail in Detail Window.

 

Phoca Gallery and Simple Caddy integration

 

See Demo:

Phoca Gallery - https://www.phoca.cz/stockphoto/

"Add to cart" buttons in Category View - https://www.phoca.cz/stockphoto/stock-photos/category/1-prague

Visit Simple Caddy website - https://atlanticintelligence.net/ - to get information how to install Simple Caddy component, module and plugin. If you install all this extensions and add products to your e-shop, then you can display "Add to cart" buttons below thumbnails in Category View or below detail image in Detail Window (only by the iframe methods - Standard Popup Window, Modal Box, Highslide JS).

 

Displaying "Add to cart" button below thumbnails in Category View

Go to Phoca Gallery Parameters (Components - Phoca Gallery - Control Panel - Parameters or go to Parameters Component in menu link to Phoca Gallery) and set the parameter Display Image Description in Box (Category View Settings - List of images) to "Yes (HTML)". Go to image where you want to add/display the product: Components - Phoca Gallery - Images - Edit existing image or Add new one. And paste the following code:

simplecaddy code=ID of your product (e.g. simplecaddy code=001)

into the Description input field. Save the image. Now the "Add to cart" button with other information (product name, price, options, ...) will be displayed below the image thumbnail in Category View.

 

Displaying "Add to cart" button below detail image in Detail View

Go to Phoca Gallery Parameters (Components - Phoca Gallery - Control Panel - Parameters or go to Parameters Component in menu link to Phoca Gallery) and set the parameter Display Description (Description Settings) to "Show". Go to image where you want to add/display the product: Components - Phoca Gallery - Images - Edit existing image or Add new one. And paste the following code:

simplecaddy code=ID of your product (e.g. simplecaddy code=001)

into the Description input field. Save the image. Now the "Add to cart" button with other information (product name, price, options, ...) will be displayed below the detail image in Detail Window.

 

If you want to sell images on your site, e.g. with help of Simple Caddy and Phoca Gallery integration, you should protect your thumbnails and images saved on your server. You can add e.g. watermarks to your thumbnails but be aware, watermarks are not added to original images. So you need to protect them e.g. with some server settings on your server or you can remove original images after thumbnails creation from your server. If you remove original images from your server, you need to know that some of Phoca Gallery features will not work anymore (e.g. rotating, recreating thumbnails, getting info about size of original images, etc.). For working of such features you need to upload original images back to server.

 

Phoca Gallery, Simple Caddy Integration

 

Design of the form fields below the thumbnails or below the detail image can be customized in CSS (see Simple Caddy CSS example file). The CSS code should be pasted to template CSS file. See following example (this CSS is used on https://www.phoca.cz/stockphoto/stock-photos/category/1-prague ):

The CSS is designed for the case, the following options are set in Simple Caddy Plugin:

  • Product code text - Hide
  • Product code - Hide
  • Product title - Hide
  • Unitprice text - Show
  • Unitprice - Show
  • Quantity field text - Show
  • Quantity field - Show
  • Options title (if options defined) - Show
/* Simple Caddy */
.scproduct {
	width: 100px;
	text-align:left;
	float: left;
	clear: both;
	position:relative;
	margin: 0;
	padding: 0;
}

.scprodcode {
	position:relative;
	float: right;
	text-align:right;
	margin: 0;
	padding: 0;
}

.scshorttext {
	position:relative;
	clear: both;
	margin: 0;
	padding: 0;
}

.scunitpricetext {
	position:relative;
	clear:both;
	margin:3px 0 0 0;
	padding:0;
	text-align:left;
	float: left;
}

.scunitprice {
	position:relative;
	margin:3px 0 0 0;
	padding:0;
	float: right;
	text-align:right;
}

.scqtytext {
	position:relative;
	clear: both;
	margin:3px 0 0 0;
	padding:0;
	width: 100px;
	float: left;
	text-align:left;
}

.scqty {
	position:relative;
	margin:3px 0 0 0;
	padding:0;
	float: right;
	text-align:right;
}
.scqty input {
	position:relative;
	width:30px;
	margin:0;
	padding:0;
}

.cartoptions {
	position:relative;
	margin:3px 0 0 0;
	padding:0;
	clear: both;
	/*border: 1px solid yellow;
	width: 80px;*/
}


.btnemptycart,
.btnshowcart,
.btnchange,
.btnremove,
.btncshopping,
.btnorder,
.btnconfirm,
.button {
position:relative;

	margin:0;
	padding:0 5px 0 5px;
	margin-top:5px;
	font-weight:bold;
	/*text-transform:uppercase;*/
	letter-spacing:-0.1em;
    border-top:1px solid #ccc;
	border-right:1px solid #777;
	border-bottom:1px solid #777;
	border-left:1px solid #ccc;
	color:#ffffff; 
	font-family:Arial, sans-serif;
	background:#003366 url(../images/bg-cart.png) repeat-x;
	-moz-border-radius:5px;
}

.btnemptycart:hover,
.btnshowcart:hover,
.btnchange:hover,
.btnremove:hover,
.btncshopping:hover,
.btnorder:hover,
.btnconfirm:hover,
.button:hover	{

	margin:0;
	padding:0 5px 0 5px;
	margin-top:5px;
	font-weight:bold;
	/*text-transform:uppercase;*/
	letter-spacing:-0.1em;
    border-top:1px solid #ccc;
	border-right:1px solid #777;
	border-bottom:1px solid #777;
	border-left:1px solid #ccc;
	color:#ffffff; 
	font-family:Arial, sans-serif;
	background:#003366 url(../images/bg-cart-hover.png) repeat-x;
	-moz-border-radius:5px;
}

.scp_atc {
position:relative;
	clear: both;
	float: right;
	margin:0;
	padding:0 5px 0 5px;
	margin-top:5px;
	font-weight:bold;
	/*text-transform:uppercase;*/
	letter-spacing:-0.1em;
    border-top:1px solid #ccc;
	border-right:1px solid #777;
	border-bottom:1px solid #777;
	border-left:1px solid #ccc;
	color:#ffffff; 
	font-family:Arial, sans-serif;
	background:#003366 url(../images/bg-cart.png) repeat-x;
	-moz-border-radius:5px;
}

.scp_atc:hover	{
	clear: both;
	float: right;
	margin:0;
	padding:0 5px 0 5px;
	margin-top:5px;
	font-weight:bold;
	/*text-transform:uppercase;*/
	letter-spacing:-0.1em;
    border-top:1px solid #ccc;
	border-right:1px solid #777;
	border-bottom:1px solid #777;
	border-left:1px solid #ccc;
	color:#ffffff; 
	font-family:Arial, sans-serif;
	background:#003366 url(../images/bg-cart-hover.png) repeat-x;
	-moz-border-radius:5px;
}



.sccart {
	position:relative;
	/*font-family: sans-serif;
	font-style: normal;
	font-size: 10px;*/
	margin:0;
	padding:0;
/*	border: 1px solid purple;
	width: 80px;*/
}

.atczone {
	position:relative;
	clear: both;
	margin:0;
	padding:0;
}

.divider {
	background-color: #dfdfdf;
	color:#3399ff;
	font-weight: bold;
}

.errormsg{
    color:red;
    padding: 20px 0;
}

.scp_selectqty {}

.scp_qty {}

.cartoptionstitle {
	position:relative;
	clear:both;
	float:left;
	margin:3px 0 0 0;
	padding:0;
	text-align:left;
}
.scoptionselect select,
.scoptionselect select option{
margin:0;
padding:0;

}
.scoptionselect {
	position:relative;
	float:right;
	margin:3px 0px 0px 0px;
	padding:0;
	text-align:right;
}