integrating-angularjs-magento-2x-create-engagement-ring-builder

14-09-23 17:14

Sometimes technology mashups produce wonders

Here is an example: Magento 2 + AngularJS = super efficient Build my engagement ring Tool

One of the most sought-after tool in a jewellery website is " build My own engagement ring"

Its a three step process wherein a buyer first selects a ring design followed by a diamond and then review the final product before check out.

It's an intuitive interactive tool which reported as high as 70% better conversions. However, it suffers from a drawback: speed.

A user typically tries numerous ring and diamond combinations and has to hop between step 1 and 2 . and everytime user hops between the steps entire data gets reloaded. This is irritating and chances of user abandoning the process is high

TransPacific Software which is the world leader in Jewelry ecommerce solutions has its R&D team on it with a simple brief: How to make the ring builder faster.

The best solution we arrived at was using Angular JS to create a one page Application for Build a ring. It was fast ; akin to surfing on a local harddrive.

The prototype of such independed app worked great. But embedding it in a Magento 2X was a complex task. We had to make AngularJS talk to Magento 2 and vice versa

Difficulties faced while embedding angular js in Magento & How we overcame them :

1) Routing angular pages in Magento module structure

Magento- AngularJS ringbuilder is single page application to achieve this functionality we have to use Magento router.php file which redirected the user to the AngularJS based ring Builder

2) Displaying and updating meta tag information

For SEO purposes it was necessary to have Title and Description tags on each build a ring step. As ring builder is a single page application achieving the same was chllenging as the page doesn't reload. A workaround was achieved by Overwriting Magento default tag by AngularJS ng-bind directive. This tag replaced each step with unique SEO friendly title

3) Avoiding JS conflicts:

Magento default js like knockout js, require js had major conflicts with AngularJS we had to spend lot of time handling and resolving these conflicts one by one.