Raleigh Diamond's Diamond Search

Hey everyone! Back today with another dev dive, and highlighting another piece of custom development. Today we're going to be looking at Raleigh Diamond and their custom diamond search (check it out here: https://www.raleighdiamond.com/ringsettings-diamonds).

Raleigh Diamond (as you're probably able to tell by the name) focuses a lot on diamond sales, so making the diamond search really stand out was a major priority for them. In our normal diamond search, the page shows a table of diamonds and their relevant details, along with filters to narrow down and find your perfect diamond. Raleigh Diamond wanted to up the ante with an interactive grid view, showing 360 degree videos for all diamonds right on the diamond search page.

There were two especially big challenges with this piece of development. The first is getting all of the data necessary. To do so, we had to choose from vendors that provide videos for every single diamond - something that few vendors take the time to provide. In this case, Stuller was able to provide us with the data necessary, with full 360 degree videos for every diamond in their inventory.

The second challenge was making the page work smoothly even when adding so many video assets to the page. For those of you who have spoken with us about product videos, you'll know that we like to minimize the size of item or diamond images and assets to keep pages loading quickly, so creating a page that has 20 videos on it all at once can really hurt performance. In order to make the page work smoothly, we use lazy loading to fix both initial load times as well as the performance of the page once it's loaded. When the page is loaded initially, only the first thumbnail image is loaded for each diamond, keeping us from having to load the entire video for every diamond all at once. Then, once a user hovers over the diamond, the video for that specific diamond will load and start to play automatically, pausing if the user moves their mouse somewhere else. If all videos were playing at once, it would use too many browser resources and slow the page down, so we limit playing videos to the diamond that the user is currently hovering over.