I’ve been working on a Wix Store Product Page where I want to replace the “Add to Cart” button with a “Request a Quote” button for all products. I checked the wix documentation and I see that the code works perfectly for a specific product by checking its ID, but I want this functionality to apply to all products, not just one.
This code changes the “Add to Cart” button to “Request a Quote” and opens a modal with a submission form, stopping the checkout process for a specific product. However, I need this functionality to work for all products.
Could someone please help me MODIFY this code so that the “Request a Quote” button and its associated functionality apply to all products in my store?
I’m not yet well versed with Wix Api’s, or Javascript as a whole. It’s been a while and I desperately need this code to work, please.
Thank you so much for this. I think it might work, it definitely changed the label of the button and it also doesn’t take me to the checkout page but clicking on the button is also not triggering the Request A Quote Modal/Lightbox here is my code.
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 'interfaces-ecommerce-v1-validations-provider';
/** @returns {import('interfaces-ecommerce-v1-validations-provider').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('interfaces-ecommerce-v1-validations-provider').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);
}
In the Validations code block, I am met with this error
Cannot find module ‘interfaces-ecommerce-v1-validations-provider’ or its corresponding type declarations.ts(2307)
Make sure that the name of your lightbox is Request a quote
As this is what the code is being instructed to open. Also remember that it is case sensitive.
Also make sure that there are no red lines anywhere in the code. Only then will it work flawlessly.
So the Modal/Light is working! Thank you so much for the help @Pratham , I appreciate your help a lot, I have been working on this for a month and was willing to give up. But you saved the day
I’m trying to do something similar, and for some reason the lightbox is coming up on page load and not when you click the button, though the “Buy Now” button label has changed.
This is my product page code, can anyone please help?
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').setBuyNowLabel('Request a Quote');
$w('#productPage1').onBuyNow(onBuyNowHandler);
}
async function onBuyNowHandler(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,
}
}
I have a related issue, but I’d need a slightly different solution. I want to use the same logic, but the “request a quote” button should only appear for items in a particular product category. After some digging (Wix Stores "Products" Collection fields - Bug or flaw?), I now understand that I can’t check the product category from the “getproduct” function and would need to write a query. That’s where I need help: my coding abilities are limited.
If someone could help with that part, it would be greatly appreciated.
Here’s where I’m at:
import wixWindowFrontend from “wix-window-frontend”;
import wixLocationFrontend from “wix-location-frontend”;
let product;
const collectionId = “e8c7a925-69d0-6f44-3482-8e1d20ea6662”;
$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();
if (collections === collectionId) {
$w(“#productPage1”).setAddToCartLabel(“Contact us to purchase”);
$w(“#productPage1”).onAddToCart(onAddToCartHandler);
}
}
async function onAddToCartHandler(resume, cancel) {
const data = await getProductInfo();
wixWindowFrontend.openLightbox(“Contact us to purchase”, data).then((results) => {
cancel();
});
}
We’ve used the request a quote app on projects like these. We add the plug-in on the PDP if users want to make a request on any individual product, and then the form on the cart page so customers can request a quote on the full cart:
Also, to clarify, does this work on all products an not just one? If not, what would be the code to ensure that all of code mentioned in this post works on all products?
Well if you read very title of the topic itself, you will get your answer.
That’s the whole point of having a Mark As Solved option in this forum, which is only marked when the solution provided is working. And as you can see already, this topic is Marked As Solved.
Also, another question, because I am extremely new to Wix, I cannot find eComm Validation SPI through via the instruction of the tutorial. When I go to custom apps like instructed all I see is “create new app” ( screenshot provided to show what I see). Do I just add code to “creating new app” or do I have to add the code through “ecomm validation spi?” and if so where is that located. Thanks again for all your help.
Thank you so much for the help 
