MeltBrands UK approached Toobler to build its price search engine, ShopBoxUk. ShopBoxUk was conceived as a price comparison engine that collected latest data from over a thousand online sources regarding all kinds of consumer products and compared prices for the end user. This is the equivalent of a user having to visit each of the over thousand websites and comparing prices individually.
TARGET
To build a basic price search engine to provide the best price available for UK consumers shopping online.
Pivot - ShopboxUK evolved into a multi-platform price comparison service and third party API provider.
Challenges & Solution
Challenge 1Customizing Isotope jQuery Plugin.
SolutionShopBoxUK wanted the most recent update to let people explore all their popular items in the store, their photos and their effects.
To navigate that amount of data properly, we needed something that would let visitors browse a large quantity of information at a glance, while being able to quickly get to material they're interested in.
Shopbox API did not provide image size data and hence Toobler required to use an alternative for implementing "lazy loading".
Toobler chose the excellent Isotope, a jQuery plugin by David DeSandro. It's a great way of showing and re-ordering visual content at different sizes. It's a great starting point, but we wanted it to do more.
Specifically, to minimize the amount that the content re-arranges itself when it's resized. Here's how it works.
Even though isotope can hold different-sized elements, it still uses a fixed order of objects to sort through them.
Isotope has Masonry's layout logic built in, but in addition, it also has several other layout modes that can be used to dynamically position elements. You can even develop your own custom layout mode which we used.
Implementing XSRF protection in angularjs.
SolutionXSRF is an unauthorized technique to access users private data. Angularjs provides an inbuilt mechanism to counter XSRF. When performing XHR requests, the $http service reads a token from a cookie (by default, XSRF-TOKEN) and sets it as an HTTP header (X-XSRF-TOKEN). Since only JavaScript that runs on your domain could read the cookie, your server can be assured that the XHR came from JavaScript running on your domain. The header will not be set for cross-domain requests.
Toobler took advantage of this setting up a server with a token in a JavaScript readable session cookie called XSRF-TOKEN on the first HTTP GET request. On subsequent XHR requests the server can verify that the cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that only JavaScript running on your domain could have sent the request. The token is unique for each user and also verifiable by the server (to prevent the JavaScript from making up its own tokens). The token is a digest of your site's authentication cookie for added security.
Creation
Technology
AngularJS is quickly becoming the dominant frontend JavaScript framework for professional web development and since shopboxUk required a revamped codebase we thought this was the perfect time to place our handson AngularJS.
Angular JS
Angular JS, similar to Backbone or JavaScriptMVC, is a complete solution for rapid front-end development. No other plugins or frameworks are necessary to build a data-driven web application. One of our favourite stand-out feature in Angular JS is :
It is REST Easy. RESTful actions are quickly becoming the standard for communicating from the server to the client. In one line of JavaScript, you can quickly talk to the server and get the data you need to interact with your web pages. AngularJS turns this into a simple JavaScript object, as Models, following the MVVM (Model View View-Model) pattern.
Architecture
Lee Barrett
London, UK
The guys at Toobler were very involved from the very first minute they started working on my project. Their commitment, knowledge and dedication helped me wrap it up in a spectacular fashion and needless to say, the result was a huge success.Lee Barrett London, UK