Hi, I’m trying to add a request a quote option to my store product page instead of enabling visitors to go to a cart and checkout. I’m currently using this tutorial: Tutorial: Request a Quote
Since im not familiar to coding at all, Ive used ChatGPT to help me make the code work. I’m stuck as the developer console sent this message back:
Running the code for the Product Page page. To debug this code in your browser’s dev tools, open cdi9h.js.
Product Page is ready
Product loaded:
{…}
Currency: USD
Bookshelf product detected
Quote-only product detected.
Error loading product: TypeError: addToCartButton.hide is not a function. (In ‘addToCartButton.hide()’, ‘addToCartButton.hide’ is undefined)
How can I fix this as I can’t physically click on the add to cart button and find its ID or anything.
I’m using Wix Editor, not studio. The code that I’ve run is below:
import wixWindow from "wix-window";
import wixLocation from "wix-location";
let product;
const bookshelfId = "3ab35961-c77f-c5a2-463e-e0ca084a52bd";
$w.onReady(async function () {
console.log("Product Page is ready");
try {
await initProductPage();
} catch (error) {
console.error("Error during product page initialization:", error);
}
wixLocation.onChange((location) => {
let newPath = location.path;
console.log("Location changed:", newPath);
if (newPath?.[0] === "product-page") {
initProductPage();
}
});
});
async function initProductPage() {
try {
product = await $w("#productPage1").getProduct();
console.log("Product loaded:", product);
const currency = product?.currency || "USD";
console.log("Currency:", currency);
if (product._id === bookshelfId) {
console.log("Bookshelf product detected");
if (product.price === 0 || !product.price) {
console.log("Quote-only product detected.");
// Hide the default Add to Cart button
const addToCartButton = $w('[data-hook="add-to-cart"]');
if (addToCartButton) {
addToCartButton.hide(); // Hide the button if possible
}
// Show and configure the custom Request a Quote button
const requestQuoteButton = $w('#requestQuoteButton'); // Custom button added in Wix Editor
if (requestQuoteButton) {
requestQuoteButton.show();
requestQuoteButton.onClick(() => onRequestQuote());
} else {
console.error("Custom Request a Quote button not found.");
}
}
} else {
console.log("Different product detected, no changes applied");
}
} catch (error) {
console.error("Error loading product:", error);
}
}
function onRequestQuote() {
console.log("Request a Quote button clicked");
getProductInfo().then((data) => {
console.log("Product info collected:", data);
wixWindow.openLightbox("Request a quote", data).then((results) => {
console.log("Lightbox closed with results:", results);
});
}).catch((error) => {
console.error("Error in onRequestQuote:", error);
});
}
async function getProductInfo() {
try {
const bookshelfQuantity = await $w("#productPage1").getQuantity();
const bookshelfChoices = await $w("#productPage1").getSelectedChoices();
const bookshelfCustomText = await $w("#productPage1").getCustomText();
console.log("Quantity:", bookshelfQuantity);
console.log("Choices:", bookshelfChoices);
console.log("Custom Text Fields:", bookshelfCustomText);
return {
product: product,
quantity: bookshelfQuantity,
choices: bookshelfChoices,
customTextFields: bookshelfCustomText,
};
} catch (error) {
console.error("Error in getProductInfo:", error);
return {};
}
}
ecommerce validation plugin codes:
validation-config.js file code:
import * as ecomValidations from "interfaces-ecommerce-v1-validations-provider";
export function getConfig() {
return { validateInCart: true };
}
validation.js file code:
import * as ecomValidations from "interfaces-ecommerce-v1-validations-provider";
const bookshelfId = "3ab35961-c77f-c5a2-463e-e0ca084a52bd";
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) => isBookshelf(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 isBookshelf = (catalogItemId) => {
return catalogItemId != undefined && catalogItemId == bookshelfId;
};
Overall, I just need help to make code work, my biggest issue is the cart button as I can’t access the ID and I don’t know how to solve the issues stated by the developer console. If possible, I also need to know how to make this integrated to ALL store products, not just one. And if it’s possible to see a full cart of the products a customer wants (without prices) so they can add / remove product options before submitting the quote form –– I need them to be able to submit a quote form with multiple products.
