Jump to content

is there a way to add a link to the product information page breadcrumb

Recommended Posts

Square3space version 7.1

the product detail page breadcrumb contains only two links a link back to the storepage (first) and a link to its own page (last)

.ProductItem-nav-breadcrumb-link:first

or 

 

.ProductItem-nav-breadcrumb-link:last

is there a way to insert a link before the first link ( I.E prepend ) to the breadcrumb menu? 

to see what i'm going you can go here

https://dove-capybera-nn4w.squarespace.com/oil            pw:   Fr9Db9%wN0*qwO3_rCY
you can see the store page shows Gallery > Oils  with one item under it. if you click on that item, the breadcrumb changes to 
oils > name of item 

what i want to do is prepend the Gallery link on all my product information pages so the breadcrumb will show 

Gallery > storepage > item       in all cases the Gallery link will be back to url slug /gallery 

thanks for your time. 
 

Link to comment
  • Replies 2
  • Views 383
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<script>

  $( ( ) => {
  
    /*
    
      begin prepend breadcrumb to store page breadcrumbs
      
      Version      : 0.1d0
      
      SS Version   : 7.1
      
      Dependancies : jQuery
      
      By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      const text = 'Gallery';
      
      /*
      
        copy value needed for urlSlug below from Page Settings > General >
        URL SLUG field. you only need exactly what can be selected from the
        field
        
        */
        
      const urlSlug = 'gallery';
      
      // do not change anything below, there be the borg here
      
      const selector = '.ProductItem-nav-breadcrumb';
      
      if ( ! $( selector ).length ) return;
      
      $( '.ProductItem-nav-breadcrumb-link:first, ' +
      
        '.ProductItem-nav-breadcrumb-link:first ~ ' +
        
        '.ProductItem-nav-breadcrumb-separator' )
        
        .clone ( )
        
        .first ( )
        
          .attr ( 'href', '/' + urlSlug )
          
          .text ( text )
          
          .end ( )
          
        .prependTo ( selector );
        
      // end prepend breadcrumb to store page breadcrumbs
      
    } );
    
  </script>

This is for v7.1.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.