Add "Preview" link beneath bookcover on Search Result Cards

[ananyakaligal]

What issue does this PR address?
Addresses #10199

What does this PR achieve?
Feature: Added a preview button on the search result cards.

The button is visible on all the books because it hasn't been fully integrated with the ocaid availability condition yet. This will be added once the rest of the work is completed.

Next Steps:

• Address styling concerns, particularly regarding the vanilla=true argument to adjust the button to use the book page style instead of the default.
• analytics for tracking preview button clicks from search result cards (v. books page)
• Add the condition for ocaid availability to properly display the button only when conditions are met.

Note:
This is a Draft pull request to discuss further steps.

Stakeholders:
@mekarpeles

Let me know if this works, so I can go ahead and implement the next steps.

[mekarpeles]

only show preview if ocaid

[ananyakaligal]

@mekarpeles As I mentioned above, I have not added that condition yet because the ocaid data isn't available in the dev environment. To work with it and verify whether the button appears, I have kept it without any conditions for now. Once I address the styling concerns, I will add the condition.

[mekarpeles]

@ananyakaligal see if the additions I pushed help -- previously, the availability check was being performed before we had the selected edition.

Now, I believe the ocaid block should work, even on localhost

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 17.57%. Comparing base (3025f5d) to head (bb8f7d5).
Report is 267 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #10366      +/-   ##
==========================================
+ Coverage   17.44%   17.57%   +0.12%     
==========================================
  Files          89       87       -2     
  Lines        4792     4775      -17     
  Branches      848      847       -1     
==========================================
+ Hits          836      839       +3     
+ Misses       3436     3417      -19     
+ Partials      520      519       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mekarpeles]

if possible, I think we want to avoid this line as its bringing a lot of other styles with it. I think a better solution may be to factor out the preview link logic into its own class and use that class both here and on the books page.

[ananyakaligal]

Yes, @mekarpeles. I planned to do the same! I was looking into which classes are affecting the standard preview button styles to understand how to write a new class for it.

[ananyakaligal]

Hello @mekarpeles,

I’ve been trying to figure out why the styles for the cta-btn--preview-link class aren’t being applied after setting vanilla=False, and I’ve been working on it for the past two days without success. I’m still unable to figure out what’s going wrong, so I’m reaching out to ask for your help. I’ve attached a screenshot of the inspected button for reference.

[mekarpeles]

openlibrary/macros/BookPreview.html states:

$ button = "cta-btn--preview" if vanilla else "cta-btn--preview-link"

which means, button will have class "cta-btn--preview" is vanilla == True else it will have "cta-btn--preview-link"

Then here https://github.com/internetarchive/openlibrary/pull/10366/files#diff-1c0a702d7b1bad810adce7c001416b5996968d117077f629ff52ddff4668f56fR64 the code suggests we're sending in vanilla = False:

$:macros.BookPreview(ocaid,show_only=False, vanilla=False)

Therefore I'd expect "cta-btn--preview-link" which is exactly what I'm seeing in your screenshot

Did I miss something?

[ananyakaligal]

@mekarpeles I can see the "cta-btn--preview-link" class, but not the styles of it getting rendered.

[mekarpeles]

static/css/components/read-panel.less only gets included in the css on certain pages -- specifically the books page and not the search results page.

The styles you're working on should go in a file that are accessible to all buttons, such as this file:

https://github.com/internetarchive/openlibrary/blob/67903f4db2af84f59a3cde95029d703af7a40268/static/css/components/buttonCta.less

[ananyakaligal]

@mekarpeles so the "cta-btn--preview-link" button should be added to https://github.com/internetarchive/openlibrary/blob/67903f4db2af84f59a3cde95029d703af7a40268/static/css/components/buttonCta.less ?? And i should access these styles for both the books page and the search results (both relying on the same class) from this file itself?