Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Displaying Category on Product Page


vna

Recommended Posts

  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

14 hours ago, tuanphan said:

Hi. You can use Sidebar plugin to achieve this.

I was able to get the breadcrumbs navigation to show up on the product page. However, it shows up like this:

All Services --> Soothing-Preview

I would like it to display the category instead:

Dear Everyone --> Soothing-Preview

I don't want All Services to show up.

Is there a way to do this?

Link to post
3 hours ago, vna said:

I was able to get the breadcrumbs navigation to show up on the product page. However, it shows up like this:

All Services --> Soothing-Preview

I would like it to display the category instead:

Dear Everyone --> Soothing-Preview

I don't want All Services to show up.

Is there a way to do this?

Can you share link to product page?

Link to post
5 hours ago, vna said:

Hi. Change this on all products, or above product only?

Link to post
10 hours ago, tuanphan said:

Hi. Change this on all products, or above product only?

Change on all products. So for all products I want it to show Category --> Product.

Each product is only in one category. And I don't want it to show All Services for any of the products.

 

Thanks!

Link to post

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a.ProductItem-nav-breadcrumb-link").html(function() { 
          return $(this).html().replace("All Services", "All Categories");  
    });
});
</script>

 

Link to post
21 hours ago, tuanphan said:

Add to Home > Settings > Advanced > Code Injection > Footer


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a.ProductItem-nav-breadcrumb-link").html(function() { 
          return $(this).html().replace("All Services", "All Categories");  
    });
});
</script>

 

Thank you for this. This is not quite what I need. Here is what I would like to do:

https://www.dearfamilies.com/all-services/p/dear-everyone-soothing

^ In this product page, I would like it to say Dear Everyone --> Soothing - Preview

https://www.dearfamilies.com/all-services/p/dear-everyone-attachment-bonding

^ In this product page, I would like it to say Dear Everyone --> Attachment & Bonding

https://www.dearfamilies.com/all-services/p/dear-mom-8-week

^ In this product page, I would like it to say Dear Mom --> 8 Week: Baby and You

https://www.dearfamilies.com/all-services/p/individual-private-consultation-sessions-victoria

^ In this product page, I would like it to say Dear Anyone --> Victoria

Thank you again for your help!

 

Link to post
On 11/22/2020 at 1:16 PM, vna said:

Thank you for this. This is not quite what I need. Here is what I would like to do:

https://www.dearfamilies.com/all-services/p/dear-everyone-soothing

^ In this product page, I would like it to say Dear Everyone --> Soothing - Preview

https://www.dearfamilies.com/all-services/p/dear-everyone-attachment-bonding

^ In this product page, I would like it to say Dear Everyone --> Attachment & Bonding

https://www.dearfamilies.com/all-services/p/dear-mom-8-week

^ In this product page, I would like it to say Dear Mom --> 8 Week: Baby and You

https://www.dearfamilies.com/all-services/p/individual-private-consultation-sessions-victoria

^ In this product page, I would like it to say Dear Anyone --> Victoria

Thank you again for your help!

 

Edit Product > Additional Info > Add a Code Block > Paste this code, replace with text what you want.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a.ProductItem-nav-breadcrumb-link").html(function() { 
          return $(this).html().replace("All Services", "All Categories");  
    });
});
</script>

 

Link to post
  • 1 month later...

Hi @tuanphan,

This is very cool, but what if one needs an auto breadcrumb for 7.1 blog sections?

For example, with sciencesites.org, using 7.0 (mostly Brine) we'd typically use an archive block and some javascript to give tags/categories and on state for each tag/category link based upon matching the URL, but perhaps there's a better way that's similar to your solution for products?

Because most of our clients want blog lists with effectively endless items listed, at the moment I'm using: https://www.squarewebsites.org/products/universal-filter and https://www.squarewebsites.org/products/lazy-summaries

with this site: 

https://bart-wilson.squarespace.com/publications 

Pwd: Letmein

And they work great, however as far as I can tell there's no way have links to tag/category results from anywhere else on the site show a user where they are. For example if you click one of the links on the homepage like:

https://bart-wilson.squarespace.com/all-publications?tag=Property

The actual blog page, "/all-publications" both doesn't show tags and won't show any indication of what's being displayed, unlike in Brine templates where a "Viewing Posts In:" message would appear (.BlogListFilter).

Ideally the blog list would just show tags AND categories as it does in 7.0.

Hope this all makes sense?

Thanks for your time and I hope you're safe within this COVID purgatory!

 

 

 

Link to post
  • 1 month later...
On 11/23/2020 at 6:22 PM, tuanphan said:

Edit Product > Additional Info > Add a Code Block > Paste this code, replace with text what you want.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a.ProductItem-nav-breadcrumb-link").html(function() { 
          return $(this).html().replace("All Services", "All Categories");  
    });
});
</script>

 

Great, this replaced the text exactly. However, when I click on that text, it takes me to the page with all my products. I would like it to take me to page within a category. How can I do that? Thank you for your help!

Link to post
On 11/18/2020 at 7:02 PM, vna said:

Is it possible to have the categories show on a side bar in the product page?

Yes, this is a built-in feature in Squarespace 7.1. No code or plugins are necessary. 

By default, the category navigation will display at the top of your Store Page, but you can change this to a sidebar, where subcategories display in a nested menu.

To change the position, open the section styles and click Sidebar under Categories type. To change the order of the navigation, click and drag the categories in the category manager.

Edited by paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include™, including a range of Squarespace extensions.
I value honesty, integrity, transparency and respect.
Links in my posts may refer to SF Digital products or may be affiliate links.
I ♥️ Squarespace. I've been a loyal and enthusiastic supporter of the platform since 2007. 

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...