Redesign Locate button as "Check Options" with on-site anchor navigation

bundlesize.config.json

@@ -67,7 +67,7 @@
     },
     {
       "path": "static/build/css/page-book.css",
-      "maxSize": "15.5KB"
+      "maxSize": "15.6KB"
     },
     {
       "path": "static/build/css/page-edit.css",

openlibrary/i18n/messages.pot

@@ -406,7 +406,7 @@ msgid "Checked Out"
 msgstr ""
 
 #: LocateButton.html
-msgid "Locate"
+msgid "Check Options"
 msgstr ""
 
 #: ManageLoansButtons.html admin/loans_table.html

openlibrary/macros/LocateButton.html

@@ -1,14 +1,14 @@
 $def with(edition_key, icon=False)
 
-$ locateUrl = "/books/XXX/-/borrow?action=locate".replace('XXX', edition_key or '')
+$ locateUrl = "/books/XXX#check-options".replace('XXX', edition_key or '')
 
 $if icon:
-  <a class="cta-btn cta-btn--available cta-btn--w-icon cta-btn--external" href="$locateUrl" target="_blank"
-    data-ol-link-track="CTAClick|Locate">
+  <a class="cta-btn cta-btn--available cta-btn--w-icon" href="$locateUrl"
+    data-ol-link-track="CTAClick|CheckOptions">
 
     <span class="btn-icon map"></span>
-    <span class="btn-label">$_("Locate")</span>
+    <span class="btn-label">$_("Check Options")</span>
   </a>
 $else:
-  <a class="cta-btn cta-btn--available cta-btn--external" href="$locateUrl" target="_blank"
-    data-ol-link-track="CTAClick|Locate">$_('Locate')</a>
+  <a class="cta-btn cta-btn--available" href="$locateUrl"
+    data-ol-link-track="CTAClick|CheckOptions">$_('Check Options')</a>

openlibrary/macros/databarWork.html

@@ -66,7 +66,7 @@ <h3 class="header">
       </div>
     </div>
 
-    <div class="panel desktop-vendor">
+    <div class="panel desktop-vendor" id="check-options">
       <div class="btn-notice">
         $:worldcat_links
 

openlibrary/plugins/upstream/borrow.py

@@ -123,9 +123,6 @@ def POST(self, key):  # noqa: PLR0915
 
         from openlibrary.book_providers import get_book_provider
 
-        if action == 'locate':
-            raise web.seeother(edition.get_worldcat_url())
-
         # Direct to the first web book if at least one is available.
         if (
             action in ["borrow", "read"]

openlibrary/templates/type/edition/view.html

@@ -308,7 +308,7 @@
       </div>
 
       <div class="Tools">
-        <div class="panel mobile-vendor">
+        <div class="panel mobile-vendor" id="check-options">
           <div class="btn-notice">
             $:worldcat_links
 

static/css/components/read-panel.css

@@ -285,3 +285,29 @@ ul.ebook-download-options li {
   /* stylelint-enable selector-max-specificity */
   /* stylelint-enable max-nesting-depth */
 }
+
+/* Smooth scroll for Check Options anchor navigation */
+html {
+  scroll-behavior: smooth;
+}
+
+@keyframes check-options-highlight {
+  0% {
+    box-shadow: 0 0 0 transparent;
+  }
+
+  30% {
+    box-shadow: 0 0 12px 2px var(--primary-blue);
+  }
+
+  100% {
+    box-shadow: 0 0 0 transparent;
+  }
+}
+
+.desktop-vendor:target,
+.mobile-vendor:target {
+  animation: check-options-highlight 3s ease-out;
+  border-radius: 4px;
+  scroll-margin-top: 80px;
+}