1.0.1

Force theme into the app, without having to add component to every page.
Now uses Shopify 'Flash' notices in the EASDK. Has a fall back to
regular flash notices if EASDK is not loaded.

README.md

@@ -2,9 +2,7 @@
 
 [![Latest Stable Version](https://poser.pugx.org/multidimensional/cakephp-seaff/v/stable.svg)](https://packagist.org/packages/multidimensional/cakephp-seaff) [![Total Downloads](https://poser.pugx.org/multidimensional/cakephp-seaff/downloads)](https://packagist.org/packages/multidimensional/cakephp-seaff)
 
-CakePHP Plugin Implementing the Shopify Embedded App Frontend Framework by Microapps.
-
-Based on [SEAFF](https://github.com/microapps/Shopify-Embedded-App-Frontend-Framework) by [Microapps](http://microapps.com).
+CakePHP Plugin Implementing the [Shopify Embedded App Frontend Framework]((https://github.com/microapps/Shopify-Embedded-App-Frontend-Framework)) by [Microapps](http://microapps.com).
 
 ## Installation
 
@@ -32,22 +30,18 @@ Plugin::load('Multidimensional/Seaff');
 
 ## Usage
 
-Add this in your Controller (requires CakePHP 3.1 or newer):
+Add this in your Controller:
 
 ```php
-public function beforeRender(\Cake\Event\Event $event)
+// In a controller
+public function initialize()
 {
-	$this->viewBuilder()->theme('Multidimensional/Seaff');
+    parent::initialize();
+    $this->loadComponent('Multidimensional/Seaff.Seaff]);
 }
 ```
 
-If using a version prior to 3.1, you can set the Theme using the following in your controller.
-
-```php
-public $theme = 'Multidimensional/Seaff';
-```
-
-For more information about Themes, see this [page](http://book.cakephp.org/3.0/en/views/themes.html).
+For more information about Components, see this [page](http://book.cakephp.org/3.0/en/controllers/components.html).
 
 ## Improve CakePHP Performance
 

composer.json

@@ -1,7 +1,7 @@
 {
 	"name": "multidimensional/cakephp-seaff",
 	"description": "Shopify Embedded App Frontend Framework (SEAFF) for CakePHP",
-	"version": "1.0.1-dev",
+	"version": "1.0.1",
 	"type": "cakephp-plugin",
 	"keywords": ["cakephp", "cakephp3", "shopify"],
 	"homepage": "https://github.com/multidimension-al/cakephp-seaff",

src/Controller/AppController.php

@@ -0,0 +1,20 @@
+<?php
+namespace Multidimensional\Seaff\Controller;
+
+use Cake\Event\Event;
+
+use App\Controller\AppController as BaseController;
+
+class AppController extends BaseController
+{
+
+	public function initialize() {
+
+        parent::initialize();
+        $this->loadComponent('Flash');
+
+	}
+
+
+
+}

src/Controller/Component/SeaffComponent.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace Multidimensional\Seaff\Controller\Component;
+
+use Cake\Core\Configure;
+use Cake\Controller\Component;
+use Cake\Event\Event;
+use Cake\Network\Session;
+
+class SeaffComponent extends Component {
+
+	private $controller;
+	private $api_key;
+	private $shop_domain;
+
+	public function initialize(array $config = []) {
+
+		parent::initialize($config);
+		$this->controller = $this->_registry->getController();
+		$this->controller->loadComponent('Flash');
+
+		$this->api_key = ((isset($config['api_key'])) ? $config['api_key'] : Configure::read('Shopify.api_key'));
+		if (!empty($this->api_key)) {
+			$this->shop_domain = ((isset($config['shop_domain'])) ? $config['shop_domain'] : $this->controller->request->session()->read('shopify_shop_domain_'.$this->api_key));
+		}
+	}
+
+	public function beforeRender(Event $event) {
+
+		if (empty($this->shop_domain) && !empty($this->api_key)) {
+			$this->controller->request->session()->read('shopify_shop_domain_'.$this->api_key);
+		}
+
+		$this->controller->viewBuilder()->theme('Multidimensional/Seaff');		
+		$this->controller->set(["shopifyAPIkey" => $this->api_key, "shopifyShopDomain" => $this->shop_domain]);
+
+	}
+
+}

src/Template/Element/Flash/default.ctp

@@ -1,5 +1,8 @@
 <?php
-
+$class = 'message';
+if (!empty($params['class'])) {
+    $class .= ' ' . $params['class'];
+}
 if (!empty($params['class']) && ((is_array($params['class']) && in_array('error', $params['class'])) || (strpos($params['class'], 'error') !== FALSE))) {
     $type = "Error";
 } else {
@@ -9,5 +12,12 @@ if (!isset($params['escape']) || $params['escape'] !== false) {
     $message = h($message);
 }
 ?>
-<script type="text/javascript">ShopifyApp.flash<?= $type ?>("<?= $message ?>");</script>
-
+<?php if ($shopifyAPIkey && $shopifyShopDomain): ?>
+<script type="text/javascript">
+	ShopifyApp.ready(function(){
+		ShopifyApp.flash<?= $type ?>("<?= $message ?>");
+    });
+</script>
+<?php else: ?>
+<div class="<?= h($class) ?>" onclick="this.classList.add('hidden');"><?= $message ?></div>
+<?php endif; ?>

src/Template/Element/Flash/error.ctp

@@ -3,5 +3,12 @@ if (!isset($params['escape']) || $params['escape'] !== false) {
     $message = h($message);
 }
 ?>
-<script type="text/javascript">ShopifyApp.flashError("<?= $message ?>");</script>
-
+<?php if ($shopifyAPIkey && $shopifyShopDomain): ?>
+<script type="text/javascript">
+	ShopifyApp.ready(function(){
+		ShopifyApp.flashError("<?= $message ?>");
+    });
+</script>
+<?php else: ?>
+<div class="message error" onclick="this.classList.add('hidden');"><?= $message ?></div>
+<?php endif; ?>

src/Template/Element/Flash/success.ctp

@@ -3,5 +3,12 @@ if (!isset($params['escape']) || $params['escape'] !== false) {
     $message = h($message);
 }
 ?>
-<script type="text/javascript">ShopifyApp.flashNotice("<?= $message ?>");</script>
-
+<?php if ($shopifyAPIkey && $shopifyShopDomain): ?>
+<script type="text/javascript">
+	ShopifyApp.ready(function(){
+		ShopifyApp.flashNotice("<?= $message ?>");
+    });
+</script>
+<?php else: ?>
+<div class="message success" onclick="this.classList.add('hidden')"><?= $message ?></div>
+<?php endif; ?>

src/Template/Element/shopify_easdk.ctp

@@ -0,0 +1,11 @@
+<?php if ($shopifyAPIkey && $shopifyShopDomain): ?>
+<script src="https://cdn.shopify.com/s/assets/external/app.js?<?= date("YmdH"); ?>"></script>
+<script type="text/javascript">
+ShopifyApp.init({
+	apiKey: '<?= h($shopifyAPIkey); ?>',
+	shopOrigin: 'https://<?= h($shopifyShopDomain); ?>'
+});
+</script>
+<?php else: ?>
+<?= $this->Html->css('flash.css'); ?>
+<?php endif; ?>

src/Template/Layout/default.ctp

@@ -6,16 +6,11 @@
     <?= $this->fetch('meta'); ?>
     <?= $this->Html->css('seaff.min.css'); ?>
     <?= $this->fetch('css'); ?>
-	<script src="https://cdn.shopify.com/s/assets/external/app.js?<?= date("YmdH"); ?>"></script>
-	<script type="text/javascript">
-	ShopifyApp.init({
-		apiKey: '<?= h($shopifyAPIkey); ?>',
-		shopOrigin: 'https://<?= h($shopifyShopDomain); ?>'
-	});
-	</script>
+	<?= $this->element('shopify_easdk'); ?>
     <?= $this->fetch('script'); ?>
 </head>
 <body>
+<?= $this->Flash->render() ?>
 
 <?= $this->fetch('content') ?>
 

webroot/css/flash.css

@@ -0,0 +1,61 @@
+div.message {
+	margin: 0;
+    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+    font-style: normal;
+    text-align: center;
+    cursor: pointer;
+    display: block;
+    font-weight: normal;
+    padding: 0 24px 0 24px;
+    transition: height 300ms ease-out 0s;
+    background-color: #a0d3e8;
+    color: #626262;
+    top: 15px;
+    right: 15px;
+    z-index: 999;
+    overflow: hidden;
+    height: 50px;
+    box-radius: 5px;
+
+	box-sizing: border-box;
+	font-size: 16px;
+	line-height: 40px;
+	text-size-adjust: 100%;
+}
+
+div.message:before {
+    line-height: 0px;
+    font-size: 20px;
+    height: 12px;
+    width: 12px;
+    border-radius: 15px;
+    text-align: center;
+    vertical-align: middle;
+    display: inline-block;
+    position: relative;
+    left: -11px;
+    background-color: #FFF;
+    padding: 12px 14px 12px 10px;
+    content: "i";
+    color: #a0d3e8;
+
+	box-sizing: border-box;
+	font-size: 20px;
+	height: 24px;
+	width: 24px ;
+}
+
+div.message.error {
+    background-color: #C3232D;
+    color: #FFF;
+}
+
+div.message.error:before {
+    padding: 11px 16px 14px 7px;
+    color: #C3232D;
+    content: "x";
+}
+
+div.message.hidden {
+    height: 0;
+}