Support CYMBAL_BRANDING environment variable

README.md

@@ -133,6 +133,7 @@ gcloud container clusters delete onlineboutique \
 - **Anthos Service Mesh**: ASM requires Workload Identity to be enabled in your GKE cluster. [See the workload identity instructions](docs/workload-identity.md) to configure and deploy the app. Then, use the [service mesh guide](/docs/service-mesh.md).
 - **non-GKE clusters (Minikube, Kind)**: see the [Development Guide](/docs/development-guide.md)
 - **Memorystore**: [See these instructions](/docs/memorystore.md) to replace the in-cluster `redis` database with hosted Google Cloud Memorystore (redis).
+- **Cymbal Shops Branding**: [See these instructions](/docs/cymbal-shops.md)
 
 
 ## Architecture

docs/cymbal-shops.md

@@ -0,0 +1,25 @@
+# Cymbal Shops Branding
+
+By default, when you deploy this sample app, the "Online Boutique" branding (logo and wording) will be used.
+But you may want to use Google Cloud's fictitious company, _Cymbal Shops_, instead.
+
+To use "Cymbal Shops" branding, set the `CYMBAL_BRANDING` environment variable to `"true"` in the the Kubernetes manifest (`.yaml`) for the `frontend` Deployment.
+
+```
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: frontend
+spec:
+  ...
+  template:
+    ...
+    spec:
+      ...
+      containers:
+          ...
+          env:
+            ...
+          - name: CYMBAL_BRANDING
+            value: "true"
+```

kubernetes-manifests/frontend.yaml

@@ -76,6 +76,8 @@ spec:
           #   value: "1"
           # - name: JAEGER_SERVICE_ADDR
           #   value: "jaeger-collector:14268"
+          # - name: CYMBAL_BRANDING
+          #   value: "true"
           resources:
             requests:
               cpu: 100m

src/frontend/handlers.go

@@ -40,7 +40,8 @@ type platformDetails struct {
 }
 
 var (
-	templates = template.Must(template.New("").
+	isCymbalBrand = "true" == strings.ToLower(os.Getenv("CYMBAL_BRANDING"))
+	templates     = template.Must(template.New("").
 			Funcs(template.FuncMap{
 			"renderMoney":        renderMoney,
 			"renderCurrencyLogo": renderCurrencyLogo,
@@ -102,17 +103,18 @@ func (fe *frontendServer) homeHandler(w http.ResponseWriter, r *http.Request) {
 	plat.setPlatformDetails(strings.ToLower(env))
 
 	if err := templates.ExecuteTemplate(w, "home", map[string]interface{}{
-		"session_id":    sessionID(r),
-		"request_id":    r.Context().Value(ctxKeyRequestID{}),
-		"user_currency": currentCurrency(r),
-		"show_currency": true,
-		"currencies":    currencies,
-		"products":      ps,
-		"cart_size":     cartSize(cart),
-		"banner_color":  os.Getenv("BANNER_COLOR"), // illustrates canary deployments
-		"ad":            fe.chooseAd(r.Context(), []string{}, log),
-		"platform_css":  plat.css,
-		"platform_name": plat.provider,
+		"session_id":      sessionID(r),
+		"request_id":      r.Context().Value(ctxKeyRequestID{}),
+		"user_currency":   currentCurrency(r),
+		"show_currency":   true,
+		"currencies":      currencies,
+		"products":        ps,
+		"cart_size":       cartSize(cart),
+		"banner_color":    os.Getenv("BANNER_COLOR"), // illustrates canary deployments
+		"ad":              fe.chooseAd(r.Context(), []string{}, log),
+		"platform_css":    plat.css,
+		"platform_name":   plat.provider,
+		"is_cymbal_brand": isCymbalBrand,
 	}); err != nil {
 		log.Error(err)
 	}
@@ -196,6 +198,7 @@ func (fe *frontendServer) productHandler(w http.ResponseWriter, r *http.Request)
 		"cart_size":       cartSize(cart),
 		"platform_css":    plat.css,
 		"platform_name":   plat.provider,
+		"is_cymbal_brand": isCymbalBrand,
 	}); err != nil {
 		log.Println(err)
 	}
@@ -306,6 +309,7 @@ func (fe *frontendServer) viewCartHandler(w http.ResponseWriter, r *http.Request
 		"expiration_years": []int{year, year + 1, year + 2, year + 3, year + 4},
 		"platform_css":     plat.css,
 		"platform_name":    plat.provider,
+		"is_cymbal_brand":  isCymbalBrand,
 	}); err != nil {
 		log.Println(err)
 	}
@@ -377,6 +381,7 @@ func (fe *frontendServer) placeOrderHandler(w http.ResponseWriter, r *http.Reque
 		"recommendations": recommendations,
 		"platform_css":    plat.css,
 		"platform_name":   plat.provider,
+		"is_cymbal_brand": isCymbalBrand,
 	}); err != nil {
 		log.Println(err)
 	}

src/frontend/static/styles/styles.css

@@ -204,11 +204,14 @@ header .navbar.sub-navbar > .container {
   padding-right: 26px;
 }
 
-header .navbar.sub-navbar .logo {
-  width: 209px;
+header .top-left-logo {
   height: 40px;
 }
 
+header .top-left-logo-cymbal {
+  height: 30px;
+}
+
 header .navbar.sub-navbar .navbar-brand {
   padding: 0;
 }

src/frontend/templates/header.html

@@ -22,7 +22,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Online Boutique</title>
+    <title>
+        {{ if $.is_cymbal_brand }}
+        Cymbal Shops
+        {{ else }}
+        Online Boutique
+        {{ end }}
+    </title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
         crossorigin="anonymous">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -31,7 +37,11 @@
     <link rel="stylesheet" type="text/css" href="/static/styles/styles.css">
     <link rel="stylesheet" type="text/css" href="/static/styles/cart.css">
     <link rel="stylesheet" type="text/css" href="/static/styles/order.css">
+    {{ if $.is_cymbal_brand }}
+    <link rel='shortcut icon' type='image/x-icon' href='/static/favicon-cymbal.ico' />
+    {{ else }}
     <link rel='shortcut icon' type='image/x-icon' href='/static/favicon.ico' />
+    {{ end }}
 </head>
 
 <body>
@@ -44,7 +54,11 @@
         <div class="navbar sub-navbar">
             <div class="container d-flex justify-content-between">
                 <a href="/" class="navbar-brand d-flex align-items-center">
-                    <img src="/static/icons/Hipster_NavLogo.svg" alt="" class="logo" />
+                    {{ if $.is_cymbal_brand }}
+                    <img src="/static/icons/Cymbal_NavLogo.svg" alt="" class="top-left-logo-cymbal" />
+                    {{ else }}
+                    <img src="/static/icons/Hipster_NavLogo.svg" alt="" class="top-left-logo" />
+                    {{ end }}
                 </a>
                 <div class="controls">