Replacing default Add to Cart button with customized button through Corvid

Ask the community
, ,
1

For my store, I do not wish for our Add to Cart buttons to appear as unclickable/“grayed-out” when an item inventory is showing as out of stock. I would rather have a message pop up when the customer clicks on the Add to Cart button for this product, letting them know we are out of stock but also redirecting them to our contact-us page to get in line for our next production round. I am trying to overlay a new button and hide the default Wix Add to Cart button, but when I try to preview with the below code, nothing is happening to show that the new button is working (even just to add the product to the cart - I still need to include code for the out-of-stock functionality). I also keep getting an error message that I am not sure how to debug. Thank you for any feedback you might have!!

Questions I have:

  1. If you have created your own Add-to-Cart button in Wix, did you set it up as below or in a different way? I am not sure where I am going wrong here.

  2. Any guidance on how to set up the function for the out-of-stock functionality detailed above would be incredibly helpful!

  3. I keep getting the error message below, but I do not see in the Developer Tools how/where to actually debug this:
    Error parsing web-module ‘public/pages/wczqu.js’: JSX value should be either an expression or a quoted JSX text (10:12) while parsing file: public/pages/wczqu.js
    Loading the code for the 288 Power Amplifier page. To debug this code, open wczqu.js in Developer Tools.

import wixLocation from “wix-location”;

//hide default Add to Cart button;
$w(“#addToCartButton1”).hide();

//trigger wix’s built-in addToCart function with button click, button to read “Add to Cart”

export function button_click(event, $w) {
//Initialize new Add-to-Cart button
var button = document.createElement(“button”);
button.innerHTML = “Add to Cart”;
$w(“#button”).show();

//Append button to page
var body = document.getElementsByTagName(“body”)[0];
body.appendChild(button);

//Get product id in order to link new Add to Cart button to this specific amp
const currentProduct = $w(‘#dynamicDataset’).getCurrentItem().product;
$w(“#shoppingCartIcon1”).click = addtoCart(currentProduct._id, 1);
.then( () => {
console.log(“Product added!”);
})
catch ( (error) => {
console.log(error);
//need an if/then statement here to call the function below if product inventory shows out of stock
}
};

//separate function to run if product is out of stock, if/then needs to be in above function to call the one below
button12.addEventListener (“click”, function outOfStock() {
alert(“We are currently out of stock of this item. Contact us to get in line for our next production round!”);
// redirect with popup message to Contact Us page
wixLocation.to(“/contact-us”);
});