Refactoring theming

routes/index.js

@@ -58,7 +58,7 @@ router.get('/checkout', async (req, res, next) => {
 });
 
 router.get('/pay', async (req, res, next) => {
-    let config = common.getConfig();
+    const config = common.getConfig();
 
     // if there is no items in the cart then render a failure
     if(!req.session.cart){
@@ -85,7 +85,9 @@ router.get('/pay', async (req, res, next) => {
 });
 
 router.get('/cartPartial', (req, res) => {
-    res.render('partials/cart', {
+    const config = common.getConfig();
+
+    res.render(`${config.themeViews}cart`, {
         pageCloseBtn: common.showCartCloseBtn(req.query.path),
         page: req.query.path,
         layout: false,

views/layouts/layout.hbs

@@ -38,6 +38,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
         <script src="/javascripts/jquery.bootpag.min.js"></script>
         <script src="/javascripts/cssbeautify.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
 		<script src="/javascripts/expressCart{{config.env}}.js"></script>
         <script src="/javascripts/jquery.dotdotdot.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
@@ -61,7 +62,11 @@
         </script>
         {{#if config.googleAnalytics}}{{{config.googleAnalytics}}}{{/if}}
         {{#if config.customCss}}<style>{{{config.customCss}}}</style>{{/if}}
+        {{#if admin}}
+        <link rel="stylesheet" href="/stylesheets/admin{{config.env}}.css">
+        {{else}}
         {{#if config.theme}}<link rel="stylesheet" href="/{{config.theme}}/style.css">{{/if}}
+        {{/if}}
         <!-- SEO data -->
 	</head>
     {{#if admin}}
@@ -117,12 +122,8 @@
         {{#unless admin}}
             {{#ifCond page '!=' 'checkout'}}
             {{#ifCond page '!=' 'pay'}}
-            <div class="container-fluid">
-                <div class="row">
                 <div id="cart" class="col-md-12 pushy pushy-right">
-                        {{> partials/cart}}
+                    {{> (getTheme 'cart')}}
-                    </div>
-                </div>
                 </div>
             {{/ifCond}}
             {{/ifCond}}
@@ -130,7 +131,7 @@
 		<div class="container-fluid content-body" id="container">
             <div class="row">
                 {{#if admin}}
-                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                <div class="col-xs-12 col s12">
                     {{{body}}}
                 </div>
                 {{else}}
@@ -141,6 +142,7 @@
 		<input type="hidden" id="input_notify_message" value="{{message}}">
 		<input type="hidden" id="input_notify_messageType" value="{{messageType}}">
         <input type="hidden" id="cartCheckout" value="{{checkout}}">
+        <input type="hidden" id="cartTheme" value="{{config.theme}}">
 		<div id="notify_message"></div>
 		{{#if showFooter}}
             <footer class="footer">

views/partials/payments/authorizenet.hbs

@@ -44,12 +44,12 @@
         });
     }
 </script>
-<div class="col-xs-12 col-md-12 text-center">
+<div class="col-sm-12 col s12 text-center">
     <form id="paymentForm" method="POST">
         <input type="hidden" name="dataValue" id="dataValue" />
         <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
         <button type="button"
-            class="AcceptUI btn btn-success"
+            class="AcceptUI btn btn-success waves-effect waves-light blue darken-3"
             data-billingAddressOptions='{"show":false, "required":false}'
             data-apiLoginID="{{paymentConfig.loginId}}"
             data-clientKey="{{paymentConfig.clientKey}}"

views/partials/payments/paypal.hbs

@@ -1,3 +1,3 @@
-<div class="paypal_button col-xs-12 col-md-12 text-center">
+<div class="paypal_button col-sm-12 col s12 text-center">
-    <button id="checkout_paypal" class="btn btn-success" type="submit"><i class="fa fa-cc-paypal fa-lg" aria-hidden="true"></i> Pay with PayPal <i class="fa fa-cc-paypal fa-lg" aria-hidden="true"></i></button>
+    <button id="checkout_paypal" class="btn btn-success waves-effect waves-light blue darken-3" type="submit"><i class="fa fa-cc-paypal fa-lg" aria-hidden="true"></i> Pay with PayPal <i class="fa fa-cc-paypal fa-lg" aria-hidden="true"></i></button>
 </div>

views/partials/payments/stripe.hbs

@@ -1,10 +1,10 @@
-<div class="col-xs-12 col-md-12 text-center">
+<div class="col-xs-12 col s12 text-center">
     <form method="POST" id="payment-form">
         <button
             type="submit"
             id="stripeButton"
             value="Process payment"
-            class="btn btn-success"
+            class="btn btn-success waves-effect waves-light blue darken-3"
             type="submit"
             data-key="{{paymentConfig.publicKey}}"
             data-amount="{{amountNoDecimal session.totalCartAmount}}"

views/themes/Cloth/cart.hbs

@@ -1,8 +1,8 @@
 <div class="row">
-    <div class="col-xs-12 col-md-12">
+    <div class="col-xs-12 col s12">
         {{#if pageCloseBtn}}
         <div class="row {{checkout}}">
-            <div class="col-lg-12 text-right">
+            <div class="col-lg-12 col l12 text-right">
                 <button class="pushy-link btn btn-primary" type="button">X</button>
             </div>
         </div>
@@ -13,12 +13,12 @@
                 <div class="container-fluid">
                     {{#each session.cart}}
                     <div class="row cart-row">
-                        <div class="col-xs-4 col-md-2">
+                        <div class="col-xs-4 col-md-2 col s4 m2">
                             {{#if productImage}}
                             <img class="img-responsive" src="{{this.productImage}}" alt="{{this.title}} product image"> {{else}}
                             <img class="img-responsive" src="/uploads/placeholder.png" alt="{{this.title}} product image"> {{/if}}
                         </div>
-                        <div class="cart-item-row text-left col-xs-12 col-md-7">
+                        <div class="cart-item-row text-left col-xs-12 col-md-7 col s12 m7">
                             <p>
                                 <a class="cart-link" href="/product/{{this.link}}">{{this.title}}</a>
                             </p>
@@ -27,7 +27,7 @@
                             </p>
                             <p>
                                 <div class="form-group">
-                                    <div class="col-lg-5 no-pad-left">
+                                    <div class="col-lg-5 col l5 no-pad-left">
                                         <div class="input-group">
                                             <span class="input-group-btn">
                                                 <button class="btn btn-sm btn-primary btn-qty-minus" type="button">-</button>
@@ -42,7 +42,7 @@
                                 </div>
                             </p>
                         </div>
-                        <div class="col-xs-12 col-lg-4 cart-item-row text-right no-pad-right">
+                        <div class="col-xs-12 col-lg-4 col s12 l4 cart-item-row text-right no-pad-right">
                             <strong>{{currencySymbol ../config.currencySymbol}}{{formatAmount this.totalItemPrice}}</strong>
                         </div>
                     </div>
@@ -51,7 +51,7 @@
                 <div class="container-fluid">
                     {{#if session.cart}}
                     <div class="row">
-                        <div class="cart-contents-shipping col-md-12 no-pad-right">
+                        <div class="cart-contents-shipping col-md-12 col m12 no-pad-right">
                             {{#ifCond session.shippingCostApplied '===' true}}
                             <div class="text-right">
                                 Shipping:
@@ -81,11 +81,11 @@
         </div>
         <div class="row">
             {{#if session.cart}}
-            <div class="col-xs-6 col-lg-6 text-left">
+            <div class="col-xs-6 col s6 text-left align-right">
                 <button class="btn btn-danger" id="empty-cart" type="button">Empty cart</button>
             </div>
             {{#ifCond page '!=' 'pay'}}
-            <div class="text-right col-xs-6 col-md-6">
+            <div class="text-right align-right col-xs-6 col s6">
                 {{#ifCond page '==' 'checkout'}}
                 <a href="/pay" class="btn btn-default">Pay now</a>
                 {{else}}

views/themes/Cloth/checkout.hbs

@@ -1,5 +1,5 @@
 <div class="col-xl-8 col-xl-offset-2 col-xs-12">
     <div id="cart">
-        {{> partials/cart}}
+        {{> (getTheme 'cart')}}
     </div>
 </div>

views/themes/Cloth/pay.hbs

@@ -58,7 +58,7 @@
             </div>
         </div>
         <div id="cart" class="col-md-7">
-            {{> partials/cart}}
+            {{> (getTheme 'cart')}}
         </div>
     </div>
 </div>