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, } }) }
I was not able to figure out a solution for the drop down or options
I never got an answer to this from wix. I did however simplify my product page as Wix prescribes within the constraints of the #productPage1 box. I then added additional product info into a dataset and was able to filter the dataset using the selected store product. I still had to show the fixed 'store/product' layout but in a simplified way and was able to play around with layout when showing other product info from my dataset. Not a perfect solution to my original question but was a work around. Funny enough my biz no longer necessarily needs a checkout function but I've kept the code in place in order to show my filtered dataset content and I've hidden and collapsed the 'wix stores' product box completely from view.
The code looks something like this:
import wixData from 'wix-data'; import wixWindow from 'wix-window'; import wixStores from 'wix-stores'; //connects product database to selected product from built in stores database// let product; $w.onReady(async function () { product = await $w('#productPage1').getProduct(); filterDataset();
//the following two lines hides the #productpage1 box which is connected to the wix stores back-end. dont use the following two lines if you want to keep this box showing//
$w("#productPage1").hide(); $w("#productPage1").collapse(); });
//the following two lines filters a dataset (in my case #dataset2) to the current product. In your dataset you need to reference each line/product to a product in the wix stores dataset for this to work This is 'refToStore (a reference in my dataset), product._id ( the product id of the current page)// async function filterDataset() { await $w('#dataset2').setFilter(wixData.filter().eq('refToStore', product._id)); }
This explains my imperfect workaround. I wrote this code some time ago after weeks of trying many workarounds so my description of whats going on may not be perfect. This does not address the issues in my original question of needing reasonable flexibly with the stores/product layout in #productpage1 or how to connect option selections to the floating checkout or add to cart button. Anyways, hope this helps!!!!
I never got an answer to this from wix. I did however simplify my product page as Wix prescribes within the constraints of the #productPage1 box. I then added additional product info into a dataset and was able to filter the dataset using the selected store product. I still had to show the fixed 'store/product' layout but in a simplified way and was able to play around with layout when showing other product info from my dataset. Not a perfect solution to my original question but was a work around. Funny enough my biz no longer necessarily needs a checkout function but I've kept the code in place in order to show my filtered dataset content and I've hidden and collapsed the 'wix stores' product box completely from view.
The code looks something like this:
import wixData from 'wix-data'; import wixWindow from 'wix-window'; import wixStores from 'wix-stores'; //connects product database to selected product from built in stores database// let product; $w.onReady(async function () { product = await $w('#productPage1').getProduct(); filterDataset();
//the following two lines hides the #productpage1 box which is connected to the wix stores back-end. dont use the following two lines if you want to keep this box showing//
$w("#productPage1").hide(); $w("#productPage1").collapse(); });
//the following two lines filters a dataset (in my case #dataset2) to the current product. In your dataset you need to reference each line/product to a product in the wix stores dataset for this to work This is 'refToStore (a reference in my dataset), product._id ( the product id of the current page)// async function filterDataset() { await $w('#dataset2').setFilter(wixData.filter().eq('refToStore', product._id)); }
This explains my imperfect workaround. I wrote this code some time ago after weeks of trying many workarounds so my description of whats going on may not be perfect. This does not address the issues in my original question of needing reasonable flexibly with the stores/product layout in #productpage1 or how to connect option selections to the floating checkout or add to cart button. Anyways, hope this helps!!!!
same. i dont know why no expert wix answer that things...community need it.
Hi bronsin / Michael,
I have the same problem. Anyone find a solution yet? Annet.
Any Ideas on how to add custom drop downs for product options in order to integrate the selection into the add to cart functionality?