Add a PayPal shopping cart to your SmugMug galleries

thenickdude

Note that your jot form can't be added to a photo caption, but I believe it'll be allowed in an HTML block on the page. (or at least, SmugMug only mentioned blocking them inside captions and gallery descriptions).

This means you'll have to ask your customers to manually enter the photo they wanted.

My extension does have an option to use plain links instead of button images, which will be considerably more compact on the page than in my current example gallery.

MomaZunk

Yes for the Team and Individuals, it is just asking the customer for a jersey number, so that will work.
I was hoping to have a link in the caption of the image, but I guess that is not possible now? I tried it in one of my test galleries, and did not have a problem opening the form in a separate tab. Passing the file value to the jot form is the next challenge, but perhaps some of your coding could work with it.

thenickdude

Oh, it's a link which opens the form in a separate tab? In that case, yeah, my extension could help out by adding the photo details of the selected photo to the link you supply. The Jot form would have to be somehow set up to retrieve that value from the URL and add it to the form, I'll have to see what their capabilities are.

EDIT: Yup, they support it:

http://www.jotform.com/help/71-Prepopulating-fields-to-your-JotForm-via-URL-parameters

Lemme work my magic a bit, should have an update for the extension ready in a day or so.

TalkieT

It's been a week or so since your new method... I'm curious to know whether you have had any feedback through official channels yet about whether SM is happy with your new approach.

I'm also curious as to what level of customisation is possible of the buttons and surrounding info etc... For example I'd love to know if something like I have currently configured on my site is possible?



Cheers - Neil G

thenickdude

Haven't heard anything, but since it is now literally just a list of links, it's hard to come up with an objection which isn't simply "no PayPal allowed".

Yes, that example of yours can definitely be recreated. This button code:

<div id="paypalBackground">
	<img src="http://photos.smugmug.com/photos/852220825_dBFSz-O.gif" border="0">
	
	<div id="ExplainSizes" class="paypalButton">
		<a href="http://www.nzsnaps.com/Other/Megapixels-and-Megabytes/11993595_oh7mj/">
			<img src="http://photos.smugmug.com/photos/852220823_NHfnv-O.gif" border="0" alt="Explain Images Sizes">
		</a>
	</div>
	
	<div id="paypalButton1" 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="QBFP2888H9BGG">
			<input type="hidden" name="item_name" value="">
			<input type="hidden" name="amount" value="7.50">
			<input type="hidden" name="no_shipping" value="1"> 
			<input type="hidden" name="no_note" value="1"> 
			<input type="hidden" name="currency_code" value="NZD">
			<input type="hidden" name="lc" value="NZ">
			<input type="hidden" name="bn" value="PP-ShopCartBF">
			<input type="hidden" name="photoselection" value="7.50">
			<input id="paypalBuy" type="image" src="http://photos.smugmug.com/photos/456565704_E6n2i-O.gif" border="0" name="submit" alt="Add 1mp image to cart">
			<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
		</form>
	</div>
	
	<div id="paypalButton2" 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="display" value="1">
			<input type="hidden" name="business" value="QBFP2888H9BGG">
			<input type="hidden" name="item_name" value="">
			<input type="hidden" name="amount" value="15.00">
			<input type="hidden" name="no_shipping" value="1"> 
			<input type="hidden" name="no_note" value="1"> 
			<input type="hidden" name="currency_code" value="NZD">
			<input type="hidden" name="lc" value="NZ">
			<input type="hidden" name="bn" value="PP-ShopCartBF">
			<input type="hidden" name="photoselection" value="15.00">
			<input id="paypalBuy" type="image" src="http://photos.smugmug.com/photos/456565704_E6n2i-O.gif" border="0" name="submit" alt="Add 4mp image to cart">
			<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
		</form>
	</div>
	
	<div id="paypalButton3" class="paypalButton">
		<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
			<input type="hidden" name="cmd" value="_xclick">
			<input type="image" src="http://photos.smugmug.com/photos/852220824_R3VBP-O.gif" border="0" name="submit" alt="View Cart and Checkout">
			<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
		</form>
	</div>
</div>

And this CSS:

#paypalBackground{
  position: relative;
}
#paypalButton1 a {
  position: absolute;
  left: 8px;
  top: 51px;
}
#paypalButton2 a {
  position: absolute;
  left: 103px;
  top: 51px;
}
#paypalButton3 a {
  position: absolute;
  left: 198px;
  top: 51px;
}
#ExplainSizes a {
  position: absolute;
  left: 198px;
  top: 27px;
}

Creates:

http://n-sherlock.smugmug.com/Test-gallery

I had to mangle your button code a little bit, so some of those buttons might give an error over at PayPal. The reasons were: one button used code encryption, which isn't supported. Another button seemed to have older code that meant it wasn't identified as a PayPal button by the extension.

TalkieT

Lamah wrote: »

Haven't heard anything, but since it is now literally just a list of links, it's hard to come up with an objection which isn't simply "no PayPal allowed".

Yes, that example of yours can definitely be recreated. This button code:

That is spectacular! Thanks for this. I think I'll setup a new trial account and have a play over the weekend to see if I can now get all the functionality I need before migrating.

Of course I'd still love to hear from SM about official paypal support, but you're a lifesaver.

Cheers - Neil G

araknee

Thank You
Just wanted to say thank for all the effort you have put in.
All my orders are through self fulfilment and I can provide a two day turn around for some.
If I could not achieve this through SM I would have to use an alterante.

thenickdude

MomaZunk wrote: »

I was hoping to have a link in the caption of the image, but I guess that is not possible now? I tried it in one of my test galleries, and did not have a problem opening the form in a separate tab. Passing the file value to the jot form is the next challenge, but perhaps some of your coding could work with it.

This is now supported by the latest version of the PayPal extension, 0.1.8. I've posted a guide on how to perform that Jot Form integration for you here, let me know if you have any trouble:

http://www.sherlockphotography.org/Customisations/PayPal/Advanced

If you've installed the extension already, Chrome should update you to this version automatically within a few hours. To manually update, click the menu button, then Tools->Extensions. Tick the "developer mode" tickbox at the top right, then click "update extensions now". You should see the version number next to the Unofficial SmugMug Extension for Chrome update to 0.1.8 after a couple of minutes.

If you haven't installed the extension already, you can get it here by clicking the green button:

http://www.sherlockphotography.org/Customisations/PayPal/

rich56k

Minor tweeks needed
Hi Lamah,

Thanks for all the work on this (and its different versions).

I've been playing around with the right side area and content per your suggestions and see even more great possibilities for those of us that need to add PayPal functionality to our sites.

What I hope to accomplish with your help would be to move both the PP logo and the view cart button to the far(thest) right as is possible. (With the cart button all the way over to line up with the right edge of the logo)

I know that will leave space in the middle but this will look better than it does now - they need some space and end result is to 'create a rectangular' container that will include each of the items shown (the width being at its widest no wider than the landscape size image above)

Lastly is there a way with CSS to align the 'add to cart' buttons - so far the only way I found to move them was to alter the wording in the descriptions on the left...hey I'm a novice what can I say!

Thanks again!

rich56k

thenickdude

To align the add-to-cart buttons, you can force the text on the left to be a predictable width:

.ss-paypal-product-options li span {
    display:inline-block;
    min-width:14em;
}

Change the "14" to a higher or lower number depending on how much space you want to reserve for that text.

To move the contents of the right column further over, add this CSS:

.ss-paypal-button table {
  width: 100%;
}

.ss-paypal-button table td:last-of-type {
  width: 100px;
  text-align: right;
}

Change the value of the "width:100px" section to reserve the amount of space you need for the right-hand column. You might also want to add this CSS which removes the width-limit that's placed on the entire caption area:

.sm-gallery-smugmug .sm-tile-info {
    max-width: none;
}

rich56k

Lamah,

That worked perfectly (see attached) !! D Thank you!

So well that I'm inspired to take it to the next level...

Is there a way to add a rectangular shaped background (with a choice of color) so it would look like an 'ordering panel' so to speak?

I've looked at TalkieT's that you functionalized and based on what I can surmise he's 'built' his graphic and linked it to a Smug gallery image.

Is there any way to do this with CSS/HTML?

Without building the graphic and linking?

My needs are no where as elaborate as his; just a stylish 'panel' to dress the ordering 'elements' up rather than just text and buttons on the same gallery page background as it is now.

I envision a silver panel background, same width as landscape image above (so the buttons & text would come in slightly from current positions) and topped off with the rounded corner/drop shadow look already being used in all my galleries.

Also is it possible to change the font, size and/or color of the text currently displayed ?

Lastly I've tried to do some mods on my own...I've tried entering my own dimensions for the PP logo ex: the small size is 37 x 23 px, the next size PP supplies (currently in use) is 74 x 46 px. When I changed the size to 53 x 34 (the approx. mid point of existing 2 sizes offered) nothing appeared.

My thought is the only way to display a different size (besides the 2 that PP supplies) would be to start with the large one and use photoshop (or any photo editing software) to reduce its size then upload it to a SmugMug gallery and link it directly replacing the current link to PP for the logo. Would this be possible?

Sorry to ask so much in one post, I believe this should complete the project and I can unveil quite soon afterwards.

Any suggestions would be greatly appreciated, and hopefully this will help many others as you're already doing here!

Thanks,

rich56k

thenickdude

I envision a silver panel background, same width as landscape image above (so the buttons & text would come in slightly from current positions) and topped off with the rounded corner/drop shadow look already being used in all my galleries.

Try:

.ss-paypal-button table {
  margin-top:1em;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  overflow:hidden;
}

.ss-paypal-button table td {
  padding:1em;
  background-color:red; /* Set the background colour */
}
.ss-paypal-button table td * {
  color:black; /* Override text colour */
}
.ss-paypal-button table td .ss-paypal-add-to-cart-section {
  margin-top:0;
}

You'll have to let me know what code you're using now for the drop-shadow (or maybe you can just paste it into that .ss-paypal-button table {} block).

My thought is the only way to display a different size (besides the 2 that PP supplies) would be to start with the large one and use photoshop (or any photo editing software) to reduce its size then upload it to a SmugMug gallery and link it directly replacing the current link to PP for the logo. Would this be possible?

Yep, that'll basically be the only way to do it.

rich56k

Lamah wrote: »

Try:

.ss-paypal-button table {
  margin-top:1em;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  overflow:hidden;
}

.ss-paypal-button table td {
  padding:1em;
  background-color:red; /* Set the background colour */
}
.ss-paypal-button table td * {
  color:black; /* Override text colour */
}
.ss-paypal-button table td .ss-paypal-add-to-cart-section {
  margin-top:0;
}

You'll have to let me know what code you're using now for the drop-shadow (or maybe you can just paste it into that .ss-paypal-button table {} block).



Yep, that'll basically be the only way to do it.

Hi Lamah,

Well you've done it once again - the code works great!

I'll have a couple minor adjustments to ask about in next day or two (work/school was overwhelming for the last week or so) and I'll include screen shots.

The drop shadow I'm using didn't show when I added it - so I'll post that too.

I just wanted to acknowledge your work and thank you again.

rich56k

rich56k

Things are looking up, final adjustments in progress!
Hi Lamah,

OK so I've included both the CSS from the gallery and screen shots from both before I added my rounded corner/drop shadow code (as you suggested - it was code from here on Dgrin).

The top image is before the code and the lower is after.
The CSS here is shown with the additional code still in place (the lower image).

/* GALLERY CSS block #4 Round image corners and displayed in the Lightbox */
.sm-lightbox-image {
border:3px solid #000000;
border-radius:12px; /* round off the corners*/
}

/*Rounded corners and drop shadow in smugmug style galleries*/
.sm-tile-content {
overflow: visible;
}

.sm-tile-single.sm-tiles-uncropped .sm-image {
border: 5px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

.sm-tile-limit-both {
border: 2px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

/*gallery desc 100% width*/

.sm-gallery-description {
width: 100%;
margin: 0 auto!important;
color: #ccc;
padding-bottom: 10px;
border-bottom: 1px solid #000;
margin-bottom: 10px!important;
}

/*remove gallery slideshow and buy buttons*/
.sm-gallery-slideshow-button, .sm-gallery-buymenu {
display: none;
}


/*powered by smug remove*/
.sm-page-powered-by a {
display: None;
}

/*copyright notice */
.sm-tooltip-content:after {
content: 'All photos are property of HooliganUnderground.com. All rights reserved. Unauthorized use is prohibited. For usage rights contact Rich56k@dragbike.com. Most images posted here can be purchased for personal use directly thru the contact page.';
visibility: visible;
display: inline-block;
position: relative;
background-color: #8a8585;
width: 240px;
height: 75px;
}

.sm-user-ui .sm-tooltip, .sm-user-ui.sm-tooltip {
visibility: hidden;
}

/** add to PayPal to gallery mods by www.sherlockphotography.com**/

/* Force add to cart buttons to the right*/
.ss-paypal-product-options li span {
display:inline-block;
min-width:14em;
}
/* force pp logo and view cart to right*/
.ss-paypal-button table {
width: 100%;
}

.ss-paypal-button table td:last-of-type {
width: 100px;
text-align: right;
}
/*add & change background of PayPal 'box' color/font by www.sherlockphotography.com */
.ss-paypal-button table {
margin-top:1em;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
overflow:hidden;
}

.ss-paypal-button table td {
padding:.5em;
background-color:SILVER; /* Set the background colour */
}

.ss-paypal-button table td * {
color:black; /* Override text colour */
}
.ss-paypal-button table td .ss-paypal-add-to-cart-section {
margin-top:0;
}

/*per suggestion I added the code from above and changed just the top line to add drop shadow to PP background box*/

.ss-paypal-button table td {
overflow: visible;
}
.ss-paypal-button table td {
border: 5px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

.ss-paypal-button table td {
border: 1px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

My main concerns now are:
Can we add just a drop shadow - since you already took care of the rounded corners in your earlier
code?

Is it possible to add any text above and/or below the existing elements in the PP order panel?

Slight tweeking of existing elements to 'square things up' - 'view cart' to align with right edge of PP logo, bottom of PP logo to align with bottom of left side elements.

Can I eliminate the file name/number from bottom of gallery page?

Thanks again,

rich56k

rich56k

rich56k wrote: »

Hi Lamah,

OK so I've included both the CSS from the gallery and screen shots from both before I added my rounded corner/drop shadow code (as you suggested - it was code from here on Dgrin).

The top image is before the code and the lower is after.
The CSS here is shown with the additional code still in place (the lower image).

/* GALLERY CSS block #4 Round image corners and displayed in the Lightbox */
.sm-lightbox-image {
border:3px solid #000000;
border-radius:12px; /* round off the corners*/
}

/*Rounded corners and drop shadow in smugmug style galleries*/
.sm-tile-content {
overflow: visible;
}

.sm-tile-single.sm-tiles-uncropped .sm-image {
border: 5px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

.sm-tile-limit-both {
border: 2px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

/*gallery desc 100% width*/

.sm-gallery-description {
width: 100%;
margin: 0 auto!important;
color: #ccc;
padding-bottom: 10px;
border-bottom: 1px solid #000;
margin-bottom: 10px!important;
}

/*remove gallery slideshow and buy buttons*/
.sm-gallery-slideshow-button, .sm-gallery-buymenu {
display: none;
}


/*powered by smug remove*/
.sm-page-powered-by a {
display: None;
}

/*copyright notice */
.sm-tooltip-content:after {
content: 'All photos are property of HooliganUnderground.com. All rights reserved. Unauthorized use is prohibited. For usage rights contact Rich56k@dragbike.com. Most images posted here can be purchased for personal use directly thru the contact page.';
visibility: visible;
display: inline-block;
position: relative;
background-color: #8a8585;
width: 240px;
height: 75px;
}

.sm-user-ui .sm-tooltip, .sm-user-ui.sm-tooltip {
visibility: hidden;
}

/** add to PayPal to gallery mods by www.sherlockphotography.com**/

/* Force add to cart buttons to the right*/
.ss-paypal-product-options li span {
display:inline-block;
min-width:14em;
}
/* force pp logo and view cart to right*/
.ss-paypal-button table {
width: 100%;
}

.ss-paypal-button table td:last-of-type {
width: 100px;
text-align: right;
}
/*add & change background of PayPal 'box' color/font by www.sherlockphotography.com */
.ss-paypal-button table {
margin-top:1em;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
overflow:hidden;
}

.ss-paypal-button table td {
padding:.5em;
background-color:SILVER; /* Set the background colour */
}

.ss-paypal-button table td * {
color:black; /* Override text colour */
}
.ss-paypal-button table td .ss-paypal-add-to-cart-section {
margin-top:0;
}

/*per suggestion I added the code from above and changed just the top line to add drop shadow to PP background box*/

.ss-paypal-button table td {
overflow: visible;
}
.ss-paypal-button table td {
border: 5px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

.ss-paypal-button table td {
border: 1px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

My main concerns now are:
Can we add just a drop shadow - since you already took care of the rounded corners in your earlier
code?

Is it possible to add any text above and/or below the existing elements in the PP order panel?

Slight tweeking of existing elements to 'square things up' - 'view cart' to align with right edge of PP logo, bottom of PP logo to align with bottom of left side elements.

Can I eliminate the file name/number from bottom of gallery page?

Thanks again,

rich56k

EDIT: Meant to ask: Can we add a border AND drop shadow

araknee

Hi Lamah,
Your google extention does not appear to be working unless I am doing something wrong.
I have used it previously but now it goes through the motions but does not add anything to the image caption.

I have version 1.8.0

Thanks, Rod

thenickdude

araknee wrote: »

Hi Lamah,
Your google extention does not appear to be working unless I am doing something wrong.
I have used it previously but now it goes through the motions but does not add anything to the image caption.

It's currently working for me, can you paste the PayPal code that you're trying to add here?

araknee

Lamah wrote: »

It's currently working for me, can you paste the PayPal code that you're trying to add here?

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr&quot; method="post" >
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="AM4DCZ564FUTW">
<input type="hidden" name="lc" value="AU">
<input type="hidden" name="item_name" value="foto">
<input type="hidden" name="item_number" value="foto">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="currency_code" value="AUD">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_SM.gif:NonHosted">
<table>
<tr><td><input type="hidden" name="on0" value="print size (contact me for other size prints)">print size (contact me for other size prints)</td></tr><tr><td><select name="os0">
<option value="print - 4"x6"">print - 4"x6" $3.00 AUD</option>
<option value="print - 10"x12'">print - 10"x12' $30.00 AUD</option>
<option value="poster - A4">poster - A4 $14.00 AUD</option>
<option value="poster - A3">poster - A3 $24.00 AUD</option>
<option value="Framed Print 8"x12"">Framed Print 8"x12" $160.00 AUD</option>
<option value="Gallery Canvas 16"x24"">Gallery Canvas 16"x24" $240.00 AUD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="AUD">
<input type="hidden" name="option_select0" value="print - 4"x6"">
<input type="hidden" name="option_amount0" value="3.00">
<input type="hidden" name="option_select1" value="print - 10"x12'">
<input type="hidden" name="option_amount1" value="30.00">
<input type="hidden" name="option_select2" value="poster - A4">
<input type="hidden" name="option_amount2" value="14.00">
<input type="hidden" name="option_select3" value="poster - A3">
<input type="hidden" name="option_amount3" value="24.00">
<input type="hidden" name="option_select4" value="Framed Print 8"x12"">
<input type="hidden" name="option_amount4" value="160.00">
<input type="hidden" name="option_select5" value="Gallery Canvas 16"x24"">
<input type="hidden" name="option_amount5" value="240.00">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypalobjects.com/en_AU/i/btn/btn_cart_SM.gif&quot; border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif&quot; width="1" height="1">
</form>

thenickdude

That actually worked for me, so I'm not sure where the problem is coming in. Are you logged on as the gallery owner in that browser? You're not using Incognito mode?

araknee

Lamah wrote: »

That actually worked for me, so I'm not sure where the problem is coming in. Are you logged on as the gallery owner in that browser? You're not using Incognito mode?

Argh, incognito! I forgot - sorry about that.

rich56k

Getting closer!
Hi Lamah,

Current update: I've included the CSS I'm using now and the resulting screen shot.

/** add to PayPal to gallery mods by www.sherlockphotography.com**/
/* Force add to cart buttons to the right*/
.ss-paypal-product-options li span {
display:inline-block;
min-width:15em;
}
/* force pp logo and view cart to right*/
.ss-paypal-button table {
width: 100%;
}

.ss-paypal-button table td:last-of-type {
width: 100px;
text-align: center;
}

/*add & change background of PayPal 'box' courtesy of www.sherlockphotography.com color/font */

.ss-paypal-button table td {
padding:.5em;
background-color:SILVER; /* Set the background colour */
}

/*add drop shadow to PP background box*/
.ss-paypal-button table td {
overflow: visible;
}

.ss-paypal-button table td {
border: 4px solid #000000!important;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-webkit-box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

.ss-paypal-button table td {
border:5px solid #000000!important;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius:9px;
-webkit-box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

.ss-paypal-button table td * {
color:black; /* Override text colour */
}
.ss-paypal-button table td .ss-paypal-add-to-cart-section {
margin-top:0;
}


My main concerns now are:

To add rounded corners and drop shadow to the border (the silver background corners rounded with your code; I'd like to match the border/drop shadow to match).

Is it possible to add any text above and/or below the existing elements in the PP order panel?

Slight tweeking of existing elements to 'square things up' : 'view cart' to align with right edge of PP logo, bottom of PP logo to align with bottom of left side elements, and 'add to cart' buttons to lower to be better aligned with the item names/desc.

The border around the PayPal logo is an unintended result of the current CSS - looks a bit out of place can it be removed?

Can I eliminate the file name/number from bottom of gallery page?

Thanks again,

rich56k

thenickdude

Try this CSS:

/** add to PayPal to gallery mods by www.sherlockphotography.org**/
/* Force add to cart buttons to the right*/
.ss-paypal-product-options li span {
    display:inline-block;
    min-width:15em;
}
/* force pp logo and view cart to right*/
.ss-paypal-button table {
    width: 100%;
}

.ss-paypal-button table td:last-of-type {
    width: 100px;
    text-align: center;
}

/*add & change background of PayPal 'box' courtesy of www.sherlockphotography.org color/font */ 

.ss-paypal-button table td {
    padding:.5em;
    background-color:SILVER; /* Set the background colour */
    overflow: visible;
}

/*add drop shadow to PP background box*/
.ss-paypal-button > table > tr > td, .ss-paypal-button > table > tbody > tr > td {
    border: 4px solid #000000!important;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    -webkit-box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
    box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
    -moz-box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
    filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
    _filter: none;
}

.ss-paypal-button * {
    color:black !important; /* Override text colour */
}
.ss-paypal-button .ss-paypal-add-to-cart-section {
    margin-top:0;
}

Post your PayPal button code you're using too (enclose it in [code​][/code​] blocks so that it formats properly in the forums here).

About the filenames you mention displaying... where are these exactly? SmugMug has an option in the gallery settings to show a filename for an image that doesn't have a caption defined, but since the PayPal button takes up the caption, that filename shouldn't be appearing regardless of what that setting is set to.

rich56k

Lamah wrote: »

Try this CSS:

/** add to PayPal to gallery mods by www.sherlockphotography.org**/
/* Force add to cart buttons to the right*/
.ss-paypal-product-options li span {
    display:inline-block;
    min-width:15em;
}
/* force pp logo and view cart to right*/
.ss-paypal-button table {
    width: 100%;
}

.ss-paypal-button table td:last-of-type {
    width: 100px;
    text-align: center;
}

/*add & change background of PayPal 'box' courtesy of www.sherlockphotography.org color/font */ 

.ss-paypal-button table td {
    padding:.5em;
    background-color:SILVER; /* Set the background colour */
    overflow: visible;
}

/*add drop shadow to PP background box*/
.ss-paypal-button > table > tr > td, .ss-paypal-button > table > tbody > tr > td {
    border: 4px solid #000000!important;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    -webkit-box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
    box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
    -moz-box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
    filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
    _filter: none;
}

.ss-paypal-button * {
    color:black !important; /* Override text colour */
}
.ss-paypal-button .ss-paypal-add-to-cart-section {
    margin-top:0;
}

Post your PayPal button code you're using too (enclose it in [code​][/code​] blocks so that it formats properly in the forums here).

About the filenames you mention displaying... where are these exactly? SmugMug has an option in the gallery settings to show a filename for an image that doesn't have a caption defined, but since the PayPal button takes up the caption, that filename shouldn't be appearing regardless of what that setting is set to.

OK here's my PayPal button code as requested...

<table>
* <tr>
* * <td>
* * * <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="BZRZ3VMEMKS5E">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="item">
<input type="hidden" name="item_number" value="item">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax_rate" value="9.750">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
<table>
<tr><td><input type="hidden" name="on0" value="Print Type / Sizes / Prices">Print Type / Sizes / Prices</td></tr><tr><td><select name="os0">
	<option value="Digital for web">Digital for web $9.95 USD</option>
	<option value="8 x 12" glossy">8 x 12" glossy $19.95 USD</option>
	<option value="12 x 18" lustre">12 x 18" lustre $49.95 USD</option>
	<option value="20 x 30" lustre">20 x 30" lustre $69.95 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="Digital for web">
<input type="hidden" name="option_amount0" value="9.95">
<input type="hidden" name="option_select1" value=" 8 x 12" glossy">
<input type="hidden" name="option_amount1" value="19.95">
<input type="hidden" name="option_select2" value="12 x 18" lustre">
<input type="hidden" name="option_amount2" value="49.95">
<input type="hidden" name="option_select3" value="20 x 30" lustre">
<input type="hidden" name="option_amount3" value="69.95">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

* * </td>
* * <td>
* * * 
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="BZRZ3VMEMKS5E">
<input type="hidden" name="display" value="1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_viewcart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>


<!-- PayPal Logo --><table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td align="center"></td></tr><tr><td align="center"><a href="https://www.paypal.com/webapps/mpp/paypal-popup" title="How PayPal Works" onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;"><img src="https://www.paypalobjects.com/webstatic/mktg/logo/pp_cc_mark_74x46.jpg" border="0" alt="PayPal Logo"></a></td></tr></table><!-- PayPal Logo -->


* * </td>
* </tr>
</table>

So I tried various border radius settings (starting with the '9' in your CSS) and went up to 35 (see bottom half of attached) so the background is rounding but not the border itself. However, if I increase the border thickness the border does get thicker.

And in the attached screen shots the upper part is in FF and the lower in Chrome; note the FF version shows a drop shadow for the center border also - not a problem - just noteworthy for future reference.

Lastly the file name I mentioned turns out to be the keywords ... (6r9a50481 408396328, etc.) and are appearing under the PayPal box ... the only way to delete I can find is in each photo ( edit> photo details) one at a time (I never key worded ANY of my images - knowingly) is there some CSS I can add site wide that will eliminate them?
I did see a key words option in the gallery settings and regardless of whether I leave it blank or enter 'undefined' the key words will still appear until I delete pic by pic...


Thanks
rich56k

bazancik

Hi,

does the table layout for Paypal links and buttons work with the Chrome extension - or need to copy and paste the code (with manually embedding PayPal links) to each photo caption?

Sorry - still cannot get my PayPal links (made through the extension - thanks for it!) into any decent shape (lots of questions posted earlier but no answers )

Now just not sure if tried to do it in the right way...

cheers,

thenickdude

The table layout works with the Chrome extension.

I hope to find time to answer some layout questions later today, or maybe tomorrow.

bazancik

Lamah wrote: »

The table layout works with the Chrome extension.

I hope to find time to answer some layout questions later today, or maybe tomorrow.

Thanks. I guess I need to add some code to HTML somewhere? And CSS?
Still having the buttons aligned left (though in preview they look good to the right)

cheers,

rich56k

Unveiled...
OK so I went ahead and unveiled tonight. Partially to see if there would be issues in regards to the PayPal buttons...

None are evident, buttons still aligned, functioning well, etc Thanks Lamah !!

Still have the concerns listed in my last post - but wanted to see if the unveil was problematic...


http://rich56k.smugmug.com/Motorcycles/XDLWBBFSTUNTS/XDL-LA-THE-LOST-FILES

rich56k

bazancik

Hi Lamah,

after playing more with the PayPal and static caption in lightbox I ended up with the photos being cut at the bottom rather than being resized (to fit 3 paypal options I needed to increase the 'reserve more room for the lightbox caption' from the 90px to 180px). Do you know what did I possibly do wrong?

here how it looks:

http://bazancik.smugmug.com/Smug-Folders/PRINTS/i-d94qVxN

Thanks for any help with that.

thenickdude

Congrats on the unveil!

Those filename keywords are created by turning on "filename keywording" in your Account Settings under the Discovery / Search tab. The keywords are generated at the time the photo is uploaded, and I don't think there is a faster way to remove them except by doing it one-by-one, or going into the Organize view, selecting the gallery, then clicking Edit -> Captions & Keywords to edit multiple photos at once.

Try this new HTML:

<table class="fancy-paypal-box">
	<tr>
		<td class="left-side">
			<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
				<input type="hidden" name="cmd" value="_cart"> 
				<input type="hidden" name="business" value="BZRZ3VMEMKS5E"> 
				<input type="hidden" name="lc" value="US"> 
				<input type="hidden" name="item_name" value="item"> 
				<input type="hidden" name="item_number" value="item"> 
				<input type="hidden" name="button_subtype" value="products"> 
				<input type="hidden" name="no_note" value="0"> 
				<input type="hidden" name="cn" value="Add special instructions to the seller:"> 
				<input type="hidden" name="no_shipping" value="2"> 
				<input type="hidden" name="currency_code" value="USD"> 
				<input type="hidden" name="tax_rate" value="9.750"> 
				<input type="hidden" name="add" value="1"> 
				<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
				<table>
					<tr>
						<td>
							<input type="hidden" name="on0" value="Print Type / Sizes / Prices">
							Print Type / Sizes / Prices
						</td>
					</tr>
					<tr>
						<td>
							<select name="os0">
								<option value="Digital for web">Digital for web $9.95 USD</option>
								<option value="8 x 12&quot; glossy">8 x 12" glossy $19.95 USD</option>
								<option value="12 x 18&quot; lustre">12 x 18" lustre $49.95 USD</option>
								<option value="20 x 30&quot; lustre">20 x 30" lustre $69.95 USD</option>
							</select>
						</td>
					</tr>
				</table>
				<input type="hidden" name="currency_code" value="USD"> 
				<input type="hidden" name="option_select0" value="Digital for web"> 
				<input type="hidden" name="option_amount0" value="9.95"> 
				<input type="hidden" name="option_select1" value="8 x 12&quot; glossy"> 
				<input type="hidden" name="option_amount1" value="19.95"> 
				<input type="hidden" name="option_select2" value="12 x 18&quot; lustre"> 
				<input type="hidden" name="option_amount2" value="49.95"> 
				<input type="hidden" name="option_select3" value="20 x 30&quot; lustre"> 
				<input type="hidden" name="option_amount3" value="69.95"> 
				<input type="hidden" name="option_index" value="0"> 
				<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
				<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
			</form>
		</td>
		<td class="right-side">
			<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
				<input type="hidden" name="cmd" value="_cart"> 
				<input type="hidden" name="business" value="BZRZ3VMEMKS5E"> 
				<input type="hidden" name="display" value="1"> 
				<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_viewcart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
				<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
			</form> 
			
			<!-- PayPal Logo -->
			<a class="how-paypal-works" href="https://www.paypal.com/webapps/mpp/paypal-popup" title="How PayPal Works" target="_blank">
				<img src="https://www.paypalobjects.com/webstatic/mktg/logo/pp_cc_mark_74x46.jpg" border="0" alt="PayPal Logo">
			</a>
			<!-- PayPal Logo -->
		</td>
	</tr>
</table>

And this new CSS:

.fancy-paypal-box {
	width: 100%;
	border-spacing:4px 0; /* Spacing between left and right half */
	border-collapse:separate;	
}

.fancy-paypal-box td {
	padding: .5em;
	background-color: SILVER;
	overflow: hidden;
	vertical-align:middle;
}

.fancy-paypal-box .left-side,
.fancy-paypal-box .right-side {
	border: 4px solid #000 !important;
	border-radius: 14px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	-webkit-box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
	box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
	-moz-box-shadow: 6px 3px 6px rgba(0, 0, 0, .5);
	filter: progidXImageTransform.Microsoft.Shadow(Color='000000', direction='3', strength='3');
	_filter: none
}

.fancy-paypal-box .right-side {
	width: 100px;
	text-align: center
}

.fancy-paypal-box .ss-paypal-product-options li span {
	display: inline-block;
	min-width: 15em
}

.fancy-paypal-box * {
	color: #000 !important
}

.fancy-paypal-box .how-paypal-works {
	display: block;
	padding: 10px;
}

.ss-paypal-button .ss-paypal-add-to-cart-section {
	margin-top: 0
}

rich56k

Well I replaced the HTML and CSS per your instructions ... and I'm very, very pleased with the results!!

:ivar :ivar

See attached - this totally exceeded my expectations and looks so smooth and professionally coded I'm
overwhelmed!

Geez ... at this point the only thing left to ask is ... nothing! I'm just going to enjoy the look, feel and functionality and start adding more galleries!!

Thanks again Lamah!!!

rich56k