Refactoring theming

master
Mark Moffat 2018-02-13 21:21:22 +01:00
parent 278cf5091a
commit de5741750a
8 changed files with 30 additions and 26 deletions

View File

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

View File

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

View File

@ -44,12 +44,12 @@
}); });
} }
</script> </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"> <form id="paymentForm" method="POST">
<input type="hidden" name="dataValue" id="dataValue" /> <input type="hidden" name="dataValue" id="dataValue" />
<input type="hidden" name="dataDescriptor" id="dataDescriptor" /> <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
<button type="button" <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-billingAddressOptions='{"show":false, "required":false}'
data-apiLoginID="{{paymentConfig.loginId}}" data-apiLoginID="{{paymentConfig.loginId}}"
data-clientKey="{{paymentConfig.clientKey}}" data-clientKey="{{paymentConfig.clientKey}}"

View File

@ -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> </div>

View File

@ -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"> <form method="POST" id="payment-form">
<button <button
type="submit" type="submit"
id="stripeButton" id="stripeButton"
value="Process payment" value="Process payment"
class="btn btn-success" class="btn btn-success waves-effect waves-light blue darken-3"
type="submit" type="submit"
data-key="{{paymentConfig.publicKey}}" data-key="{{paymentConfig.publicKey}}"
data-amount="{{amountNoDecimal session.totalCartAmount}}" data-amount="{{amountNoDecimal session.totalCartAmount}}"

View File

@ -1,8 +1,8 @@
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-12"> <div class="col-xs-12 col s12">
{{#if pageCloseBtn}} {{#if pageCloseBtn}}
<div class="row {{checkout}}"> <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> <button class="pushy-link btn btn-primary" type="button">X</button>
</div> </div>
</div> </div>
@ -13,12 +13,12 @@
<div class="container-fluid"> <div class="container-fluid">
{{#each session.cart}} {{#each session.cart}}
<div class="row cart-row"> <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}} {{#if productImage}}
<img class="img-responsive" src="{{this.productImage}}" alt="{{this.title}} product image"> {{else}} <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}} <img class="img-responsive" src="/uploads/placeholder.png" alt="{{this.title}} product image"> {{/if}}
</div> </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> <p>
<a class="cart-link" href="/product/{{this.link}}">{{this.title}}</a> <a class="cart-link" href="/product/{{this.link}}">{{this.title}}</a>
</p> </p>
@ -27,7 +27,7 @@
</p> </p>
<p> <p>
<div class="form-group"> <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"> <div class="input-group">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-sm btn-primary btn-qty-minus" type="button">-</button> <button class="btn btn-sm btn-primary btn-qty-minus" type="button">-</button>
@ -42,7 +42,7 @@
</div> </div>
</p> </p>
</div> </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> <strong>{{currencySymbol ../config.currencySymbol}}{{formatAmount this.totalItemPrice}}</strong>
</div> </div>
</div> </div>
@ -51,7 +51,7 @@
<div class="container-fluid"> <div class="container-fluid">
{{#if session.cart}} {{#if session.cart}}
<div class="row"> <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}} {{#ifCond session.shippingCostApplied '===' true}}
<div class="text-right"> <div class="text-right">
Shipping: Shipping:
@ -81,11 +81,11 @@
</div> </div>
<div class="row"> <div class="row">
{{#if session.cart}} {{#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> <button class="btn btn-danger" id="empty-cart" type="button">Empty cart</button>
</div> </div>
{{#ifCond page '!=' 'pay'}} {{#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'}} {{#ifCond page '==' 'checkout'}}
<a href="/pay" class="btn btn-default">Pay now</a> <a href="/pay" class="btn btn-default">Pay now</a>
{{else}} {{else}}

View File

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

View File

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