Wix Studio: Building a Custom Product Catalog with "Request a Quote" Functionality

Understanding the "Request a Quote" Flow in Wix Studio

The Wix Studio platform offers a range of tools to build sophisticated e-commerce solutions. A recent forum topic highlighted a specific need: a custom product catalog where products are not sold directly but require a "Request a Quote" flow due to their bespoke nature. This article analyzes the feasibility of implementing such a system using Wix Studio's built-in features and Velo.

The Challenge: Custom Products and Manual Pricing

The user's requirement, as described in the original forum post, involves a product catalog where each item is custom-made. Customers should be able to select a main product and add optional add-ons. Instead of a direct purchase, they submit a "Request a Quote" including their selections and contact details. The pricing is then calculated manually, and payment is handled offline.

Native Wix Features vs. Velo Customization

The core question is whether this logic can be implemented natively in Wix or if Velo (Wix's coding platform) is necessary. The answer is a combination of both. Wix Stores can be used for product catalog management, but the standard checkout process needs to be bypassed and replaced with a custom quote request system. This is where Velo comes in.

Implementing the Solution: A Step-by-Step Approach

1. Product Catalog Setup with Wix Stores: Use Wix Stores to create your product catalog. Each main product should be set up as a separate item.
2. Add-on Options: For add-ons, consider using product options or variations within Wix Stores. If the add-ons are more complex or require unique logic, you might need to represent them as separate products and manage the relationships using Velo.
3. Custom Product Page: Design a custom product page using the Wix Studio editor. This page will display the main product and its available add-ons.
4. "Request a Quote" Button: Replace the standard "Add to Cart" button with a "Request a Quote" button. This button will trigger a custom function written in Velo.
5. Velo Code for Quote Request: Use Velo to handle the quote request process. This involves:
   • Collecting the selected main product and add-ons.
   • Gathering customer contact details (name, email, phone number).
   • Storing the request data (e.g., in a Wix Data collection).
   • Sending a notification to the business owner.
6. Form Integration (Optional): Instead of building a fully custom form with Velo, you can embed a Wix Form on the product page to collect customer details. Velo can then be used to link the form submission with the selected products.
7. Backend Logic: Implement backend logic (using Velo) to handle the quote request data. This might involve:
   • Calculating a preliminary quote (if possible).
   • Sending automated email responses to the customer.
   • Managing the quote requests in a structured way.

Code Example (Conceptual)

This is a simplified example of how Velo code might be used to handle the "Request a Quote" button click:

import wixData from 'wix-data';

$w.onReady(function () {
  $w("#requestQuoteButton").onClick( (event) => {
    let selectedProduct = $w("#productTitle").text;
    let selectedAdd // Function to get selected add-ons
    let customerName = $w("#nameInput").value;
    let customerEmail = $w("#emailInput").value;

    let quoteRequest = {
      "product": selectedProduct,
      "addons": selectedAddons,
      "name": customerName,
      "email": customerEmail,
      "status": "pending"
    };

    wixData.insert("QuoteRequests", quoteRequest)
      .then( (results) => {
        console.log("Quote request submitted successfully:", results);
        // Show a success message to the user
      } )
      .catch( (err) => {
        console.log("Error submitting quote request:", err);
        // Show an error message to the user
      } );
  } );
});

function getSelectedAddons() {
  // Logic to retrieve selected add-ons from the page
  // This will depend on how the add-ons are implemented (e.g., checkboxes, dropdowns)
  return ["addon1", "addon2"]; // Placeholder
}

Important Considerations:

• Data Structure: Carefully plan your data structure in Wix Data to efficiently store and manage quote requests.
• Error Handling: Implement robust error handling in your Velo code to gracefully handle potential issues.
• Security: Ensure that your code is secure and protects customer data.
• User Experience: Design a smooth and intuitive user experience for the quote request process.

Conclusion

While Wix Stores doesn't natively support a "Request a Quote" flow without checkout, Velo allows you to create a fully customized solution. By combining the product catalog management capabilities of Wix Stores with the flexibility of Velo, you can build a sophisticated system that meets the specific needs of businesses offering custom-made products. Remember to thoroughly test your implementation and prioritize user experience throughout the process.