@shift72/core-template 1.9.6 → 1.9.7

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## [Unreleased](https://github.com/shift72/core-template/compare/1.9.6...HEAD)
+## [Unreleased](https://github.com/shift72/core-template/compare/1.9.7...HEAD)
 
 ### Added
 
@@ -8,6 +8,20 @@
 
 ### Fixed
 
+## [1.9.6](https://github.com/shift72/core-template/compare/1.9.6...1.9.7)
+
+### Added
+
+- New Checkout support
+
+### Changed
+
+- Updated Twitter share and footer logo
+
+### Fixed
+
+- Plans page alignment
+
 ## [1.9.6](https://github.com/shift72/core-template/compare/1.9.5...1.9.6)
 
 ### Added

package/kibble.json

@@ -117,6 +117,9 @@
       "js"
     ]
   },
+  "proxy": [
+    "^/checkout/"
+  ],
   "routes": [
     {
       "name": "filmItem",
@@ -191,5 +194,5 @@
       "pageSize": 0
     }
   ],
-  "coreTemplateVersion": "1.9.6"
+  "coreTemplateVersion": "1.9.7"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shift72/core-template",
-  "version": "1.9.6",
+  "version": "1.9.7",
   "description": "Shift72 core template",
   "license": "MIT",
   "scripts": {

package/site/plans.html.jet

@@ -11,25 +11,24 @@
       <h1>{{ i18n("plans_page_header") }}</h1>
     </div>
 
-    <div class="container-xxxl px-2 px-lg-5">
-      <div class="row">
+    <div class="plans-container">
       {{ range _, p := site.Plans }}
-        <div class="plan col-xs-6 col-lg-4 mb-3">
-          <div class="card h-100">
+        <div class="plan">
+          <div class="plan-card">
             <div class="plan-container">
               {{ if isset(p.LandscapeImage) && p.LandscapeImage != ""}}
                 <div class="poster poster-landscape">
                   {{ if p.Page }}
                     <a href="{{ routeToSlug(p.Page.Slug) }}">
                   {{ end }}
-                  <s72-image src="{{p.LandscapeImage}}" alt="{{p.Name}}" class="plan-poster card-img-top" border="0"></s72-image>
+                  <s72-image src="{{p.LandscapeImage}}" alt="{{p.Name}}" class="plan-poster"></s72-image>
                   <s72-plan-label data-slug="{{p.Slug}}" data-title="{{p.Name}}"></s72-plan-label>
                   {{ if p.Page }}
                     </a>
                   {{ end }}
                 </div>
               {{ end }}
-              <div class="card-body d-flex flex-column justify-content-between">
+              <div class="plan-caption-details-container">
                 <div class="plan-caption-details">
 
                   {{ if !isset(p.LandscapeImage) || p.LandscapeImage == "" }}
@@ -97,7 +96,7 @@
           </div>
         </div>
       {{ end }}
-      </div>
+    
     </div>
 
   </main>

package/site/styles/_footer.scss

@@ -167,9 +167,9 @@ footer {
     .app-badge-android-tv {
       background-color: var(--footer-app-badge-android-tv);
       height: 44px;
-      width: 122px;
       mask: url('/images/icons/androidtv.svg') no-repeat center / contain;
-      -webkit-mask: url('/images/icons/androidtv.svg') no-repeat center / contain;
+      mask: url('/images/icons/androidtv.svg') no-repeat center / contain;
+      width: 122px;
     }
   }
 

package/site/styles/_plans.scss

@@ -5,30 +5,51 @@
 s72-plan-label {
   .s72-plan-owned {
     @extend .availability-state;
-    @extend .d-inline;
     color: $button-text-color;
+    display: inline;
   }
 }
 
 /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
 .plans-page {
-  // Add some spacing to the heading
-  .page-header h1 {
-    @extend .mb-3;
+  .plans-container {
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 1fr;
+    max-width: 1920px;
+    padding: 0 20px;
+    width: 100%;
+    @include media-breakpoint-up(sm) {
+      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    }
+    @include media-breakpoint-up(lg) {
+      padding: 0 50px;
+    }
   }
 
   .plan {
-    .card {
-      @extend .bg-transparent;
-      @extend .border-0;
+    .plan-card {
+      border: 0;
+      box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.1);
+      color: #343a40;
+      height: 100%;
+      max-width: 580px;
 
       .plan-container {
-        @extend .bg-white;
         @include border-radius($border-radius);
+        background-color: rgb(255, 255, 255);
+
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .plan-poster {
+          width: 100%;
+        }
 
         .plan-caption-details {
           p {
-            @extend .mb-p75;
+            margin-bottom: 10px;
           }
 
           h2 {
@@ -36,24 +57,33 @@ s72-plan-label {
           }
         }
 
+        .plan-caption-details-container {
+          display: flex;
+          flex: 1 1 auto;
+          flex-direction: column;
+          justify-content: space-between;
+          min-height: 1px;
+          padding: 20px;
+        }
+
         s72-plan-label {
-          @extend .position-absolute;
-          @extend .mx-auto;
 
           left: 0;
+          margin: 0 auto;
+          position: absolute;
           top: 0;
           z-index: 99;
         }
 
         s72-pricing-buttons:not(.s72-show) {
-          @extend .m-0;
+          margin: 0;
         }
 
         .plan-caption-details .s72-plan-owned {
-          @extend .d-inline-block;
 
           background-color: var(--primary);
           border-radius: $border-radius 0 $border-radius 0;
+          display: inline-block;
           line-height: 20px;
           padding: 0 5px;
         }
@@ -74,7 +104,7 @@ s72-plan-label {
 
   // Hide the separator if this is a curated collection page
   + .separator {
-    @extend .border-0;
+    border: 0;
   }
 
   // Hide the titles of any collections

package/site/templates/application/application.jet

@@ -11,6 +11,9 @@
 {{CSSFileURL := site.SiteBrand.GetLink("css", "")}}
 {*{CSSFileURL := "/styles/local.css"}*}
 
+{{checkoutDevMode := false}}
+{{useCheckout := site.Toggles["use_checkout"] || checkoutDevMode}}
+
 <!DOCTYPE html>
 <html lang="{{lang.Code}}">
   <head>
@@ -51,6 +54,14 @@
     <script src="/scripts/main.js" defer></script>
 
     <script src="{{CDN}}/s72.transactional.js" defer></script>
+
+    {{if checkoutDevMode}}
+      <script>window.S72_CHECKOUT_OVERRIDE_URL = 'http://localhost:4072'</script>
+      <script src="http://localhost:4072/s72.checkout.js" defer></script> 
+    {{else if useCheckout}}
+      <script src="/checkout/s72.checkout.js" defer></script>
+    {{end}}
+
     <script src="https://js.stripe.com/v3/" defer></script>
 
     {* get default language from site record or kibble.json depening on if db translations is enabled *}  

package/site/templates/application/footer/social-media-buttons.jet

@@ -78,8 +78,8 @@
 {{ end }}
 
 {{ block twitterIcon() }}
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.7 18.939c6.315 0 9.77-5.23 9.77-9.769 0-.148 0-.297-.011-.446a7.382 7.382 0 0 0 1.721-1.775 6.883 6.883 0 0 1-1.977.531 3.424 3.424 0 0 0 1.51-1.892 6.758 6.758 0 0 1-2.18.83 3.425 3.425 0 0 0-2.508-1.085 3.432 3.432 0 0 0-3.433 3.434c0 .265.032.531.085.786a9.759 9.759 0 0 1-7.08-3.593 3.408 3.408 0 0 0-.467 1.733 3.43 3.43 0 0 0 1.53 2.86 3.459 3.459 0 0 1-1.551-.437v.043c0 1.669 1.18 3.05 2.753 3.37a3.63 3.63 0 0 1-.904.116c-.223 0-.435-.02-.648-.053a3.44 3.44 0 0 0 3.21 2.381 6.875 6.875 0 0 1-4.262 1.467c-.287 0-.553-.01-.83-.043a9.702 9.702 0 0 0 5.273 1.542z" fill="currentColor"/>
+  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+    <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" fill="currentColor"/>
   </svg>
 {{ end }}
 

package/site/templates/application/pixel.jet

@@ -15,7 +15,6 @@
         messagebus.publish('loaded-pixel-script', {{pixelID}});
       };
     </script>
-  {{end}}
   <!-- End Meta Pixel Code -->
 
   <script>
@@ -35,6 +34,7 @@
       }
     });
   </script>
+  {{end}}
 {{end}}
 
 {{block pixelNoScript(pixelID=config("meta_pixel_id"))}}