Merge pull request #1118 from openstax/print-copy-page

Populate page with data from CMS

src/app/pages/bookstore-suppliers/bookstore-suppliers.html

@@ -10,9 +10,15 @@ <h1>{model.headline}</h1>
         <div class="images">
             <img class="desktop-bg" src="/images/bookstore-suppliers/hero-bookstore-print-desktop.png">
             <div class="clipped">
-                <img class="phone-bg" src="/images/bookstore-suppliers/Hero-isometric-book-bg-mobile.png">
+                <img class="phone-bg" srcset="
+                    /images/bookstore-suppliers/Hero-isometric-book-bg-mobile.png 1x,
+                    /images/bookstore-suppliers/[email protected] 2x
+                ">
             </div>
-            <img class="phone-fg" src="/images/bookstore-suppliers/Hero-books-mobile.png">
+            <img class="phone-fg" srcset="
+                /images/bookstore-suppliers/Hero-books-mobile.png 1x,
+                /images/bookstore-suppliers/[email protected] 2x
+            " alt="">
         </div>
     </div>
     <div class="main-content">
@@ -27,7 +33,10 @@ <h2>{supplier.name}</h2>
                         <a class="btn primary" href="{supplier.buttonUrl}">{supplier.buttonText}</a>
                     </div>
                     <div class="right-stuff">
-                        <img src="http://via.placeholder.com/300x400">
+                        <img srcset="
+                            /images/bookstore-suppliers/IndiCo-card-banner.png 1x,
+                            /images/bookstore-suppliers/[email protected] 2x
+                        " alt="">
                     </div>
                 <else>
                     <div class="logo-dot">
@@ -39,6 +48,6 @@ <h2>{supplier.name}</h2>
                 </if>
             </div>
         </div>
-        <button type="button" class="primary">Download a list of ISBN numbers</button>
+        <a href="{model.buttonUrl}" class="btn primary">{model.buttonText}</a>
     </div>
 </template>

src/app/pages/bookstore-suppliers/bookstore-suppliers.js

@@ -11,58 +11,38 @@ export default class BookstoreSuppliers extends CMSPageController {
             classes: ['bookstore-suppliers', 'page']
         };
         this.css = `/app/pages/bookstore-suppliers/bookstore-suppliers.css?${VERSION}`;
-        this.slug = 'pages/bookstores';
+        this.slug = 'pages/print-order';
         this.model = {};
     }
 
-    onLoaded() {
-        // TODO: Remove when back end is implemented
-        this.pageData = {
-            headline: 'Need to order print copies for your campus bookstore?',
-            subhead: 'We\'ve got you covered. Below is a list of your print options.',
-            subhead2: `If you are an instructor or student and would like to order lorem ipsum
-                boogedy boogedy shoo...`,
-            suppliers: [
-                {
-                    name: 'indiCo',
-                    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
-                    logoUrl: 'http://via.placeholder.com/150x80',
-                    buttonUrl: 'http://openstax.org',
-                    buttonText: 'Get started'
-                },
-                {
-                    name: 'Toppan',
-                    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
-                    logoUrl: 'http://via.placeholder.com/150x80',
-                    buttonUrl: 'http://openstax.org',
-                    buttonText: 'Learn more'
-                },
-                {
-                    name: 'Nebraska Book Company',
-                    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
-                    logoUrl: 'http://via.placeholder.com/150x80',
-                    buttonUrl: 'http://openstax.org',
-                    buttonText: 'Learn more'
-                },
-                {
-                    name: 'XanEdu',
-                    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
-                    logoUrl: 'http://via.placeholder.com/150x80',
-                    buttonUrl: 'http://openstax.org',
-                    buttonText: 'Learn more'
-                }
-            ]
-        };
-        this.onDataLoaded();
-    }
-
     onDataLoaded() {
+        const suppliers = [
+            {
+                name: this.pageData.featured_provider_name,
+                description: this.pageData.featured_provider_blurb,
+                logoUrl: this.pageData.featured_provider_logo_url,
+                buttonUrl: this.pageData.featured_provider_link,
+                buttonText: this.pageData.featured_provider_cta
+            }
+        ];
+
+        this.pageData.providers.forEach((p) => {
+            suppliers.push({
+                name: p.name,
+                description: p.blurb,
+                logoUrl: p.icon,
+                buttonUrl: p.url,
+                buttonText: p.cta
+            });
+        });
         this.model = {
-            headline: this.pageData.headline,
-            subhead: this.pageData.subhead,
-            subhead2: this.pageData.subhead2,
-            suppliers: this.pageData.suppliers,
-            cardsClass: (this.pageData.suppliers.length % 2) ? 'by-twos' : ''
+            headline: this.pageData.title,
+            subhead: this.pageData.intro_heading,
+            subhead2: this.pageData.intro_description,
+            suppliers,
+            cardsClass: (suppliers.length % 2) ? 'by-twos' : '',
+            buttonUrl: this.pageData.isbn_download_url,
+            buttonText: this.pageData.isbn_cta
         };
         this.update();
     }

src/app/pages/bookstore-suppliers/bookstore-suppliers.scss

@@ -146,6 +146,17 @@
         }
     }
 
+    .btn {
+        @extend %button;
+        @extend %secondary;
+
+        width: fit-content;
+
+        &.primary {
+            @extend %primary;
+        }
+    }
+
     .cards {
         display: grid;
         grid-gap: 2rem;
@@ -176,13 +187,6 @@
                 margin: 0;
             }
 
-            .btn {
-                @extend %button;
-                @extend %secondary;
-
-                width: fit-content;
-            }
-
             &:first-child {
 
                 @include width-up-to($phone-max) {
@@ -208,6 +212,10 @@
                         grid-gap: 3rem;
                         padding: 7rem;
                     }
+
+                    > img {
+                        max-width: 100%;
+                    }
                 }
 
                 .right-stuff {
@@ -249,6 +257,10 @@
                         max-width: 80%;
                     }
                 }
+
+                .btn {
+                    height: 4rem;
+                }
             }
         }
     }

src/app/pages/home/home.js

@@ -14,7 +14,7 @@ import Banner from './banners/banner';
 const bannerModels = shuffle([{
     subject: 'astronomy',
     subjectURL: '/details/books/astronomy',
-    subjectTitle: 'astronomy',
+    subjectTitle: 'Astronomy',
     quote: 'see beyond this world',
     features: ['chart', 'equation'],
     buttonSpec1: 'btn-gold',