Back-link on CMS article template, with link text showing referring category page

Design help Ecommerce
1

Let me try and explain:

I’ve got a Categories Collection and an Article collection. Articles can belong to more than one category, so there’s a reference field for assigning categories.

Each category has a landing page (static page with filtered collection list, not a CMS template) on which the associated articles are listed, and users may access an article via different category pages.

On the article page I would like a link back to the category page from which a user came. The link mustn’t just say “Back” but must display the Category name.

How can this be achieved in Webflow? Thank you!

2

@spirelli,

This would work by adding a collection and use a filter for the correlating category.

It would take them back to the category related page. I have created something similar here: https://www.artforyourpleasure.com/product/bleeding-hearts

In this case, since there are only 3 needed, I created three buttons and use the conditional visibility to show the related category. But the concept holds true for a collection list and CV for the category related to the article. However, if you want a back button to go to the previous page from which that came that has multiple categories related to it, then you will need some custom code.

Best Regards,
~ Brandon

3

Hi @QA_Brandon brandon
Thank you for responding.

Right, your approach would work if I wanted to show all categories that the article belongs to.

So I assume I would need custom code if I wanted to limit to only the category shown that a user has looked at before and from which they came.

I’m not much of a coder. Any idea how to proceed / where to start?

4

@spirelli,

Yes custom code would limit. Unfortunately, I am not a coder either. @webdev @Noah-R @mattvaru do you gents have any thoughts on how to help here?

Best Regards,
~ Brandon

5

Cheers! :star: :star: :star:

6

Yeah, that’s a tough one because even with javascript you would have to store the users actions via local storage/with a cookie first to be able to recall that information. Such as exactly what category that visitor came from as well as a function to grab that category name. It’s a bit more complicated than it seems. You would most likely have to hire someone who knows how to properly write JS functions dealing with cookies and what not.

With that being said, if it were me I would use the approach Brandon has mentioned and make sure it is a relevant category at least. Or just use the simple jquery back function with a back button displaying general text like “Back to category”:

<script>
    $( document ).ready(function() {
        $( ".goback" ).click(function() {
  			window.history.back();
		});
    });
 
</script>

Not sure if this is really helpful but all I can really say is I believe that is a bit more difficult than it may seem.

-Noah

1 Like
7

Thank you for confirming, @Noah-R! Very helpful. I’ll have a think about how to change the proposed setup and how to talk to the client about it…

2 Likes
8

Hey, my pleasure! I wish you and your client the best of luck. If I happen to hear anything I will post it here.

1 Like
9

Seconding Noah on this one! His snippet would be the best move.

That said, if you were looking to go beyond that, there are lots of variables to consider here when tracking user actions, even with cookies or Local Storage.

As an arbitrary example, let’s say:

  • A user goes to a Recipes category page, and opens an article for How to make Chocolate Cake
  • The script you write would save the Recipes page as the page to go back to within Local Storage
  • Then, at the same time in a different tab, the user goes to the Interviews category page and then clicks on an Interview with Vlad article from there
  • The script then overwrites your previous destination of Recipes because it thinks that the user wants to go back to Interviews now when they click the back button on any page on the website.

So, when the user clicks back on the How to Make Chocolate Cake page, they get taken back to the Interviews category page instead of the Recipes category page, because the last action the user took in another tab (going to read an Interview with Vlad from the Interviews category page) overwrote what was supposed to happen, if that makes sense.

All this to say, there are lots of things you’d have to end up considering when writing the snippet and testing it. It can definitely be done, but if you’re not super familiar with JS, I would consider hiring a freelance dev to do it. (There are some good devs on the forums – just post to Freelance!)

Hope that helps!

10

@cspags Check this out.