I'm new to wix but have figured out how to integrate a custom 'add to cart button' in order to integrate the Wix Stores backend into a fully customized dynamic slug page. This is all in order to escape from the cookie cutter and non adjustable wix store layout. (Arg, I cant wait for Wix to let the layout be more adjustable so I can circumnavigate this problem)
I'm finding that the Add To Cart button works great for products that do not have product options. When a product does have a product option there is a an error code because the option has not been selected from a drop down (size, material etc) in order to complete the Add To Cart function.
Some of my products do not have options, some have size options, some have material options, some have combinations of options. I'd also like the user to input quantity into a text box and have all of this info feed into the Add to Cart button. Just as if this was the Wix Stores product page.
The code on my dynamic page reads as follows:
import wixData from 'wix-data';
import wixStores from 'wix-stores';
wixData.query('Stores/Products')
.hasSome('productOptions.size.value', ['#dropdownSize'])
.find('productOptions.size.value', ['#dropdownSize'])
.then(console.log)
$w.onReady(function () {
$w("#AddToCart").onClick((event) => {
let $item = $w.at(event.context);
let selectedProduct = $item('#dynamicDataset').getCurrentItem();
let productId = selectedProduct._id;
$w('#shoppingCartIcon1').addToCart(productId)
.then(() => {
console.log("add product ${productId} success");
})
.catch((error) => {
console.log(error);
});
});
});
export function AddToCart_click(event) {
//Add your code for this event here:
}
Can anyone help me implement dynamic dropdowns (so that when an option(s) is available a drop down appears on the dynamic page, and input text box for inputting quantity?
My website/store is on pause until this problem is solved. Thanks!
So, I created a custom product page that also check for product availability (more on that latter), the property you are looking for is the productOptions that you retrive from the .getCurrentItem() method of the dynamic dataset.
Something like this:
$w.onReady(() => { let dataset = $w('#dataset') //Change this to your dateset element connected to the Stores/Products dataset.onReady(async () => { let currentProduct = dataset.getCurrentItem() const { productOptions } = currentProduct //Destructuring of the productOptions const option = 'size' //Change this to the option you named const choices = productOptions[option].choices const optionsForDropdown = createOptionsForDropdown(choices) $w('#dropdown').options = optionsForDropdown //Change this dropdown to yours }) }) //Function that returns the correct array for dropdown options //It alsos returns if its inStock or not. function createOptionsForDropdown(options) { return options .filter(option => option.inStock) .map(option => { return { label: option.description, value: option.description, inStock: option.inStock, } }) }