There are some major features added in App Builder app version 2.8, one of them being “ShoppingCart” page type.
Here is a quick overview of it:
-
You can create specially formatted links (see below) anywhere in your app which when tapped by user will ADD an item to shopping cart or REMOVE it from the cart.
-
There is a single ShoppingCart entity in the backstage of your app and therefore if you add many Shopping Cart pages inside your app they all will display the same items.
-
When user clicks “Checkout” on Shopping Cart page he/she is taken into the iPhone’s Safari browser and the PayPal payment gets processed from there. When the payment successfully completes or maybe fails the user is given the option to return back to your application. When the application is relaunched this way the success or respectively fail message will be displayed. These messages are setup while editing Shopping Cart page. As many of you are aware, Apple does NOT really allow any kind of payments INSIDE the app, but implementing such a technique where the payment is processed outside the app (in Safari browser) might get Apple’s approval thought we give NO guarantees.
-
The design of the Shopping Cart page will be made soon customizable through CSS. For technically advanced user we should mention that the Shopping Cart page is fully populated with JavaScript (JS) and the JS code is fully available inside the Shopping Cart page, feel free to modify and build the page from scratch with your fully custom design.
The link to ADD an item to Shopping Cart has the following syntax:
addtocart://<itemid>?itemname=<name>&itemprice=<price>&urlimg=<imagege_path>&urlinfo=<description_page_path>&<customParam>=<customValue>&<customParam>=<customValue>
where:
itemid - the id of the item NOT seen to the user.
itemname - the name of the item as displayed to the user.
itemprice - price in the currency specified when editing Shopping cart page type.
urlimg - url to the image that represents the item, if the image is inside the app bundle then specifying the name of the image is enough (see example), otherwise full web path is necessary.
urlinfo - url to the HTML page that describes the item, if the page is inside the app bundle then specifying the name of the page is enough (see example), otherwise full web path is necessary.
Example:
addtocart://teddybear?itemname=TeddyBear&itemprice=19.99&urlimg=bigicon.png&urlinfo=tab3.html
The link to REMOVE an item from Shopping Cart has the following syntax:
removefromcart://<itemid>
where
itemid - the same id used when adding corresponding item to the cart
Example:
removefromcart://teddybear
Below is a quick tutorial on how to create and test the Shopping Cart page type.
Let’s start with either an existent app or in my case create a new app. I have chosen BlankTemplate for this, but in fact any template or app would suit.
1. Choose a page that you want to be your shopping cart. in my case it’s tab1.html, but you can create your own one. Click “Edit” link against the chosen page.
2. Now if your page is not yet of type “Shopping cart” then you need to convert it to. Click on “Convert Page” link.
3. Choose “Shopping Cart” and then click “Convert”
Now your Shopping Cart page is created, but in order to see it in action, i.e. test it you need to have test PayPal accounts. These accounts operate with fake money and you can create them at https://developer.paypal.com
4. Go to https://developer.paypal.com and click “Sign up Now”
5. Complete all fields and click “Agree and Submit”
Now your main account is created. Please go to your mailbox and confirm your email.
You now need to create BUYER and SELLER test accounts.
6. Go to https://developer.paypal.com and login with your email and password that you have created in previous step.
7. Choose “Test Accounts” from the menu on the left and then click on “Preconfigured” link highlighted in the screenshot below.
8. Please create a BUYER account and then once again starting from step 7 create a SELLER account.
So that in the end you have 2 test accounts.
9. Now go to edit your Shopping Cart and enter Seller’s email address in the Recipient field. NOTE: make sure your “Test” parameter is set to YES.
10. Please go to any other page (tab2.html in my case) and insert two ADDTOCART links like below:
<div>
<a href="addtocart://teddybear?itemname=TeddyBear&itemprice=120.9 9&urlimg=bigicon.png&urlinfo=tab3.html">Add Teddy Bear to basket</a>
</div>
<br>
<div>
<a href="addtocart://iphone?itemname=iPhone4White&itemprice=699.9 9&urlimg=bigicon.png&urlinfo= tab4.html">Add iPhone to basket</a>
</div>
Then click Save.
Now let’s test what we’ve done on the device itself.
Comments
0 comments
Article is closed for comments.