close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Web development tutorial

Upgrading from PayPal Standard to a full shopping cart

Tutorial created by Kate Ford

Categories: eCart, Free Tools, Dreamweaver, PHP

rating

This tutorial provides a simple way to upgrade your site from using PayPal Standard buttons to offering your customers a full, custom, on-site checkout experience. Many eCommerce websites are created using PayPal Standard buttons as a simple and economical way to begin selling on the web. However, as businesses grow, people find that they need to transition to an on-site shopping cart and offer a secure, seamless checkout on their own website. Others want to integrate shipping quotes, complex shipping rules, coupon codes, and more.

Instead of the overwhelming proposition of going from page to page to edit the buttons, we mimic the options that exist in PayPal's shopping cart in your own customized checkout experience with eCart, saving you hours of unnecessary work. Even if you have hundreds of PayPal buttons on your website, you can quickly upgrade, using this tutorial.

arrow downWhat do you need to start?

  1. Dreamweaver CS4 or higher.
  2. eCart 5 or higher installed and activated in Dreamweaver.
  3. Free Tools installed and activated in Dreamweaver.
  4. Site defined in Dreamweaver. For assistance defining a site, view these tutorials: Define a dynamic site in CS4 or Define a dynamic site in CS5+.
  5. Connection in Dreamweaver to your database. For assistance, view this tutorial: Create a PHP database connection.
  6. 1 or more web pages containing PayPal buttons.
  7. Saved web page named cart_pp.php for the purpose of this tutorial.

arrow downMigrate PayPal button settings - Part I

In this section, you will learn how to migrate PayPal settings directly into your shopping cart using eCart. Instead of tedious manual updates on multiple web pages containing PayPal buttons, you can make sitewide customizations, eliminating hours spent editing your eCommerce site.

  1. From Local Files, open the shopping cart page, cart_pp.php.


  2. Go to WebAssist > eCart > eCart Object to open the eCart interface.


  3. Click the Plus icon to create a new shopping cart object. Detailed assistance for creating an eCart object begins at Add a shopping cart (eCommerce series).


  4. Under Settings, fill in Cart name with ppcart or another name that's easy to remember.


  5. Open the Columns tab and click the Plus icon to begin adding additional columns that correspond to the settings in the PayPal buttons. This will allow you to migrate settings you want in your own shopping cart experience. For Column Name and Type, enter:

    1. BaseShipping - Integer
    2. AddShipping (additional shipping) - Integer
    3. OptionName - Text
    4. OptionValue - Text
    5. HandlingCharge- Integer



  6. Next go to WebAssist > eCart > eCart Display Manager.


  7. Insert a shopping cart by clicking Next and Finish. Detailed assistance for creating a shopping cart begins at Add a shopping cart (eCommerce series).


    You can skip the remainder of this section if you do not choose to include Option Name and Option Value settings.


  8. Although this step can be done in eCart, you can alternately use this manual method. Detailed assistance for configuring shopping cart columns in the eCart Display Manager inteface can be found at Add a shopping cart III (eCommerce series).

  9. In Split view, place your cursor between the Display_Name and Display_Description lines of code. Add opening and closing paragraph tags. Clicking on the yellow PHP icons in the shopping cart (circled in blue) will help locate the corresponding code.


  10. From the Bindings panel, locate OptionName and OptionValue in ppcart.


  11. Click on OptionName in the Bindings panel and drag it to the space you created between the opening and closing paragraph tags. Repeat for OptionValue. You should now see 2 additional yellow PHP icons in your shopping cart.


  12. Next, add a colon (:) as indicated to separate Option Name from Option Value, for example, Size: Small and Color: Black.

arrow downMigrate PayPal button settings - Part II

Now you will update the submission code contained in PayPal buttons across your site with one find and replace action.

  1. In Dreamweaver, go to the Local Files panel and open a page that contains a PayPal button. (In this tutorial, the page is pp_button.php.)


  2. In Split view, highlight and copy the PayPal form action string (Ctrl or Cmd + C).


  3. Right-click on the highlighted string to open the menu.

  4. Select Find and Replace.

  5. For Find in, select Entire Current Local Site.

  6. For Search, select Source Code.

  7. In Replace, enter the absolute path of your website's cart page.
    Using the absolute path is important should your site contain pages in a subdirectory.

  8. Click the Replace All button.


  9. Save your page (Ctrl or Cmd + S).


  10. Preview your page in your selected browser (File > Preview in Browser > Your Browser).


  11. Test the buttons. Even though there are no items in the shopping cart after the Buy Now or Add to Cart buttons are clicked, the form action is now posting to your shopping cart page and no longer to the PayPal site.


    Do not be concerned if you notice fields in the code that are no longer in use. This is not harmful and we suggest leaving them in place since removing them would require a manual action.

arrow downAdd items to shopping cart

Now we will redo the cart page so when Buy Now or Add to Cart buttons are clicked, the items purchased will be added to the shopping cart on your website.

  1. With the cart_pp.php page open, go to the Bindings panel and click the Plus icon.


  2. Go to Form Data which will open the Add Form to Bindings window.

  3. Click on the folder icon to browse for a page with a PayPal button. (In this tutorial, the page is pp_button.php.)


  4. If you have a quantity field stored in your PayPal button on some pages but not others, make sure you select a page with a PayPal button that uses the quantity field. This is important as we will see later.


  5. Click OK.


  6. In the Server Behaviors Panel, click + > eCart > Add To Cart > Add To Cart


  7. In the eCart Add to Cart window, click on the lightning bolt next to the Trigger menu.


  8. Select cmd as the trigger value and click OK.


  9. Because the action is remaining on the shopping cart page, there is no need to redirect to another page.


  10. In the Bindings tab, bind columns to the form elements under forms[0]:

    1. Bind ID to item_number.
    2. Bind Name to item_name.
    3. Bind Quantity to quantity if any pages contain PayPal buttons with the quantity field. (This is where it becomes important that we selected a page with the quantity field.)
    4. However, in the event that all pages contain PayPal buttons without the quantity field, you will bind Quantity to undefined quantity.
      If your site has PayPal buttons that use the quantity field and PayPal buttons that do not use the quantity field, see below.
    5. Skip Description because PayPal buttons do not pass across description.
    6. For Thumbnail, see below.
    7. Bind Weight to 0.
    8. Bind Price to amount.
    9. Bind BaseShipping to shipping .
    10. Bind AddShipping to shipping 2.
    11. Bind OptionName to on0.
    12. Bind OptionValue to os0.
    13. Bind HandlingCharge to handling.



  11. If your site has PayPal buttons that use the quantity field and PayPal buttons that do not use the quantity field, take this extra step when binding Quantity to quantity:

    1. In the Default value field, add a 1 between the last quotes. This will account for both scenarios, PayPal buttons that use the quantity field and PayPal buttons that do not by allowing a user to select a quantity when appropriate and by adding a quantity of 1 when quantity is not indicated.


    Thumbnail columns can be removed or you can use a generic placeholder image to avoid the task of manually add custom thumbnails across your site.

  12. Because the Continue Shopping button uses a session that collects the name of the page that contains the Add to Cart behavior instead of the name of the page that contains the Add to Cart button, make the following changes to the code.

    1. Use Find and Replace (Ctrl or Cmd + F) to change both instances of:
      $_SERVER['PHP_SELF']

      to:
      $_SERVER['HTTP_REFERER']

      Copy (Ctrl or Cmd + C) and paste (Ctrl or Cmd + P) the code into Find and Replace to avoid typos.


    2. Now the name of the Add to Cart button page will be collected to allow the Continue Shopping button to work.


  13. Click OK and save your page (Ctrl or Cmd + S).


  14. Preview your page in your selected browser (File > Preview in Browser > Your Browser) and test the Buy Now and Add to Cart buttons


  15. Now there are items in the shopping cart after the buttons are clicked and instead of posting to the PayPal site, the form action posts to your shopping cart page.


  16. At this point, you can run the eCart Checkout Wizard to complete your shopping cart. Detailed assistance for completing the checkout experience begins at eCart checkout settings (eCommerce series).

arrow downAdd handling charges

The next step in migrating PayPal button settings into your own checkout experience involves handling charges. Handling charges in PayPal are always a single charge.

  1. With cart_pp.php open, go to the Server Behaviors panel to open the eCart Object interface.


  2. Open the Charges tab and click the Plus icon.


  3. In the eCart Merchandising Rule interface, enter Handling Charge in the Name field.

  4. Triggers

    1. Click the Plus icon to enter Total number of items > 0.
    2. For Separator, select And.
    3. In the Condition menu, select Total number of unique items in the cart.
    4. Follow with: If the total number of unique items in the cart is > a value of 0.


  5. Calculation

    1. From the menu, select Based on multiple of column subtotal.
    2. Subtotal of column HandlingCharge times 1 plus 0.



  6. Click OK.

arrow downAdd shipping charges

The last step in migrating PayPal button settings into your own checkout experience involves shipping charges. If you choose to charge for base shipping and per item (additional or "add") shipping, you need to use a calculation. But you can skip this section if you are not using the BaseShipping and AddShipping fields. Instead you can handle weight-based shipping or calculate shipping in the eCart Checkout wizard. For more assistance, go to eCart checkout shipping (eCommerce series).

  1. Still in the eCart Object interface, go to the Calculations tab, click the Plus icon, and type CartShipping in the Name field. Copy (Ctrl or Cmd + C) the following code and paste (Ctrl or Cmd + P) it into the Calculation formula field:
    [BaseShipping] + (([Quantity]>1)?([Quantity]-1)*[AddShipping]:0)


    The calculation is a one-line If Statement that basically reads, "If quantity is greater than 1, then take quantity minus 1 times the additional shopping value, otherwise take 0. This will handle the additional item shipping and give you a column named CartShipping so you can add a shipping charge.

  2. Open the Charges tab and click the Plus icon.


  3. In the eCart Merchandising Rule interface, click the Plus icon and enter Shipping Charge in the Name field.

  4. Triggers

    1. Click the Plus icon to enter Total number of items > 0.
    2. For Separator, select And.
    3. In the Condition menu, select Total number of unique items in the cart.
    4. Follow with: If the total number of unique items in the cart is > a value of 0.


  5. Calculation

    1. From the menu, select Based on multiple of column subtotal.
    2. Subtotal of column CartShipping times 1 plus 0.


  6. Click OK.


  7. Click OK and save your page (Ctrl or Cmd + S).


  8. Now your shopping shopping cart includes combined handling and shipping charges.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.