@shift72/core-template 0.4.2 → 0.5.0

package/site/styles/_slider.scss

@@ -1,7 +1,7 @@
 s72-slider .s72-slider-control,
 s72-userwishlist .s72-slider-control {
-  background-color: $primary;
-  border: 1px solid $primary;
+  background-color: var(--primary);
+  border: 1px solid var(--primary);
   border-radius: 50%;
   font-family: $font-family-base;
   height: $slider-control-height;
@@ -31,12 +31,6 @@ s72-userwishlist .s72-slider-control {
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
   }
-
-  &:hover,
-  &:active,
-  &:focus {
-    background: darken($primary, 7.5%);
-  }
 }
 
 // make .slider-control be in the middle of the poster, not the middle of the item (which includes captions).
@@ -72,7 +66,7 @@ s72-slider.has-next.s72-slider-scroll::after {
 /* stylelint-enable selector-no-qualifying-type */
 
 .slider-fade-in {
-  @include gradient-x(rgba($body-bg, 0.9), transparent, 0%, 100%);
+  @include gradient-x(rgba(var(--body-bg-rgb), 0.9), transparent, 0%, 100%);
   content: '';
   display: block;
   height: 100%;
@@ -86,7 +80,7 @@ s72-slider.has-next.s72-slider-scroll::after {
 
 .slider-fade-out {
   @extend .slider-fade-in;
-  @include gradient-x(transparent, rgba($body-bg, 0.9), 0%, 100%);
+  @include gradient-x(transparent, rgba(var(--body-bg-rgb), 0.9), 0%, 100%);
   left: auto;
   right: 0;
 }

package/site/styles/_social-media-buttons.scss

@@ -13,7 +13,7 @@
   h2,
   h5 {
     align-self: center;
-    color: $body-color;
+    color: var(--body-color);
     font-family: $font-family-base;
     font-size: 12px;
     font-weight: $font-weight-bold;
@@ -47,7 +47,7 @@
     border-color: $facebook-color;
 
     .fa {
-      color: $body-bg;
+      color: var(--body-bg);
     }
   }
 
@@ -56,7 +56,7 @@
     border-color: $instagram-color;
 
     .fa {
-      color: $body-bg;
+      color: var(--body-bg);
     }
   }
 
@@ -65,7 +65,7 @@
     border-color: $twitter-color;
 
     .fa {
-      color: $body-bg;
+      color: var(--body-bg);
     }
   }
 
@@ -74,7 +74,7 @@
     border-color: $linkedin-color;
 
     .fa {
-      color: $body-bg;
+      color: var(--body-bg);
     }
   }
 
@@ -83,7 +83,7 @@
     border-color: $youtube-color;
 
     .fa {
-      color: $body-bg;
+      color: var(--body-bg);
     }
   }
 
@@ -92,8 +92,8 @@
     border-color: $letterboxd-color;
 
     path {
-      fill: $body-bg;
-      stroke: $body-bg;
+      fill: var(--body-bg);
+      stroke: var(--body-bg);
       stroke-width: 1;
     }
   }
@@ -102,8 +102,8 @@
   &:active,
   &:focus {
     &.btn-social-facebook {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       .fa {
         color: $facebook-color;
@@ -111,8 +111,8 @@
     }
 
     &.btn-social-instagram {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       .fa {
         color: $instagram-color;
@@ -120,8 +120,8 @@
     }
 
     &.btn-social-twitter {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       .fa {
         color: $twitter-color;
@@ -129,8 +129,8 @@
     }
 
     &.btn-social-linkedin {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       .fa {
         color: $linkedin-color;
@@ -138,8 +138,8 @@
     }
 
     &.btn-social-youtube {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       .fa {
         color: $youtube-color;
@@ -147,8 +147,8 @@
     }
 
     &.btn-social-letterboxd {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       path {
         fill: $letterboxd-color;

package/site/styles/_swiper.scss

@@ -22,12 +22,12 @@
 }
 
 .swiper-button-next {
-  background: rgba($body-bg, 0.8) url('/images/icons/next.png') center center no-repeat;
+  background: rgba(var(--body-bg-rgb), 0.8) url('/images/icons/next.png') center center no-repeat;
   right: 0;
 }
 
 .swiper-button-prev {
-  background: rgba($body-bg, 0.8) url('/images/icons/prev.png') center center no-repeat;
+  background: rgba(var(--body-bg-rgb), 0.8) url('/images/icons/prev.png') center center no-repeat;
   left: 0;
 }
 

package/site/styles/_variables.scss

@@ -3,6 +3,62 @@
 // This file contains any variables used by the site.
 // These variables should be reasonably generic so that overrides are placed in main.scss.
 
+:root {
+  --primary-rgb: 53, 160, 168;
+  --secondary-rgb: 76, 211, 221;
+  --body-color-rgb: 255, 255, 255;
+  --body-bg-rgb: 15, 15, 15;
+  --body-bg-accent-rgb: 25, 25, 25; // darken(body-bg, 10%) OR lighten(body-bg, 10%)
+  --link-color-hover-rgb: 217, 217, 217; // darken(body-color, 15%)
+  --input-focus-border-color-rgb: 131, 210, 216; // lighten(primary, 25%)
+
+  --primary: rgb(var(--primary-rgb));
+  --secondary: rgb(var(--secondary-rgb));
+  --body-color: rgb(var(--body-color-rgb));
+  --body-bg: rgb(var(--body-bg-rgb));
+  --body-bg-accent: rgb(var(--body-bg-accent-rgb));
+  --link-color: var(--body-color);
+  --link-color-hover: rgb(var(--link-color-hover-rgb));
+  --input-focus-border-color: rgb(var(--input-focus-border-color-rgb));
+
+  --input-height: 40px;
+
+  --navbar-brand-padding-y: 25px;
+  --navbar-brand-min-width: 126px;
+  --navbar-brand-min-width-md: 126px;
+  --navbar-brand-min-width-lg: 126px;
+  --navbar-brand-min-width-xl: 126px;
+
+  --carousel-height: 560px;
+  --carousel-height-sm: 560px;
+  --carousel-height-md: 620px;
+  --carousel-caption-top: 125px;
+  --carousel-caption-top-xs: 150px;
+  --carousel-caption-top-md: 175px;
+
+  --page-padding-top: 120px;
+  --page-padding-top-md: 120px;
+  --page-padding-top-lg: 180px;
+  --page-detail-padding-top: 120px;
+  --page-detail-padding-top-md: 120px;
+  --page-detail-padding-top-lg: 180px;
+}
+
+// Bootstrap 4 overrides START
+$input-btn-focus-color: rgba(var(--primary-rgb), 0.25) !default;
+$input-focus-border-color: var(--input-focus-border-color) !default;
+$custom-control-indicator-checked-disabled-bg: rgba(var(--primary-rgb), 0.5) !default;
+$progress-bar-bg: var(--primary) !default;
+$body-color: var(--body-color) !default;
+$body-bg: var(--body-bg) !default;
+$body-bg-accent: var(--body-bg-accent) !default;
+$error-color: var(--body-color) !default;
+$error-background: rgba(var(--body-color-rgb), 0.1) !default;
+$hr-border-color: rgba(var(--body-color-rgb), 0.5) !default;
+$list-group-bg: var(--body-bg) !default;
+$list-group-border-color: rgba(var(--body-color-rgb), 0.125) !default;
+// Bootstrap 4 overrides END
+
 // Bootstrap variables copied here, that some of the below are dependent on.
 $grid-gutter-width-base: 30px !default;
 
@@ -36,76 +92,64 @@ $spacer: math.div(5, 8) * 1rem; // 10px
 
 $spacers: (
   '0': 0,
-  'p5':  ($spacer * 0.5),  // 5px
-  'p75': ($spacer * 0.75), // 7.5px
-  '1':   $spacer,          // 10px
-  '2':   ($spacer * 2),    // 20px
-  '2p5': ($spacer * 2.5),  // 25px
-  '3':   ($spacer * 3),    // 30px
-  '4':   ($spacer * 4),    // 40px
-  '5':   ($spacer * 5),    // 50px
+  'p5': $spacer * 0.5,
+  // 5px
+  'p75': $spacer * 0.75,
+  // 7.5px
+  '1': $spacer,
+  // 10px
+  '2': $spacer * 2,
+  // 20px
+  '2p5': $spacer * 2.5,
+  // 25px
+  '3': $spacer * 3,
+  // 30px
+  '4': $spacer * 4,
+  // 40px
+  '5': $spacer * 5,
+  // 50px
+  '1rem': 1rem
 );
 
-// Body / Core
-// ------------------------------------
-
-$primary: #35a0a8 !default;
-$secondary: #4cd3dd !default;
-$body-color: #fff !default;
-$body-bg: #0f0f0f !default;
-$body-bg-accent: get-accent-color($body-bg) !default;
-$error-color: $body-color !default;
-$error-background: rgba($body-color, 0.1) !default;
-$hr-border-color: rgba($body-color, 0.5) !default;
-$list-group-bg: $body-bg !default;
-$list-group-border-color: rgba($body-color, 0.125) !default;
-
 // Cookie Consent
-$cookie-consent-color: #000;
-$cookie-consent-link-color: $primary;
-$cookie-consent-hover-link-color: $secondary;
+$cookie-consent-color: #000 !default;
+$cookie-consent-link-color: var(--primary) !default;
+$cookie-consent-hover-link-color: var(--secondary) !default;
 
 // Nav
 // ------------------------------------
 $navbar-background-color: transparent !default;
-$navbar-show-background-color: $body-bg-accent !default;
-$navbar-dark-active-color: $primary !default;
+$navbar-show-background-color: var(--body-bg-accent) !default;
+$navbar-dark-active-color: var(--primary) !default;
 $navbar-nav-link-padding-x: 1em !default;
 $navbar-nav-link-padding-y: 1em !default;
-$navbar-search-background-color: $body-bg-accent !default;
+$navbar-search-background-color: var(--body-bg-accent) !default;
 
 // Uses navbar-dark theme so we can use variables for colouring
 $navbar-dark-active-color: #fd4766 !default;
-$navbar-dark-color: $body-color !default;
+$navbar-dark-color: var(--body-color) !default;
 $navbar-dark-hover-color: #fd4766 !default;
 
-// Navbar Logo (Brand)
-$navbar-brand-padding-y: 25px !default;
-$navbar-brand-min-width: 126px !default;
-$navbar-brand-min-width-md: 126px !default;
-$navbar-brand-min-width-lg: 126px !default;
-$navbar-brand-min-width-xl: 126px !default;
-
 // Sub Navivgation
-$subnav-nav-item-color: $body-color !default;
-$subnav-nav-item-hover-background-color: $primary !default;
-$subnav-nav-item-active-background-color: $primary !default;
-$subnav-dropdown-background: $body-bg-accent !default;
+$subnav-nav-item-color: var(--body-color) !default;
+$subnav-nav-item-hover-background-color: var(--primary) !default;
+$subnav-nav-item-active-background-color: var(--primary) !default;
+$subnav-dropdown-background: var(--body-bg-accent) !default;
 
 // Buttons
-$button-text-color: $body-color !default;
-$button-text-color-hover: $body-color !default;
-$button-background: $primary !default;
-$button-background-hover: $secondary !default;
-$trailer-button-text-color: $body-color !default;
-$mobile-nav-link-color: $body-color !default;
-
-$signin-text-color: $body-color !default;
-$signin-text-color-hover: $primary !default;
+$button-text-color: var(--body-color) !default;
+$button-text-color-hover: var(--body-color) !default;
+$button-background: var(--primary) !default;
+$button-background-hover: var(--secondary) !default;
+$trailer-button-text-color: var(--body-color) !default;
+$mobile-nav-link-color: var(--body-color) !default;
+
+$signin-text-color: var(--body-color) !default;
+$signin-text-color-hover: var(--primary) !default;
 $signin-border-color: transparent !default;
 $signin-border-color-hover: transparent !default;
-$signin-background: rgba($body-color, 0.1) !default;
-$signin-background-hover: rgba($body-color, 0.2) !default;
+$signin-background: rgba(var(--body-color-rgb), 0.1) !default;
+$signin-background-hover: rgba(var(--body-color-rgb), 0.2) !default;
 $signin-background-lg: transparent !default;
 $signin-background-hover-lg: transparent !default;
 
@@ -116,54 +160,39 @@ $signup-border-color-hover: transparent !default;
 $signup-background: $button-background !default;
 $signup-background-hover: $button-background-hover !default;
 
-$signout-background: rgba($body-color, 0.1) !default;
-$signout-background-hover: rgba($body-color, 0.2) !default;
-$signout-text-color: $body-color !default;
-$signout-text-color-hover: $body-color !default;
-
-$link-color: $body-color !default;
+$signout-background: rgba(var(--body-color-rgb), 0.1) !default;
+$signout-background-hover: rgba(var(--body-color-rgb), 0.2) !default;
+$signout-text-color: var(--body-color) !default;
+$signout-text-color-hover: var(--body-color) !default;
 
 // Image Gradient Overlays
-$top-gradient-color: $body-bg !default;
-$right-gradient-bg-color: $body-bg !default;
-$bottom-gradient-bg-color: $body-bg !default;
-$left-gradient-bg-color: $body-bg !default;
+$top-gradient-color: var(--body-bg-rgb) !default;
+$right-gradient-bg-color: var(--body-bg-rgb) !default;
+$bottom-gradient-bg-color: var(--body-bg-rgb) !default;
+$left-gradient-bg-color: var(--body-bg-rgb) !default;
 
 // Carousel
-$carousel-bg-color: $body-bg !default;
-$carousel-height: 470px !default;
-$carousel-height-sm: 470px !default;
-$carousel-height-md: 620px !default;
-$carousel-caption-top: 150px !default;
-$carousel-caption-top-md: 175px !default;
-
-// Pages
-$page-padding-top: 120px !default;
-$page-padding-top-md: 120px !default;
-$page-padding-top-lg: 180px !default;
-$page-detail-padding-top: 120px !default;
-$page-detail-padding-top-md: 120px !default;
-$page-detail-padding-top-lg: 180px !default;
+$carousel-bg-color: var(--body-bg) !default;
 
 // Footer
 $footer-brand-min-width: 100px !default;
 $footer-brand-min-width-md: 100px !default;
-$footer-bar-background-color: $body-bg-accent !default;
+$footer-bar-background-color: var(--body-bg-accent) !default;
 
 // Social
 // ------------------------------------
-$facebook-color: $body-color !default;
-$instagram-color: $body-color !default;
-$twitter-color: $body-color !default;
-$youtube-color: $body-color !default;
-$linkedin-color: $body-color !default;
-$letterboxd-color: $body-color !default;
+$facebook-color: var(--body-color) !default;
+$instagram-color: var(--body-color) !default;
+$twitter-color: var(--body-color) !default;
+$youtube-color: var(--body-color) !default;
+$linkedin-color: var(--body-color) !default;
+$letterboxd-color: var(--body-color) !default;
 
 // Meta Items
 // ------------------------------------
 $meta-item-border-radius: 3px !default;
 $featured-meta-item-body-padding: 10px !default;
-$meta-item-body-color: $body-color !default;
+$meta-item-body-color: var(--body-color) !default;
 $meta-item-tagline-classification-border-radius: $meta-item-border-radius !default;
 $meta-item-availability-tag-margin: 5px !default;
 

package/site/styles/_wishlist.scss

@@ -26,19 +26,8 @@
 .s72-userwishlist-buttons {
   .s72-btn-wishlist {
     @extend .btn;
-    font-size: 12px;
-    font-weight: $font-weight-bold;
-    margin-right: 32px; // was 10px before awards needed some space
-    padding-bottom: 3px;
     padding-left: 0;
-    padding-top: 3px;
 
-    span {
-      @extend .d-flex;
-      align-items: center;
-      flex-direction: row;
-      justify-content: center;
-    }
 
     .s72-icon {
       font-size: 32px !important;
@@ -47,7 +36,26 @@
   }
 }
 
+.s72-userwishlist-buttons .s72-btn-wishlist,
+.meta-award-nomination {
+  font-size: 12px;
+  font-weight: $font-weight-bold;
+
+  span {
+    @extend .d-flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+  }
+}
+
+.s72-userwishlist-buttons .s72-btn-wishlist {
+  margin-right: 0.5rem;
+  padding-bottom: 3px;
+  padding-top: 3px;
+}
+
 .poster .s72-userwishlist-buttons .s72-btn-wishlist {
   margin: 0;
   padding: 0;
-}
+}

package/site/styles/main.scss

@@ -1,5 +1,3 @@
-@import '_functions';
-
 @import '_variables';
 
 @import '_bootstrap4';
@@ -14,6 +12,7 @@
 @import '_forms';
 @import '_card';
 
+@import '_skip-link';
 @import '_nav';
 
 @import '_swiper';
@@ -53,4 +52,4 @@
 // @import local must be last in this file.
 @import 'local/local';
 
-// DO NOT PUT ANYTHING IN THIS FILE.
+// DO NOT PUT ANYTHING IN THIS FILE.

package/site/templates/application/application.jet

@@ -3,8 +3,16 @@
 {{import "./nav/nav.jet"}}
 {{import "./google.jet" }}
 {{import "./footer/footer.jet" }}
+
 {{CDN := "//cdn.shift72.com/1.3"}}
 {*{CDN := "//localhost:3000"}*}
+
+{{CSSFilename := ""}}
+{{if isEnabled("self_service_css") && site.CSSFilename != "" }}
+  {{CSSFilename = site.CSSFilename}}
+{{end}}
+{*{CSSFilename = "local.css"}*}
+
 <!DOCTYPE html>
 <html lang="{{lang.Code}}">
   <head>
@@ -13,14 +21,20 @@
     <link rel="manifest" href="/manifest.json">
     <link rel="preload" href="/{{lang.DefinitionFilePath}}" as="fetch" crossorigin type="application/json">
     <link rel="preload" href="/classifications.all.json" as="fetch" crossorigin type="application/json">
-    <!-- Kibble:{{ version }} -->
-    <!-- Template:{{site.SiteConfig.Version}} -->
+    <!-- Kibble: {{version}} -->
+    {{if site.SiteConfig.CoreTemplateVersion != ""}}
+      <!-- Core-Template: {{site.SiteConfig.CoreTemplateVersion}} -->
+    {{end}}
+    <!-- Template: {{site.SiteConfig.Version}} -->
     <link rel="stylesheet" href="{{CDN}}/s72.ui.css">
     <link rel="stylesheet" href="{{CDN}}/s72.transactional.css">
     <link rel="stylesheet" href="/styles/swiper.css">
 
     {{yield font()}}
     <link rel="stylesheet" href="/styles/main.css">
+    {{if CSSFilename != "" }}
+      <link rel="stylesheet" href="/styles/{{CSSFilename}}">
+    {{end}}
 
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
@@ -33,7 +47,7 @@
     <script src="{{CDN}}/s72.core.js" defer></script>
     <script src="{{CDN}}/s72.ui.js" defer></script>
 
-    <script src="/scripts/main.js" defer></script>
+    <script src="/scripts/main.js" defer></script>    
 
     <script src="{{CDN}}/s72.transactional.js" defer></script>
     <script src="https://js.stripe.com/v3/" defer></script>
@@ -51,21 +65,15 @@
     </script>
 
     <script type="text/javascript" src="/scripts/swiper.min.js"></script>
+
+    {{yield googleGa4Script()}}
   </head>
   <body>
-    <s72-cookie-consent></s72-cookie-consent>
 
-    <section class="sr-only">
-      <h2>{{i18n("wcag_skip_links_header")}}</h2>
-      <ul>
-        <li>
-          <a href="#main">{{i18n("wcag_skip_links_content")}}</a>
-        </li>
-        <li>
-          <a href="#footer">{{i18n("wcag_skip_links_footer")}}</a>
-        </li>
-      </ul>
-    </section>
+    <h2 class="sr-only">{{i18n("wcag_skip_links_header")}}</h2>
+    <a class="skip-link" href="#main">{{i18n("wcag_skip_links_content")}}</a>
+
+    <s72-cookie-consent></s72-cookie-consent>
 
     {{yield googleTagManagerNoScript()}}
 
@@ -78,5 +86,6 @@
     {{yield footer()}}
 
     {{yield googleScripts()}}
+    <s72-donate-button></s72-donate-button>
   </body>
 </html>

package/site/templates/application/google.jet

@@ -1,3 +1,10 @@
+{{block googleGa4Script(analyticsId=config("google_analytics_id"))}}
+  {{if hasPrefix(analyticsId,"G")}}
+  <!-- GA4 script if G tracking code is provided -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{analyticsId}}"></script>
+  {{end}}
+{{end}}
+
 {{block googleScripts(tagManagerId=config("google_tag_manager_id"), analyticsId=config("google_analytics_id"))}}
   <!-- Google integration scripts -->
   <script>
@@ -9,17 +16,27 @@
       })(window,document,'script','dataLayer','{{ tagManagerId }}')
     }
 
+    <!-- GA4 code snippet if G tracking code is provided, else use legacy UA code snippet -->
+    {{if hasPrefix(analyticsId,"G")}}
+      function loadGoogleAnalytics() {
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
 
-    function loadGoogleAnalytics() {
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+        gtag('config', '{{analyticsId}}');
+      }
+    {{else}}
+      function loadGoogleAnalytics() {
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
-      ga('create', '{{analyticsId}}', 'auto');
-      ga('require', 'ecommerce');
-      ga('send', 'pageview');
-    }
+        ga('create', '{{analyticsId}}', 'auto');
+        ga('require', 'ecommerce');
+        ga('send', 'pageview');
+      }
+    {{end}}
 
     // Only load Google Tag Manager if a/ the frontend cookie consent isn't required or b/ they've agreed to the cookie consent
     var googleTagManagerEnabled = {{ (len(tagManagerId) > 0) ? "true" : "false" }};
@@ -51,4 +68,3 @@
   <!-- End Google Tag Manager (noscript) -->
   {{end}}
 {{end}}
-

package/site/templates/bundle/buttons.jet

@@ -1,5 +1,6 @@
-{{block bundleButtons(class, slug, title)}}
+{{block bundleButtons(class, slug, title, promoURL)}}
   <div class="{{class}}">
     <s72-pricing-buttons data-slug="{{slug}}" data-title="{{title}}"></s72-pricing-buttons>
+    {{yield bundleExtras(class="meta-detail-extras", slug=slug, promoURL=promoURL)}}
   </div>
 {{end}}

package/site/templates/bundle/item.jet

@@ -28,11 +28,10 @@
 
           {{yield bundleTagline(class="meta-detail-tagline") bundle}}
 
-          {{yield bundleButtons(class="meta-detail-buttons", slug=bundle.Slug, title=bundle.Title)}}
+          {{yield bundleButtons(class="meta-detail-buttons", slug=bundle.Slug, title=bundle.Title, promoURL=bundle.PromoURL)}}
 
           {{yield bundleSynopsis(class="meta-detail-synopsis", synopsis=bundle.Description)}}
 
-          {{yield bundleExtras(class="meta-detail-extras", slug=bundle.Slug, promoURL=bundle.PromoURL)}}
         </div>
 
         {{yield bundleList(items=bundle.Items)}}