Enable Downloading Multiple Products in your TomatoCart Store

In this article, I will give you a solution to enable downloading multiple products in your store.

In TomatoCart, you could create the download products and set the number of downloads in the products module as follow:

download_set

As you can see, the number of downloads is set to 1. It means the product only can be downloaded once. But, if the customer ordered two same products, you will find that it is impossible to download the product twice in the order table.

download2

You can’t change the Products table value to a higher number because then every customer will be able to download more than they purchased, up to the number set in the Products table!

How to solve this problem?

Because of this type of order, I had try the follow solution to the problem:

solution1

But, this solution is not elegant enough. It may impact the user experience because the customer will confuse this kind of order table.

So, I prefer to use the second solution:

1. In the order table, there is just one product with one download button.

2. The customer could click the download button twice to download product.

3. If the customer continue to click the download button, a dialog will pop up to alert he have reached the maximum download times.

download_alert

In this way, the customer could download the products based the quantities he ordered for it. The user experience is better. The animation for the dialog is also smooth.

Update the code for your store

1. Download the multiple_downloads.zip at https://drive.google.com/file/d/0B3Waj5WAXN2NTnNIbEoyLUh1TmM/

2. Open archive and copy the includes and templates directory to your TomatoCart directory. You need to override directories and files if your copy process request confirmation.

3. Go to templates/glass_gray/stylesheet.css and add the following code at the end of the file:

.button {
  cursor: pointer;
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  text-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 8px;
  text-decoration: none;
  margin: 5px;
}

.button:hover {
	background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

/* Pop dialog*/
.dialog {
	width: 400px;
	padding: 15px;
	text-align:center;
	background: #FFFFFF;
	border-radius: 4px;
	box-shadow: 0 0 5px 5px #CCCCCC;
	-webkit-box-shadow: 0 0 5px 5px #CCCCCC;
	-moz-box-shadow: 0 0 5px 5px #CCCCCC;
	-ms-box-shadow: 0 0 5px 5px #CCCCCC;
	-o-box-shadow: 0 0 5px 5px #CCCCCC;
}
.dialog .btns a {padding: 0 10px;}
.dialog .btnClose {
	width:25px;
	height:25px;
	display:block;
	position:absolute;
	right:-10px;
	top:-10px;
	text-transform:uppercase;
	text-decoration:none;
	color:#fff;
	background:rgba(255, 0, 0, 0.6);
	font-family:"Tahoma", Helvetica, sans-serif;
	text-align:center;
	font-size:18px;
	line-height:1.4em;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	box-shadow:0px 0px 2px 0px #666;
	-moz-box-shadow:0px 0px 2px 0px #666;
	-webkit-box-shadow:0px 0px 2px 0px #666;
	-ms-box-shadow:0px 0px 2px 0px #666;
	-o-box-shadow:0px 0px 2px 0px #666;
	text-indent:1px;
	font-weight:bold;
}

4. Go to templates/glass_gray/index.php and find the following code:

<script type="text/javascript" src="ext/autocompleter/Autocompleter.js"></script>

Add the following code before it:

<script type="text/javascript" src="includes/javascript/pop_dialog.js"></script>

Okay now. You could make an order and test the download button in your account.

If you can’t apply these steps by yourself, just contact me. I will assist you to update it.

Email: support@tomatocart.com

Looking for quality TomatoCart Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *


1 + 7 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>