Non-store Wishlist code

Ask the community
, ,
1

Hi Team,

(Fairly green coder here!) I’ve put Codequeen Nayeli’s Wishlist Code (https://www.totallycodable.com/post/wishlist-code-part-2-dec-2017), but I just can’t seem to get the ‘add to wishlist’ the wixData.save to work for me.
This is on a dynamic page - example - https://www.fruitfool.co.nz/fruit/belle-de-boskoop
Collection for the wishlist is called ‘wishlist’ and the column which is referenced to the main dataset (that runs the dynamic page) is called ‘productId’ and there is a text column ‘userId’.
The dataset works, in that if I manually plug in a referenced product & userId into it, this reflects correctly on the ‘My Wishlist’ page - Fruitfool.

import wixUsers from ‘wix-users’ ;
import wixData from ‘wix-data’ ;
let user ;
var userID ;
let itemObj ;
var product_name ;

$w . onReady ( function () {
if ( $w ( “#button1” ). link === “” ){
$w ( “#button1” ). hide ();
}
if ( $w ( “#button5” ). link === “” ){
$w ( “#button5” ). hide ();
}
if ( $w ( “#button6” ). link === “” ){
$w ( “#button6” ). hide ();
}
if ( $w ( “#button7” ). link === “” ){
$w ( “#button7” ). hide ();
}
});

$w . onReady ( function () {
$w ( “#dynamicDataset” ). onReady (() => {
product_name = $w ( “#title” ). text ;
});

user = wixUsers . currentUser ;
userID = user . id ;
let isLoggedIn = user . loggedIn ;
if ( isLoggedIn === true ) {
$w ( “#dynamicDataset” ). onReady (() => {
testwish ( product_name );
});

} else {
wixUsers . promptLogin ();
}
});

function testwish () {
let userId = user . id ;
wixData . query ( “wishlist” )
. eq ( “productId” , product_name )
. eq ( “userId” , userId )
. find ()
. then (( results ) => {
let count = results . totalCount ;
if ( count === 0 ) {
$w ( “#addtowishlist” ). label = “ADD TO WISH LIST” ;
} else {
$w ( “#addtowishlist” ). label = “REMOVE FROM WISH LIST” ;
}
});
}

function dothewish () {
let userId = user . id ;
wixData . query ( “wishlist” )
. eq ( “productId” , product_name )
. eq ( “userId” , userId )
. find ()
. then (( results ) => {
let items = results . items ;
let firstItem = items [ 0 ];
let count = results . totalCount ;
if ( count === 0 ) {
let toSave = {
“productId” : product_name ,
“userId” : userId
};
wixData . save ( “wishlist” , toSave );
$w ( “#addtowishlist” ). label = “REMOVE FROM WISH LIST” ;
} else {
wixData . remove ( “wishlist” , firstItem . _id );
$w ( “#addtowishlist” ). label = “ADD TO WISH LIST” ;
}
});
}

export function addtowishlist_onclick () {
dothewish ( product_name );
}
export function button8_click ( event ) {
$w ( “#readmore” ). changeState ( “expandedState” );
}

export function button9_click ( event ) {
$w ( “#readmore” ). changeState ( “collapsedState” )
}

2

Okay, well got it working so documenting here for anyone who stumbles across in future.

A couple of points:

  1. CodeQueen Nayeli’s code has - export function addtowishlist_onclick () { this should have been export function addtowishlist_click () { - at least in my case it needed to be changed like this.
  2. I needed to identify and use the _id value of the dynamic page to save to the reference field in the dataset. So used this specific piece of code:
    $w ( “#dynamicDataset” ). onReady (() => {
    const dataset = $w ( “#dynamicDataset” );
    dataset . onReady (() => {
    const { _id } = dataset . getCurrentItem ();
    console . log ( _id );
    product_name = _id
    })
  3. #text68 is saying that the user should login if they want to use Wishlist functionality - I didn’t immediately want it to prompt users to login (at this stage for my user scenarios), so this is different than the original Codequeen’s code.

import wixUsers from ‘wix-users’ ;
import wixData from ‘wix-data’ ;
let user ;
var userID ;
let itemObj ;
var product_name ;

$w . onReady ( function () {
$w ( “#buydataset” ). onReady (() => {
if ( $w ( “#button1” ). link === “” ){
$w ( “#button1” ). hide ();
}
if ( $w ( “#button5” ). link === “” ){
$w ( “#button5” ). hide ();
}
if ( $w ( “#button6” ). link === “” ){
$w ( “#button6” ). hide ();
}
if ( $w ( “#button7” ). link === “” ){
$w ( “#button7” ). hide ();
}
}
);

$w ( “#dynamicDataset” ). onReady (() => {
const dataset = $w ( “#dynamicDataset” );
dataset . onReady (() => {
const { _id } = dataset . getCurrentItem ();
console . log ( _id );
product_name = _id
})

user = wixUsers . currentUser ;
userID = user . id ;
let isLoggedIn = user . loggedIn ;
if ( isLoggedIn === true ) {
$w ( “#dynamicDataset” ). onReady (() => {
testwish ( product_name );
});

} else {
$w ( “#text68” ). show ();
}
});

function testwish () {
let userId = user . id ;
wixData . query ( “wishlist” )
. eq ( “productId” , product_name )
. eq ( “userId” , userId )
. find ()
. then (( results ) => {
let count = results . totalCount ;
if ( count === 0 ) {
$w ( “#addtowishlist” ). label = “Add to Wishlist” ;
} else {
$w ( “#addtowishlist” ). label = “Remove from Wishlist” ;
}
});
}
})
function dothewish () {
let userId = user . id ;
wixData . query ( “wishlist” )
. eq ( “productId” , product_name )
. eq ( “userId” , userId )
. find ()
. then (( results ) => {
let items = results . items ;
let firstItem = items [ 0 ];
let count = results . totalCount ;
if ( count === 0 ) {
let toSave = {
“productId” : product_name ,
“userId” : userId
};
wixData . save ( “wishlist” , toSave );
$w ( “#addtowishlist” ). label = “Remove from Wishlist” ;
$w ( “#success” ). show ();
} else {
wixData . remove ( “wishlist” , firstItem . _id );
$w ( “#addtowishlist” ). label = “Add to Wishlist” ;
$w ( “#text69” ). show ();
}
});
}

export function addtowishlist_click () {
dothewish ( product_name );
}
export function button8_click ( event ) {
$w ( “#readmore” ). changeState ( “expandedState” );
}

export function button9_click ( event ) {
$w ( “#readmore” ). changeState ( “collapsedState” )
}