Developing a Popcorn Online Store with a Product Configurator from Scratch

Challenges

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 on Amazon and Google.

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

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 the custom tin configurator.

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

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.

The 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 custom captured due to the specific product setup.

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 us to have and use the card on file securely.

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 the GeoTab system, and using their API we retrieve the location of the truck and show it on the map.

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.

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

Performance optimization was done at the end of the project and included both server-side and onsite optimization, which resulted in a great decrease of page loading.