Paul operates a popcorn-truck in Brooklyn, New York, selling various types of popcorn flavors in different sizes. His truck got popularity and he decided to expand his business — create an online popcorn store with product feeds in Amazon and Google.

Popcorn ordering website

The website offers three buying scenarios which are split into three categories: shop by flavor, shop by container, and a custom tin configurator.

Shop by flavour feature

Shop by container feature

Both flavors and containers (tins) are set up as simple product types. On the one hand, a flavor is a product and a container is its option. On the other hand, a container is a product too, and a flavor is.. its option!

So we have products that can become the options of each other. The trick was to convert a product to a custom option depending on the scenario — shop by container or shop by flavor. The other trick was a proper pricing formula, and for that we created a special grid in flavor product settings where we could specify the price depending on both container size and fill type. The fill type is a custom attribute for all the containers. Fill type is used only in custom tin configurator.

Custom tin configurator uses the custom price building indicated in flavor settings and calculates the price according to the selected parameters.

Custom product configurator

Customers can build their own product: select a container size, then the filling (number of different flavors) and the flavors. The number of flavors depends on the container size, for example, you cannot fill a 1 gallon tin with three different flavors. The builder is powered with JavaScript and allows an easy change of parameters with the “Change” button in the order summary.

Product options

Shopping cart is customized to capture customer details. If a customer has filled them in — they get prepopulated on the checkout page. Also they are used to capture the abandoned carts in case the customer has not completed the purchase. The contents of the cart is customly captured due to the specific product setup.

Secure checkout

Checkout uses a one step checkout layout and offers a less stressful checkout experience for customers. It works with PayPal Express and Authorize.net payment methods. Authorize.net CIM makes it possible to save credit card data, but it stores it on secure Authorize.net servers and not Magento. It allows to have and use the card on file securely.

One step checkout layout

The idea of the project was to expand the business but still allow people to shop from the truck. To help them locate it the vehicle was equipped with a GPS vehicle-tracking device. It sends the coordinates of the truck to GeoTab system, and using their API we retrieve the location of the truck and show it on the map.

Vehicle location tracking

The designer provided us with all of the graphics for the most popular screen resolutions and we implemented a smooth responsive effect to make sure all users have no trouble using the site. The menus are collapsing where necessary to reveal the most important information first. mobile version

The secondary features include product reviews with a commenting option, homepage banner scheduling, latest tweets, product feeds to Amazon and Google, extended FAQ section.

Product reviews feature

FAQ section

Performance optimization was done in the end of the project and included both server-side and onsite optimization resu2s) with the same amount of grlting in a great decrease of page loading (from 7s to aphics.