Hi All,
I'm trying to make the breadcrumb on my product page show the whole path rather than just Home/Product page. I contacted customer support who told me:
To have the breadcrumbs show custom information, you can use Velo code. Specifically, you can set custom values using items property.
Since you only want to change the structure on the nested pages, like product page, you can only write the code on those pages' Velo panel. To get the current product data, use getProduct() function. To access the collection name of the product, you can query() the Stores/products database and include() the collections referenced items.
My current code looks as follows:
$w.onReady( function () { $w('#productPage1').getProduct() .then((product) => { let productName = product.name; let productDescription = product.description; // see example product object below }) .catch((error) => { console.error(error); }); wixData.query("Stores/Products") .include("collections") .find() .then((results) => { let collection = results; if(results.items.length > 0) { console.log(results.items[0]); //see item below } else { // handle case where no matching items found } }) .catch((err) => { console.log(err); }); let breadcrumbItems = $w('#breadcrumbs1').items; let productName = breadcrumbItems[0].label; let collection = breadcrumbItems [1].label; $w('#breadcrumbs1').items });
I have tried to tinker with the code as much as I could to get it to work but I am at my end wits' end.
Any help would be greatly appreciated!
https://editor.wix.com/html/editor/web/renderer/edit/fe9f2a50-b509-4b71-ac16-3b0964774fb2?metaSiteId=840c045d-b99d-47b1-9c12-b40e689c3823
Hi Emmy,
Your absolutely correct, I want the path to be Home > Collection Name > Product Name.
I figured there was something wrong with the last part of the code as I don't fully understand how to use the get breadcrumbs Item function (my coding skills aren't that great 😬)
I'm trying to implement the "Set breadcrumbs items for dynamic pages using Wix Location" as suggested but I'm struggling to understand how to code works and how I can use the Getproduct function from earlier and the collection name in there and what words to replace.
How do I share a link to my editor? Is it simply copying the html of the page I am editing?
Many thanks for helping me out and sorry for all the questions 😅
Hi Frederik! Could you post a link to your editor so I can take a look at your setup?
And from what I understand, you'd like the breadcrumbs to read: Home > Collection Name > Product Name, is that correct? Also regarding this section of your code:
let breadcrumbItems = $w('#breadcrumbs1').items; let productName = breadcrumbItems[0].label; let collection = breadcrumbItems [1].label; $w('#breadcrumbs1').items
Here, you're not really changing anything to breadCrumbItems, and the productName and collection variables are unused. Take a look at the last example in the items section (the one titled "Set breadcrumbs items for dynamic pages using Wix Location"), and see if that helps too.