About the Brand:
Ledvance has more than 100 years of experience in general lighting. Ledvance combines the traditional with forward-looking lighting technology, building on long-standing customer relationships and a strong sales network. They are experts in technology trends and the rapidly changing demands for high quality and long lasting light. They are represented in more than 140 countries and, with their teams of specialists, respond to the specific needs of their customers – whether in luminaires, lamps or electronic components.
tienda.ledvance.mx is a website for Wholesale buyers. Based on customer feedback, Ledvance wanted to create a module where customers can upload a csv file with “SKU” and “Quantity” and those products after going through certain validations can be shown in a table(with search and sort) and can be added to cart in one go. The validations for “Quantity Steps”(from metafields), “Back Order Available”(Inventory Policy), “Next Incoming Date”(in case of back order), “Quantity available” had to be implemented with proper messages in the processed csv, as well as in the UI.
Issues: One of the many validations that was to be done required the “Next Incoming Date” for a given inventory item. This value is not available in any of the Shopify API’s ( Rest or GraphQL).
Backend: We created an application which would accept a json converted csv from the frontend as request body. Instead of using multiple REST API calls to extract all product details from SKU, we used Shopify’s GraphQL query to extract all data needed in one go for a given SKU.
To get the value for “Next Incoming Date”, we created a unique solution. We created a page on the store which would list the “Next Incoming Date” for all variants in the store in JSON format. We also paginated the result so that it could handle any no. of products in the store. We applied some js to only show the result for the variant id’s that we need and used this as an API endpoint to get this data.
The backend then created a csv and using files API saved it in the Shopify Store and served the frontend with the csv url and the result data.
Frontend: We wanted to make the frontend experience very smooth, since users could edit the result table, add new products to the result manually and reupload another file. Keeping this in mind, we created a vue.js app for this frontend to make the user experience extremely smooth and super-fast.
Using Shopify API’s and theme code, we were able to build a perfect experience for wholesale buyers of Ledvance.
The solution worked as expected and the wholesale buyers are now able to select and purchase products with much more clarity.