@shift72/core-template 1.9.0 → 1.9.2

package/CHANGELOG.md

@@ -1,6 +1,29 @@
 # Changelog
 
-## [Unreleased](https://github.com/shift72/core-template/compare/1.9.0...HEAD)
+## [Unreleased](https://github.com/shift72/core-template/compare/1.9.1...HEAD)
+
+
+## [1.9.2](https://github.com/shift72/core-template/compare/1.9.1...1.9.2)
+
+### Added
+- Configuration to change or remove the forgot password link
+- Configuration to change or remove the my account link
+- Styling for SSO buttons
+- CSS variables for change default button colors
+- linkedin social link
+
+### Changed
+- Nav mobile top padding to meet design spec
+- Social link redesign
+
+### Fixed
+- GA4 tracking of ecommerce data
+- Form control styling bug in 1.9.1
+
+## [1.9.1](https://github.com/shift72/core-template/compare/1.9.0...1.9.1)
+
+### Changed
+- Bumped base version of relish to 1.4.x
 
 ## [1.9.0](https://github.com/shift72/core-template/compare/1.8.0...1.9.0)
 

package/kibble.json

@@ -191,5 +191,5 @@
       "pageSize": 0
     }
   ],
-  "coreTemplateVersion": "1.9.0"
+  "coreTemplateVersion": "1.9.2"
 }

package/package.json

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

package/site/pl_PL.all.json

@@ -449,10 +449,10 @@
     "other": "{{.Count}} dni"
   },
   "shopping_info_rental_period_duration": {
-    "one": "Wypożyczono na {{.ValueUnit}} ",
-    "few": "Wypożyczono na {{.ValueUnit}} ",
-    "many": "Wypożyczono na {{.ValueUnit}} ",
-    "other": "Wypożyczono na {{.ValueUnit}} "
+    "one": "Wypożyczenie na {{.ValueUnit}} ",
+    "few": "Wypożyczenie na {{.ValueUnit}} ",
+    "many": "Wypożyczenie na {{.ValueUnit}} ",
+    "other": "Wypożyczenie na {{.ValueUnit}} "
   },
   "shopping_info_watch_window_duration": {
     "one": "{{.Count}} godzinne okno odtwarzania. ",
@@ -795,7 +795,7 @@
     "other": "Klasyfikacja: "
   },
   "cookie_banner_message": {
-    "other": "Korzystanie z naszej witryny oznacza zgodę na wykorzystywanie plików cookie. Więcej informacji można znaleźć na <a href=\"{{.CookiePolicyURL}}\">polityka prywatności</a>."
+    "other": "Korzystanie z naszej witryny oznacza zgodę na wykorzystywanie plików cookie. <a href=\"{{.CookiePolicyURL}}\">Czytaj więcej</a>."
   },
   "cookie_banner_accept": {
     "other": "Zaakceptować"

package/site/signin.html.jet

@@ -8,7 +8,20 @@
   <main id="main" class="page form-page">
     <div class="page-header">
       <h1>{{ i18n("signin_page_header") }}</h1>
-      <p><a href="{{ routeToPath("/forgotpassword.html") }}">{{ i18n("signin_page_forgotpassword")}}</a></p>
+      {{forgot_password_link := config("forgot_password_link")}}
+      {{if forgot_password_link != "hide"}}
+        {{forgot_password_href := forgot_password_link == "" ? routeToPath("/forgotpassword.html") : forgot_password_link}}
+        <p>
+          <a 
+            href="{{forgot_password_href}}"
+            {{if forgot_password_link != ""}}
+              target="_blank"
+            {{end}}
+          >
+            {{ i18n("signin_page_forgotpassword")}}
+          </a>
+        </p>
+      {{end}}
     </div>
     <div class="page-form">
       <div class="form-container">

package/site/styles/_buttons.scss

@@ -41,6 +41,25 @@
     font-size: 16px;
   }
 }
+// OAuth
+.s72-oauth-buttons {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  justify-content: center;
+  margin-top: 10px;
+
+  .btn-sso {
+    background-color: var(--signin-sso-btn-background-color);
+    color: var(--signin-sso-btn-text-color);
+    &:hover,
+    &:focus {
+      background-color: var(--signin-sso-btn-background-hover-color);
+      color: var(--signin-sso-btn-text-hover-color);
+    }
+  }
+}
 
 .s72-btn.s72-btn-block {
   @extend .btn-block;

package/site/styles/_footer.scss

@@ -23,7 +23,9 @@ footer {
   margin-bottom: 30px;
 
   @include media-breakpoint-up(xl) {
-    margin: 0 50px 20px;
+    align-items: center;
+    display: flex;
+    margin: 0 50px;
   }
 
   .nav {
@@ -37,8 +39,9 @@ footer {
   }
 
   .nav-link {
+    padding-bottom: 16px;
+    padding-top: 0;
     text-align: center;
-
     @include media-breakpoint-up(xl) {
       margin-right: 20px;
       padding: 0;
@@ -52,16 +55,15 @@ footer {
 
 .footer-social-media-icons {
   display: grid;
-  gap: 24px;
-  grid-auto-columns: 25px;
+  gap: 16px;
+  grid-auto-columns: 32px;
   grid-auto-flow: column;
   grid-template-rows: 1fr;
   justify-content: center;
-  margin-bottom: 30px;
+  margin-left: auto;
 
   @include media-breakpoint-up(xl) {
     justify-content: start;
-    margin: 0 50px 20px;
   }
 
   .s72-btn {
@@ -80,6 +82,22 @@ footer {
   }
 }
 
+.social-link-button {
+  align-items: center;
+  background-color: var(--footer-social-bg);
+  border-radius: 50%;
+  color: var(--footer-social-icon);
+  display: flex;
+  height: 32px;
+  justify-content: center;
+  width: 32px;
+
+  &:hover {
+    background-color: var(--footer-social-bg-hover);
+    color: var(--footer-social-icon-hover);
+  }
+}
+
 .footer-info {
   background-color: $footer-bar-background-color;
   margin-top: 30px;

package/site/styles/_forms.scss

@@ -101,7 +101,7 @@ s72-activatedevice-form,
 
   /* stylelint-disable-next-line */
   &:not(.StripeElement) {
-    background-color: transparent;
+    background-color: $body-bg-accent;
     border-color: rgba(var(--body-color-rgb), 0.6);
     color: var(--body-color);
     &:focus {

package/site/styles/_nav.scss

@@ -118,7 +118,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   height: 100%;
-  padding: 10px 20px;
+  padding: 20px;
   position: relative;
   transition: background-color 0.25s ease-out;
   width: 100%;

package/site/styles/_variables.scss

@@ -76,6 +76,10 @@
   --navbar-brand-height: 50px;
 
   --footer-brand-height: 50px;
+  --footer-social-bg: var(--body-bg-accent);
+  --footer-social-bg-hover: var(--primary);
+  --footer-social-icon: var(--body-color);
+  --footer-social-icon-hover: var(--body-bg);
 
   --signin-text-color: var(--body-color);
   --signin-text-color-hover: var(--body-color-hover);
@@ -85,12 +89,23 @@
   --signin-background-hover: var(--hover-background);
   --signin-background-lg: transparent;
   --signin-background-hover-lg: transparent;
-
   --signout-background: rgba(var(--body-color-rgb), 0.1);
   --signout-background-hover: rgba(var(--body-color-rgb), 0.2);
   --signout-text-color: var(--body-color);
   --signout-text-color-hover: var(--body-color);
 
+  // Buttons
+  --button-text-color: var(--body-bg);
+  --button-text-color-hover: var(--body-bg);
+  --button-background: var(--primary);
+  --button-background-hover: var(--secondary);
+  --trailer-button-text-color: var(--body-color);
+  --mobile-nav-link-color: var(--body-color);
+  --signin-sso-btn-text-color: var(--button-text-color);
+  --signin-sso-btn-text-hover-color: var(--button-text-color-hover);
+  --signin-sso-btn-background-color: var(--button-background);
+  --signin-sso-btn-background-hover-color: var(--button-background-hover);
+
   --carousel-height: 75vh;
   --carousel-height-sm: 75vh;
   --carousel-height-lg: 75vh;
@@ -251,12 +266,12 @@ $navbar-dark-color: var(--body-color) !default;
 $navbar-dark-hover-color: #fd4766 !default;
 
 // Buttons
-$button-text-color: var(--body-bg) !default;
-$button-text-color-hover: var(--body-bg) !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;
+$button-text-color: var(--button-text-color) !default;
+$button-text-color-hover: var(--button-text-color-hover) !default;
+$button-background: var(--button-background) !default;
+$button-background-hover: var(--button-background-hover) !default;
+$trailer-button-text-color: var(--trailer-button-text-color) !default;
+$mobile-nav-link-color: var(--mobile-nav-link-color) !default;
 
 $signup-text-color: $button-text-color !default;
 $signup-text-color-hover: $button-text-color-hover !default;

package/site/templates/application/application.jet

@@ -4,7 +4,7 @@
 {{import "./google.jet" }}
 {{import "./footer/footer.jet" }}
 
-{{CDN := "//cdn.shift72.com/1.3"}}
+{{CDN := "//cdn.shift72.com/1.4"}}
 {*{CDN := "//localhost:3000"}*}
 
 {{CSSFileURL := site.SiteBrand.GetLink("css", "")}}

package/site/templates/application/footer/footer.jet

@@ -17,8 +17,6 @@
 
     {{yield footerNav(navLinks=site.Navigation.Footer)}}
 
-    {{yield footerSocialMediaButtons()}}
-
     {{yield footerInfo()}}
   </footer>
 {{end}}

package/site/templates/application/footer/nav.jet

@@ -1,13 +1,14 @@
 {{ block footerNav(navLinks) }}
-  {{ if len(navLinks) > 0 }}
-    <nav class="footer-nav" aria-label="{{ i18n("wcag_aria_label_footer") }}">
-        <ul class="nav">
-          {{ range navLinks }}
-            <li class="nav-item {{ len(.Link.ExternalURL) == 0 && routeToSlug(.Link.Slug) == currentUrlPath ? "active" : "" }}">
-              <a class="nav-link" href="{{ len(.Link.ExternalURL) > 0 ? .Link.ExternalURL : routeToSlug(.Link.Slug) }}">{{ .Label }}</a>
-            </li>
-          {{ end }}
-        </ul>
-    </nav>
-  {{ end }}
-{{ end }}
+  <nav class="footer-nav" aria-label="{{ i18n("wcag_aria_label_footer") }}">
+    {{ if len(navLinks) > 0 }}
+      <ul class="nav">
+        {{ range navLinks }}
+          <li class="nav-item {{ len(.Link.ExternalURL) == 0 && routeToSlug(.Link.Slug) == currentUrlPath ? "active" : "" }}">
+            <a class="nav-link" href="{{ len(.Link.ExternalURL) > 0 ? .Link.ExternalURL : routeToSlug(.Link.Slug) }}">{{ .Label }}</a>
+          </li>
+        {{ end }}
+      </ul>
+    {{ end }}
+    {{ yield footerSocialMediaButtons() }}
+  </nav>
+{{ end }}

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

@@ -1,25 +1,96 @@
 {{block footerSocialMediaButtons()}}
-  {{social_link_instagram := config("social_link_instagram")}}
-  {{social_link_youtube := config("social_link_youtube")}}
-  {{social_link_facebook := config("social_link_facebook")}}
-  {{social_link_twitter := config("social_link_twitter")}}
-  {{social_link_letterboxd := config("social_link_letterboxd")}}
+  {{ social_link_instagram := config("social_link_instagram") }}
+  {{ social_link_youtube := config("social_link_youtube") }}
+  {{ social_link_facebook := config("social_link_facebook") }}
+  {{ social_link_twitter := config("social_link_twitter") }}
+  {{ social_link_letterboxd := config("social_link_letterboxd") }}
+  {{ social_link_linkedin := config("social_link_linkedin") }}
 
-  {{if social_link_instagram != "" || social_link_youtube != "" || social_link_facebook != "" || social_link_twitter != "" || social_link_letterboxd != ""}}
+  {{ if social_link_instagram != "" || social_link_youtube != "" || social_link_facebook != "" || social_link_twitter != "" || social_link_letterboxd != "" || social_link_linkedin != "" }}
     <div class="footer-social-media-icons">
-      {{yield footerSocialMediaIcon(link=social_link_instagram, iconClass="instagram", titleKey="wcag_aria_label_social_instagram")}}
-      {{yield footerSocialMediaIcon(link=social_link_youtube, iconClass="youtube", titleKey="wcag_aria_label_social_youtube")}}
-      {{yield footerSocialMediaIcon(link=social_link_facebook, iconClass="facebook", titleKey="wcag_aria_label_social_facebook")}}
-      {{yield footerSocialMediaIcon(link=social_link_twitter, iconClass="twitter", titleKey="wcag_aria_label_social_twitter")}}
-      {{yield footerSocialMediaIcon(link=social_link_letterboxd, iconClass="letterboxd", titleKey="wcag_aria_label_social_letterboxd")}}
+      {{ yield footerSocialMediaIcon(link=social_link_instagram, iconClass="instagram", titleKey="wcag_aria_label_social_instagram") }}
+      {{ yield footerSocialMediaIcon(link=social_link_youtube, iconClass="youtube", titleKey="wcag_aria_label_social_youtube") }}
+      {{ yield footerSocialMediaIcon(link=social_link_facebook, iconClass="facebook", titleKey="wcag_aria_label_social_facebook") }}
+      {{ yield footerSocialMediaIcon(link=social_link_twitter, iconClass="twitter", titleKey="wcag_aria_label_social_twitter") }}
+      {{ yield footerSocialMediaIcon(link=social_link_letterboxd, iconClass="letterboxd", titleKey="wcag_aria_label_social_letterboxd") }}
+      {{ yield footerSocialMediaIcon(link=social_link_linkedin, iconClass="linkedin", titleKey="wcag_aria_label_social_linkedin") }}
     </div>
-  {{end}}
-{{end}}
+  {{ end }}
+{{ end }}
 
-{{block footerSocialMediaIcon(link, iconClass, titleKey)}}
-  {{if link != ""}}
+{{ block footerSocialMediaIcon(link, iconClass, titleKey) }}
+  {{ if link != "" }}
     <a class="s72-btn" target="_blank" title="{{i18n(titleKey)}}" href="{{link}}">
-      <i class="fa fa-{{iconClass}}-footer"></i>
+      <div class="social-link-button">
+
+        {{ if iconClass == "instagram" }}
+          {{ yield instagramIcon() }}
+        {{ end }}
+
+        {{ if iconClass == "youtube" }}
+          {{ yield youtubeIcon() }}
+        {{ end }}
+
+        {{ if iconClass == "facebook" }}
+          {{ yield facebookIcon() }}
+        {{ end }}
+
+        {{ if iconClass == "twitter" }}
+          {{ yield twitterIcon() }}
+        {{ end }}
+
+        {{ if iconClass == "letterboxd" }}
+          {{ yield letterboxdIcon() }}
+        {{ end }}  
+
+        {{ if iconClass == "linkedin" }}
+          {{ yield linkedinIcon() }}
+        {{ end }}
+        
+      </div>
     </a>
-  {{end}}
-{{end}}
+  {{ end }}
+{{ end }}
+
+{{ block instagramIcon() }}
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.8 4.38h6.4a4.422 4.422 0 0 1 4.42 4.42v6.4a4.419 4.419 0 0 1-4.42 4.419H8.8A4.422 4.422 0 0 1 4.381 15.2V8.8a4.419 4.419 0 0 1 4.42-4.42zm-.152 1.525a2.743 2.743 0 0 0-2.743 2.743v6.704a2.741 2.741 0 0 0 2.743 2.743h6.704a2.743 2.743 0 0 0 2.743-2.743V8.648a2.741 2.741 0 0 0-2.742-2.743H8.647zM16 7.048a.952.952 0 1 1 0 1.905.952.952 0 0 1 0-1.905zM12 8.19a3.81 3.81 0 1 1 0 7.62 3.81 3.81 0 0 1 0-7.62zm0 1.524a2.286 2.286 0 1 0 0 4.572 2.286 2.286 0 0 0 0-4.572z" fill="currentColor"/>
+  </svg>
+{{ end }}
+
+{{ block youtubeIcon() }}
+  <svg width="18" height="14" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_611_6906)">
+      <path d="M16.6459 1.89714C16.549 1.52948 16.3592 1.19426 16.0954 0.92506C15.8316 0.655861 15.5031 0.462145 15.1428 0.363323C13.8167 0 8.50096 0 8.50096 0C8.50096 0 3.18329 0 1.85916 0.363323C1.49887 0.462145 1.17035 0.655861 0.906544 0.92506C0.642734 1.19426 0.452894 1.52948 0.356051 1.89714C0 3.24831 0 6.07241 0 6.07241C0 6.07241 0 8.89455 0.356051 10.2477C0.4526 10.6157 0.642308 10.9513 0.906138 11.2209C1.16997 11.4905 1.49864 11.6845 1.85916 11.7835C3.18521 12.1468 8.50096 12.1468 8.50096 12.1468C8.50096 12.1468 13.8167 12.1468 15.1428 11.7835C15.5031 11.6846 15.8316 11.4909 16.0954 11.2217C16.3592 10.9525 16.549 10.6173 16.6459 10.2496C17.0019 8.89651 17.0019 6.07437 17.0019 6.07437C17.0019 6.07437 17 3.24831 16.6459 1.89714ZM6.79961 8.67459V3.47023L11.2166 6.07241L6.79961 8.67459Z" fill="currentColor"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_611_6906">
+        <rect width="17" height="12.1429" fill="currentColor"/>
+      </clipPath>
+    </defs>
+  </svg>
+{{ end }}
+
+{{ block facebookIcon() }}
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.328 19.619v-6.95h2.326l.357-2.711h-2.683v-1.73c0-.78.21-1.32 1.337-1.32h1.438V4.491c-.248-.037-1.1-.11-2.088-.11-2.07 0-3.49 1.264-3.49 3.58v1.997H8.192v2.71h2.335v6.951h2.802z" fill="currentColor"/>
+  </svg>
+{{ 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>
+{{ end }}
+
+{{ block letterboxdIcon() }}
+  <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8459 15C12.8459 15.5913 12.6869 16.1442 12.4108 16.6157C12.1346 16.1442 11.9757 15.5913 11.9757 15C11.9757 14.4087 12.1346 13.8558 12.4108 13.3843C12.6869 13.8558 12.8459 14.4087 12.8459 15ZM17.5893 13.3838C17.0594 12.4794 16.0981 11.875 15.0002 11.875C13.9021 11.875 12.9407 12.4797 12.4108 13.3843C11.8809 12.4797 10.9195 11.875 9.82137 11.875C8.15099 11.875 6.79688 13.2741 6.79688 15C6.79688 16.7259 8.15099 18.125 9.82137 18.125C10.9195 18.125 11.8809 17.5203 12.4108 16.6157C12.9407 17.5203 13.9021 18.125 15.0002 18.125C16.0981 18.125 17.0594 17.5206 17.5893 16.6162C18.1193 17.5206 19.0805 18.125 20.1784 18.125C21.8488 18.125 23.2029 16.7259 23.2029 15C23.2029 13.2741 21.8488 11.875 20.1784 11.875C19.0805 11.875 18.1193 12.4794 17.5893 13.3838ZM17.5893 13.3838C17.8656 13.8554 18.0247 14.4085 18.0247 15C18.0247 15.5915 17.8656 16.1446 17.5893 16.6162C17.313 16.1446 17.1539 15.5915 17.1539 15C17.1539 14.4085 17.313 13.8554 17.5893 13.3838Z" fill="currentColor"/>
+  </svg>
+{{ end }}
+
+{{ block linkedinIcon() }}
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.385 8.016c1.222 0 1.987-.808 1.977-1.817C7.35 5.167 6.607 4.38 5.406 4.38c-1.19 0-1.977.786-1.977 1.818 0 1.01.754 1.817 1.934 1.817h.021zm7.185 11.969v-5.878c0-.32.032-.627.117-.861.255-.627.829-1.276 1.796-1.276 1.265 0 1.775.967 1.775 2.381v5.634h3.497v-6.038c0-3.231-1.722-4.74-4.028-4.74-1.813 0-2.65.966-3.12 1.683l-.037.058V9.45H9.073V9.477l.001.023c.004.134.012.598.016 1.96V11.898l.001.494v1.861c-.002 1.443-.007 3.313-.018 5.733h3.497zm-5.432 0V9.45H3.631v10.534h3.507z" fill="currentColor"/>
+  </svg>
+{{ end }}

package/site/templates/application/google.jet

@@ -1,58 +1,81 @@
 {{block googleScripts(tagManagerId=config("google_tag_manager_id"), analyticsId=config("google_analytics_id"))}}
   <!-- Google integration scripts -->
-  <script>
-    function loadGoogleTagManager() {
-      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
-      var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
-      j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-      })(window,document,'script','dataLayer','{{ tagManagerId }}')}
+  
+    {{if len(tagManagerId) > 0}}
+    {* Load GTM code snippet if Tag Manager ID is provided *} 
+      <script>
+        function loadGoogleTagManager() {
+          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
+          var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
+          j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+          })(window,document,'script','dataLayer','{{ tagManagerId }}')};
+      </script>
+    {{end}}
 
-    <!-- GA4 code snippet if G tracking code is provided, else use legacy UA code snippet -->
     {{if hasPrefix(analyticsId,"G")}}
-      function loadGoogleAnalytics() {
-        (function(d, googleId){var f = d.getElementsByTagName('script')[0];var s = d.createElement('script');
-        s.src = 'https://www.googletagmanager.com/gtag/js?id=' + googleId;s.async = true;f.parentNode.insertBefore(s,f);
-        }(document,'{{analyticsId}}'));
-
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
+    {* Load GA4 code snippet and gtag function if G tracking code is provided, else use legacy UA code snippet *}
+      <script>
+        function loadGA4() {
+          window.dataLayer = window.dataLayer || [];
+          window.gtag = function(){dataLayer.push(arguments);}
+          window.gtag('js', new Date());
+          window.gtag('config', '{{analyticsId}}');
 
-        gtag('config', '{{analyticsId}}');
-      }
+          (function(d, googleId){var f = d.getElementsByTagName('script')[0];var s = d.createElement('script');
+          s.src = 'https://www.googletagmanager.com/gtag/js?id=' + googleId;s.async = true;f.parentNode.insertBefore(s,f);
+          }(document,'{{analyticsId}}'));
+        };
+      </script>
+    
     {{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');
+      <script>
+        function loadGUA() {
+          (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');
+        }
+      </script>
     {{end}}
 
+    <script>
     // 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" }};
     var googleAnalyticsEnabled = {{ (len(analyticsId) > 0) ? "true" : "false" }};
+    var googleAnalyticsTrackingCode = '{{analyticsId}}';
 
     var cookieConsentRequired = {{ isEnabled("frontend_cookie_consent") }};
 
+    function loadGoogleScripts() {
+      if(googleTagManagerEnabled) { 
+        loadGoogleTagManager(); 
+      }
+      if(googleAnalyticsEnabled) {
+        if(googleAnalyticsTrackingCode.startsWith("G")) {
+          loadGA4(); 
+        }
+        else {
+          loadGUA();
+        }
+      }
+    }
+
     document.addEventListener('s72loaded', function(event) {
       if(!cookieConsentRequired || event.detail.app.hasCookieConsent()) {
-        if(googleTagManagerEnabled) { loadGoogleTagManager(); }
-        if(googleAnalyticsEnabled) {  loadGoogleAnalytics(); }
+        loadGoogleScripts();
       }
       else {
         // Listen for an 'accept' of the cookie consent, in which case load google tag manager
         event.detail.app.messagebus.subscribe('cookie-consent-set', function(event) {
-          if(googleTagManagerEnabled) { loadGoogleTagManager(); }
-          if(googleAnalyticsEnabled) {  loadGoogleAnalytics(); }
+          loadGoogleScripts();
         });
       }
     });
-  </script>
+    </script>
   <!-- End Google integration scripts -->
 {{end}}
 

package/site/templates/application/nav/user_logged_in.jet

@@ -31,9 +31,21 @@
             <a class="s72-dropdown-item" href="{{ routeToPath("/subscriptions.html") }}">{{i18n("nav_subscriptions")}}</a>
           </li>
         {{ end }}
-        <li>
-          <a class="s72-dropdown-item" href="{{ routeToPath("/account.html") }}">{{i18n("nav_account")}}</a>
-        </li>
+        {{my_account_link := config("my_account_link")}}
+        {{if my_account_link != "hide"}}
+          {{href := my_account_link == "" ? routeToPath("/account.html") : my_account_link}}
+          <li>
+            <a 
+              class="s72-dropdown-item" 
+              href="{{href}}"
+              {{if my_account_link != ""}}
+                target="_blank"
+              {{end}}
+            >
+              {{i18n("nav_account")}}
+            </a>
+          </li>
+        {{end}}
         <li>
           <s72-sign-out class="s72-dropdown-item sign-out-desktop" >
             <a href="#" class="btn-sign-out btn-sign-out-desktop">{{i18n("nav_signout")}}</a>