Allow Users to Save Pages for Future Use

Show and tell
, , ,
1

Here is a great and complete way I have found for users to save pages once logged in, view their saved pages in their profile, and remove pages from their saved list as well.

Masterpage.js

import wixLocation from 'wix-location'
import wixUsers from 'wix-users'
import wixSite from 'wix-site'
import wixSeo from 'wix-seo'
import wixData from 'wix-data'
import {session} from 'wix-storage'
import {saveButton} from 'public/saveButton.js'

export function button114_click(event) { //this is the save button, which is set to show on all pages
 if(wixUsers.currentUser.loggedIn) {
  let currentPage = wixSite.currentPage
  let pageName = ''
  if(currentPage.type === 'static') {
   pageName = currentPage.name
  }
  else { //allows for dynamic pages
   pageName = wixSeo.title
  }
  let url = wixLocation.url
  saveButton(url, pageName)
 }
 else { //this part allows the page to be automatically saved once the user is logged in
  session.setItem('accountNeeded', 'true')
  session.setItem('previousUrl', wixLocation.url)
  session.setItem('savedUrl', wixLocation.url)
  let currentPage = wixSite.currentPage
  let pageName = ''
  if(currentPage.type === 'static') {
   pageName = currentPage.name
  }
  else { //allows for dynamic pages
   pageName = wixSeo.title
  }
 session.setItem('savedPage', pageName)
 wixLocation.to('/login-signup')
 }
}

Public/saveButton.js

import wixData from 'wix-data'
import wixUsers from 'wix-users'

export function saveButton(url, pageName) {
 let updateLinksArray = []
 let updatePageTitleArray = []

 wixData.query('Members')
 .eq('_id', wixUsers.currentUser.id)
 .find()
 .then( (results) => {
 let items = results.items
 if(items.length > 0) {
 let logUrl = url
 let logPage = pageName
 if(items[0].savedPageLinks !== undefined) {
 updateLinksArray = items[0].savedPageLinks
 updatePageTitleArray = items[0].savedPageNames
 let checking = []
 function checkIfAlready(checkedUrl) { //this makes sure there are no duplicate entries
 return checkedUrl === logUrl
 }
 checking = updateLinksArray.find(checkIfAlready)
 if(checking !== undefined) {
 return 'ALREADY ADDED'
 }
 }

 updateLinksArray.push(logUrl)
 updatePageTitleArray.push(logPage)
 
 let toUpdateLinks = {
 'savedPageLinks': updateLinksArray,
 'savedPageNames': updatePageTitleArray,
 '_id': wixUsers.currentUser.id
 }
 wixData.update("Members", toUpdateLinks)
 .then( (results) => {
 let item = results
 })
 }
 })
}

Login/Signup Page (this is only used if the user is not already logged in)

import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import {session} from 'wix-storage'
import {saveButton} from 'public/saveButton.js'

$w.onReady(function () {

});

export function loginButton_click(event) { 
//here there is everything which is needed for a custom log in, which is not necessary to add. You can check out the tutorial for that elsewhere.
 if(session.getItem('accountNeeded') === 'true') { //this only occurs once the user is logged in because it happens within the .then() after promptLogin()
 session.removeItem('accountNeeded')
 saveButton(session.getItem('savedUrl'), session.getItem('savedPage'))
 }
 $w('#text193').collapse()
 })
 }
}

Members Profile Page

import wixUsers from 'wix-users'
import wixData from 'wix-data'

$w.onReady(function () {
 let userId = wixUsers.currentUser.id
 let dataArray = []
 let id = ''
 let linksValue = ''
 let pagesValue = ''
 wixData.query('Members')
 .eq('_id', userId)
 .find()
 .then( (results) => {
 let items = results.items
 let linksArray = items[0].savedPageLinks
 let pagesArray = items[0].savedPageNames
 if(linksArray !== undefined) {
 for(var i=0; i < linksArray.length; i++) {
 linksValue = linksArray[i]
 pagesValue = pagesArray[i]
 id = i.toLocaleString('en')
 let itemData = {
 '_id': id,
 'link': linksValue,
 'pageName': pagesValue
 }
 dataArray[i] = itemData
 }
 $w('#repeater1').data = dataArray
 }
 })
 $w("#repeater1").onItemReady( ($item, itemData, index) => {
 $item('#button116').link = itemData.link
 $item('#text193').text = itemData.pageName
 $item('#button118').onClick((event) => {
 wixData.query('Members')
 .eq('_id', userId)
 .find()
 .then( (results) => {
 function findToCancel(value) {
 return value === $item('#button116').link
 }
 let savedPagesAgain = results.items[0].savedPageLinks
 let savedPagesNamesAgain = results.items[0].savedPageNames
 let checkingAgain = []
 if(savedPagesAgain !== undefined) {
 checkingAgain = savedPagesAgain.findIndex(findToCancel)
 if (checkingAgain !== undefined) {
 savedPagesAgain.splice(checkingAgain, 1)
 savedPagesNamesAgain.splice(checkingAgain, 1)
 let toUpdate = {
 'savedPageLinks': savedPagesAgain,
 'savedPageNames': savedPagesNamesAgain,
 '_id': userId
 }
 wixData.update('Members', toUpdate)
 console.log('REMOVAL SUCCESS')
 $item('#removeMessage').expand()
 }
 }
 })
 })
 })
});

Hope this helps!
-Ajani

2

Thanks for explaining, Ajani.
I’ll explain my website and tell me if this works for me too. please
I have a website contain a page where I inserted too many inputs directly into the page section. after filling the inputs, can my web members click on “save” bottom to continue later?
IF you have email to contact please send me