ECOM-880 added mobile app links to footer enabled by feature flag ENABLE_FOOTER_MOBILE_APP_LINKS

Allow configuration to override links to mobile app stores

lms/envs/aws.py

@@ -210,6 +210,9 @@ THEME_NAME = ENV_TOKENS.get('THEME_NAME', None)
 # Marketing link overrides
 MKTG_URL_LINK_MAP.update(ENV_TOKENS.get('MKTG_URL_LINK_MAP', {}))
 
+# Mobile store URL overrides
+MOBILE_STORE_URLS = ENV_TOKENS.get('MOBILE_STORE_URLS', MOBILE_STORE_URLS)
+
 # Timezone overrides
 TIME_ZONE = ENV_TOKENS.get('TIME_ZONE', TIME_ZONE)
 

lms/envs/common.py

@@ -308,6 +308,9 @@ FEATURES = {
 
     # Separate the verification flow from the payment flow
     'SEPARATE_VERIFICATION_FROM_PAYMENT': False,
+
+    # Show the mobile app links in the footer
+    'ENABLE_FOOTER_MOBILE_APP_LINKS': False,
 }
 
 # Ignore static asset files on import which match this pattern
@@ -1593,6 +1596,13 @@ MKTG_URL_LINK_MAP = {
     'WHAT_IS_VERIFIED_CERT': 'verified-certificate',
 }
 
+################# Mobile URLS ##########################
+
+# These are URLs to the app store for mobile.
+MOBILE_STORE_URLS = {
+    'apple': '#',
+    'google': '#'
+}
 
 ################# Student Verification #################
 VERIFY_STUDENT = {

lms/static/sass/shared/_footer.scss

@@ -429,4 +429,32 @@ $edx-footer-bg-color: rgb(252,252,252);
       }
     }
   }
+
+  // App links
+  // --------------------
+  .footer-mobile-apps {
+    padding-top: 20px;
+
+    .mobile-app-wrapper {
+      margin: 0 0 10px 0;
+    }
+
+    a {
+      display: inline-block;
+
+      &:hover {
+        border: none;
+      }
+    }
+
+    .app-store {
+      height: auto;
+      width: 129px;
+    }
+
+    .google-play {
+      height: auto;
+      width: 129px;
+    }
+  }
 }

lms/templates/footer-edx-new.html

@@ -94,6 +94,22 @@
           <span class="copy">${_("Google+")}</span>
         </a>
       </div>
+
+      % if settings.FEATURES.get('ENABLE_FOOTER_MOBILE_APP_LINKS'):
+      <div class="footer-mobile-apps">
+        <h2 class="footer-nav-title">${_("Mobile Apps")}</h2>
+        <div class="mobile-app-wrapper">
+          <a href="${settings.MOBILE_STORE_URLS.get('apple', '#')}">
+            <img class="app-store" alt="${_("Apple app on Apple Store")}" src="${static.url('images/app/app_store_badge_135x40.svg')}">
+          </a>
+        </div>
+        <div class="mobile-app-wrapper">
+          <a href="${settings.MOBILE_STORE_URLS.get('google', '#')}">
+            <img class="google-play" alt="${_("Android app on Google Play")}" src="${static.url('images/app/google_play_badge_45.png')}">
+          </a>
+        </div>
+      </div>
+      % endif
     </div>
   </footer>
 </div>