Hi, I am using Wix Studio and I’ve recently found these tutorial links on how to add a request quote button rather than add to cart and going through the checkout process.
I have followed the above, and the button works with the coding when I run it, and the button becomes “Request a quote”, however, when the lightbox gets triggered with a form I made, it doesn’t add summary of the products that customer wants a quote for.
For example, when a customer clicks on add to quote, I am expecting to see the lightbox form link to the product added to the quote. For example:
I also want it to work in the way that if a customer closes the lightbox, they can continue to browse and add products to the quote and then finalise it via the lightbox.
Similar to the above screen shot, first page of form is products added to quote with option to adjust quantity, a button to continue to browse or go to next step which is to fill out personal information, and then submit.
The code that I’ve used for the Light box is:
import wixWindowFrontend from 'wix-window-frontend';
import wixLocationFrontend from 'wix-location-frontend';
let product;
$w.onReady(function () {
initProductPage();
});
wixLocationFrontend.onChange((location) => {
let newPath = location.path;
if (newPath?.[0] === 'product-page') {
initProductPage();
}
});
async function initProductPage() {
product = await $w('#productPage1').getProduct();
$w('#productPage1').setAddToCartLabel('Request a Quote');
$w('#productPage1').onAddToCart(onAddToCartHandler);
}
async function onAddToCartHandler(resume, cancel) {
const data = await getProductInfo();
wixWindowFrontend.openLightbox('Request a quote', data)
.then((results) => {
cancel();
});
}
async function getProductInfo() {
const quantity = await $w('#productPage1').getQuantity();
const choices = await $w('#productPage1').getSelectedChoices();
const customText = await $w('#productPage1').getCustomText();
return {
product: product,
quantity: quantity,
choices: choices,
customTextFields: customText,
}
}
E-comm validations: eCommerceValidation-config.js
import * as ecomValidations from 'Request a Quote';
/** @returns {import('Request a Quote').ValidationsSPIConfig} */
export function getConfig() {
return {validateInCart: true};
}
E-comm validations: eCommerceValidation.js
import * as ecomValidations from 'interfaces-ecommerce-v1-validations-provider';
/**
* This endpoint retrieves validation violations from your app.
*
* Wix calls this endpoint when certain actions are performed on a visitor's cart and checkout. For example, when an item is added to the cart, or when a coupon is added to a checkout.
* This endpoint validates a visitor's cart and checkout, and returns any validation violations (using the structure provided by Wix eCommerce). Site visitors can see the validation violations in their cart and checkout pages. If there aren't any validation violations, the endpoint returns an object containing an empty list.
*
* > __Notes:__
* > + By default, this endpoint only retrieves validation violations from a visitor's checkout. If you want to also retrieve validation violations from a visitor's cart, set the `validateInCart` parameter to `true` in the Ecom Validations Integration's config file located in the [Wix Developers Center](https://dev.wix.com/). For more information, see the [prerequisites](https://dev.wix.com/api/rest/drafts/validations-integration-spi/introduction#drafts_validations-integration-spi_introduction_prerequisites) section of the introduction.
* > + You cannot try out this endpoint because it has to be implemented by an app and can have an arbitrary URL. Therefore, ignore the **Authorization** and **POST** sections below as well as the **Try It Out** button.
* @param {import('interfaces-ecommerce-v1-validations-provider').GetValidationViolationsOptions} options
* @param {import('interfaces-ecommerce-v1-validations-provider').Context} context
* @returns {Promise<import('interfaces-ecommerce-v1-validations-provider').GetValidationViolationsResponse | import('Request a Quote').BusinessError>}
*/
let product;
export const getValidationViolations = async (options, context) => {
let violations = [];
const severity = ecomValidations.Severity.ERROR;
const description = "You can't purchase this product. You can only request a quote."
const requestAQuoteLineItem = options.validationInfo.lineItems.find(lineItem => isProduct(lineItem.catalogReference?.catalogItemId));
if (requestAQuoteLineItem != undefined) {
const quantity = requestAQuoteLineItem.quantity;
if (quantity > 0 && quantity < 200) {
violations.push({
severity,
target: { lineItem: { name: ecomValidations.NameInLineItem.LINE_ITEM_DEFAULT, _id: requestAQuoteLineItem._id } },
description: description
});
}
}
return { violations };
};
const isProduct = (catalogItemId) => {
return catalogItemId != undefined && (catalogItemId == product);
}