Hey guys,
I have a dynamic page with all my products, I am trying to get the product options on the containers but have failed to do so, can someone please have a look at my code and let me know where I’m failing:
import wixLocation from ‘wix-location’;
import {session} from ‘wix-storage’;
import wixSite from ‘wix-site’;
let selectedproduct;
$w.onReady( function () {
//TODO: write your page related code here…
$w(“#image15”).fitMode = “fit”;
showproductoptions();
});
export function addToCartBtn_click(event, $w) {
// Get the current product.
console.log(currentProduct);
const currentProduct = $w(‘#dataset2’).getCurrentItem().product;
}
export async function showproductoptions(){
$w(‘#repeater1’).onViewportEnter(() => {
let clickedItemData = $w(“#dataset2”).getCurrentItem()
})
.then( (product) => {
selectedproduct=product;
let productName = product.name(“#dataset2”).getCurrentItem;
let productDescription = product.description(“#dataset2”).getCurrentItem;
let productOptions=product.productOptions(“#dataset2”).getCurrentItem;
let productPrice=product.FormattedPrice(“#dataset2”).getCurrentItem;
//console.log(productOptions.Quantity.choices);
if (productOptions.Quantity){
$w(“#radioGroup1”).show();
var length=productOptions.Quantity.choices.length;
console.log(length);
if (length===1){$w(“#radioGroup1”).options = [
{“label”: productOptions.Quantity.choices[0].value, “value”: productOptions.Quantity.choices[0].value},
];}
else if (length===2){
$w(“#radioGroup1”).options = [
{“label”: productOptions.Quantity.choices[0].value, “value”: productOptions.Quantity.choices[0].value},
{“label”: productOptions.Quantity.choices[1].value, “value”: productOptions.Quantity.choices[1].value},
];
}
else if (length===3){
$w(“#radioGroup1”).options = [
{“label”: productOptions.Quantity.choices[0].value, “value”: productOptions.Quantity.choices[0].value},
{“label”: productOptions.Quantity.choices[1].value, “value”: productOptions.Quantity.choices[1].value},
{“label”: productOptions.Quantity.choices[2].value, “value”: productOptions.Quantity.choices[2].value},
];
}
else if (length===4){
$w(“#radioGroup1”).options = [
{“label”: productOptions.Quantity.choices[0].value, “value”: productOptions.Quantity.choices[0].value},
{“label”: productOptions.Quantity.choices[1].value, “value”: productOptions.Quantity.choices[1].value},
{“label”: productOptions.Quantity.choices[2].value, “value”: productOptions.Quantity.choices[2].value},
{“label”: productOptions.Quantity.choices[3].value, “value”: productOptions.Quantity.choices[3].value},
];
}
else if (length===5){
$w(“#radioGroup1”).options = [
{“label”: productOptions.Quantity.choices[0].value, “value”: productOptions.Quantity.choices[0].value},
{“label”: productOptions.Quantity.choices[1].value, “value”: productOptions.Quantity.choices[1].value},
{“label”: productOptions.Quantity.choices[2].value, “value”: productOptions.Quantity.choices[2].value},
{“label”: productOptions.Quantity.choices[3].value, “value”: productOptions.Quantity.choices[3].value},
{“label”: productOptions.Quantity.choices[4].value, “value”: productOptions.Quantity.choices[4].value},
];
} else {
$w(“#radioGroup1”).hide();
}
} else {
$w(“#radioGroup1”).hide();
}
} )
. catch ( (error) => {
console.log(error);
} );
}
export async function quantity(event, $w){
$w(“#productPage”).getProduct()
.then( (product) => {
selectedproduct=product;
let productQuantity = product.quantityInStock
let label = product.quantityInStock
. catch ( (err) => {
console.log(productQuantity);
$w(“#text35”).expand();
} );
}
)
}
export function productPage_viewportEnter(event) {
//Add your code for this event here:
showproductoptions();
}
In the past I’ve had luck with showing the product options in a radio button through the product page, as I was using “get current item” on the product page, not sure if im making a mistake