Re: Problems with the JS code

Problems with the JS code

Valeria_16
Shopify Partner
24 0 3

I have a js code for creating bread crumbs. I have a lot of nested pages and collections, so I did it this way. In general, they work correctly, but there are problems.
1.Not all products are recorded in localStorage. For example, when I go to the brands section and go through the collections there, eventually the product is recorded and displayed in crumbs, but if I go to dinnerware and go to the product, all the crumbs are confused and the product remains alone. All products are made on default product
2.I need that when a person visits a page or a collection, but for some reason presses the back arrow, the values ​​from localstorage are overwritten
Also, maybe you can give me some advice on how to improve this code. I'll be looking forward to your help)

My code

{% comment %} add in "main-collection-product-grid" "main-collection-banner" "collection-list" {% endcomment %}

<style>
.break.page-width {
    margin-top: 20px;
}
.breadcrumb__current {
    text-transform: capitalize;
}
a {
    text-decoration: none;
}
span.breadcrumb__previous {
    text-transform: capitalize;
}
</style>

{% assign current_path = request.path %}
{% assign path_parts = current_path | split: '/' %}
{% assign page_name = path_parts.last %}

<div class="break page-width">
  <nav class="breadcrumb">
    <a href="{{ shop.url }}">Home / </a>
    
    {% if current_path contains '/products/' %}
      <span class="breadcrumb__current" id="breadcrumb-current">{{ product.title }}</span>
    {% elsif current_path contains '/pages/' %}
      <span class="breadcrumb__current">{{ page_name }}</span>
    {% elsif collection.metafields.custom.parent_collection %}
      <a href="{{ collection.metafields.custom.parent_collection | link_to }}" class="breadcrumb__link">{{ collection.metafields.custom.parent_collection_title }}</a>
      <span class="breadcrumb__separator"></span>
      <span class="breadcrumb__current" id="breadcrumb-current">{{ collection.title }}</span>
    {% endif %}
  </nav>
</div>

<script>
const collectionTitle = "{{ collection.title }}";
const pageName = "{{ page_name }}";
const productTitle = "{{ product.title }}"; 
const currentURL = window.location.href;

console.log('Current URL:', currentURL);
console.log('Collection Title:', collectionTitle);
console.log('Page Name:', pageName);
console.log('Product Title:', productTitle);

let previousCollectionData = JSON.parse(localStorage.getItem('collectionData')) || [];

if (currentURL === 'https://www.finedinegroup.com/' || currentURL === 'https://www.finedinegroup.com') {
  localStorage.removeItem('collectionData');
  console.log('Collection data cleared');
} else {
  const pageData = {
    title: productTitle || collectionTitle || pageName,
    url: currentURL
  };

  previousCollectionData = previousCollectionData.filter(item => item.title !== pageData.title);
  previousCollectionData.push(pageData);

  console.log('Added page or collection:', pageData.title, pageData.url);

  localStorage.setItem('collectionData', JSON.stringify(previousCollectionData));

  const breadcrumbCurrent = document.getElementById('breadcrumb-current');
  if (previousCollectionData.length > 1) {
    const previousCollections = previousCollectionData.slice(0, -1).map(item => {
      return `<a href="${item.url}">${item.title}</a>`;
    }).join(' / ');

    console.log('Previous collections with links:', previousCollections);

    breadcrumbCurrent.insertAdjacentHTML('beforebegin', `<span class="breadcrumb__previous">${previousCollections} / </span>`);
  }
}
</script>

https://www.finedinegroup.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=125199155267

Replies 3 (3)

Arif_Shopidevs
Shopify Partner
263 37 36

Hello, using localstorage is not save way for bread crumbs if use visiting another page if key is same it will overwrite old one. It will better to generate it using liquide.

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Valeria_16
Shopify Partner
24 0 3

please help me with the solution)

Arif_Shopidevs
Shopify Partner
263 37 36

Can you give me some url which you want like collection , product etc so that we can pattern and then we will try to developed a code for you.

Thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers