feat: Consolidate sidebar buy options into unified Buy button dropdown

bundlesize.config.json

@@ -58,8 +58,7 @@
     },
     {
       "path": "static/build/css/page-admin.css",
-      "maxSize": "27KB"
-
+      "maxSize": "28KB"
     },
     {
       "path": "static/build/css/page-book.css",

docker/Dockerfile.olbase

@@ -85,4 +85,5 @@ RUN npm ci --no-audit
 COPY --chown=openlibrary:openlibrary . /openlibrary
 # run make to initialize git submodules, build css and js files
 RUN ln -s vendor/infogami/infogami infogami \
+ && touch node_modules \
  && make

openlibrary/i18n/messages.pot

@@ -4344,7 +4344,7 @@ msgstr ""
 msgid "Provider Name"
 msgstr ""
 
-#: books/edit/edition.html
+#: books/edit/edition.html databarWork.html
 msgid "Buy"
 msgstr ""
 
@@ -4765,7 +4765,7 @@ msgid ""
 " page for every book ever published."
 msgstr ""
 
-#: AffiliateLinks.html.jinja home/about.html search/work_search_facets.html
+#: home/about.html search/work_search_facets.html
 msgid "More"
 msgstr ""
 
@@ -7140,10 +7140,6 @@ msgstr ""
 msgid "ISBNs"
 msgstr ""
 
-#: databarWork.html type/edition/view.html type/work/view.html
-msgid "Buy this book"
-msgstr ""
-
 #: type/edition/view.html type/work/view.html
 msgid "Book Details"
 msgstr ""
@@ -8385,6 +8381,10 @@ msgstr ""
 msgid "View Volume %(num)d"
 msgstr ""
 
+#: databarWork.html
+msgid "Buy this book"
+msgstr ""
+
 #: openlibrary/core/bookshelves.py
 msgid "[Record deleted]"
 msgstr ""

openlibrary/macros/AffiliateLinks.html.jinja

@@ -1,31 +1,24 @@
 {% macro affiliate_link(store) %}
-    <li class="prices-{{ store.key }}">
-        <a href="{{ store.link }}"
+    <div class="buy-option prices-{{ store.key }}">
+        <a class="buy-option__link"
+           href="{{ store.link }}"
            title="{{ _('Look for this edition for sale at %(store)s', store=store.name) }}"
            data-ol-link-track="BuyLink|{{ store.analytics_key }}"
            target="_blank"
-           rel="noopener noreferrer">{{ store.name }}</a>
-        {% if store.price %}
-            <br>
-            <span name="price">{{ store.price }}{{ store.price_note }}</span>
-        {% endif %}
-    </li>
+           rel="noopener noreferrer">
+            <span class="buy-option__name">{{ store.name }}</span>
+            {% if store.price %}
+                <span class="buy-option__price" name="price">{{ store.price }}{{ store.price_note }}</span>
+            {% endif %}
+        </a>
+    </div>
 {% endmacro %}
-<span class="affiliate-links-section">
-    <ul class="buy-options-table">
+<div class="affiliate-links-section">
+    <div class="buy-options__list">
         {% for store in primary_stores %}{{ affiliate_link(store) | safe }}{% endfor %}
-        {% if more_stores %}
-            <li class="more">
-                <details>
-                    <summary>{{ _("More") }}</summary>
-                    <ul>
-                        {% for store in more_stores %}{{ affiliate_link(store) | safe }}{% endfor %}
-                    </ul>
-                </details>
-            </li>
-        {% endif %}
-    </ul>
-    <small>
+        {% for store in more_stores %}{{ affiliate_link(store) | safe }}{% endfor %}
+    </div>
+    <small class="buy-options__disclaimer">
         {{ _("When you buy books using these links the Internet Archive may earn a <a class=\"nostyle\" href=\"/help/faq/about#selling\">small commission</a>.") | safe }}
     </small>
-</span>
+</div>

openlibrary/macros/AffiliateLinksLoadingIndicator.html

@@ -3,6 +3,6 @@
     isbn_str = isbn or ''
     asin_str = asin or ''
     prices_str = 'true' if prices else 'false'
-<span class="affiliate-links-section" data-title="$title" data-isbn="$isbn_str" data-asin="$asin_str" data-prices="$prices_str">
+<div class="affiliate-links-section" data-title="$title" data-isbn="$isbn_str" data-asin="$asin_str" data-prices="$prices_str">
   $:macros.LoadingIndicator(_("Fetching prices"), additional_classes="affiliate-links-loading")
-</span>
+</div>

openlibrary/macros/LoanStatus.html

@@ -1,4 +1,4 @@
-$def with (doc, work_key=None, listen=True, allow_expensive_availability_check=False, secondary_action=False, check_loan_status=False, user_lists=None, post='', is_book_page=False, analytics_override=None, lending_state=None)
+$def with (doc, work_key=None, listen=True, allow_expensive_availability_check=False, secondary_action=False, check_loan_status=False, user_lists=None, is_book_page=False, analytics_override=None, lending_state=None)
 $# Takes following parameters:
 $# * doc - Can be a Work, Edition, or solr dict.
 $# * listen - whether to display listen button
@@ -167,8 +167,6 @@
   $else:
       $:macros.NotInLibrary(None, analytics_attr)
 
-$:post
-
 $if query_param('debug'):
   $ loanstatus_end_time = time() - loanstatus_start_time
   <p>get_waiting_loan_for(ocaid) took $("%.2f" % waiting_loan_total_time) seconds</p>  $# detect-missing-i18n-skip-line

openlibrary/macros/databarWork.html

@@ -2,6 +2,11 @@
 
 $ viewbook = "//%s/stream/XXX?ref=ol" % bookreader_host()
 
+$# Buy button is primary (blue) only when no digital access and a WorldCat URL exists
+$ availability = (page.availability or {}) if hasattr(page, 'availability') else {}
+$ _has_digital = bool(page.get('ocaid') or availability.get('is_readable') or availability.get('status') == 'open' or availability.get('is_lendable') or availability.get('is_previewable'))
+$ buy_is_primary = editions_page and not _has_digital and bool(worldcat_url)
+
 <div class="Tools">
   <div id="read">
     $if page.volumes:
@@ -28,17 +33,30 @@ <h3 class="header">
         $ work = (page.works and page.works[0]) or page
         $ edition = page.works and page
 
-        $ render_times['databarWork: List widget'] = time()
-        $ lists_widget = render_template('lists/widget', edition or work, include_rating=True, async_load=True)
-        $ render_times['databarWork: List widget'] = time() - render_times['databarWork: List widget']
 
         $# For the Works & Editions page, only use ground_truth_availability API for selected Edition
         $# if edition availability status is error
         $ render_times['databarWork: LoanStatus'] = time()
         $ expensive_check = page.get('availability', {}).get('status') in ['error']
-        $:macros.LoanStatus(page, allow_expensive_availability_check=expensive_check, secondary_action=editions_page, check_loan_status=editions_page, post=lists_widget, lending_state=lending_state)
+        $:macros.LoanStatus(page, allow_expensive_availability_check=expensive_check, secondary_action=editions_page, check_loan_status=editions_page, lending_state=lending_state)
         $ render_times['databarWork: LoanStatus'] = time() - render_times['databarWork: LoanStatus']
 
+        $if editions_page:
+          <ol-popover class="buy-popover" aria-label="$_('Buy this book')">
+            <button slot="trigger" type="button" class="cta-btn cta-btn--w-icon cta-btn--buy">
+              <svg class="btn-icon cart" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="M213-117.21q-21-21.21-21-51T213.21-219q21.21-21 51-21T315-218.79q21 21.21 21 51T314.79-117q-21.21 21-51 21T213-117.21Zm432 0q-21-21.21-21-51T645.21-219q21.21-21 51-21T747-218.79q21 21.21 21 51T746.79-117q-21.21 21-51 21T645-117.21ZM253-696l83 192h301l82-192H253Zm-31-72h570q14 0 20.5 11t1.5 23L702.63-476.14Q694-456 676.5-444T637-432H317l-42 72h493v72H276q-43 0-63.5-36.15-20.5-36.16.5-71.85l52-90-131-306H48v-72h133l41 96Zm114 264h301-301Z"/></svg>
+              <span class="btn-label">$_("Buy")</span>
+              <span class="arrow-down"></span>
+            </button>
+            <div class="buy-options">
+              $:affiliate_links
+            </div>
+          </ol-popover>
+
+        $ render_times['databarWork: List widget'] = time()
+        $:render_template('lists/widget', edition or work, include_rating=True, async_load=True)
+        $ render_times['databarWork: List widget'] = time() - render_times['databarWork: List widget']
+
         <hr>
         $ share_url = request.home + (edition or work).key
 
@@ -64,16 +82,5 @@ <h3 class="header">
           $ render_times['databarWork: Book provider'] = time() - render_times['databarWork: Book provider']
       </div>
     </div>
-
-    <div class="panel desktop-vendor">
-      <div class="btn-notice">
-        $:worldcat_links
-
-        <div class="cta-section">
-          <p class="cta-section-title">$_('Buy this book')</p>
-          $:affiliate_links
-        </div>
-      </div>
-    </div>
   </div>
 </div>

openlibrary/templates/type/edition/view.html

@@ -306,19 +306,6 @@
           </div>
       </div>
 
-      <div class="Tools">
-        <div class="panel mobile-vendor">
-          <div class="btn-notice">
-            $:worldcat_link
-
-            <div class="cta-section">
-              <p class="cta-section-title">$_('Buy this book')</p>
-              $:affiliate_links
-            </div>
-          </div>
-        </div>
-      </div>
-
       $ seen = set()
       $if previews and any([len(e.languages) for e in previews]):
         <p class="preview-languages">

static/css/components/read-panel.css

@@ -130,20 +130,6 @@ ul.ebook-download-options li {
   margin: 5px 0;
 }
 
-.buy-options-table {
-  line-height: 2em;
-}
-
-.buy-options-table .more {
-  margin-left: 0;
-  cursor: pointer;
-}
-
-.buy-options-table + small {
-  display: block;
-  margin-top: 10px;
-}
-
 .cta-section-title.world-cat-link {
   margin-top: 0;
 }
@@ -286,3 +272,111 @@ ul.ebook-download-options li {
   /* stylelint-enable selector-max-specificity */
   /* stylelint-enable max-nesting-depth */
 }
+
+/* Buy popover: full-width trigger button */
+.buy-popover {
+  display: block;
+  width: 100%;
+  margin-top: var(--spacing-stack-xs);
+}
+
+/* Buy options popover content */
+.buy-options {
+  box-sizing: border-box;
+  width: 100%;
+  background-color: var(--white);
+  border-radius: var(--border-radius-overlay);
+}
+
+@media only screen and (min-width: 768px) {
+  .buy-options {
+    width: 240px;
+  }
+}
+
+.buy-options .buy-option {
+  transition: background-color 0.2s;
+}
+
+.buy-options .buy-option:hover {
+  background-color: var(--lightest-grey);
+}
+
+.buy-options .buy-option__link {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-inset-sm) var(--spacing-inset-md);
+  color: var(--dark-grey);
+  text-decoration: none;
+  font-size: var(--font-size-body-medium);
+}
+
+.buy-options .buy-option__price {
+  font-size: var(--font-size-label-medium);
+  color: var(--accessible-grey);
+}
+
+/* Disclaimer with top horizontal border */
+.buy-options .buy-options__disclaimer {
+  display: block;
+  padding: var(--spacing-inset-sm) var(--spacing-inset-md);
+  border-top: 1px solid var(--lighter-grey);
+  color: var(--accessible-grey);
+  font-size: var(--font-size-label-medium);
+  line-height: 1.4;
+}
+
+.buy-options .buy-options__disclaimer a {
+  color: var(--link-blue);
+  text-decoration: underline;
+}
+
+/* Buy button custom styling (single button with left icon and right arrow) */
+.cta-btn--buy {
+  position: relative;
+  background-color: var(--grey-464646);
+  color: var(--white);
+  margin-top: 0;
+  height: 37px;
+  padding: 0 var(--spacing-inset-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cta-btn--buy:hover {
+  background-color: var(--dark-grey);
+}
+
+.cta-btn--buy .btn-icon.cart {
+  position: absolute;
+  left: 12px;
+}
+
+.cta-btn--buy .btn-label {
+  padding: 0;
+}
+
+.cta-btn--buy .arrow-down {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 32px;
+  height: 100%;
+  border-left: 1px solid var(--grey);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cta-btn--buy .arrow-down::after {
+  content: "";
+  display: block;
+  width: 23px;
+  height: 23px;
+  background: url(/static/images/icons/icon_dropit.png) no-repeat center;
+  background-position: 0;
+  background-size: 45px;
+  filter: brightness(0) invert(1);
+}

static/css/components/work.css

@@ -202,6 +202,9 @@ div.editionTools p {
     width: var(--sidebar-width);
     margin-right: 1.5em;
     margin-bottom: 0;
+    position: sticky;
+    top: 20px;
+    align-self: flex-start;
   }
   div.editionAbout {
     flex: 1;