Next Gen Gallery and PayPal Add to Cart Button

My last post discussed adding a slide show to the front page of your site using Next Gen Gallery.  You can also add a shopping cart to your site and Pay pal buttons to the pictures in your gallery, essentially creating an online store.  Take a look at Maestroartservicesintl.com where Pay pal buttons were added to the artists’ paintings.

There is a great tutorial on adding the Paypal shopping cart at: http://www.tipsandtricks-hq.com/wordpress-simple-paypal-shopping-cart-plugin-768 and a tutorial on adding the “Add to Cart” buttons at: http://www.wordpress-ecommerce.com/wordpress-shop-using-nextgen-gallery-and-wp-shopping-cart-7

Download the plugins for WordPress Simple Paypal Shopping Cart and WP eStore template file. Unzip and upload the WP Simple Paypal shopping cart plugin to your plugin folder. Activate the plugin. Unzip and upload the WP estore template file (gallery-wp-eStore.php) into wp-content ->plugins -> Next Gen Gallery ->View folder.

• If you are using Next Gen Gallery as a store, you need a gallery for each category of items in your site. 
• Create your galleries as described in my previous post.
• Select Gallery -> Manage Gallery from the left menu bar.
• Select and open the gallery where you want to add the Paypal buttons.
• Scroll down the page until you see the pictures in your gallery.
• The code to add the Paypal “Add to Cart” button is entered into the description box of your picture.

 

I created a Paypal account and generated the code for my button from there. You need a merchant services /business account. Open the Merchant services tab and click the link to “create Add to Cart button”. Follow the wizard to create your button. PayPal uses the information you enter for this item to create the HTML code for your “Add to Cart” button. Copy this HTML code and go back to the gallery page. Paste the code into the “Description” box next to your picture.

To add the gallery with the “Add to Cart” buttons to your page use this code:  

[  nggallery id=X template=wp-eStore ] where “X” is the ID number of your gallery. The wp-estore template is the php file we copied into the plugins -> Next Gen ->  views folder earlier. This is the file that puts the “Add to Cart” button below your picture. Note: there is a space after the bracket in the code so Wordpress does not try to insert a gallery with this code. If you copy the code, remove the space before and after the bracket.

Paypal also generates the code to “View Cart”. You can copy that code and paste it into a page where  you want the shopping cart to appear.

Next Gen Gallery Slide Show

After installing the Next Gen Gallery Plugin, I wanted to use it to have a slide show on the front page of my site. The slide show can be seen at: http://www.parklandsd.org

1. Upload the Next Gen gallery plugin to your plugin folder and activate it.
2. Get the JW Image Rotator from: http://www.longtailvideo.com/players/jw-image-rotator/ . The image rotator is free for non-profits and personal sites but there  is a charge for commercial and for-profit sites.  The image rotator is necessary to show the next gen photos in a slide show.
3. Unzip the file and upload the image rotator files to the wp-content/uploads folder in your site.
4. Click on the Gallery in the left menu of the Dashboard – this will open and expand the Gallery menu.
5. Select “Options”. You will see choices for: General Options, Thumbnails, Images, Gallery,  Effects, Watermark, Slideshow.  Select Slideshow.
6. If you uploaded the Image Rotator to the wp-content/uploads folder, click the option to “search now” for the Image Rotator. If it is found in the uploads folder it will show in the “Path to the Imagerotator” box.
7. There are other settings on this page to customize your slide show.  These settings will affect all of  the slideshows in your site – EXCEPT the slide show we are putting on the front page of  the site. I used code to insert the slide show on the front page and that code over rides these settings but we will get to that in a little bit. These settings are pretty self-explanatory. You can choose the default size of your slide show, the order of photos in the slide show, background color, etc. If you want a description of your photos to show across your slides show, check the box to  “show navigation bar”. The navigation bar has the following options:
   1. Picture description
   2. Click to show next picture
   3. show picture in full screen

 

 

 

8.  Next we will create the gallery for the main page of our site.  Go back to “Gallery” in the menu bar of  the Dashboard and  select ” Add Gallery/ Images”. A new window opens.

9. Add a Gallery and name it “main page” so you will know it is the gallery that appears on the main page of your site.

10. Find the button to “Upload Images” and click.  Browse to the images you want to upload into your slide show. NOTE:  the images must be sized correctly before you upload them.  Resize the images in your photo editing software. My slide show is 500px wide by 350px high but you can adjust according to your needs. The resolution for web photos should be 72 pixels.  Make sure you select the “main page” gallery from the drop down box so that your images go into the correct gallery.

11. Go back to “Gallery” in the menu bar and select “Manage Gallery”. This page shows any  galleries you have created and since we only have one gallery so far, you will see “main gallery” on this page. Click on “main page” to open.

12.  The pictures in your gallery are listed. You will also see  an area to edit the thumbnail, add tags (helpful for searches and also for SEO), and a description.  The description is what shows in the navigation bar.

13. After adding your descriptions and tags, save your page.

14.  To add a slide show or gallery to a post or page in Wordpress, you can use the shortcode: [  slideshow id=2 ] where 2 is the ID number of your gallery. Note that I added spaces in the shortcode so it would appear in this post. The correct format has no spaces between the brackets and the text – if you leave a space, the shortcode will not work and the gallery will not appear. This might work  if you have your blog on your main page, but I am using a magazine type template and the shortcode didn’t work for me. It works on other pages, just not the main page.

15.  I didn’t have luck with this on the home page so  I used the source code from the demo page on the Next Gen web site: This is what it looks like: 

 Remember to substitute your website URL in the appropriate place. Also notice that you have the flash variables in the code here.  For example if you have shownavigation:”true”, the navigation bar will show in the slide show. These settings over ride the settings on the “Options”  page in the Next Gen gallery settings.

You will also need to know the ID number of your gallery. You will find the Id numbers of you galleries on the “Manage Gallery” page. the number is listed in front of the Gallery Name.  Our “main page” gallery is ID 1.  Enter the number of your gallery after gid= in this line: file : “http://yoursite.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1 “,

<div>
<div class=”swfobject” id=”so4_1″ style=”width:400px; height:300px;”>
<p>The <a href=”http://www.macromedia.com/go/getflashplayer”>Flash Player</a> and <a href=”http://www.mozilla.com/firefox/”>a browser with Javascript support</a> are needed..</p>
</div></div>
<script type=”text/javascript” defer=”defer”>
var so4_1 = {
 params : {
  wmode : “opaque”,
  allowfullscreen : “false”},
 flashvars : {
  file : “http://yoursite.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1 “,
  linkfromdisplay : “false”,
  shownavigation : “true”,
  showicons : “true”,
  overstretch : “false”,
  rotatetime : “6″,
  backcolor : “0×000000″,
  frontcolor : “0xFFFFFF”,
  lightcolor : “0xCC0000″,
  width : “400″,
  height : “300″},
 attr : {
  styleclass : “slideshow”,
  name : “so4″},
 start : function() {
  swfobject.embedSWF(”http://your site.com/wp-content/uploads/imagerotator.swf“, “so4_1″, “400″, “300″, “7.0.0″, false, this.flashvars, this.params , this.attr );
 }
}
so4_1.start();
</script>
<div style=”clear:both;”></div>

Next, I will show you how I  used the Next Gen gallery and the Wordpress shopping cart to add Paypal buttons to items in a blog.