Add a PayPal shopping cart to your SmugMug galleries

12467

Comments

  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited October 23, 2013
    bazancik wrote: »
    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?

    Unfortunately, if you're using "right-click protection", and you've removed the line in the CSS which causes the image to always stretch to fill the window, what will happen instead is that it will get cropped vertically by the amount of space you reserve.

    I haven't been able to figure out a good solution for that. Either disable right-click protection, or reduce the amount of space you're reserving (so some scrolling would be required).
  • bazancikbazancik Registered Users Posts: 33 Big grins
    edited October 24, 2013
    Lamah wrote: »
    Unfortunately, if you're using "right-click protection", and you've removed the line in the CSS which causes the image to always stretch to fill the window, what will happen instead is that it will get cropped vertically by the amount of space you reserve.

    I haven't been able to figure out a good solution for that. Either disable right-click protection, or reduce the amount of space you're reserving (so some scrolling would be required).


    Thanks Lamah. Would bringing the 'stretch to fill the window' option back solve the problem? All the photos are high resolution so should be less of a problem.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited October 24, 2013
    bazancik wrote: »
    Thanks Lamah. Would bringing the 'stretch to fill the window' option back solve the problem? All the photos are high resolution so should be less of a problem.

    Yup, bringing back that line should fix it!
  • bazancikbazancik Registered Users Posts: 33 Big grins
    edited October 24, 2013
    Lamah wrote: »
    Yup, bringing back that line should fix it!

    :ivarthat worked! doh! and I think I tried to change every single parapeter in the code... Thanks Lamah!

    one more question - any idea of how to align the text links with the buttons and / or resize the buttons (they are a bit big at the moment -- the text seems to be lower at this moment)

    thank you!!
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited October 24, 2013
    bazancik wrote: »
    :ivarthat worked! doh! and I think I tried to change every single parapeter in the code... Thanks Lamah!

    one more question - any idea of how to align the text links with the buttons and / or resize the buttons (they are a bit big at the moment -- the text seems to be lower at this moment)

    thank you!!

    I'll take a look at that over the next day or so.

    By the way, did you realise that your PayPal test buttons are in your public galleries?

    http://www.franeksiedlok.com/Smug-Folders/Galleries/Aotearoa/i-PNPgwgJ/A

    Probably you're not selling canvasses for that price!

    If you collect photos from one gallery into another, there's still only one caption field for the both of them, so adding a PayPal button will add it everywhere that that photo appears. You need to make a copy of the photo or upload it again separately to avoid that.

    EDIT: And did you know that most of the images in your blog/rant don't display? They might be in a gallery marked as "private", which are only visible to you, use Unlisted instead.
  • bazancikbazancik Registered Users Posts: 33 Big grins
    edited October 24, 2013
    Hi Lemah,


    seems that missed a few - I realised at some point that the caption would copy across all galleries - now only creating a copy for the canvas site).

    there are a few unfinished things around: the whole New Smugmug move was so badly managed that at some point I just deleted 95% of photos and decided to start anew. Now will need to upload all the galleries from the past :( great example of how not to migrate your system ;-)

    Blog (rant) - photos need to be uplodaed and re-linked. But I'm not convinced I like the new integration (want more control of the final look - would quite like be mirror the Blogger collage look of posts - but guess that would not work) So waiting for somebody to come with some clever way of integrating the blog into smugmug.

    thanks for the help - really appreciate!!

    f

    Lamah wrote: »
    I'll take a look at that over the next day or so.

    By the way, did you realise that your PayPal test buttons are in your public galleries?

    http://www.franeksiedlok.com/Smug-Folders/Galleries/Aotearoa/i-PNPgwgJ/A

    Probably you're not selling canvasses for that price!

    If you collect photos from one gallery into another, there's still only one caption field for the both of them, so adding a PayPal button will add it everywhere that that photo appears. You need to make a copy of the photo or upload it again separately to avoid that.

    EDIT: And did you know that most of the images in your blog/rant don't display? They might be in a gallery marked as "private", which are only visible to you, use Unlisted instead.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited November 3, 2013
    SmugMug have made a change in the last week or so which broke the extension (they now strip out CSS styles in the code, which caused the Chrome Extension to be unable to tell if it had added a button yet, so you would end up with duplicated buttons when you went to re-add them). This has now been fixed in version 0.1.10.

    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.10 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/

    As part of this update, SmugMug have also begun stripping out <table> tags, which were required for the "fancy style paypal box" described earlier on this page. To fix that, the code needs to be changed to use divs instead of tables, which requires this new HTML (replace the buttons with your own PayPal button code):
    <div class="fancy-paypal-box">
    	<div 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>
    	</div>
    	<div 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 -->
    	</div>
    </div>
    

    And this new CSS:
    .fancy-paypal-box {
    	width: 100%;
    	display: table;
    	border-spacing:4px 0; /* Spacing between left and right half */
    	border-collapse:separate;	
    }
    
    .fancy-paypal-box .left-side, 
    .fancy-paypal-box .right-side {
    	padding: .5em;
    	background-color: SILVER;
    	overflow: hidden;
    	display: table-cell;
    	vertical-align:middle;
    
    	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
    }
    

    And if you were using tables in captions for other neat purposes, like displaying tabular data about your subject or your photo... well, now you're shi​t out of luck.
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited November 3, 2013
    Lamah wrote: »
    SmugMug have made a change in the last week or so which broke the extension (they now strip out CSS styles in the code, which caused the Chrome Extension to be unable to tell if it had added a button yet, so you would end up with duplicated buttons when you went to re-add them). This has now been fixed in version 0.1.10.

    Any ideas on why SM does such a thing? I know it's not just to jack w/ developers like you, but it seems every time you make a big move they counter and break it... ne_nau.gif
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited November 3, 2013
    I'm sure it had nothing to do with this extension. They've just recently started filtering the HTML code that's allowed in captions, and it's based on a whitelist system. This means that they start with nothing allowed and must explicitly think of a tag that might be useful in a caption and add it to the allow list. So it's likely that they just didn't consider that tables or inline styles might be useful in image captions.
  • rich56krich56k Registered Users Posts: 547 Major grins
    edited November 3, 2013
    Lamah wrote: »
    SmugMug have made a change in the last week or so which broke the extension (they now strip out CSS styles in the code, which caused the Chrome Extension to be unable to tell if it had added a button yet, so you would end up with duplicated buttons when you went to re-add them). This has now been fixed in version 0.1.10.

    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.10 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/

    As part of this update, SmugMug have also begun stripping out <table> tags, which were required for the "fancy style paypal box" described earlier on this page. To fix that, the code needs to be changed to use divs instead of tables, which requires this new HTML (replace the buttons with your own PayPal button code):



    And if you were using tables in captions for other neat purposes, like displaying tabular data about your subject or your photo... well, now you're shi​t out of luck.


    Well once again you've saved the day, it works perfectly! <img src="https://us.v-cdn.net/6029383/emoji/thumb.gif&quot; border="0" alt="" >

    So now I'm back to nit-picking small details... <img src="https://us.v-cdn.net/6029383/emoji/deal.gif&quot; border="0" alt="" >

    I've tried and failed but hope you can suggest a fix:
    Is it possible to lower the add to cart buttons with CSS so they better align with the individual item/desc/prices?

    As it is now the buttons are all higher than the corresponding text, this would put the final finishing touches on the order panel! <img src="https://us.v-cdn.net/6029383/emoji/mwink.gif&quot; border="0" alt="" >

    Thanks

    rich56k
    http://HooliganUnderground.com
    Member: ASMP; EP; NPPA; CPS
  • DreadnoteDreadnote Registered Users Posts: 634 Major grins
    edited November 27, 2013
    I can't say thanks enough Lamah! You rock! This works perfectly. Thanks again for coming through where SmugMug wouldn't!
    Sports, Dance, Portraits, Events... www.jasonhowardking.com
  • frostiifrostii Registered Users Posts: 16 Big grins
    edited December 15, 2013
    Paypal postage
    Lamah, this is fantastic! Thank you so much for all the hard work!!

    Just one quick question please; is there any way that you can set the postage & packaging to charge per order rather than per item. When I test, P&P is added per item in the basket but I would like a set fee per order.

    Many thanks
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited December 15, 2013
    I'm not a PayPal selling expert, unfortunately, but I believe that you can achieve this by configuring flat rate shipping options in your PayPal profile. Click My Account, then Profile, then My selling tools, then Shipping calculations. Let me know how you get on!
  • frostiifrostii Registered Users Posts: 16 Big grins
    edited December 15, 2013
    Lamah wrote: »
    Didn't need to, they contacted me first to let me know. Doesn't look like the block is in effect just yet, but it's planned.


    Thank Lamah, you are a star!! Within paypal settings was able to set all price ranges to my P&P price which works perfectly.

    Thanks again.
  • mylifeinfocusmylifeinfocus Registered Users Posts: 208 Major grins
    edited January 24, 2014
    Hi Lamah,

    So am I correct in understanding that since Smugmug has blocked your customization for PayPal, there's not currently a way to integrate my PayPal buttons/menus from my Legacy site to my new site (still in Preview mode)? I really hope SM changes their mind on this. I know I'm not alone in having worked really hard on putting together my PayPal buttons to add on my website. Especially when others like Zenfolio are using it.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited January 24, 2014
    Hi there,

    No, this customisation is currently working fine! SmugMug decided to block the tag in captions, but I already built an alternative that doesn't use any more (it just uses plain links instead).
  • mylifeinfocusmylifeinfocus Registered Users Posts: 208 Major grins
    edited January 24, 2014
    Lamah wrote: »
    Hi there,

    No, this customisation is currently working fine! SmugMug decided to block the <form> tag in captions, but I already built an alternative that doesn't use <form> any more (it just uses plain links instead).

    Thanks Lamah. Sorry I didn't realize I was on page 1 of the thread when I posted my comment earlier (didn't see there were 5 more pages). Doh! <img src="https://us.v-cdn.net/6029383/emoji/rolleyes1.gif&quot; border="0" alt="" >

    So for each of my six sizes I offer for purchase, I'll have 6 different buttons, correct? As opposed to a dropdown menu and one button like I use now (since that uses the banned <form> tag.)

    Thanks for your work on this!
  • mylifeinfocusmylifeinfocus Registered Users Posts: 208 Major grins
    edited January 24, 2014
    Lamah wrote: »

    Thanks! Looks great! Is it possible to have my 6 buttons centered under my photo with 3 buttons on the left and 3 on the right? I'd like to have the 3 matted sizes show on the left and 3 framed sizes on the right instead of all 6 lined up together. If that's not do-able, it's no big deal. Just thought I'd ask.

    Thanks again!
  • mylifeinfocusmylifeinfocus Registered Users Posts: 208 Major grins
    edited January 25, 2014
    Hi Lamah,

    I tried downloading the Chrome extension from here, but get a message saying it can't be installed. Am I doing something wrong?

    Also, if I have my PayPal code (using the banned <form> tags) on my Legacy site, but I want to include your new method on my New Smug site (still in Preview mode), will I first need to remove the old PayPal stuff from my Legacy site?

    Thanks!
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited January 25, 2014
    I tried downloading the Chrome extension from here, but get a message saying it can't be installed. Am I doing something wrong?

    Also, if I have my PayPal code (using the banned <form> tags) on my Legacy site, but I want to include your new method on my New Smug site (still in Preview mode), will I first need to remove the old PayPal stuff from my Legacy site?

    You should see a warning message appear at the top of the browser once the download completes telling you that it can't be installed, but you can install it using an alternate method. In Chrome, go to the Tools->Extensions page, then in your file browser go to the place where you downloaded it and drag it onto Chrome's extensions page. It'll be installed despite the warning.

    Yeah, you'll need to remove the old code first before adding mine, or you'll end up with duplicated buttons.
  • frostiifrostii Registered Users Posts: 16 Big grins
    edited January 25, 2014
    Unable to see SM icon on Google Chrome
    Hi again Lamah

    Sorry to be a pain but having not used my website for a few weeks I have come back to update and ready for release and am unable to update the PayPal buttons with your coding. This had worked fine before Christmas but the SM icon is now visible whilst I'm in all pages except my galleries - when I go into a gallery the icon disappears.

    I know that is going to be something obvious that I'm not doing but have tried numerous options including reinstall of google chrome and the extension to no avail.

    Whilst in no gallery pages the SM icon gives me the following options:
    Create/View Backup
    List Galleries
    Visit your Website

    I would be most grateful of any help please.

    Many thanks
    Chris
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited January 25, 2014
    There's a Chrome bug that can cause page actions like the SM button to disappear in certain situations. Try going to the tools -> extensions page, and tick the box to disable the extension and reenable it. Then try refreshing your gallery page and see if it reappears.
  • frostiifrostii Registered Users Posts: 16 Big grins
    edited January 25, 2014
    Hi Lamah, many thanks for the fast response. I have tried but it hasn't rectified it; the SM logo is however, showing for about a tenth of a second so if I'm quick, I can get there and click it before it disappears again.

    Seems to be working ok like that.

    Thanks again.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited January 26, 2014
    This is due to Chrome Issue #231075, I'm subscribed to that bug so I'll let you guys know of the progress made in fixing it. I can't think of a workaround I could apply at my end at the moment.
  • frostiifrostii Registered Users Posts: 16 Big grins
    edited January 26, 2014
    Hi Again Lamah

    I am not sure how feasible this would be but is there any way that the 'View Cart' button can be set so it only shows when an item has been added to the cart?

    Many thanks
    Chris
  • TheBradfordTheBradford Registered Users Posts: 216 Major grins
    edited January 27, 2014
    Ok - I read this a while back and since then more threads have been added and I am a little lost.

    1) Where is the link to/how to do the paypal buttons?
    2) Does this still need to be done 1 by 1 for each photo and then added again to any new photos added to a gallery or is it possible to make if full gallery enabled even when more are added to that gallery?
    3) This will let me get paid directly in to pay pal but it is now on ME to make the order, have it shipped all that correct - i.e the trade off to doing this is I avoid the 15% SM Fee but also all the shopping functions (approve order, print, ship etc) are now my responsibility correct?

    I ask (3) as currently I like the metal prints but some people have asked me about wood prints and I can get canvas prints elsewhere fairly cheap too as well no all the metal print shapes/sizes offered on BayPhoto directly are available through SM.

    Just need a quick response with links, and short clarification of it all and hopefully I'll be able to easily implement and deploy this through out my site. Thanks again Lamah!
    Bradford

    __________________________________
    http://www.MakeItABradford.com
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited January 27, 2014
    1) Where is the link to/how to do the paypal buttons?

    That's here:

    http://www.sherlockphotography.org/Customisations/SmugMug-for-Chrome/PayPal
    2) Does this still need to be done 1 by 1 for each photo and then added again to any new photos added to a gallery or is it possible to make if full gallery enabled even when more are added to that gallery?

    Yes, it's a per-photo thing. You can select the whole gallery of photos at once and have the extension add the buttons to all of them automatically, but if you add more photos to the gallery you'll need to add buttons to those too afterwards.
    3) This will let me get paid directly in to pay pal but it is now on ME to make the order, have it shipped all that correct - i.e the trade off to doing this is I avoid the 15% SM Fee but also all the shopping functions (approve order, print, ship etc) are now my responsibility correct?

    That's right. If you want SmugMug to continue fulfilling the orders, they actually support PayPal as a payment method in the regular shopping cart now, so you could skip using this extension and use the regular cart instead.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited January 30, 2014
    This extension is currently not working due to a significant security upgrade to the SmugMug API that I was using. The symptom is that you can select images and click to add buttons, and it'll process and say it's done, but nothing will actually be changed in the image captions.

    I hope to have it working again within the next day!
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited January 30, 2014
    Lamah wrote: »
    This extension is currently not working due to a significant security upgrade to the SmugMug API that I was using. The symptom is that you can select images and click to add buttons, and it'll process and say it's done, but nothing will actually be changed in the image captions.

    I hope to have it working again within the next day!

    That security issue has now been resolved and the PayPal button extension now works again. I've now released version 0.2.2 of the extension which includes that fix.

    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.2.2 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/SmugMug-for-Chrome/PayPal
Sign In or Register to comment.