Warning, programming ahead. And this is definitely something I’m not going to support or troubleshoot, but if you have programming skills, you should be able to get the idea from what I’m including here. I think it is going to take longer to explain than for an experienced designer to implement, but here goes.
This is not a simple plugin for a Wordpress Shopping Cart. This is what I came up with for my photography store which runs under Wordpress. The basic idea could easily be used with any blogging platform, or just about any gallery.
First off, before you even continue reading this, hop off to to any post in the store www.beckermanphoto.com and use the dropdown add-to-cart to actually add an item to your cart. Look through various posts and you’ll see that the selection lists are different depending on the print being offered. Not only are some using4×5 aspect ratio, but even within what I call the square format – the size offerings are different.
So use the add to cart button, and then click return to shopping from the Paypal page. Obviously don’t buy anything and you might want to clear the cart when your finished.
OVERVIEW
In a nutshell, here are the parts of the cart:
- several javascript ( js) files that creates the selections add-to-cart box in the post and submits the info to paypal. (examples: rectangle.js, small-rectangle.js, square-small.js)
- javascript (also in it’s own file) that does the calculations (only one of these which I call order-calculations.js. It’s a good idea to put these javascript functions in separate js files so that they can be included or not as you please based on what type of Wordpress page you are on.
The simplest way to use the JS files is to include them in the Wordpress header.php file in the head section. As I say, you can get fancy and include or not include them depending on what sort of post / page you’re displaying. In my case, I only include these files if I’m on the home page, or on a category or a single page. But not on the search page or the real page page (if you know what I mean). No use including this stuff if you don’t have add-to-cart buttons on the page.
- A WORDPRESS POST SAVED AS A DRAFT OF THE CODE THAT WILL GO INTO THE POST BODY. I use this draft to copy and paste the code into a new post where I’ll change just two lines of code for each new post (photograph) to make the thing work.
GETTING STARTED
1. I ACTUALLY CREATED TWO WORDPRESS DRAFT POSTS WHICH I USE AS MY TEMPLATES (though you could do it with one). When I want to add a picture, I copy one of these drafts, and create a new post. The new post will contain the image, the add-to paypal button and whatever chit-chat about the picture I can think of. One draft post is for what I call RECTANGLE prints, and I have a SQUARE DRAFT for pictures which are in the 4×5 ratio. If all your prints are in the 35mm aspect ratio, you’d only need one of these draft posts to copy.
EXAMPLE OF RECTANGLE WORDPRESS DRAFT POST
<div class=”my_photo_class”>
<!– upload your image with wordpress media manager here. I use the photo class so that I can apply whatever css styling I want to all the photos at one time with css –>
</div>
<div class=”MY_POST_CLASS”> <!– Same idea here. The form and text are all able to be styled with whatever you come up with in css –>
<form target=”paypal” action=”https://www.paypal.com/cgi-bin/webscr” method=”post” >
<input type=”hidden” name=”on0″ value=”Size” />
<div> <script type=”text/javascript”
src=”/rectangle.js”> <!– this is where you are including various add-to-cart type selection boxes; as mentioned I have six of these to choose from –>
</script> </div>
<input type=”hidden” name=”onID” value=”ID HERE” /> <!– once you have your draft post set up, these are the only two fields you need to change for each post –>
<input type=”hidden” name=”onTitle” value=”TITLE GOES HERE” />
<input type=”image” src=”https://www.paypal.com/en_US/i/btn/x-click-but22.gif” border=”0″ name=”submit” onClick=“CalculateOrder(this.form)” alt=”Make payments with PayPal – it’s fast, free and secure!” />
<input type=”hidden” name=”add” value=”1″ />
<input type=”hidden” name=”cmd” value=”_cart” />
<input type=”hidden” name=”business” value=”YOUR PAYPAL ACCOUNT E-MAIL GOES HERE” />
<input type=”hidden” name=”item_name” value=”Options Change Amount” />
<input type=”hidden” name=”amount” value=”1.00″ />
<input type=”hidden” name=”no_shipping” value=”2″ />
<input type=”hidden” name=”no_note” value=”1″ />
<input type=”hidden” name=”currency_code” value=”USD” />
</form>
<!— text that you want to write about the image goes here –>
</div>
Example of what dropdown looks like:
// end of rectangle draft template
Some notes about this form. First off, definitely don’t copy and paste the exact code I’m showing you above into your cart, because there are sure to be a few things that got messed up when I pasted this into this wordpress post, plus, it just isn’t the way to do it. This is just here as a guide. You want to create your own add-to-cart button in paypal with your own options, and use that as a starting point for the wordpress template.
For most new posts, my default rectangle.js file doesn’t need to be changed, and the only two fields I need to replace are the ID FIELD and the TITLE FIELD. I have forgotten to make these changes once or twice, and the result was that someone bought a print that said ID FIELD HERE and TITLE FIELD HERE. Wasn’t a big deal to figure out what they had ordered since there was only one print that had this problem and I just did a search for those phrases. But you get the idea. Best to fill them out. I suppose that in the best of all worlds, the id would be automatically assigned, and the title would be pulled from the post title. Originally, I think I didn’t want to do this because it made it Wordpress dependent and I didn’t know if I would be sticking with WP for the storefront.
**** VERY IMPORTANT ***
Wordpress in Visual Mode will play all sorts of havoc with the code you paste in. This was one of the biggest hassles I had in the beginning. If you are in visual mode during editing or creating a new post, and you paste this sort of javascript code, the WP editor will make a total mess of it.
Two solutions: 1) Use a better more flexible wordpress editor like tinymce, or do what I do (which I will admit took some getting used to) TURN OFF THE VISUAL OPTION so that you just never see it, and can never select it by mistake. Even if you’ve already created the post correctly and then go to make a change in the description and use the Visual Editor by mistake and change it. Wham. It will get messed up again. In other words, everything I write in the storefront is through the Wordpress HTML tab.
CALLING THE FUNCTION TO FIGURE OUT WHAT THINGS COST
onClick=”CalculateOrder(this.form)”
This function is called when the customer presses the add-to-cart button. It calls the CalculateOrder function which must be in the header.php wherever the add to cart button is going to be used.
MORE ABOUT THE rectangle.js etc. files
Why so many js files? On my posts I have six: rectangle-small, rectangle, rectangle-large, square-small, square, square-large
Rectangle and Square contain the most common size options for those aspect ratios. Rectangle stuff will have 9×12 inches, 12 x 18 inches etc. Square would be for photographs in the 4×5 ratio. And sometimes I don’t want to offer a really big print since I know it isn’t going to blow up well. Other times I know that the print can go even bigger than my normal offering. So that gives you three files for each aspect size.
HOW IT’S ALL PUT TOGETHER
WHAT YOU ONLY NEED TO DO ONCE
1. Create a javascript file which is going to be included at runtime, and which will contain the script for your selection box. Here’s what rectangle-small looks like:
rectangle-small.js
// JavaScript Document
// RECTANGLE dropdown list for cart this is offers prints that only go as large as 12×18 inches.
// I have a discount field which I use sometimes but if you aren’t going to do sales etc., you don’t need it.
document.write(”<input type=’hidden’ name=’onDiscount’ value=’1.0′ />”);
document.write(” <select name=’os0′ size=’6′>”);
document.write(”<option value=’5×7′>$30.00 : 5 x 7 print : NOT MATTED “);
document.write(”<option value=’5×7-M’>$40.00 : 5 x 7 print : 8×10 MAT “);
document.write(”<option selected=’selected’ value=’9×12′>$80.00 : 9×12 print : NOT MATTED *LTD*”);
document.write(”<option value=’9×12-M’ >$95.00 : 9×12 print : 12×16 MAT *LTD*”);
document.write(”<option value=’12×18′>$125.00 : 12×18 print : NOT MATTED “);
document.write(”<option value=’12×18-M’>$145.00 : 12×18 print : 20×24 MAT “);
document.write(”</select>”);
// end of file
MORE ABOUT calculate-order.js
Here, more or less, is the idea for the calculate function. I’m just including a bit of it since you may change it to only offer a few photo sizes and add-ons.
* * *
// calculate order
// not included in headers of home or pages
function CalculateOrder(form)
{
discount = form.onDiscount.value ;
if (form.os0.value == “5×7″)
{
form.amount.value = 30.00 * discount ;
form.item_name.value = “ID: ” + form.onID.value + ” ” + form.onTitle.value + ” 5×7 print – NOT MATTED” ;
}
if (form.os0.value == “5×7-M”)
{
form.amount.value = 40.00 * discount ;
form.item_name.value = “ID: ” + form.onID.value + ” ” + form.onTitle.value + ” 5×7 print on 8 x 10 MAT” ;
}
if (form.os0.value == “8×10″)
{
form.amount.value = 45.00 * discount ;
form.item_name.value = “ID: ” + form.onID.value + ” ” + form.onTitle.value + ” 8×10 print – NOT MATTED” ;
}
* * *
And here’s what it looks like in the header.php wordpress file:
<?php if (is_category() || is_single() ) { ?>
<script type=”text/javascript”
src=”/calculate-order.js”>
</script>
<?php } ?>
* * *
NOW THAT YOU HAVE ALL YOUR FILES SETUP here’s the workflow for adding a new photograph.
1. Copy the code from your draft template
2. Create new post
3. Paste what you just copied into the new post
4. Use wordpress or whatever you want to add your image
5. Give the Post a Title
6. In the code you just pasted in, change these two lines
<input type=”hidden” name=”onID” value=”ID HERE” /> <!– once you have your draft post set up, these are the only two fields you need to change for each post –>
<input type=”hidden” name=”onTitle” value=”TITLE GOES HERE” />
7. Publish. You’re done. Repeat for each picture.
* * *
SOME FINER POINTS
I mentioned before that you can choose to include whatever dropdown js file you want, each with different combinations of price size etc. Just make sure that your calculate-order function is changed to deal with any new price product combinations you come up with. What is good about this is that you can easily make global changes in one spot and not have to change each post. In other words, if you decide that your 8 x 10 print should sell for $1000 instead of $100, you would make the necessary change in the js file that displays prices and sizes, and make sure that your calculation function is changed so that it can deal with that condition. Once the changes are made and uploaded, the display will change for all products that use that js file (though it’s not a good idea to do this too often as sometimes stuff gets cached in the browser).
A Global Discount
- there’s already a discount field set in the calculate order function. Now it’s set for “1″. But if you want to do a global discount, you just add a line like this:
// document.write(”<br><br><b>Add item to cart for 20% discount</b> Ends May 25 2009 <br>”); at the end of the rectangle.js file.
CAVEAT
The code that’s shown is just to give you an idea. It’s true that I copied it directly from my own code, but your needs may be different, and since I’m writing this with the Visual Editor there may have been some changes made when I pasted it into this post. If you think that you can’t do this without directly copying my code, then you’re not ready to do this.
I mentioned it before, but will repeat this: THE VISUAL EDITOR in WP will mess up the code you attempt to paste. Either turn off your Visual Editor so that you don’t accidently use it (even when you do a post update it will mess up your code); or use a Wordpress Editor that will leave your code alone.
If the user has javascript turned off – this won’t work at all. I haven’t run into that problem, but it is worth a mention.
Good luck. And as I say – I definitely can’t answer questions about this process, but offer it as a starting point and can say that I’ve been using this code, or something along these lines for the last ten years (i.e. even before I used Wordpress or even any blog software).
Last modifed – Sept. 12/2009
copyright Dave Beckerman Photography
Yes, you can republish it, so long as you include a link back to this site. i.e. Republished with permission of Dave Beckerman (link to the home page or to the this page).
