Add breadcrumbs to TCCP card detail page

cfgov/tccp/jinja2/tccp/card.html

@@ -8,6 +8,11 @@
     | Consumer Financial Protection Bureau
 {%- endblock title %}
 
+{% block javascript scoped %}
+    {{ super() }}
+    <script src="{{ static( 'apps/tccp/js/index.js' ) }}"></script>
+{% endblock %}
+
 {% block css %}
     {{ super() }}
     <link rel="stylesheet" href="{{ static('apps/tccp/css/main.css') }}">

cfgov/tccp/tests/test_views.py

@@ -7,7 +7,7 @@
 from django_htmx.middleware import HtmxMiddleware
 
 from tccp.models import CardSurveyData
-from tccp.views import CardListView, LandingPageView
+from tccp.views import CardDetailView, CardListView, LandingPageView
 
 from .baker import baker
 
@@ -105,3 +105,23 @@ def test_invalid_json_query_renders_error(self):
     def test_invalid_html_query_renders_empty_page(self):
         response = self.make_request("?credit_tier=foo")
         self.assertContains(response, "There are no results for your search.")
+
+
+class CardDetailViewTests(TestCase):
+    @classmethod
+    def setUpTestData(cls):
+        baker.make(
+            CardSurveyData,
+            slug="test-card",
+            product_name="Test Card",
+        )
+
+    def make_request(self, slug):
+        view = CardDetailView.as_view()
+        request = RequestFactory().get("/")
+        return view(request, **{"slug": slug})
+
+    def test_get(self):
+        response = self.make_request("test-card")
+        self.assertContains(response, "Test Card")
+        self.assertContains(response, "m-breadcrumb")

cfgov/tccp/views.py

@@ -139,3 +139,14 @@ class CardDetailView(FlaggedViewMixin, DetailView):
     model = CardSurveyData
     context_object_name = "card"
     template_name = "tccp/card.html"
+    breadcrumb_items = CardListView.breadcrumb_items + [
+        {
+            "title": CardListView.heading,
+            "href": reverse_lazy("tccp:cards"),
+        }
+    ]
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["breadcrumb_items"] = self.breadcrumb_items
+        return context

cfgov/unprocessed/apps/tccp/js/index.js

@@ -1,11 +1,15 @@
 import { attach } from '@cfpb/cfpb-atomic-component';
 
+import webStorageProxy from '../../../js/modules/util/web-storage-proxy';
+
 /**
  * Initialize some things.
  */
 function init() {
   // Attach "show more" click handler
   attach('show-more', 'click', handleShowMore);
+  // Make the breadcrumb on the details page go back to a filtered list
+  updateBreadcrumb();
 }
 
 /**
@@ -22,6 +26,19 @@ function handleShowMore(event) {
   event.target.classList.add('u-hidden');
 }
 
+/**
+ * Update the breadcrumb on the card details page to point back to the filtered
+ * list of cards the user came from. We have to do this client-side to prevent
+ * Akamai from caching the page with a breadcrumb to a filtered list.
+ */
+function updateBreadcrumb() {
+  const breadcrumb = document.querySelector('.m-breadcrumbs_crumb:last-child');
+  if (breadcrumb.innerText === 'Customize for your situation') {
+    breadcrumb.href =
+      webStorageProxy.getItem('tccp-filter-path') || breadcrumb.href;
+  }
+}
+
 window.addEventListener('load', () => {
   init();
 });