Lux Bond & Green Diamond Search

Name: Trellis
Address: 101 S Tryon St Suite 2700, Charlotte, NC, 28280, US
Price range: $$-$$$
Location: Trellis

Chelsey Riewer

Lux Bond & Green sells a variety of diamonds. Hence, they were looking for a way to showcase thousands of unique kinds on their website. The company came to Trellis with an amazing idea. They needed a functionality to allow users to filter diamonds by color, cut, clarity, shape, and price. After a thorough research, the Trellis team decided to create a customized diamond search page. In this blog post, we’ll talk about how the diamond data was stored. Additionally, we’ll take a look at the challenges Trellis faced with the JavaScript when creating the frontend experience.

Lux Bond & Green Diamond Search by Chelsey Riewer

Using the WebDav to Store Data

Lux Bond needed a secure place to store all of their diamond data. Moreover, their engineering team needed to be able to access this data. It was decided that the WebDav in BigCommerce would be the best storage option. WebDav is an application that allows the client to upload files to their store. The files can be any type from images, PDF’s, video’s, and many more.

The team collaborated with Lux Bond on using a JSON file to store all their data. A JSON file allows for grabbing the data and converting it to the frontend experience you see here:

A screenshot of a diamond selection interface displaying a list of diamonds with options to add to an appointment. It allows the selection of up to five diamonds to review with a professional in a store. The table headers include 'Diamond #', 'Shape', 'Carat', 'Color', 'Clarity', 'Price', and 'Appointment'. Each row lists a unique diamond with its specifications such as shape (Radiant, Asscher, Princess), carat weight ranging from 0.25 to 1.84, color grades from F to H, clarity from SI1 to VS2, and prices ranging from $850 to $27,500. Each diamond entry has a 'GIA Report' link and a green 'ADD TO APPOINTMENT' button on the right side. The top right corner indicates a total of 2,139 results available. — Diamond Selection Interface

Filtering & Sorting in Lux Bond & Green Diamond Search

An animated GIF of a user interface for filtering diamond search criteria. The interface shows a list with the headings 'SHAPE', 'COLOR', 'CARAT', 'CLARITY', and 'PRICE', each followed by a plus sign indicating that options can be expanded. The cursor moves to click on the plus sign next to 'SHAPE', suggesting that users can click to reveal and select specific shapes when searching for diamonds. — UI for filtering diamond search criteria

Lux Bond & Green has over two thousand diamonds in their inventory. To ensure a smooth user experience with Lux Bond & Green Diamond Search, we needed to add a capability to filter and sort to wade through all the diamond options. One of the issues the engineering team ran into is that since the diamonds are not products on Lux Bond’s storefront, native product filtering and sorting was not an option.

Lux Bond & Green wanted their users to be able to filter by shape, color, carat, clarity, and price. With filters applied the values get updated in the selectedFiltersObject. The most challenging filter to construct was the color filter. Users need the capability to use the sliders and be able to click the ticks to show values in between each slider.

An animated GIF showing the color selection feature within a diamond search filter interface. The 'COLOR' section is expanded to display a horizontal color scale with letters representing different diamond color grades, ranging from 'D' (colorless) to 'M' (noticeably colored). The cursor hovers over the scale, indicating interaction, and there is a link below the scale that says 'Learn More About Diamond Color', suggesting additional information is available. Other filter categories listed include 'SHAPE', 'CARAT', 'CLARITY', and 'PRICE', each with a plus sign to expand the options. — Color Selection Feature

Implementation:

In order to accomplish this, we decided to assign numeric values to the letters displayed in the filter. This allowed the engineers to make use of JavaScript Math functions, as shown here:

A screenshot of JavaScript code related to a UI slider element. The code includes a function to set the input value of the slider and adjust the visual position of the slider's thumb based on the value selected. The calculation involves ensuring the input value is not less than the left slider value and setting the right slider's position relative to the input maximum and minimum values. Additionally, there is a conditional statement to set the minimum filter value to a default if it's missing from the selectedFiltersObject. — JavaScript Math Functions

Once all of the values are set, the showResults() function is called, which handles what diamonds will be shown to the user. In the showResults() function, there is a check to see if the sorted column is being used. If sorted is being used, sorting logic is applied. Otherwise, the diamond number column is the default sorted column. After the sorting logic, there is a loop to go through all of the diamonds in the JSON file from the WebDav.

A screenshot of JavaScript code with a complex if-else conditional logic sequence. The code snippet appears to be part of a function that determines whether to display a diamond based on selected filters. It checks if the shape filter is not selected or if other filters such as clarity, cut, carat, price, and color are within defined ranges. If the conditions are met, 'showDiamond' is set to true, indicating that the diamond will be displayed. The code also includes a check to see if the diamond is already included in 'appointmentsMade', affecting whether it should be shown. — Conditional Statements

In the conditional statements above, there is a comparison of the diamonds values versus the selectedFiltersObject values. If the diamonds’ values don’t align with what’s in the selectedFiltersObject, that diamond will not show.

An animated GIF of a diamond selection interface on a website. The interface displays a list of diamonds with details such as 'Diamond #', 'Shape', 'Carat', 'Color', 'Clarity', 'Price', and an 'Add to Appointment' button. The animation shows a cursor clicking on the column headers 'Shape', 'Carat', 'Color', and 'Clarity', each in turn, triggering a sorting function that rearranges the list of diamonds according to the selected attribute. At the top, text invites users to select up to 5 diamonds to review with a professional in a store, and the total number of results, 2,146, is shown at the top right. — Diamond Selection Interface

Sorting was also a unique challenge for the team to solve. What seemed like simple logic turned into some hair-pulling, to be honest. In order to correctly sort each column, the team made use of the JavaScript sort function.

An if statement was first used to check the direction of the sort arrow, and a check to see which column was clicked. The Shape and Clarity columns have their own object mapping data. Hence, those had to be broken out of the other columns’ check:

A screenshot of a single line of JavaScript code involving conditional sorting logic. The code uses if-else statements to determine the sorting parameters based on the column selected by the user. If the 'sortColumn' variable is equal to 'Shape', it sets 'sortA' and 'sortB' to the values within a 'shapesObject' array. If 'sortColumn' is equal to 'ClarityDesc', it sets 'sortA' and 'sortB' to the values within a 'clarityObject' array. Otherwise, it defaults to sorting by the generic column value in the object. This sorting logic is typically used to organize data displayed in a user interface. — JavaScript code involving conditional sorting logic

In the if statement above, sortA and sortB are assigned values that will be checked to see if they are greater than or less than each other in the if statement below.

A screenshot of JavaScript code displaying a sorting function. The code contains a series of conditional statements that compare two variables, sortA and sortB. If sortA is greater than sortB, the function returns 1, and if sortA is less than sortB, it returns -1, which are typical return values for a sort function indicating the order of the elements. If neither condition is met, a secondary comparison is made on the 'SKU' property of the objects a and b. If a's SKU is less than b's SKU, it returns 1, if greater, it returns -1, and if they are equal, it returns 0. This block of code is essential for determining the order of elements in a sorted array. — JavaScript code displaying a sorting function

If there is no sortA or sortB value, the default behavior is to sort by SKU.

Scheduling an Appointment

A screenshot of a 'Schedule an Appointment' form from a website. The form has fields for Name, Phone, Email Address (with confirmation), and a question about working with a Lux Bond & Green representative with 'Yes' and 'No' options. It also includes dropdown menus for selecting the Location of Appointment, Year, Month, Day, and Time of Appointment. There's a section for a Message and a note advising a 6-hour allowance for next-day appointments to ensure product availability. To the right is a 'SELECTED PRODUCTS' section showing two diamond products with images, names, prices, and carat sizes listed. At the bottom is a 'SUBMIT' button. — ‘Schedule an Appointment’ Form from a website.

Since the diamonds cannot be purchased online, users need to be able to schedule an appointment to come in and look at them in store. In order to pass the data to each store separately, Trellis decided to use Google Forms. Using Google forms also allows for an easy way to style the forms since all is needed is to sync input keys with the Google forms input keys.

To find the key needed to preview the form in the /viewform mode, inspect the input needing a key, and then grab the second set of numbers. Once the hidden input is found, copy the entry value. In the instance below, the entry value is entry.1000057_sentinel.

Order Request Form

It was necessary to make sure the same entry value was assigned to the input that should align with the Google Form input. For the instance above, the input needed to be the following:

A screenshot displaying a line of HTML code. The code represents an input element with a class of 'form-input', the type attribute set to 'radio', and the name attribute given as 'entry.1000057_sentinel'. This line of code is typically used to create a radio button for a web form, allowing users to select from multiple options. — A line of HTML code for the Order Request Form

Once a user hits the submit button and all of the data entered is validated, ajax passes the data to the Google form:

A snippet of code showing a jQuery AJAX function. The function makes a POST request to a Google Forms URL, sending 'data' with an expected 'xml' dataType. It includes a statusCode object with a comment indicating that a '0' status code will trigger a function to show a thank you message after successful form submission. — A snippet of code showing a jQuery AJAX function.

Data can be grabbed from a Google sheet once that setting is turned on:

A user interface section of a Google form titled 'Responses' showing '0 responses' collected. It has tabs for 'Questions', 'Responses', and 'Settings', with the 'Responses' tab currently selected and highlighted. There's also a green 'Link to Sheets' button indicating the option to send responses to a spreadsheet, and a toggle switch set to red, implying that the form is not currently accepting responses. — Response Data in Google Sheets

Additionally, we decided to send emails directly to the store the user selected with a form plugin called Form Notifications – Form Notifier:

A webpage screenshot featuring a product called 'Form Notifications'. It includes an icon resembling a chat bubble, the title 'Form Notifications', and a brief description of the service offering unlimited email, Google Document, and Google Sheet notifications for Google forms. The product is created by 'Apps Record' and the listing was updated on December 14, 2023. There is also an 'Uninstall' button in blue on the right. — Form Notifications – Form Notifier

This allowed stores to have direct access to appointment requests without having to filter through responses in the Google sheets.

Lux Bond & Green Diamond Search Results

To sum up, the collaboration between Lux Bond & Green and Trellis to create a dynamic and user-friendly diamond search page showcases the power of innovative web development and problem-solving skills. By leveraging WebDav for secure data storage, crafting complex filtering and sorting mechanisms in JavaScript, and utilizing Google Forms for seamless appointment scheduling, the team overcame several technical challenges.

These efforts not only enhanced the online diamond browsing experience for customers but also streamlined the appointment process for in-store visits. This project highlights the importance of understanding client needs, the flexibility in web development approaches, and the effective use of technology to provide solutions that improve both the business operations and the customer journey.

Contact Trellis to talk about how we can transform your ideas into reality with our web development services.