Create a Breadcrumb Trail with Wix code?

Ask the community
, ,
1

Hi Wix Forum,
I am trying to create a breadcrumb trail for my site so that the website user can visual see the pathway they took through my site.

Has anyone successfully done this with wix code?
If so, what was the code you used?

Thank you

1 Like
2

this seems like something you could easily do with wix-storage and wix-location

i believe this code would work

//put this in the Site code
import wixLocation from 'wix-location';
import { session } from 'wix-storage'; //if you want  it to stay after the user has left use local instead of session

$w.onReady(function () {
 let path = wixLocation.path //not the full url just everything after the first /
 let sBreadtrail = session.getItem('breadtrail')
 if (sBreadtrail !== null) {
 let aBreadtrail = JSON.parse(sBreadtrail) //string to array
        aBreadtrail.push(path)
        sBreadtrail = JSON.stringify(aBreadtrail)
    } else {
        sBreadtrail = JSON.stringify([path])
    }
    session.setItem('breadtrail', sBreadtrail)
});

the homepage will probably save as an empty string
to get this list at any time to be used you would call

let variable = JSON.parse(session.getItem('breadtrail'))
3

Great thank you Ethan!
In order to get the breadcrumb trail to show up on a specific page, should I embed an HTML on said page?
or just change the variable on that page?

4

if you add it to the Site Code it will run on every page. Getting the info you would add it to Page Code to receive the array with the path in it

5

hey,
you can do video how it’s work?

6

There’s really nothing to show. You simply add the code above to the Site Code tab and it makes an array with every page the user visits in order and stores it in the session storage.


however it does not account for Router pages

7

@ethan-snow
Ok and how I pull it from session storage For to see like that

723×36 1.95 KB

Thanks for the help, I appreciate it

8

@topink-webmaster To display it like that the code would be:

 let variable = JSON.parse(session.getItem('breadtrail')) 
 //variable = [["Wix Code Forum"],["Community Discussion"],["Create a Breadcrumb Trail with Wix code?"]]
 let path = variable.join(" > ")
 // path = "Wix Code Forum > Community Discussion > Create a Breadcrumb Trail with Wix code?"

then to display it on the site
$w(“myElement”).text = path

9

@ethan-snow
Unfortunately I did not understand you correctly, the code is not my strong field,
I tried it and it did not work.

let path = wixLocation.path //not the full url just everything after the first /
 let sBreadtrail = session.getItem('breadtrail')
 if (sBreadtrail !== null) {
 let aBreadtrail = JSON.parse(sBreadtrail) //string to array
        aBreadtrail.push(path)
        sBreadtrail = JSON.stringify(aBreadtrail)
    } else {
        sBreadtrail = JSON.stringify([path])
    }
    session.setItem('breadtrail', sBreadtrail)

 let variable = JSON.parse(session.getItem('breadtrail')) 
 //variable = [["Wix Code Forum"],["Community Discussion"],["Create a Breadcrumb Trail with Wix code?"]]
   path = variable.join(" > ")
 // path = "Wix Code Forum > Community Discussion > Create a Breadcrumb Trail with Wix code?"
  $w("#Breadcrumb").text = sBreadtrail;

I’m sure I made myself a fool :slight_smile:

10

@topink-webmaster
put this in the Site code

import wixLocation from 'wix-location'; 
import { session } from 'wix-storage';  
$w.onReady(function () { let path = wixLocation.path 
let sBreadtrail = session.getItem('breadtrail') 
if (sBreadtrail !== null) {
let aBreadtrail = JSON.parse(sBreadtrail); 
aBreadtrail.push(path);
sBreadtrail = JSON.stringify(aBreadtrail); } else {
sBreadtrail = JSON.stringify([path]); }
session.setItem('breadtrail', sBreadtrail);
});

put this in Page Code

import {session} from 'wix-storage'
$w.onReady(function () {
let variable = JSON.parse(session.getItem('breadtrail'));
let path = variable.join(" > "); 
$w("#Breadcrumb").text = path; 
});

the code must be inside the onReady or called from a function they can not be top level (Except the Import’s those must be top level)

11

import {sessions} from ‘wix-storage’ and #Breadcrumb give errors, what did i do wrong?

12

my bad i forgot to let path =
also set #Breadcrumbs to the id of the element on your page

13

How do i set the id of the element on a page?

14

in the properties tab you can set it

696×179 15.4 KB

replace #breadcrumbs with the value of the item you want to set

15

If i do this on page1 it says :

16

already found the solution

17

My breadcrumb works but shows alot of unnecessary “paths”

Do you know what causes this?

18

This is not a script to show your path, it is a trail of the pages you have been to during the session. hitting Refresh does not start a new session. close and open a new tab to do that

19

I meant trail but didn’t think of the word, in what time does the session reset?

20

close the tab and open a new one to restart it