I have build a cross site webshopping experience. Even from a foreign site, like a blog, goods can be added to a webshop basket and bought. There are no integrations between the blog and the webshop.
Say you are a fashion blogger, your make money when your readers go straight to an affiliate webshop and buys the jeans they read about. If you are a webshop you want blog readers to be able to buy your jeans as easily as possible.
This is where my express checkout technology comes in.
Take a look at this 20 sec video to see how it works, and remember the two sites do not know anything about each other. There are no clever headers or integrations, but still the user experience is very smooth.
Sometimes you need to be bad to be good. Yes - I am going to tell you how to do cross site scripting helped by Node.js, but I am doing to show you what awesome things this can lead to.
To create this user experience, I am tunneling traffic. I can then control the interaction between the blog and the webshop in the users browser. This also means I can present the product nicely, and redirect the user to the checkout page once they have added an item to a basket, or at a later time.
This makes the shopping experience much nicer, since the customer is now presented with the actual item in the context of the blog article she is reading, she can buy multiple items and the basket will be updated accordingly.
Replaying the session
When the user adds the item to her basket, this all happens on the hijacked session, attached to the proxy. The browser believes the webshop lives on my rewrite proxy so when the user visits the real webshop, the basket will be empty unless we stitch the two sessions together.
To stitch the sessions I would need the help of the webshops backend, but remember I do not want to rely on any collaboration. What I do instead is replay all of the significant requests through the proxy to the webshop, in the context of the users browser. When the user changes the size of the jeans, and adds the jeans to the basket, we replay those events in the browser. Ajax is not your friend here, but there are many ways around it such as script tags and form submissions to do GET and POST requests.
The final result
Take a look at this video to see the whole thing running behind the scenes, with the backend rewriting the calls and replaying the session in the browser.
The power of Node.js
Node.js can be used to bridge the gap between different web domains and make websites interact with a little help. I strongly encourage anyone interested to take a look at the libraries I have listed and tweet me with your ideas for how to create a better internet.
The libraries I used are:
- Node.js for the backend rewrite proxy
- Socket.IO for real-time interaction with the client and backend
- request for http request forwarding
- Q for replay queue handling
I would like to thank @EdLea for helping with ideas when I got stuck.