Originally Posted by Craig Ridley For the buttons, either download some you like from the web or create your own in photoshop. Upload these images to a hidden smumug gallery and then use the URL for these images in your header code replacing the [URL to Buy Button] section of the code. In terms of the drop down list, you have the following code in your header section: <select ID="paypalSelect" name="photoselection"> <option selected value="10.00">Product Option 1</option> <option value="20.00">Product Option 2</option> </select> Change or add additional option lines to suit the products you wish to sell. The amount in the value field is the price that is passed back to paypal and the text is what the user sees (and is also passed to paypal so you know what they have bought). Hope this helps get you going...

Hi,
I didn't know where else to add this reply so I tried to find someone who is new like me and stumped. I put the code into my header, and 2 javascript areas, but I don't know what I'm supposed to put into those [] areas. other than the code I got from paypal for my add to cart button. I'm just barely beginning with all this and its quite confusing to me. At the present time, I have nothing showing up on my site in regards to paypal. And I know thats because I don't have those things listed correctly. Could you please take a look and help me get this working? I have a total of 8 separate areas I want to have listed for pricing, ie; Individual prices, custom collages, canvas gallery wraps, standouts, and lots more. I want to list all these but don't know how or where, or if I even can list all of them.
Thank you in advance,
Judy

Originally Posted by Kaspar Hi, I didn't know where else to add this reply so I tried to find someone who is new like me and stumped. I put the code into my header, and 2 javascript areas, but I don't know what I'm supposed to put into those [] areas. other than the code I got from paypal for my add to cart button. I'm just barely beginning with all this and its quite confusing to me. At the present time, I have nothing showing up on my site in regards to paypal. And I know thats because I don't have those things listed correctly. Could you please take a look and help me get this working? I have a total of 8 separate areas I want to have listed for pricing, ie; Individual prices, custom collages, canvas gallery wraps, standouts, and lots more. I want to list all these but don't know how or where, or if I even can list all of them. Thank you in advance, Judy

Judy,

There are a couple of places you need to fill in the blanks using the code I posted:

[PayPal Account ID] = this should be replaced with your account id from paypal. I use the email address that I sign into my paypal account with

[URL to Buy Button] = You need to create you own buy button and store on your website in a hidden gallery (or use the default paypal button). This should be replaced with the URL to the image you want to display as your "buy now" button

[URL to View Cart Button] = As per the above comment

If you have all the code in your gallery, please provide a link and I will have a look and try guide you through. My knowledge is limited to what I have working on my own site so I will help you where I can.

Craig.

Originally Posted by Craig Ridley Judy, There are a couple of places you need to fill in the blanks using the code I posted: [PayPal Account ID] = this should be replaced with your account id from paypal. I use the email address that I sign into my paypal account with [URL to Buy Button] = You need to create you own buy button and store on your website in a hidden gallery (or use the default paypal button). This should be replaced with the URL to the image you want to display as your "buy now" button [URL to View Cart Button] = As per the above comment If you have all the code in your gallery, please provide a link and I will have a look and try guide you through. My knowledge is limited to what I have working on my own site so I will help you where I can. Craig.

I tried to figure this out, but I can't find any place to put the Buy button. I think I got the view cart button in the right place but I'm not real sure about that either. (I feel so dumb about all this) I also think I made my buttons way to big. I don't know because of course they aren't working yet. What size should I have made them in photoshop?
Also, I don't know what link you need me to send you so you can take a look. Where can I find the link? I have seen a discussion on previous pages about being able to tell which image someone purchases. Does Paypal let me know the image number in its entirety and the size and quantity ordered for that image? I'm sorry to bombard you with all these questions. I'm just wondering if Paypal is the way for me to go, since I know so little about doing all this stuff. Thank you for any help you can give me. I sincerely appreciate it.
Judy

Added: I got the buy button line in place in my code. (it was missing somehow) But nothing is showing up as of yet.

Primarily I deal with digital downloads only. If adding a third party checkout to SM how do I get the digital downloads to work?
I can't seem to win! One of the appeals of SM was the customer download image size functions. But I can't use it because of the lack of currency support. So if I use google or paypal I just can't work out how to link it to a download option and how the customer receives the goods.

regards
kipper

Originally Posted by Kipper Primarily I deal with digital downloads only. If adding a third party checkout to SM how do I get the digital downloads to work? I can't seem to win! One of the appeals of SM was the customer download image size functions. But I can't use it because of the lack of currency support. So if I use google or paypal I just can't work out how to link it to a download option and how the customer receives the goods. regards kipper

Look at my post on page 2 of this thread, and the you will see the CSS and java I used. I have paypal set up as both prints (top right) and digital downloads (bottom right) for many of my galleries. You can see an example here. It is basically the same code as the prints discussed in this thread, though you have to modify the javascript slightly and the hardest part was getting the buttons to align.
Chris

I have successfully implemented the code shown at the beginning of this thread, and now I need some additional help.

1. I would like "Buy" and "View Cart" buttons that match the nav bar buttons which smugmug uses. Where can I find something close???

2. The (current crappy looking) buttons I created always show up to the left of the existing smugmug buttons. How do I position my buy/view cart buttons farthest to the right, and inline with the smugmug buttons?

3. Ideally, I do not want options to buy on all galleries. How do I only apply these buttons to specific galleries?

Please keep in mind that I am a complete idiot when it comes to CSS and Javascript. Thanks in advance for any help you can provide.

My site is at: http://mdmphoto.smugmug.com/

Mike

Originally Posted by Brewmaster I have successfully implemented the code shown at the beginning of this thread, and now I need some additional help. 1. I would like "Buy" and "View Cart" buttons that match the nav bar buttons which smugmug uses. Where can I find something close??? 2. The (current crappy looking) buttons I created always show up to the left of the existing smugmug buttons. How do I position my buy/view cart buttons farthest to the right, and inline with the smugmug buttons? 3. Ideally, I do not want options to buy on all galleries. How do I only apply these buttons to specific galleries? Please keep in mind that I am a complete idiot when it comes to CSS and Javascript. Thanks in advance for any help you can provide. My site is at: http://mdmphoto.smugmug.com/ Mike

You change the alignment of the buttons with CSS. For example:
#payPalButton {margin-top: 25px;} insert whatever you are actually calling your buttons.

To display in certain galleries, add to CSS:
#payPalButtonSet {display: none;}
then for the galleries you want it, .gallery_XXXXXX #payPalButtonSet {display: block;}
Again, the div that you wrap the set in may be named different than mine so adjust accordingly.

You can download my Buy and Add to Cart buttons which are more confluent with SmugMug.

Add to Cart
Buy Button

Chris, thanks, but I am a bit confused.

#payPalButton {margin-top: 25px;} insert whatever you are actually calling your buttons. >>>>> Ok, I think this is the name of my "buy" button, it was in the custom header code as <input ID="paypalBuy" type="image" ....so I assume the name is paypalBuy, is this correct?

then for the galleries you want it, .gallery_7238609 #payPalButtonSet {display: block;}
Again, the div that you wrap the set in may be named different than mine so adjust accordingly>>>>>> In my custom header code, I have the code: <div id="paypalButtonSet" style="display:none;" class="paypalButton">.....so I assume the name is paypalButtonSet, is this correct?

I made these changes and put the code in CSS as follows, but the buttons still show up in all Galleries:

#paypalBuy {margin-top: 25px;}
#paypalButtonSet {display: none;}
.gallery_7238609 #paypalButtonSet {display: block;}

Also, the buttons move vertically in position, but so do the smugmug buttons, so they never align together and my buttons are still to the left of the smugmug buttons. The first line of code seems to make the gap to the header bigger or smaller. Any idea what I am doing wrong?

Originally Posted by Brewmaster Chris, thanks, but I am a bit confused. #payPalButton {margin-top: 25px;} insert whatever you are actually calling your buttons. >>>>> Ok, I think this is the name of my "buy" button, it was in the custom header code as <input ID="paypalBuy" type="image" ....so I assume the name is paypalBuy, is this correct? then for the galleries you want it, .gallery_7238609 #payPalButtonSet {display: block;} Again, the div that you wrap the set in may be named different than mine so adjust accordingly>>>>>> In my custom header code, I have the code: <div id="paypalButtonSet" style="display:none;" class="paypalButton">.....so I assume the name is paypalButtonSet, is this correct? I made these changes and put the code in CSS as follows, but the buttons still show up in all Galleries: #paypalBuy {margin-top: 25px;} #paypalButtonSet {display: none;} .gallery_7238609 #paypalButtonSet {display: block;} Also, the buttons move vertically in position, but so do the smugmug buttons, so they never align together and my buttons are still to the left of the smugmug buttons. The first line of code seems to make the gap to the header bigger or smaller. Any idea what I am doing wrong?

What I would suggest doing (it's a little more work to do this), is just add the paypal code to the gallery description of the galleries you want to add it to. That's the way I have mine set up. Here is the code I use (again, inserted into the gallery description), perhaps it can give you some guidance, or you can just replace what you need for your code. The "..." just means I omitted non-essential parts of the code to keep it short.

Here is paypal code wrapped in div:

<div id="paypalButtonSet" class="paypalButton" align="right">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onSubmit="setPaypalForm(this)" >
  <input type="hidden" name="add" value="1">
  <input type="hidden" name="cmd" value="_cart">
  <input type="hidden" name="business" value="cdmgalleries@gmail.com">
  <input type="hidden" name="item_name" value="">
  <input type="hidden" name="amount" value="">
  <input type="hidden" name="no_shipping" value="0">
  <input type="hidden" name="no_note" value="1">
  <input type="hidden" name="currency_code" value="USD">
  <input type="hidden" name="lc" value="US">
  <input type="hidden" name="bn" value="PP-ShopCartBF">

<select ID="paypalSelect" name="photoselection">
  <option value="9.00">4" x 6" Print Glossy ($9.00)</option>
...
</select>

  <input ID="paypalBuy" type="image" src="/photos/460399872_3VmHU-O.jpg" border="0" name="submit" alt="Buy">
  <img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <input ID="paypalView" type="image" src="/photos/460399853_ZiHkK-O.jpg" border="0" name="submit" alt="View Cart">
  <input type="hidden" name="cmd" value="_cart">
  <input type="hidden" name="business" value="cdmgalleries@gmail.com">
  <input type="hidden" name="display" value="1">
</div>
</form>

And here is the CSS I used to adjust the alignment of the buttons:

/* Slight position adjustments for paypal buttons */
#paypalBuy {position: relative; top: 4px;}
#paypalView {position: relative; top: 4px; right: 15px;}

Hope this helps.
Chris

Sorry Chris, I'm just not getting it. I deleted all the code I put in (from page 1 of this thread), and put in the code you suggested above in one gallery. I made sure to put the correct URL in for the buttons as well. All it did was open a giant gap in that gallery with nothing displayed in the gap.

So, I put all the original code (from page 1 of this thread) back in with the new buttons that you provided me. If you go to my site http://mdmphoto.smugmug.com/ into one of the galleries, you will see that the "buy" and "view cart" buttons sit just a bit high next to the "share" and "slideshow" button. I would like to make my buttons line up with the "share" and "slideshow" buttons. Alternatively, if I can't make that happen, I would like the "buy" and "view cart" buttons below the photo.

Originally Posted by Brewmaster Sorry Chris, I'm just not getting it. I deleted all the code I put in (from page 1 of this thread), and put in the code you suggested above in one gallery. I made sure to put the correct URL in for the buttons as well. All it did was open a giant gap in that gallery with nothing displayed in the gap.

What is the link to the gallery you inserted it in? I'm by no means an expert but I could take a look at your code if you give me the gallery link and see if I notice anything out of order.

Here is one:

http://mdmphoto.smugmug.com/gallery/...69197287_h3FpZ

I re-edited my last post as well with more information....you may not have seen that.

Originally Posted by Brewmaster Here is one: http://mdmphoto.smugmug.com/gallery/...69197287_h3FpZ I re-edited my last post as well with more information....you may not have seen that.

Add this to your CSS. It worked when I plugged it in to your site.

#paypalBuy {position: relative; top: 3px;}
#paypalView {position: relative; top: 3px;}

Worked like a charm! Thank you!

Thanks for all the info, Craig (as well as other Smuggers!).

The directions on implementing a PayPal shopping cart are excellent. However, I'd like to make a small modification to the code, but I'm at a loss of where to find the appropriate variables SmugMug uses.

What is the variable for a more verbose Album ID? Instead of a cryptic and lengthy number that is passed on to PayPal, I'd prefer the actual title (ie 'Event Photos/Hockey Tournament') of the gallery.

I'm using a variation of the following code:

 urlToImage = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey + "/Large" + "   " + photoInfo[ImageID]['fileName'];

And while I'm posting, is there any way in which we can implement coupons? It's becoming increasingly important that we pre-sell images at the event itself. Having people commit at the event (and taking advantage of the impulse buyers & excitement of the moment), can make a big difference on our bottom line.

I understand that Google Checkout has coupons, but it is not currently available in Canada. So no help there (yet).

Originally Posted by Giles Thanks for all the info, Craig (as well as other Smuggers!). The directions on implementing a PayPal shopping cart are excellent. However, I'd like to make a small modification to the code, but I'm at a loss of where to find the appropriate variables SmugMug uses. What is the variable for a more verbose Album ID? Instead of a cryptic and lengthy number that is passed on to PayPal, I'd prefer the actual title (ie 'Event Photos/Hockey Tournament') of the gallery. I'm using a variation of the following code: urlToImage = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey + "/Large" + " " + photoInfo[ImageID]['fileName']; And while I'm posting, is there any way in which we can implement coupons? It's becoming increasingly important that we pre-sell images at the event itself. Having people commit at the event (and taking advantage of the impulse buyers & excitement of the moment), can make a big difference on our bottom line. I understand that Google Checkout has coupons, but it is not currently available in Canada. So no help there (yet).

I would love to be able to use coupons and it is possible with paypal. Here is an example of a site that uses paypal and some javascript to implement coupons- you can view source and get the code. I spent a whole weekend trying to make it work for my smug site and got everything working except the actual transfer of the discounted price into the shopping cart. I gave up after that. You can also find some tips on the pay pal developer site here. Would be great if someone could figure this out.

Originally Posted by Craig Ridley This has been written about many times before across a number of threads and I have finally managed to pull everything together into a working solution. Why? The reason is I am based out of Australia and my clients do not like paying in US$ or paying the international shipping costs. I still love smugmug for the ability to show off my photos in their best light, so teaming smugmug with the paypal solution is the best of both worlds for me. Since I have posted a few bits and pieces on paypal in different threads, I hope the code below pulls it together for everybody and is easy to understand. I am not necessarily an expert in HTML, Javascript or CSS so the code presented here is a result of much help from other dgrinners (so thank you to all). Header Code Place the following code in your header to create the product drop down and a buy now and view cart button. Where items are enclosed in [] replace with your own values (dont forget you need to create your own paypal account) <div id="paypalButtonSet" style="display:none;" class="paypalButton"> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onSubmit="setPaypalForm(this)" > <input type="hidden" name="add" value="1"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="[PayPal Account ID]"> <input type="hidden" name="item_name" value=""> <input type="hidden" name="amount" value=""> <input type="hidden" name="no_shipping" value="0"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="AUD"> <input type="hidden" name="lc" value="AU"> <input type="hidden" name="bn" value="PP-ShopCartBF"> <select ID="paypalSelect" name="photoselection"> <option selected value="10.00">Product Option 1</option> <option value="20.00">Product Option 2</option> </select> <input ID="paypalBuy" type="image" src="[URL to Buy Button]" border="0" name="submit" alt="Buy"> <img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1"> </form> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input ID="paypalView" type="image" src="[URL to View Cart Button]" border="0" name="submit" alt="View Cart"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="[PayPal Account ID]"> <input type="hidden" name="display" value="1"> </form> </div> Bottom Javascript Javascript function to create a URL for the image currently selected and pass back to Paypal. /*========================================*/ /*== Paypal shopping functionality ==*/ /*========================================*/ function setPaypalForm(form) { urlToImage = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey + "/Large" + " " + photoInfo[ImageID]['fileName']; i = form.photoselection.selectedIndex sPhotoType = form.photoselection.options[i].text; sPhotoPrice = form.photoselection.options[i].value; urlToImage = urlToImage + " " + sPhotoType ; form.item_name.value = urlToImage; form.amount.value = sPhotoPrice; } Top Javascript Code to dyamically position the previously defined DIV into the altViews DIV i.e. placement on the screen. /*=========================================*/ /*== Position Paypal - ==*/ /*=========================================*/ YE.onContentReady("altViews", MovePaypalContent); function MovePaypalContent() { var paypalObj = document.getElementById("paypalButtonSet"); var altViews = document.getElementById("altViews"); var smugmug= document.getElementById("smugmug"); if (altViews && paypalObj && smugmug) { var paypalSetObj = paypalObj.parentNode.removeChild(paypalObj); altViews.appendChild(paypalSetObj); paypalSetObj.style.display = "inline"; } } Hope it helps everybody and let me know if you have troubles (and I will offer what support I can). Of course, you can check my website out to see it in action (still in some phases of redevelopment but at least paypal is working). Cheers.

Hi,

I have just come across this thread, and have tried to implement this into my gallery, but do not get anything displayed.

For example... http://www.photographywithpassion.co...40418270_swpLy

PLEASE HELP.

Thanks,

Michael

***FIXED*** SEEMS THIS DOES NOT WORK WITH SMUGMUG SMALL GALLERY STYLE!!

Originally Posted by magicpic I have an account with paypal. I am a little confussed to what to put in the [] I made my values through the creat paypal button If I can see you [] then I think I can figure it out ? Doing paypal this way means that it shows up in every gallery, right? Or, I believe that if I wanted this in only one gallery I could put the header code stuff in my gallery description,right? ? plus in the option in palpal, I would like to see my filename that is under the photos, could this be possible? thanks janis

Ok, I think I have confused myself and made this more difficult than it is. I pasted the code from Craigs first post. I signed up for an account with PayPal and put the email addresses in the [ ], there is the [ ] left that I am supposed to past the URL for the view cart and buy buttons, but I am going to use the PayPal buttons and so I dont know what to use. I did past the info from the PayPal website, but it doesnt seem to work - Ive done something. Also, the /*==start paypal==*/ is now showing up at the top of my client galleries.
Can someone help? Thanks!

Quick question. If I use the PayPal option, am I now responsible for filling the print order too or does it still go through smugmug's print services?

Thanks!

Originally Posted by jocko Quick question. If I use the PayPal option, am I now responsible for filling the print order too or does it still go through smugmug's print services? Thanks!

You fill the print order yourself. When the customer places the order through paypal you are notified by email of the photo they are ordering. Its then up to you to print the photo (or have it printed) and mail it to the customer.