Complete Shopify Bet Picking System


Case Study: BETHACKERS
Main Challenge: Create Bet Picking and Analysis with Custom Design

Kaleido Shopify Experts Case Study


Processing vast amount of data can always be a bit challenging. However, processing, analyzing and displaying it in a customized way is definitely an epic challenge. We went with the idea that there should in total be 3 parts. Main table display, the pick display tool and the calendar.

For the framework we opted to go with VueJS, due to its ease of use, flexibility and extensibility. However, as soon as we started, we hit the roadblock - VueJS templating markup was the same as Shopify Liquid. Thus, we had to change it to look more like default JavaScript ES6 in order to avoid the collision.

Once basic design was ironed out, we were able to dynamically update the date, countdowns and everything else, just using VueJS and Moment (most useful time manipulation tool). For the days that there were no games, we opted to go with simple text showing that there are no games on a particular day, prompting user to pick another day.

Kaleido Shopify Experts Case Study Bethackers

 

In a nutshell, the most interesting part of the project is connecting the dots where they were "not supposed to be connected", by integrating VueJS on the front-end and creating a hyper customized design that would perfectly fit the narrative of the merchant's ideas, while allowing the merchant to completely maintain the control of all the aspects of the store.

We are not done yet. There is a next step and stay tuned to see where we took the project next :)

Like what you see?

LET'S BUILD AMAZING THINGS