I have coded the custom product page, I am facing the issue, when I click on add to cart button, the mini cart will open, but it doesn’t show any product. ( here is the link of the product page: https://www.givinggiftsshop.co.uk/product-page/personalised-baby-vest=) )
here is the code:
import { cart , product } from ‘wix-stores’ ;
import { formFactor } from ‘wix-window’ ;
let productID ;
let qty = 1 ;
let drop1 , drop2 , drop3 , drop4 , colr1 , colr2 , colr3 ;
let colrname1 , colrname2 , colrname3 ;
let op1 , op2 , op3 , op4 ;
let personalize ;
//************** */
let isoption1 , isoption2 , isoption3 , isoption4 ;
let dropdownLabels = ;
let colorLabels = ;
export function getMediaLength ( obj ) {
return obj.length ;
}
$w . onReady ( function () {
$w ( '#productPage1' ). getProduct ()
. then (( product ) => {
console . log ( "product is: " , product )
let productName = product.name ;
let productDescription = product.description ;
let price = "£" + product.price ;
let productoption = product.productOptions ;
let media = product.mediaItems ;
let customTextFields = product.customTextFields
let box = product.additionalInfoSections [ 2 ]. description ;
productID = product._id ;
console . log ( "additional info: " , box );
$w ( "#richTextBox1" ). value = box
$w ( "#text32" ). text = productName ;
$w ( "#text33" ). text = price ;
$w ( "#text36" ). text = productDescription ;
console . log ( "media :" , media )
//product gallery
let arrGallery = [];
**for** ( var i = 0 ; i < getMediaLength ( media ); i ++) {
arrGallery . push ({ src : media[i ]. src , description : '' , id : media[i ]. id , title : "" , type : "Image" })
}
$w ( "#gallery1" ). items = arrGallery ;
console . log ( productoption );
var prodOption = Object . keys ( productoption );
var dropdownArray = [ '#dropdown1' , '#dropdown2' , '#dropdown3' , '#dropdown4' ];
var colArray = [ '#repeater1' , '#repeater2' , '#repeater1' ];
var coltxtArray = [ '#text69' , '#text70' , '#text71' ];
var colgroup = [ '#group6' , '#group7' , '#group8' ];
var boxarry = [ '#box1' , '#box3' , '#box4' ];
var btnarry = [ '#button2' , '#button12' , '#button13' ]
console . log ( "OBJECT Keys: " , Object . keys ( productoption ));
//console.log(productoption[1].optionType);
console . log ( "**********" );
if ( prodOption.length ) {
var dd_itr = 0 ;
var dd_itr_c = 0 ;
prodOption . forEach (( element ) => {
if ( productoption[element ]. optionType == "drop_down" ) {
console . log ( "Product Option: " , element );
console . log ( "Option Type: " , productoption[element ]. optionType );
$w ( dropdownArray[dd_itr ]). options = createOptionsForDropdown ( productoption[element ]. choices );
$w ( dropdownArray[dd_itr ]). label = element ;
$w ( dropdownArray[dd_itr ]). expand ();
dropdownLabels . push ( element );
if ( dropdownArray [ 0 ]) {
op1 = element ;
console . log ( "!!!!!!!!!available dorpdown: " , op1 );
} **else if** ( dropdownArray [ 1 ]) {
op2 = element ;
console . log ( "!!!!!!!!!!available dorpdown: " , op2 );
} **else if** ( dropdownArray [ 2 ]) {
op3 = element ;
console . log ( "!!!!!!!!!!available dorpdown: " , op3 );
} **else if** ( dropdownArray [ 3 ]) {
op4 = element ;
console . log ( "!!!!!!!!available dorpdown: " , op4 );
}
dd_itr ++;
} **else** {
$w ( colArray[dd_itr_c ]). data = createColorRepeaterData ( 'Colour' , productoption[element ]. choices );
$w ( colArray[dd_itr_c ]). onItemReady (( $w , itemData , index ) => {
console . log ( "item is: " , itemData.value , " ### " , boxarry[dd_itr_c ], " @@@@ " , btnarry[dd_itr_c ])
$w ( boxarry[dd_itr_c - 1 ]). style.backgroundColor = itemData.value ;
$w ( btnarry[dd_itr_c - 1 ]). onClick (() => {
console . log ( "Clicked" )
$w ( coltxtArray[dd_itr_c - 1 ]). text = productoption[element ]. name + ": " + itemData.description ;
if ( coltxtArray[dd_itr_c - 1 ]) {
colr1 = itemData.description ;
colrname1 = element ;
} **else if** ( coltxtArray[dd_itr_c ]) {
colr2 = itemData.description ;
colrname2 = element ;
} **else if** ( coltxtArray[dd_itr_c + 1 ]) {
colr3 = itemData.description ;
colrname3 = element ;
}
});
})
$w ( coltxtArray[dd_itr_c ]). text = productoption[element ]. name ;
$w ( colgroup[dd_itr_c ]). expand ();
dd_itr_c ++;
}
});
}
// if personalization
if ( customTextFields ) {
// console.log("personalization is yes");
$w ( "#textBox1" ). expand ();
} **else** {
$w ( "#textBox1" ). collapse ()
}
}). catch (( error ) => {
console . error ( error );
});
function createColorRepeaterData ( idPrefix , choices ) {
// Use the JavaScript map() function to add an _id field to each data item.
**return** choices . map (( item , index ) => {
item._id = ` ${ idPrefix } - ${ index } ` ;
**return** item ;
});
}
function createOptionsForDropdown ( options ) {
**return** options
. filter ( option => option.inStock )
. map ( option => {
console . log ( "instock status is: " , option.inStock )
**return** {
label : option.description ,
value : option.description ,
inStock : option.inStock ,
}
})
}
$w ( "#dropdown1" ). onChange (() => {
drop1 = $w ( "#dropdown1" ). value ;
isoption1 = **true** ;
console . log ( "Dropdown 1 changed:- Label: " , op1 + ", Value: " + drop1 );
})
$w ( "#dropdown2" ). onChange (() => {
drop2 = $w ( "#dropdown2" ). value ;
isoption2 = **true** ;
console . log ( "Dropdown 2 changed:- Label: " , op2 + ", Value: " + drop2 );
})
$w ( "#dropdown3" ). onChange (() => {
drop3 = $w ( "#dropdown3" ). value ;
isoption3 = **true** ;
console . log ( "Dropdown 3 changed:- Label: " , op3 + ", Value: " + drop3 );
})
$w ( "#dropdown4" ). onChange (() => {
drop4 = $w ( "#dropdown4" ). value ;
isoption4 = **true** ;
console . log ( "Dropdown 4 changed" )
})
$w ( "#input5" ). onChange (() => {
qty = Number($w ( "#input5" ). value );
console . log ( "Dropdown 5 changed" )
})
});
// add to cart
export function button6_click ( event ) {
console . log ( "DROP DOWN LABELS: " , dropdownLabels );
var pchoices = {};
if ( isoption1 == **true** ) {
pchoices[dropdownLabels [ 0 ]] = drop1 ;
}
if ( isoption2 == **true** ) {
pchoices[dropdownLabels [ 1 ]] = drop2 ;
}
if ( isoption3 == **true** ) {
pchoices[dropdownLabels [ 2 ]] = drop3 ;
}
if ( isoption4 == **true** ) {
pchoices[dropdownLabels [ 3 ]] = drop4 ;
}
if ( colrname1 ) {
pchoices[colrname1 ] = colr1 ;
}
if ( colrname2 ) {
pchoices[colrname2 ] = colr2 ;
}
if ( colrname3 ) {
pchoices[colrname3 ] = colr3 ;
}
const products = [{
"productId" : productID ,
"quantity" : qty ,
"options" : {
"choices" : pchoices ,
"customTextFields" : [{
"title" : "Personalisation Details" ,
"value" : personalize
}]
}
}];
console . log ( "PRODUCT OBJECT: " , JSON . stringify ( products ));
cart . addProducts ( products )
. then (( updatedCart ) => {
// Products added to cart
console . log ( "updated cart: " , updatedCart );
const cartId = updatedCart._id ;
const cartLineItems = updatedCart.lineItems ;
console . log ( "cart id is: " , cartId );
console . log ( "cart line items is: " , cartLineItems );
})
. catch (( error ) => {
// Products not added to cart
console . log ( "***********IT's Cart Error**********************" );
console . error ( error );
}). then (()=>{
if ( formFactor !== "Mobile" ) {
cart . showMiniCart ();
}
})
console . log ( "options are:" , pchoices )
}
export function input5_change ( event ) {
qty = Number($w ( "#input5" ). value );
}
//box
export function textBox1_change ( event ) {
personalize = $w ( “#textBox1” ). value ;
}
//mouse in
export function button14_mouseIn ( event ) {
$w ( “#box5” ). show ();
}
export function button14_mouseOut ( event ) {
setTimeout (() => {
$w ( “#box5” ). hide ();
}, 1000 );
}
export function box5_mouseIn ( event ) {
$w ( “#box5” ). show ();
}
export function box5_mouseOut ( event ) {
setTimeout (() => {
$w ( “#box5” ). hide ();
}, 1000 );
}
export function richTextBox1_mouseIn ( event ) {
$w ( “#box5” ). show ();
}
export function richTextBox1_mouseOut ( event ) {
setTimeout (() => {
$w ( “#box5” ). hide ();
}, 1000 );
}
Please see the code, let me know if anyone have the solution of it.
Thanks
