On this blog, we'll guide you through our custom-coded solution for wholesalers who are looking to have different prices for their products, one for their retail customers and the other for their wholesale customers. To help you understand better the content down below, we invite you to open the following site, where we have added said solution so you can see for yourself how it looks and works:
GUIDE WEBSITE: https://yourwebnz.wixsite.com/shop/custom-shop
Simplified Inventory for Wholesale and Retail Customers
Wix Store users often request the option to create different prices for their stock. Retail customers often pay a higher rate per unit than wholesale customers, who typically buy products in large quantities at a lower rate per unit. While retail customers are well-served by the features already present with Wix Stores by default, wholesale customers often ask us for a custom solution that would allow them to place orders with different prices based on the type of account that they’re logged into and how much stock they want to purchase.
Many retailers around the world keep track of their stock using stock-keeping units (SKUs). These numbers sit just below the striped UPC barcodes familiar to anyone who’s ever shopped in a retail store and are used to account for physical goods in inventory management systems. An SKU is a unique combination of letters and numbers that allows physical goods to be tracked and identified throughout the inventory and shipping processes. Our challenge was to create different pricing options for goods with the same SKU code to meet the needs of both retail and wholesale customers.
Building this with Wix would normally require 2 separate Wix Stores sites: One for the inventory available to wholesalers and another that’s strictly for retailers. This is because retail customers generally buy products in small quantities that can be managed by existing stock. While wholesale customers tend to place larger orders that require them to place the order in advance before paying for it with an invoice in a separate transaction. Wix Stores is not currently able to display different payment options for retailers and wholesalers by default, creating twice as much work for shop owners who need to maintain two separate inventories for the same business.
With Velo, Wix’s platform for full-stack web development with JavaScript, we have developed a solution that allows wholesalers to create orders with special prices and product options that are not available on the retail side of the shop. This means that the store owner can have a single inventory and SKU number for each side of the business.
Libraries Used:
With this solution, we can display the weight, recommended retail price (RRP), units per case, “best before” date, and more for each product. Wholesale customers are also able to order products on a per unit or per box basis:
How We Solved the Problem
First, we created a page on the Wix site that’s only accessible to members with wholesale status applied to their accounts. This page has a MultiStateBox that allows us to navigate between three different views: Products, Cart Page and Checkout.
Second, we use a repeater field for the products that connect the dataset to the collection of wholesale products. The repeater uses all of the information associated with each product to create custom functions by selecting the quantity of each product, verifying if that product is in stock with the correct quantity, and returning the information. For the price of wholesale products, the client fills out a collection with reference to the SKU to match with the products of the repeater and adds the price of each sale and other information about these products.
Wholesale Online Store Layout
Second, we use a repeater field for the products that connect the dataset to the collection of wholesale products. The repeater uses all of the information associated with each product to create custom functions by selecting the quantity of each product, verifying if that product is in stock with the correct quantity, and returning the information. For the price of wholesale products, the client fills out a collection with reference to the SKU to match with the products of the repeater and adds the price of each sale and other information about these products.
Cart Page Layout
The “Add products” button uses all the information of the selected item and adds it to the JSON array. This information is displayed in the Cart page state, inside of the cart page repeater, and inside of the checkout field. The cart page repeater allows you to increase or decrease the product quantity by arranging or eliminating them. To modify the information inside of the repeater, we used the data, forEachItem( ), and onItemReady( ) elements.
Checkout Page Layout
The Checkout is another state to manage within this process. There is a Wix Forms field, where you need to fill in the necessary information to create an order with createOrder( ) and the product array is in the field of this form. The total price is constantly modified depending on the client's order.
Conclusion
Wix Stores is an easy way to get up and running with an eCommerce solution on your Wix site. But the more time you spend with it as a developer, the more you recognize the product’s limitations in specific scenarios. Few out-of-the-box software solutions work for every possible use case, and Velo has allowed our team to build on the groundwork provided with Wix Stores to create a custom solution for eCommerce businesses that want to cater to wholesale and retail customers with a single inventory.
Velo’s MultiStateBox allows us to switch between three different page views, each using custom logic to connect repeater fields to Wix collections which contain SKUs for our inventory. These repeaters automatically check each collection for inventory amount and show different views based on whether one is a wholesale or retail customer.
Our Checkout process provides live updates based on available inventory, so both wholesale and retail customers can see if it’s currently possible to fulfill their order without additional wait times. Since they frequently make large purchases, wholesale customers have their own custom checkout form, which allows them to order large quantities in advance and have their order dropped off in accordance with delivery instructions that match their business needs.
Our goal is to make it as easy as possible for eCommerce businesses to cater to wholesale and retail customers, but there are many different ways to adapt this design to other use cases. While we only catered to two customer options, it’s easy to see how you could create a unique user flow for every type of customer that your business caters to, with each user flow connected to a single centralized collection for managing inventory. Developers could also build on our decision to organize products by weight, recommended retail price (RRP), units per case, and “best before” date with unique categories that meet their client’s needs.
We were able to make a Standard Shop like this one:
The possibilities for taking this idea in your own direction are endless, and we hope to see you implement it on your own Wix Stores soon.