Sliding PayPal Shopping Cart 2 DMXzone

Size: px

Start display at page:

Download "Sliding PayPal Shopping Cart 2 DMXzone"

Stanley Glenn
5 years ago
Views:

1 Table of contents Table of contents... 1 About Sliding PayPal Shopping Cart Features in Detail... 3 The Basics: Use Sliding PayPal Shopping Cart 2 on your Page Advanced: Different Options and Prices for your Products Advanced: Using the Discount Options in Sliding PayPal Shopping Cart Advanced: Using the Shopping Cart with Dynamic Data Video: Use Sliding PayPal Shopping Cart 2 on your Page Video: Different Options and Prices for your Products Video: Using the Discount Options in Sliding PayPal Shopping Cart Video: Using the Shopping Cart with Dynamic Data Copyright 2015.com All Rights Reserved To get more go to.com Page 1 of 54

2 About Sliding PayPal Shopping Cart 2 Give your users the ultimate shopping experience with the Sliding PayPal Shopping Cart 2! With this Dreamweaver extension your users will be able to add products, change quantity, get rich discounts, automatically calculate tax and shipping costs, and get a smooth PayPal checkout process, with just a few mouse clicks. The extension also supports HTML5 Data Bindings and Database Connector so you can easily create your shopping car from a dynamic source. Copyright 2015.com All Rights Reserved To get more go to.com Page 2 of 54

3 Features in Detail Amazing PayPal shopping cart for your commercial website - With a single mouse click your users can add/remove products to the cart, manage quantity and get redirected quickly to PayPal for the checkout process. Copyright 2015.com All Rights Reserved To get more go to.com Page 3 of 54

4 Different designs for the shopping cart - Fully customizable through the CSS, the the shopping cart box can be styled to fit your website design. With the proper color, the cart is easy to notice and will draw your users attention instantly. Copyright 2015.com All Rights Reserved To get more go to.com Page 4 of 54

Works with any site type - You can integrate the shopping

Custom shopping cart appearance - Choose the left or right

overlay from the edge of the browser with a fixed distance.

5 Works with any site type - You can integrate the shopping cart on a static as well as dynamic website fairly simple. Custom shopping cart appearance - Choose the left or right edge of the page to pin the shopping to and position its overlay from the edge of the browser with a fixed distance. Copyright 2015.com All Rights Reserved To get more go to.com Page 5 of 54

7 Easy to manage shopping cart - The user can add, change quantity or delete items from the shopping cart and all the totals and discounts are automatically calculated. Any product can be easily added with AddToCart control behavior. Copyright 2015.com All Rights Reserved To get more go to.com Page 7 of 54

8 Dynamic shopping cart - If you have a dynamic web site with products in a database, the shopping cart works even easier in a dynamic repeat region, thanks to the HTML5 Data Bindings and Database Connector integration. Copyright 2015.com All Rights Reserved To get more go to.com Page 8 of 54

Flexible prices and discounts - Add adjustable prices and discounts for multiple

11 Various options per product and prices per option - Add up to three options for a product with infinite values and different price for each value. Copyright 2015.com All Rights Reserved To get more go to.com Page 11 of 54

12 Taxes and shipping calculation - You can add fixed tax and shipping prices for each product, which will overwrite the default PayPal ones. Copyright 2015.com All Rights Reserved To get more go to.com Page 12 of 54

13 Preserve shopping cart data in the user browser - Through the user browser cookies the shopping cart data can be preserved for the selected period of time. No need of complicated database solutions. Copyright 2015.com All Rights Reserved To get more go to.com Page 13 of 54

14 Custom shopping cart layout - Add custom texts to your checkout and process buttons, as well as to the subtotal, discount and shipping lines. Copyright 2015.com All Rights Reserved To get more go to.com Page 14 of 54

15 Pinned shopping cart - With its minimalistic design and sliding behavior, it never disturbs reading order and products listings as it s pinned to the page edge. Copyright 2015.com All Rights Reserved To get more go to.com Page 15 of 54

17 Full support for the Behavior Connector - For example you can choose to show or to hide the shopping cart from the available events. Copyright 2015.com All Rights Reserved To get more go to.com Page 17 of 54

Great Dreamweaver integration - Interactive dialog in Dreamweaver with all the options

20 Before you begin Make sure to setup your site in Dreamweaver first before creating a page. If you don t know how to do that please read this. Installing the extension Read the tutorial at Login, download the product, and look up your serial at Get the latest Extension Manager at Open Extension Manager and go to your Purchased products tab and click install. If you have a subscription, the extension is to be found and installed in the Explore tab. Get the latest extension manager from Adobe at Open the.zxp file if you re using Dreamweaver CC or the.mxp file for Dreamweaver CS+ with Adobe Extension manager and install the extension. If you experience any problems contact our Live Support! Copyright 2015.com All Rights Reserved To get more go to.com Page 20 of 54

21 The Basics: Use Sliding PayPal Shopping Cart 2 on your Page In this tutorial we will show you how to insert Sliding PayPal Shopping Cart 2 on your page and set it up. *You can also check out the video. Copyright 2015.com All Rights Reserved To get more go to.com Page 21 of 54

How to do it 1. We inserted several pictures that we d like to sell on our site. Each of the pictures has its own buy now button, which actually is a simple HTML button.

22 How to do it 1. We inserted several pictures that we d like to sell on our site. Each of the pictures has its own buy now button, which actually is a simple HTML button. First, let s setup the general options of the Sliding PayPal Shopping Cart 2. Open the insert panel (1) and select Sliding PayPal Shopping Cart 2 (2). Copyright 2015.com All Rights Reserved To get more go to.com Page 22 of 54

23 2. Select where the shopping cart should appear on the left or on the right edge of your screen. We select the right edge (1). Enter the distance from the selected edge. The default value here is 50 pixels, but you can also use percentage values here. We leave it to its default (2). Copyright 2015.com All Rights Reserved To get more go to.com Page 23 of 54

24 3. Select a currency for the payments, for our tutorial it s EUR (1). Then, enter your PayPal ID or the address, associated with your PayPal account (2) and choose one of the predefined designs (3). Copyright 2015.com All Rights Reserved To get more go to.com Page 24 of 54

25 4. You can use successful URL, in order to redirect the users, when the payment is completed. Also, you can use a cancel URL, to redirect the users, if they cancel the payment. Copyright 2015.com All Rights Reserved To get more go to.com Page 25 of 54

26 5. In the advanced tab (1), you can select an HTML element that the shopping cart should be rendered as a child of. The default parent is the page body and we leave this unchanged (2). You can change the PayPal URL, if you are using sandbox or another version of the PayPal website (3). Copyright 2015.com All Rights Reserved To get more go to.com Page 26 of 54

27 6. Select the base path of your website to set the cookie to. We leave this option to its default (1). Set the number of days, that the user s browsers should keep the shopping cart data. We enter 10 days (2). Copyright 2015.com All Rights Reserved To get more go to.com Page 27 of 54

28 7. Then, if needed, you can change the default shopping cart texts. We leave these to their default values. Click the OK button, when you are done. Copyright 2015.com All Rights Reserved To get more go to.com Page 28 of 54

29 8. We ve successfully set up the Sliding PayPal Shopping Cart 2 options. Now we are going to add the Add to cart functionality to our Buy buttons. We select the buy buttons, for our first picture (1) and from the behaviors panel (2), choose add new behavior (3). Copyright 2015.com All Rights Reserved To get more go to.com Page 29 of 54

31 10. Select the add product to cart action (1) and add a name for your item (2). Then enter a price (3) and a tax if you want but we leave the tax field empty. Enter a unique item number to track your sales in PayPal (4). Copyright 2015.com All Rights Reserved To get more go to.com Page 31 of 54

32 11. Set the number of the items to be added to the cart when the buy button is clicked (1). You can add a flat shipping charge, to be added to the payment. If specified, this flat amount is charged, regardless of the quantity of the purchased items. We enter 10 euro (2). When you re done, click OK. Copyright 2015.com All Rights Reserved To get more go to.com Page 32 of 54

34 Advanced: Different Options and Prices for your Products In this tutorial we will show you how to add different options with different prices for your products, using Sliding PayPal Shopping Cart 2. *You can also check out the video. Copyright 2015.com All Rights Reserved To get more go to.com Page 34 of 54

35 How to do it 1. We have a page, where we sell a nice picture. We d like to provide our users with different frame options for this picture. Each of the frame options will have a different price. In order to do that, open the insert menu (1), go to form (2) and choose select (3). Copyright 2015.com All Rights Reserved To get more go to.com Page 35 of 54

37 3. We add 3 values from the plus button (1) - no frame, normal frame and luxury frame (2). The label and value for each of the items should be the same. When you re done, click OK. Copyright 2015.com All Rights Reserved To get more go to.com Page 37 of 54

39 5. We ve already entered the product price, number, etc. So, let s add our frame types now. Check the option 1 checkbox (1). Add a label for this option that will appear in the shopping cart (2). Open the value menu and choose the select list - FrameTypes that we added on our page (3). Copyright 2015.com All Rights Reserved To get more go to.com Page 39 of 54

40 6. From the option price tab (1), click add new button (2) and enter the values from the select menu. The first one is no frame (3). The price for this option will be 0 - as no frame will be added (4). Copyright 2015.com All Rights Reserved To get more go to.com Page 40 of 54

7. At the end, your option prices should look like this.

8. Now, let s preview the result. Copyright 2015.

43 Advanced: Using the Discount Options in Sliding PayPal Shopping Cart 2 In this tutorial we will show you how to use the discount options integrated in Sliding PayPal Shopping Cart 2. *You can also check out the video. Copyright 2015.com All Rights Reserved To get more go to.com Page 43 of 54

44 How to do it 1. We already setup a page, where we sell several products. Now, we d like to add discount to one of them. Select the product buy button (1). Open the behaviors panel (2) and double click the control shopping cart behavior (3). Copyright 2015.com All Rights Reserved To get more go to.com Page 44 of 54

45 2. The Sliding PayPal shopping cart 2 options for the selected product appear. We will use the amount discount option (1). Add $2 discount for the first purchased item (2) and $1 discount for the additional items (3), added in the shopping cart. We limit the max items with a discount to 5 (4). Click OK when you re done. Copyright 2015.com All Rights Reserved To get more go to.com Page 45 of 54

Advanced: Using the Shopping Cart with Dynamic Data In this tutorial we will show you how to use Sliding PayPal Shopping Cart 2 with dynamic data.

47 Advanced: Using the Shopping Cart with Dynamic Data In this tutorial we will show you how to use Sliding PayPal Shopping Cart 2 with dynamic data. In order to do that you ll also need HTML5 Data Bindings and Database Connector extensions. *You can also check out the video. Copyright 2015.com All Rights Reserved To get more go to.com Page 47 of 54

How to do it 1. We created a data source, using Database Connector and HTML5 Data Bindings. It returns the info for our products, such as name, price, shipping taxes, etc. from a database.

48 How to do it 1. We created a data source, using Database Connector and HTML5 Data Bindings. It returns the info for our products, such as name, price, shipping taxes, etc. from a database. We also created a repeat region that lists our products on the page. We placed a simple add to cart button, inside the repeat region. Now, select add to cart button (1) and from the behaviors panel (2) click add new behavior button (3). Copyright 2015.com All Rights Reserved To get more go to.com Page 48 of 54

2. From the menu (1), select Control Sliding PayPal Shopping Cart (2) and its dialog

4. Select the database column, which returns your product names and click

6. Let s preview the results. Copyright 2015.

54 Video: Use Sliding PayPal Shopping Cart 2 on your Page With this movie we will show you how to insert Sliding PayPal Shopping Cart 2 on your page and set it up. Video: Different Options and Prices for your Products With this movie we will show you how to add different options with different prices for your products, using Sliding PayPal Shopping Cart 2. Video: Using the Discount Options in Sliding PayPal Shopping Cart 2 With this movie we will show you how to use the discount options integrated in Sliding PayPal Shopping Cart 2. Video: Using the Shopping Cart with Dynamic Data With this movie we will show you how to use Sliding PayPal Shopping Cart 2 with dynamic data. In order to do that you ll also need HTML5 Data Bindings and Database Connector extensions. Copyright 2015.com All Rights Reserved To get more go to.com Page 54 of 54

HTML5 Responsive Notify 2 DMXzone

HTML5 Responsive Notify 2 DMXzone Table of contents Table of contents... 1 About HTML5 Responsive Notify 2... 2 Features in Detail... 3 The Basics: Insert HTML5 Responsive Notify 2 on your Page... 10 Advanced: Retrieve your Notifications