Просмотр исходного кода

Adding simple order confirmation email

Richard Knight лет назад: 6
Родитель
Сommit
6f923a1c0b

+ 2 - 2
config/config.yml.dist

@@ -9,8 +9,8 @@ sq_sandbox_app_id: sandbox-sq0idp-E62fjwNzSQG08kHHzOhc7w
 sq_sandbox_token: sandbox-sq0atb-pDGW0n945W5jLLIA4eUhpQ
 sq_sandbox_location_id: CBASEC73OwdNXqWhk6o3SKFwsvUgAQ
 
-testmode: true
-
+bookings_email: bookings@thegrandexpedition.co.uk
 
+testmode: true
 
 

+ 28 - 1
src/SquarepayExtension.php

@@ -277,8 +277,35 @@ class SquarepayExtension extends SimpleExtension
 			return new RedirectResponse('/order-problem');
 		}
 
-        $app['session']->set('basket', []);
+		$this->sendConfirmationEmail($app, $name, $email, $booker, $date, $basket, $basketTotal);
+		$app['session']->set('basket', []);
         return new RedirectResponse('/order-complete');
 	}
 
+	private function sendConfirmationEmail($app, $name, $email, $booker, $date, $basket, $basketTotal)
+	{
+		$body = $app['twig']->render('@Squarefront/email-confirmation.twig', [
+			'name'		=> $name,
+			'booker'	=> $booker,
+			'date'		=> $date,
+			'basket'	=> $basket,
+			'total'		=> $basketTotal
+		]);
+
+		$config = $this->getConfig();
+		$bookingsEmail = $config['bookings_email'];
+		$message = \Swift_Message::newInstance('The Grand Expedition Order Confirmation')
+			->setFrom($bookingsEmail)
+			->setTo($email, $name)
+			->setBcc([$bookingsEmail, 'tge@apewave.com'])
+			->setBody($body, 'text/html');
+		if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
+			$message->setReplyTo($email, $name);
+		}
+		$sent = $app['mailer']->send($message);
+		if (!$sent) {
+			throw new \Exception("Message wasn't actually sent.");
+		}
+	}
+
 }

+ 1 - 1
templates/frontend/cardentryform.twig

@@ -43,7 +43,7 @@ var locationId = '{{ testmode ? sq_sandbox_location_id : sq_location_id }}';
 	</div>
 	<div class="cc-row">
 		<label></label>
-		<a class="ecom-button" onclick="requestCardNonce()">Complete Order</a>
+		<a class="ecom-button" onclick="requestCardNonce(event)">Complete Order</a>
 	</div>
 	</form>
 </div>

+ 378 - 0
templates/frontend/email-confirmation.twig

@@ -0,0 +1,378 @@
+<!doctype html>
+<html>
+  <head>
+	<meta name="viewport" content="width=device-width" />
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<title>The Grand Expedition Order Confirmation</title>
+	<style>
+	  /* -------------------------------------
+		  GLOBAL RESETS
+	  ------------------------------------- */
+	  
+	  /*All the styling goes here*/
+	  
+	  img {
+		border: none;
+		-ms-interpolation-mode: bicubic;
+		max-width: 100%; 
+	  }
+
+	  body {
+		background-color: #f6f6f6;
+		font-family: sans-serif;
+		-webkit-font-smoothing: antialiased;
+		font-size: 14px;
+		line-height: 1.4;
+		margin: 0;
+		padding: 0;
+		-ms-text-size-adjust: 100%;
+		-webkit-text-size-adjust: 100%; 
+	  }
+
+	  table {
+		border-collapse: separate;
+		mso-table-lspace: 0pt;
+		mso-table-rspace: 0pt;
+		width: 100%; }
+		table td {
+		  font-family: sans-serif;
+		  font-size: 14px;
+		  vertical-align: top; 
+	  }
+
+	  /* -------------------------------------
+		  BODY & CONTAINER
+	  ------------------------------------- */
+
+	  .body {
+		background-color: #f6f6f6;
+		width: 100%; 
+	  }
+
+	  /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
+	  .container {
+		display: block;
+		Margin: 0 auto !important;
+		/* makes it centered */
+		max-width: 580px;
+		padding: 10px;
+		width: 580px; 
+	  }
+
+	  /* This should also be a block element, so that it will fill 100% of the .container */
+	  .content {
+		box-sizing: border-box;
+		display: block;
+		Margin: 0 auto;
+		max-width: 580px;
+		padding: 10px; 
+	  }
+
+	  /* -------------------------------------
+		  HEADER, FOOTER, MAIN
+	  ------------------------------------- */
+	  .main {
+		background: #0f193c;
+		border-radius: 3px;
+		width: 100%; 
+	  }
+
+	  .wrapper {
+		box-sizing: border-box;
+		padding: 40px; 
+	  }
+
+	  .content-block {
+		padding-bottom: 10px;
+		padding-top: 10px;
+	  }
+
+	  .footer {
+		background: #0f193c;
+		clear: both;
+		Margin-top: 10px;
+		text-align: center;
+		width: 100%; 
+	  }
+		.footer td,
+		.footer p,
+		.footer span,
+		.footer a {
+		  color: #999999;
+		  font-size: 12px;
+		  text-align: center; 
+	  }
+
+	  /* -------------------------------------
+		  TYPOGRAPHY
+	  ------------------------------------- */
+	  h1,
+	  h2,
+	  h3,
+	  h4 {
+		color: #eeeeee;
+		font-family: sans-serif;
+		font-weight: 400;
+		line-height: 1.4;
+		margin: 0;
+		margin-bottom: 30px; 
+	  }
+
+	  h1 {
+		font-size: 35px;
+		font-weight: 300;
+		text-align: center;
+		text-transform: capitalize; 
+	  }
+
+	  p,
+	  ul,
+	  ol {
+		color: #eeeeee;
+		font-family: sans-serif;
+		font-size: 14px;
+		font-weight: normal;
+		margin: 0;
+		margin-bottom: 15px; 
+	  }
+		p li,
+		ul li,
+		ol li {
+		  list-style-position: inside;
+		  margin-left: 5px; 
+	  }
+
+	  a {
+		color: #3498db;
+		text-decoration: underline; 
+	  }
+
+	  td {
+		 color: #eeeeee;
+	  }
+
+	  /* -------------------------------------
+		  OTHER STYLES THAT MIGHT BE USEFUL
+	  ------------------------------------- */
+	  .last {
+		margin-bottom: 0; 
+	  }
+
+	  .first {
+		margin-top: 0; 
+	  }
+
+	  .align-center {
+		text-align: center; 
+	  }
+
+	  .align-right {
+		text-align: right; 
+	  }
+
+	  .align-left {
+		text-align: left; 
+	  }
+
+	  .clear {
+		clear: both; 
+	  }
+
+	  .mt0 {
+		margin-top: 0; 
+	  }
+
+	  .mb0 {
+		margin-bottom: 0; 
+	  }
+
+	  .preheader {
+		color: transparent;
+		display: none;
+		height: 0;
+		max-height: 0;
+		max-width: 0;
+		opacity: 0;
+		overflow: hidden;
+		mso-hide: all;
+		visibility: hidden;
+		width: 0; 
+	  }
+
+	  .powered-by a {
+		text-decoration: none; 
+	  }
+
+	  hr {
+		border: 0;
+		border-bottom: 1px solid #f6f6f6;
+		Margin: 20px 0; 
+	  }
+
+	  /* -------------------------------------
+		  RESPONSIVE AND MOBILE FRIENDLY STYLES
+	  ------------------------------------- */
+	  @media only screen and (max-width: 620px) {
+		table[class=body] h1 {
+		  font-size: 28px !important;
+		  margin-bottom: 10px !important; 
+		}
+		table[class=body] p,
+		table[class=body] ul,
+		table[class=body] ol,
+		table[class=body] td,
+		table[class=body] span,
+		table[class=body] a {
+		  font-size: 16px !important; 
+		}
+		table[class=body] .wrapper,
+		table[class=body] .article {
+		  padding: 10px !important; 
+		}
+		table[class=body] .content {
+		  padding: 0 !important; 
+		}
+		table[class=body] .container {
+		  padding: 0 !important;
+		  width: 100% !important; 
+		}
+		table[class=body] .main {
+		  border-left-width: 0 !important;
+		  border-radius: 0 !important;
+		  border-right-width: 0 !important; 
+		}
+		table[class=body] .btn table {
+		  width: 100% !important; 
+		}
+		table[class=body] .btn a {
+		  width: 100% !important; 
+		}
+		table[class=body] .img-responsive {
+		  height: auto !important;
+		  max-width: 100% !important;
+		  width: auto !important; 
+		}
+	  }
+
+	  /* -------------------------------------
+		  PRESERVE THESE STYLES IN THE HEAD
+	  ------------------------------------- */
+	  @media all {
+		.ExternalClass {
+		  width: 100%; 
+		}
+		.ExternalClass,
+		.ExternalClass p,
+		.ExternalClass span,
+		.ExternalClass font,
+		.ExternalClass td,
+		.ExternalClass div {
+		  line-height: 100%; 
+		}
+		.apple-link a {
+		  color: inherit !important;
+		  font-family: inherit !important;
+		  font-size: inherit !important;
+		  font-weight: inherit !important;
+		  line-height: inherit !important;
+		  text-decoration: none !important; 
+		}
+		.btn-primary table td:hover {
+		  background-color: #34495e !important; 
+		}
+		.btn-primary a:hover {
+		  background-color: #34495e !important;
+		  border-color: #34495e !important; 
+		} 
+	  }
+
+	</style>
+  </head>
+  <body class="">
+	<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
+		<tr>
+			<td>&nbsp;</td>
+			<td class="container">
+				<div class="content">
+
+					<!-- START CENTERED WHITE CONTAINER -->
+					<span class="preheader">The Grand Expedition Order Confirmation</span>
+					<table role="presentation" class="main">
+						<!-- START MAIN CONTENT AREA -->
+						<tr>
+							<td class="wrapper">
+								<table role="presentation" border="0" cellpadding="0" cellspacing="0">
+									<tr>
+										<td align="center">
+											<img src="https://www.thegrandexpedition.co.uk/theme/grandexpedition/assets/images/sprites/balloon.png" width="15%" style="float: right; margin-right: 30px">
+											<img src="https://www.thegrandexpedition.co.uk/theme/grandexpedition/assets/images/sprites/shining-star-2.png" width="25%" style="float: left">
+										</rd>
+									</tr>
+									<tr>
+										<td align="center">
+											<img src="https://www.thegrandexpedition.co.uk/theme/grandexpedition/assets/images/type/type-gingerline.png" width="35%" style="margin-bottom: 10px"><br>
+											<img src="https://www.thegrandexpedition.co.uk/theme/grandexpedition/assets/images/type/type-the-grand-expedition.png" width="100%">
+											<br>
+											<br>
+											<br>
+										</td>
+									</tr>
+									<tr>
+										<td>
+
+											<br>
+
+											<p>Dear {{ name }},</p>
+											<p>Thank you for your order.</p>
+											<p>We look forward to seeing you on The Grand Expedition.</p>
+											
+											<br>
+
+											<table role="presentation" border="0" cellpadding="3" cellspacing="1" bgcolor="#777777">
+												<tbody>
+													{% for line in basket %}
+														<tr bgcolor="#0f193c">
+															<td color="#eeeeee" align="left">{{ line.quantity }} x {{ line.name }}</td>
+															<td color="#eeeeee" align="right">£{{ (line.total / 100) | number_format(2, '.', ',') }}</td>
+														</tr>
+													{% endfor %}
+													<tr bgcolor="#0f193c">
+														<td colspan="2" color="#eeeeee" align="right"><b>£{{ (total / 100) | number_format(2, '.', ',') }}</b></td>
+													</tr>
+												</tbody>
+											</table>
+
+											<br>
+
+											<p>
+											Booked by {{ booker }} for {{ date | date("F jS Y") }}.
+											</p>
+
+										</td>
+									</tr>
+								</table>
+							</td>
+						</tr>
+						<!-- END MAIN CONTENT AREA -->
+					</table>
+
+					<!-- START FOOTER -->
+					<div class="footer">
+						<table role="presentation" border="0" cellpadding="0" cellspacing="0">
+							<tr>
+								<td class="content-block">
+									<span class="apple-link">Gingerline, IBEX House, 162-164 Arthur Road, Wimbledon, London, SW19 8AQ</span>
+								</td>
+							</tr>
+						</table>
+					</div>
+					<!-- END FOOTER -->
+
+		  	<!-- END CENTERED WHITE CONTAINER -->
+			</div>
+		</td>
+		<td>&nbsp;</td>
+		</tr>
+	</table>
+</body>
+</html>

+ 0 - 3
web/sq-paymentform.js

@@ -49,9 +49,6 @@ function init() {
 		// SqPaymentForm callback functions
 		callbacks: {
 	  
-			methodsSupported: function (methods) {
-			},
-
 			unsupportedBrowserDetected: function() {
 				alert('UNSUPPORTED BROWSER');
 			},