├── view
    └── frontend
    │   ├── web
    │       └── img
    │       │   ├── ic_menu_white_1x_web_24dp.png
    │       │   └── ic_menu_white_2x_web_24dp.png
    │   └── templates
    │       └── index
    │           └── index.phtml
├── etc
    ├── module.xml
    └── frontend
    │   └── routes.xml
├── NOTICE
├── composer.json
├── registration.php
├── Controller
    └── Index
    │   └── Index.php
├── README.md
├── LICENSE
└── Block
    └── AmpProductBlock.php


/view/frontend/web/img/ic_menu_white_1x_web_24dp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wompmobile/Magento-Module-AmpProductExample/HEAD/view/frontend/web/img/ic_menu_white_1x_web_24dp.png


--------------------------------------------------------------------------------
/view/frontend/web/img/ic_menu_white_2x_web_24dp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wompmobile/Magento-Module-AmpProductExample/HEAD/view/frontend/web/img/ic_menu_white_2x_web_24dp.png


--------------------------------------------------------------------------------
/etc/module.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0"?>
2 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
3 |   <module name="WompMobile_AmpProductExample" setup_version="0.1.0"/>
4 | </config>
5 | 


--------------------------------------------------------------------------------
/NOTICE:
--------------------------------------------------------------------------------
1 | AMP Product Example Module for Magento 2.x
2 | Copyright 2017 WompMobile, Inc.
3 | 
4 | This product includes software developed at
5 | WompMobile, Inc. (http://www.wompmobile.com).
6 | 
7 | This software contains code derived from
8 | Magento Open Source (https://magento.com/products/open-source).
9 | 


--------------------------------------------------------------------------------
/etc/frontend/routes.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0"?>
2 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
3 |   <router id="standard">
4 |     <route id="amp" frontName="amp">
5 |       <module name="WompMobile_AmpProductExample" />
6 |     </route>
7 |   </router>
8 | </config>
9 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "wompmobile/module-amp-product-example",
 3 |     "description": "AMP Product Example Module for Magento 2.x",
 4 |     "type": "magento2-module",
 5 |     "version": "1.0",
 6 |     "license": [
 7 |         "Apache-2.0"
 8 |     ],
 9 |     "require": {
10 |         "php": ">=5.2.0"
11 |     },
12 |     "autoload": {
13 |         "files": [
14 |             "registration.php"
15 |         ],
16 |         "psr-4": {
17 |             "WompMobile\\AmpProductExample\\": ""
18 |         }
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/registration.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright 2017 WompMobile, Inc.
 4 |  *
 5 |  * Licensed under the Apache License, Version 2.0 (the "License");
 6 |  * you may not use this file except in compliance with the License.
 7 |  * You may obtain a copy of the License at
 8 |  *
 9 |  *   http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | 
18 | \Magento\Framework\Component\ComponentRegistrar::register(
19 |     \Magento\Framework\Component\ComponentRegistrar::MODULE,
20 |     'WompMobile_AmpProductExample',
21 |     __DIR__
22 | );
23 | 


--------------------------------------------------------------------------------
/Controller/Index/Index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright 2017 WompMobile, Inc.
 4 |  *
 5 |  * Licensed under the Apache License, Version 2.0 (the "License");
 6 |  * you may not use this file except in compliance with the License.
 7 |  * You may obtain a copy of the License at
 8 |  *
 9 |  *   http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | 
18 | namespace WompMobile\AmpProductExample\Controller\Index;
19 | 
20 | class Index extends \Magento\Framework\App\Action\Action
21 | {
22 |     protected $request;
23 |     protected $rawResultFactory;
24 | 
25 |     /**
26 |      * Constructor.
27 |      * 
28 |      * @param \Magento\Framework\App\Action\Context $context
29 |      * @param \Magento\Framework\App\Request\Http $request
30 |      * @param \Magento\Framework\Controller\Result\RawFactory $rawResultFactory,
31 |      */
32 |     public function __construct(
33 |         \Magento\Framework\App\Action\Context $context,
34 |         \Magento\Framework\App\Request\Http $request,
35 |         \Magento\Framework\Controller\Result\RawFactory $rawResultFactory
36 |     )
37 |     {
38 |         $this->rawResultFactory = $rawResultFactory;
39 |         $this->request = $request;
40 |         parent::__construct($context);
41 |     }
42 | 
43 |     /**
44 |      * Execute view action
45 |      * 
46 |      * @return \Magento\Framework\Controller\ResultInterface
47 |      */
48 |     public function execute()
49 |     {
50 |         /** @var \Magento\Framework\View\Layout $layout */
51 |         $layout = $this->_view->getLayout();
52 | 
53 |         /** @var \Foo\Bar\Block\Popin\Content $block */
54 |         $block = $layout->createBlock(\WompMobile\AmpProductExample\Block\AmpProductBlock::class);
55 |         $block->getProductParam();
56 |         $block->setTemplate('WompMobile_AmpProductExample::index/index.phtml');
57 | 
58 |         $result = $this->rawResultFactory->create();
59 |         $result->setHeader('Content-Type', 'text/html');
60 |         $result->setContents($block->toHtml());
61 |         return $result;
62 |     }
63 | }
64 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AMP Product Example Module for Magento 2.x
 2 | 
 3 | ## Synopsis
 4 | 
 5 | This Magento 2 module provides a template to output a product page in valid [AMP](https://www.ampproject.org) code. This module is not meant to be comprehensive for all Magento websites, but rather to demonstrate a proof-of-concept. This module was developed by [WompMobile](https://www.wompmobile.com).
 6 | 
 7 | ## Motivation
 8 | 
 9 | To demonstrate...
10 | 
11 | 1. how to create a module in Magento 2.x that loads a custom page template.
12 | 2. how to write a simple AMP page.
13 | 3. how to populate the template with basic product information.
14 | 
15 | ## Installation
16 | 
17 | ### Option 1: Using composer
18 | 
19 | 1. Update `composer.json` at the root of your Magento 2.x installation directory:
20 | 
21 |     a. Add the following to the `repositories` array:
22 | 
23 |         {
24 |             "type": "vcs",
25 |             "url":  "git@github.com:wompmobile/Magento-Module-AmpProductExample.git"
26 |         }
27 | 
28 |     b. Add the following to the `require` object:
29 | 
30 |         "wompmobile/module-amp-product-example": "dev-master"
31 | 
32 | 1. Fetch the module:
33 | 
34 |         composer update wompmobile/module-amp-product-example
35 | 
36 | 1. Register the module:
37 | 
38 |         magento setup:upgrade
39 | 
40 | 1. Verify the module is installed:
41 | 
42 |         magento module:status
43 | 
44 |     If installation was successful, `WompMobile_AmpProductExample` will appear under the `List of enabled modules`.
45 | 
46 | ### Option 2: Manual installation
47 | 
48 | 1. Clone [github.com/wompmobile/Magento-Module-AmpProductExample](https://github.com/wompmobile/Magento-Module-AmpProductExample) into `<magento_install_dir>/app/code/wompmobile/module-amp-product-example`, where `<magento_install_dir>` should be replaced with the path to your Magento 2.x installation directory.
49 | 
50 | 1. Register the module:
51 | 
52 |         magento setup:upgrade
53 | 
54 | 1. Verify the module is installed:
55 | 
56 |         magento module:status
57 | 
58 |     If installation was successful, `WompMobile_AmpProductExample` will appear under the `List of enabled modules`.
59 | 
60 | ## Usage
61 | 
62 | Load a product AMP page by visiting `<your-domain>/amp/?sku=<product-sku>` where `<your-domain>` should be replaced with the domain of your website and `<product-sku>` should be replaced with a valid product SKU from your catalog.
63 | 
64 | ## Tests
65 | 
66 | This module doesn't contain test units.
67 | 
68 | ## Contributors
69 | 
70 | [WompMobile](https://www.wompmobile.com)
71 | 
72 | ## Acknowledgments
73 | 
74 | Thanks to Alan Kent for discussions about this module.
75 | 
76 | ## License
77 | 
78 | Copyright 2017 WompMobile, Inc.  
79 | [Apache License Version 2.0](LICENSE)
80 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | 
  2 |                                  Apache License
  3 |                            Version 2.0, January 2004
  4 |                         http://www.apache.org/licenses/
  5 | 
  6 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  7 | 
  8 |    1. Definitions.
  9 | 
 10 |       "License" shall mean the terms and conditions for use, reproduction,
 11 |       and distribution as defined by Sections 1 through 9 of this document.
 12 | 
 13 |       "Licensor" shall mean the copyright owner or entity authorized by
 14 |       the copyright owner that is granting the License.
 15 | 
 16 |       "Legal Entity" shall mean the union of the acting entity and all
 17 |       other entities that control, are controlled by, or are under common
 18 |       control with that entity. For the purposes of this definition,
 19 |       "control" means (i) the power, direct or indirect, to cause the
 20 |       direction or management of such entity, whether by contract or
 21 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 22 |       outstanding shares, or (iii) beneficial ownership of such entity.
 23 | 
 24 |       "You" (or "Your") shall mean an individual or Legal Entity
 25 |       exercising permissions granted by this License.
 26 | 
 27 |       "Source" form shall mean the preferred form for making modifications,
 28 |       including but not limited to software source code, documentation
 29 |       source, and configuration files.
 30 | 
 31 |       "Object" form shall mean any form resulting from mechanical
 32 |       transformation or translation of a Source form, including but
 33 |       not limited to compiled object code, generated documentation,
 34 |       and conversions to other media types.
 35 | 
 36 |       "Work" shall mean the work of authorship, whether in Source or
 37 |       Object form, made available under the License, as indicated by a
 38 |       copyright notice that is included in or attached to the work
 39 |       (an example is provided in the Appendix below).
 40 | 
 41 |       "Derivative Works" shall mean any work, whether in Source or Object
 42 |       form, that is based on (or derived from) the Work and for which the
 43 |       editorial revisions, annotations, elaborations, or other modifications
 44 |       represent, as a whole, an original work of authorship. For the purposes
 45 |       of this License, Derivative Works shall not include works that remain
 46 |       separable from, or merely link (or bind by name) to the interfaces of,
 47 |       the Work and Derivative Works thereof.
 48 | 
 49 |       "Contribution" shall mean any work of authorship, including
 50 |       the original version of the Work and any modifications or additions
 51 |       to that Work or Derivative Works thereof, that is intentionally
 52 |       submitted to Licensor for inclusion in the Work by the copyright owner
 53 |       or by an individual or Legal Entity authorized to submit on behalf of
 54 |       the copyright owner. For the purposes of this definition, "submitted"
 55 |       means any form of electronic, verbal, or written communication sent
 56 |       to the Licensor or its representatives, including but not limited to
 57 |       communication on electronic mailing lists, source code control systems,
 58 |       and issue tracking systems that are managed by, or on behalf of, the
 59 |       Licensor for the purpose of discussing and improving the Work, but
 60 |       excluding communication that is conspicuously marked or otherwise
 61 |       designated in writing by the copyright owner as "Not a Contribution."
 62 | 
 63 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 64 |       on behalf of whom a Contribution has been received by Licensor and
 65 |       subsequently incorporated within the Work.
 66 | 
 67 |    2. Grant of Copyright License. Subject to the terms and conditions of
 68 |       this License, each Contributor hereby grants to You a perpetual,
 69 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 70 |       copyright license to reproduce, prepare Derivative Works of,
 71 |       publicly display, publicly perform, sublicense, and distribute the
 72 |       Work and such Derivative Works in Source or Object form.
 73 | 
 74 |    3. Grant of Patent License. Subject to the terms and conditions of
 75 |       this License, each Contributor hereby grants to You a perpetual,
 76 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 77 |       (except as stated in this section) patent license to make, have made,
 78 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 79 |       where such license applies only to those patent claims licensable
 80 |       by such Contributor that are necessarily infringed by their
 81 |       Contribution(s) alone or by combination of their Contribution(s)
 82 |       with the Work to which such Contribution(s) was submitted. If You
 83 |       institute patent litigation against any entity (including a
 84 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 85 |       or a Contribution incorporated within the Work constitutes direct
 86 |       or contributory patent infringement, then any patent licenses
 87 |       granted to You under this License for that Work shall terminate
 88 |       as of the date such litigation is filed.
 89 | 
 90 |    4. Redistribution. You may reproduce and distribute copies of the
 91 |       Work or Derivative Works thereof in any medium, with or without
 92 |       modifications, and in Source or Object form, provided that You
 93 |       meet the following conditions:
 94 | 
 95 |       (a) You must give any other recipients of the Work or
 96 |           Derivative Works a copy of this License; and
 97 | 
 98 |       (b) You must cause any modified files to carry prominent notices
 99 |           stating that You changed the files; and
100 | 
101 |       (c) You must retain, in the Source form of any Derivative Works
102 |           that You distribute, all copyright, patent, trademark, and
103 |           attribution notices from the Source form of the Work,
104 |           excluding those notices that do not pertain to any part of
105 |           the Derivative Works; and
106 | 
107 |       (d) If the Work includes a "NOTICE" text file as part of its
108 |           distribution, then any Derivative Works that You distribute must
109 |           include a readable copy of the attribution notices contained
110 |           within such NOTICE file, excluding those notices that do not
111 |           pertain to any part of the Derivative Works, in at least one
112 |           of the following places: within a NOTICE text file distributed
113 |           as part of the Derivative Works; within the Source form or
114 |           documentation, if provided along with the Derivative Works; or,
115 |           within a display generated by the Derivative Works, if and
116 |           wherever such third-party notices normally appear. The contents
117 |           of the NOTICE file are for informational purposes only and
118 |           do not modify the License. You may add Your own attribution
119 |           notices within Derivative Works that You distribute, alongside
120 |           or as an addendum to the NOTICE text from the Work, provided
121 |           that such additional attribution notices cannot be construed
122 |           as modifying the License.
123 | 
124 |       You may add Your own copyright statement to Your modifications and
125 |       may provide additional or different license terms and conditions
126 |       for use, reproduction, or distribution of Your modifications, or
127 |       for any such Derivative Works as a whole, provided Your use,
128 |       reproduction, and distribution of the Work otherwise complies with
129 |       the conditions stated in this License.
130 | 
131 |    5. Submission of Contributions. Unless You explicitly state otherwise,
132 |       any Contribution intentionally submitted for inclusion in the Work
133 |       by You to the Licensor shall be under the terms and conditions of
134 |       this License, without any additional terms or conditions.
135 |       Notwithstanding the above, nothing herein shall supersede or modify
136 |       the terms of any separate license agreement you may have executed
137 |       with Licensor regarding such Contributions.
138 | 
139 |    6. Trademarks. This License does not grant permission to use the trade
140 |       names, trademarks, service marks, or product names of the Licensor,
141 |       except as required for reasonable and customary use in describing the
142 |       origin of the Work and reproducing the content of the NOTICE file.
143 | 
144 |    7. Disclaimer of Warranty. Unless required by applicable law or
145 |       agreed to in writing, Licensor provides the Work (and each
146 |       Contributor provides its Contributions) on an "AS IS" BASIS,
147 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148 |       implied, including, without limitation, any warranties or conditions
149 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150 |       PARTICULAR PURPOSE. You are solely responsible for determining the
151 |       appropriateness of using or redistributing the Work and assume any
152 |       risks associated with Your exercise of permissions under this License.
153 | 
154 |    8. Limitation of Liability. In no event and under no legal theory,
155 |       whether in tort (including negligence), contract, or otherwise,
156 |       unless required by applicable law (such as deliberate and grossly
157 |       negligent acts) or agreed to in writing, shall any Contributor be
158 |       liable to You for damages, including any direct, indirect, special,
159 |       incidental, or consequential damages of any character arising as a
160 |       result of this License or out of the use or inability to use the
161 |       Work (including but not limited to damages for loss of goodwill,
162 |       work stoppage, computer failure or malfunction, or any and all
163 |       other commercial damages or losses), even if such Contributor
164 |       has been advised of the possibility of such damages.
165 | 
166 |    9. Accepting Warranty or Additional Liability. While redistributing
167 |       the Work or Derivative Works thereof, You may choose to offer,
168 |       and charge a fee for, acceptance of support, warranty, indemnity,
169 |       or other liability obligations and/or rights consistent with this
170 |       License. However, in accepting such obligations, You may act only
171 |       on Your own behalf and on Your sole responsibility, not on behalf
172 |       of any other Contributor, and only if You agree to indemnify,
173 |       defend, and hold each Contributor harmless for any liability
174 |       incurred by, or claims asserted against, such Contributor by reason
175 |       of your accepting any such warranty or additional liability.
176 | 
177 |    END OF TERMS AND CONDITIONS
178 | 
179 |    APPENDIX: How to apply the Apache License to your work.
180 | 
181 |       To apply the Apache License to your work, attach the following
182 |       boilerplate notice, with the fields enclosed by brackets "[]"
183 |       replaced with your own identifying information. (Don't include
184 |       the brackets!)  The text should be enclosed in the appropriate
185 |       comment syntax for the file format. We also recommend that a
186 |       file or class name and description of purpose be included on the
187 |       same "printed page" as the copyright notice for easier
188 |       identification within third-party archives.
189 | 
190 |    Copyright [yyyy] [name of copyright owner]
191 | 
192 |    Licensed under the Apache License, Version 2.0 (the "License");
193 |    you may not use this file except in compliance with the License.
194 |    You may obtain a copy of the License at
195 | 
196 |        http://www.apache.org/licenses/LICENSE-2.0
197 | 
198 |    Unless required by applicable law or agreed to in writing, software
199 |    distributed under the License is distributed on an "AS IS" BASIS,
200 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201 |    See the License for the specific language governing permissions and
202 |    limitations under the License.
203 | 


--------------------------------------------------------------------------------
/Block/AmpProductBlock.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * Copyright 2017 WompMobile, Inc.
  4 |  *
  5 |  * Licensed under the Apache License, Version 2.0 (the "License");
  6 |  * you may not use this file except in compliance with the License.
  7 |  * You may obtain a copy of the License at
  8 |  *
  9 |  *   http://www.apache.org/licenses/LICENSE-2.0
 10 |  *
 11 |  * Unless required by applicable law or agreed to in writing, software
 12 |  * distributed under the License is distributed on an "AS IS" BASIS,
 13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 14 |  * See the License for the specific language governing permissions and
 15 |  * limitations under the License.
 16 |  */
 17 | 
 18 | namespace WompMobile\AmpProductExample\Block;
 19 | 
 20 | use Magento\Framework\App\Filesystem\DirectoryList;
 21 | use Magento\Framework\Module\Dir;
 22 | 
 23 | class AmpProductBlock extends \Magento\Framework\View\Element\Template
 24 | {
 25 |     /** @var \Magento\Catalog\Api\Data\ProductInterface */
 26 |     private $product;
 27 | 
 28 |     /** @var \Magento\Catalog\Api\ProductRepositoryInterface */
 29 |     protected $productRepo;
 30 | 
 31 |     /** @var \Magento\Catalog\Helper\Product */
 32 |     protected $productHelper;
 33 | 
 34 |     /** @var \Magento\Catalog\Model\Category */
 35 |     protected $categoryModel;
 36 | 
 37 |     /** @var \Magento\Framework\Data\Form\FormKey */
 38 |     protected $formKey;
 39 | 
 40 |     /** @var \Magento\Framework\Module\Dir\Reader */
 41 |     protected $moduleReader;
 42 | 
 43 |     /**
 44 |      * Constructor
 45 |      * @param \Magento\Catalog\Api\ProductRepositoryInterface $productRepo
 46 |      * @param \Magento\Catalog\Helper\Product $productHelper
 47 |      * @param \Magento\Catalog\Model\Category $categoryModel
 48 |      * @param \Magento\Framework\Data\Form\FormKey $formKey
 49 |      * @param \Magento\Framework\Module\Dir\Reader $moduleReader
 50 |      * @param \Magento\Framework\View\Element\Template\Context $context
 51 |      * @param array $data
 52 |      */
 53 |     public function __construct(
 54 |         \Magento\Catalog\Api\ProductRepositoryInterface $productRepo,
 55 |         \Magento\Catalog\Helper\Product $productHelper,
 56 |         \Magento\Catalog\Model\Category $categoryModel,
 57 |         \Magento\Framework\Data\Form\FormKey $formKey,
 58 |         \Magento\Framework\Module\Dir\Reader $moduleReader,
 59 |         \Magento\Framework\View\Element\Template\Context $context,
 60 |         array $data = []
 61 |     ) {
 62 |         $this->productRepo = $productRepo;
 63 |         $this->productHelper = $productHelper;
 64 |         $this->categoryModel = $categoryModel;
 65 |         $this->formKey = $formKey;
 66 |         $this->moduleReader = $moduleReader;
 67 |         parent::__construct(
 68 |             $context,
 69 |             $data
 70 |         );
 71 |     }
 72 | 
 73 |     /**
 74 |      * Get product SKU from URL
 75 |      * Example: http://domain.com/amp/?sku=abc will retrieve the product with SKU 'abc'
 76 |      *
 77 |      * @return string
 78 |      */
 79 |     public function getProductParam()
 80 |     {
 81 |         $sku = $_GET["sku"];
 82 |         if ($sku === "") {
 83 |             throw new \Exception("Product SKU missing.");
 84 |         }
 85 | 
 86 |         $this->product = $this->productRepo->get($sku);
 87 |         if ($this->product === null) {
 88 |             throw new \Exception("Failed to fetch product with SKU '$sku'.");
 89 |         }
 90 |     }
 91 | 
 92 |     /**
 93 |      * Get product
 94 |      *
 95 |      * @return ProductInterface
 96 |      */
 97 |     public function getProduct()
 98 |     {
 99 |         return $this->product;
100 |     }
101 | 
102 |     /**
103 |      * Product id
104 |      *
105 |      * @return int|null
106 |      */
107 |     public function getProductId()
108 |     {
109 |         return $this->product->getId();
110 |     }
111 | 
112 |     /**
113 |      * Product price (formatted number)
114 |      * Example: float 1111.55555 becomes 1111.56
115 |      *
116 |      * @return string
117 |      */
118 |     public function getProductPrice()
119 |     {
120 |         return number_format($this->product->getPrice(), 2, null, '');
121 |     }
122 | 
123 |     /**
124 |      * Canonical URL to product
125 |      * Reference: https://www.ampproject.org/docs/guides/discovery
126 |      *
127 |      * @return string|bool
128 |      */
129 |     public function getProductCanonicalUrl()
130 |     {
131 |         return $this->productHelper->getProductUrl($this->product);
132 |     }
133 | 
134 |     /**
135 |      * Retrieve base image url
136 |      *
137 |      * @return string|bool
138 |      */
139 |     public function getProductImageUrl()
140 |     {
141 |         return $this->productHelper->getImageUrl($this->product);
142 |     }
143 | 
144 |     /**
145 |      * Get basic information about all categories in an associative array:
146 |      *  int 'id', string 'name', string 'url', int 'level', array 'children'
147 |      *
148 |      * @return array
149 |      */
150 |     private function getCategoriesInfo()
151 |     {
152 |         $category = $this->categoryModel;
153 |         $tree = $category->getTreeModel()->load();
154 |         $ids = $tree->getCollection()->getAllIds();
155 | 
156 |         $categoriesInfo = array();
157 |         $keys = array('id', 'name', 'url', 'level', 'children');
158 | 
159 |         foreach ($ids as $id) {
160 |             if ($id == \Magento\Catalog\Model\Category::TREE_ROOT_ID) {
161 |                 continue;
162 |             }
163 | 
164 |             $category->load($id);
165 |             $level = $category->getLevel();
166 | 
167 |             $values = array();
168 |             $values[] = $category->getId();
169 |             $values[] = $category->getName();
170 |             $values[] = $level > 1 ? $category->getCategoryIdUrl() : "";
171 |             $values[] = $level;
172 | 
173 |             // Why does getAllChildren() include the id of self?
174 |             $children = $category->getAllChildren(true);
175 |             unset($children[array_search($category->getId(), $children)]);
176 |             $values[] = $children;
177 | 
178 |             $categoriesInfo[] = array_combine($keys, $values);
179 |         }
180 | 
181 |         return $categoriesInfo;
182 |     }
183 | 
184 |     /**
185 |      * Generate AMP HTML markup for all children categories of a parent category
186 |      *
187 |      * @param array $categoriesInfo
188 |      * @param array $children
189 |      * @param int $level
190 |      * @return array
191 |      */
192 |     private function generateChildCategoriesHTML($categoriesInfo, $children, $level)
193 |     {
194 |         if (!$children) {
195 |             return "";
196 |         }
197 | 
198 |         $html = "";
199 | 
200 |         foreach ($categoriesInfo as $categoryInfo) {
201 |             if (in_array($categoryInfo['id'], $children) && $categoryInfo['level'] == $level) {
202 |                 $html .= '<ul class="categories">' .
203 |                          '<li class="category">' .
204 |                          '<a class="category-link" href="' . $categoryInfo['url']  . '">' . $categoryInfo['name'] . '</a>' .
205 |                          $this->generateChildCategoriesHTML($categoriesInfo, $categoryInfo['children'], $level+1) .
206 |                          '</li>' .
207 |                          '</ul>';
208 |             }
209 |         }
210 | 
211 |         return $html;
212 |     }
213 | 
214 |     /**
215 |      * Generate AMP HTML markup for all categories
216 |      * TODO: This is not efficient
217 |      *
218 |      * @return string
219 |      */
220 |     public function generateCategoriesHTML()
221 |     {
222 |         $html = "";
223 |         $categoriesInfo = $this->getCategoriesInfo();
224 | 
225 |         foreach ($categoriesInfo as $categoryInfo) {
226 |             if ($categoryInfo['level'] == 1) {
227 |                 $html .= '<ul class="categories">' .
228 |                          '<li class="category">' .
229 |                          $categoryInfo['name'] .
230 |                          $this->generateChildCategoriesHTML($categoriesInfo, $categoryInfo['children'], 2) .
231 |                          '</li>' .
232 |                          '</ul>';
233 |             }
234 |         }
235 | 
236 |         return $html;
237 |     }
238 | 
239 |     /**
240 |      * Escape html entities
241 |      *
242 |      * @param  string|array $data
243 |      * @param  array $allowedTags
244 |      * @return string|array
245 |      */
246 |     public function escapeHtml($html, $allowedTags = NULL)
247 |     {
248 |         return $this->_escaper->escapeHtml($html, $allowedTags);
249 |     }
250 | 
251 |     /**
252 |      * Get basic information about product media gallery images in an associative array:
253 |      *  string 'url', int 'width', int 'height'
254 |      *
255 |      * @return array
256 |      */
257 |     public function getProductGalleryInfo()
258 |     {
259 |         $galleryEntries = $this->product->getMediaGalleryEntries();
260 |         if ($galleryEntries === null) {
261 |             return array();
262 |         }
263 | 
264 |         $galleryInfo = array();
265 |         $keys = array('url', 'width', 'height');
266 | 
267 |         // Build array of product images
268 |         foreach ($galleryEntries as $galleryEntry) {
269 |             $values = array();
270 |             if (!$galleryEntry->isDisabled() && $this->isImage($galleryEntry)) {
271 |                 $values[] = $this->getImageUrl($galleryEntry);
272 | 
273 |                 $imageDimensions = $this->getImageDimensions($galleryEntry);
274 |                 $values[] = $imageDimensions[0];
275 |                 $values[] = $imageDimensions[1];
276 | 
277 |                 $galleryInfo[] = array_combine($keys, $values);
278 |             }
279 |         }
280 | 
281 |         // Provide placeholder image if no gallery images
282 |         if (count($galleryInfo) < 1) {
283 |             $values = array();
284 |             $values[] = $this->getViewFileUrl('Magento_Catalog::images/product/placeholder/image.jpg');
285 | 
286 |             $modulePath = $this->moduleReader->getModuleDir(Dir::MODULE_VIEW_DIR, "Magento_Catalog");
287 |             $filePath = $modulePath . '/base/web/images/product/placeholder/image.jpg';
288 |             $imageDimensions = getimagesize($filePath);
289 |             $values[] = $imageDimensions[0];
290 |             $values[] = $imageDimensions[1];
291 | 
292 |             $galleryInfo[] = array_combine($keys, $values);
293 |         }
294 | 
295 |         return $galleryInfo;
296 |     }
297 | 
298 |     /**
299 |      * Determine whether a product media gallery entry is an image
300 |      *
301 |      * @param  \Magento\Catalog\Api\Data\ProductAttributeMediaGalleryEntryInterface $galleryEntry
302 |      * @return bool
303 |      */
304 |     public function isImage($galleryEntry)
305 |     {
306 |         $mediaDir = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA);
307 | 
308 |         $relativePath = 'catalog/product' . $galleryEntry->getFile();
309 |         $absolutePath = $mediaDir->getAbsolutePath($relativePath);
310 | 
311 |         return @is_array(getimagesize($absolutePath));
312 |     }
313 | 
314 |     /**
315 |      * Get URL to image in product media gallery
316 |      *
317 |      * @param  \Magento\Catalog\Api\Data\ProductAttributeMediaGalleryEntryInterface $galleryEntry
318 |      * @return string
319 |      */
320 |     public function getImageUrl($galleryEntry)
321 |     {
322 |         $mediaUrl = $this->_urlBuilder->getBaseUrl(['_type' => \Magento\Framework\UrlInterface::URL_TYPE_MEDIA]);
323 |         $mediaUrl .= 'catalog/product';
324 | 
325 |         return $mediaUrl . $galleryEntry->getFile();
326 |     }
327 | 
328 |     /**
329 |      * Get dimensions of image in product media gallery
330 |      * Example: [width, height]
331 |      *
332 |      * @param  \Magento\Catalog\Api\Data\ProductAttributeMediaGalleryEntryInterface $galleryEntry
333 |      * @return array
334 |      */
335 |     public function getImageDimensions($galleryEntry)
336 |     {
337 |         $mediaDir = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA);
338 | 
339 |         $relativePath = 'catalog/product' . $galleryEntry->getFile();
340 |         $absolutePath = $mediaDir->getAbsolutePath($relativePath);
341 | 
342 |         if ($mediaDir->isFile($relativePath)) {
343 |             return getimagesize($absolutePath);
344 |         }
345 | 
346 |         return [0, 0];
347 |     }
348 | 
349 |     /**
350 |      * Retrieve Session Form Key
351 |      *
352 |      * @return string
353 |      */
354 |     public function getFormKey() {
355 |         return $this->formKey->getFormKey();
356 |     }
357 | 
358 | }
359 | 


--------------------------------------------------------------------------------
/view/frontend/templates/index/index.phtml:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * Copyright 2017 WompMobile, Inc.
  4 |  *
  5 |  * Licensed under the Apache License, Version 2.0 (the "License");
  6 |  * you may not use this file except in compliance with the License.
  7 |  * You may obtain a copy of the License at
  8 |  *
  9 |  *   http://www.apache.org/licenses/LICENSE-2.0
 10 |  *
 11 |  * Unless required by applicable law or agreed to in writing, software
 12 |  * distributed under the License is distributed on an "AS IS" BASIS,
 13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 14 |  * See the License for the specific language governing permissions and
 15 |  * limitations under the License.
 16 |  */
 17 | ?>
 18 | 
 19 | <!doctype html>
 20 | <?php
 21 |     $product = $block->getProduct();
 22 | ?>
 23 | <html ⚡>
 24 | <head>
 25 |     <meta charset="utf-8">
 26 | 
 27 |     <script async src="https://cdn.ampproject.org/v0.js"></script>
 28 | 
 29 |     <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
 30 |     <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
 31 |     <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
 32 |     <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
 33 |     <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
 34 |     <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
 35 | 
 36 |     <!-- Make your page discoverable: https://www.ampproject.org/docs/guides/discovery -->
 37 |     <link rel="canonical" href="<?php echo $block->getProductCanonicalUrl() ?>">
 38 | 
 39 |     <!-- Add custom fonts: https://www.ampproject.org/docs/guides/responsive/custom_fonts -->
 40 |     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 41 | 
 42 |     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 43 | 
 44 |     <!-- Supported CSS: https://www.ampproject.org/docs/guides/responsive/style_pages -->
 45 |     <style amp-custom>
 46 |     body {
 47 |         font-family: "Roboto", sans-serif;
 48 |     }
 49 | 
 50 |     .header {
 51 |         background-color: #0696b7;
 52 |         position: relative;
 53 |         box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
 54 |         padding-top: 52px;
 55 |     }
 56 | 
 57 |     .header #sample-menu {
 58 |         position: absolute;
 59 |         top: 0;
 60 |         left: 0;
 61 |         font-size: 18px;
 62 |         font-weight: 700;
 63 |         color: white;
 64 |         padding: 13px;
 65 |     }
 66 | 
 67 |     .header #sample-logo {
 68 |         position: absolute;
 69 |         top: 0;
 70 |         left: 36px;
 71 |         font-size: 20px;
 72 |         font-weight: 400;
 73 |         color: white;
 74 |         margin: 0 16px;
 75 |         height: 32px;
 76 |         text-decoration: none;
 77 |         line-height: 52px;
 78 |         white-space: nowrap;
 79 |     }
 80 | 
 81 |     #drawermenu {
 82 |         color: black;
 83 |         padding-left: 16px;
 84 |         padding-right: 16px;
 85 |     }
 86 | 
 87 |     #drawermenu h2 {
 88 |         margin-top: 24px;
 89 |         font-size: 20px;
 90 |     }
 91 | 
 92 |     #drawermenu ul.categories {
 93 |         padding-left: 0;
 94 |         list-style-type: none;
 95 |     }
 96 | 
 97 |     #drawermenu ul.categories ul {
 98 |         margin-top: 1ex;
 99 |         padding-left: 1em;
100 |     }
101 | 
102 |     #drawermenu ul a {
103 |         text-decoration: none;
104 |         color: darkblue;
105 |     }
106 | 
107 |     #drawermenu .drawermenu-button {
108 |         z-index: 2;
109 |         position: fixed;
110 |         right: 6px;
111 |         top: 6px;
112 |         font-size: 24px;
113 |         line-height: 24px;
114 |         background-color: transparent;
115 |         border: 0;
116 |     }
117 | 
118 |     .contents {
119 |         padding: 0 10px;
120 |         display: flex;
121 |         flex-direction: column;
122 |     }
123 | 
124 |     .product-title {
125 |         margin-top: 20px;
126 |         margin-bottom: 8px;
127 |     }
128 | 
129 |     .product-field {
130 |         margin-top: 8px;
131 |         margin-bottom: 8px;
132 |     }
133 | 
134 |     .product-description {
135 |     }
136 | 
137 |     .product-gallery {
138 |         margin-top: 12px;
139 |         margin-bottom: 12px;
140 |     }
141 | 
142 |     .close-gallery-button {
143 |         z-index: 1;
144 |         position: absolute;
145 |         right: 6px;
146 |         top: 6px;
147 |         font-size: 24px;
148 |         line-height: 24px;
149 |         background-color: black;
150 |         color: white;
151 |         border: 1px solid gray;
152 |     }
153 | 
154 |     amp-image-lightbox img {
155 |         object-fit: contain;
156 |         background: rgba(0,0,0,0.9);
157 |     }
158 | 
159 |     .product-price {
160 |         font-weight: 600;
161 |         font-size: 18px;
162 |     }
163 | 
164 |     #add-to-cart label {
165 |         display: inline-block;
166 |         margin: 0;
167 |     }
168 | 
169 |     #add-to-cart .quantity {
170 |         font-size: 16px;
171 |         text-align: right;
172 |         height: 24px;
173 |         width: 2em;
174 |         display: inline-block;
175 |         margin-left: 6px;
176 |         padding-right: 4px;
177 |     }
178 | 
179 |     #add-to-cart .button {
180 |         font-size: 16px;
181 |         background-color: #0696b7;
182 |         color: white;
183 |         border: 1px solid black;
184 |         padding: 6px 12px;
185 |         text-align: center;
186 |         display: inline-block;
187 |         margin-left: 6px;
188 |     }
189 | 
190 |     .hide {
191 |         display: none;
192 |     }
193 | 
194 |     .show {
195 |         display: block;
196 |     }
197 | 
198 |     .product-social {
199 |         margin-top: 12px;
200 |         margin-bottom: 12px;
201 |     }
202 | 
203 |     .copyright-branding {
204 |         flex: 1;
205 |         width: 100vw;
206 |         margin-top: 8px;
207 |         margin-bottom: 8px;
208 |     }
209 | 
210 |     .copyright-branding p {
211 |         color: gray;
212 |         font-size: 80%;
213 |         margin: 0;
214 |     }
215 | 
216 |     .copyright-branding a {
217 |         text-decoration: none;
218 |         color: #0696b7;
219 |     }
220 |     </style>
221 | 
222 |     <!-- AMP SEO -->
223 |     <script type="application/ld+json">
224 |     {
225 |         "@context": "http://schema.org/",
226 |         "@type": "Product",
227 |         "name": <?php echo json_encode($product->getName()) ?>,
228 |         "image": "<?php echo $block->getProductImageUrl() ?>",
229 |         "description": <?php echo json_encode(strip_tags($product->getShortDescription())) ?>
230 |     }
231 |     </script>
232 | 
233 |     <!-- AMP Boilerplate Code: https://www.ampproject.org/docs/reference/spec/amp-boilerplate -->
234 |     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
235 |     </head>
236 |     <body>
237 | 
238 |         <!-- Categories -->
239 |         <amp-sidebar id="drawermenu" layout="nodisplay">
240 |             <h2>Categories</h2>
241 |             <?php echo $block->generateCategoriesHTML() ?>
242 |             <button class="drawermenu-button"
243 |                     on="tap:drawermenu.toggle"
244 |                     role="button"
245 |                     tabindex="0">×</button>
246 |         </amp-sidebar>
247 | 
248 |         <!-- Drawer icon -->
249 |         <div class="header">
250 |             <a id="sample-menu" on="tap:drawermenu.toggle">
251 |                 <amp-img srcset="<?php
252 |                         echo $block->getViewFileUrl('WompMobile_AmpProductExample::img/ic_menu_white_1x_web_24dp.png')
253 |                     ?> 1x, <?php
254 |                         echo $block->getViewFileUrl('WompMobile_AmpProductExample::img/ic_menu_white_2x_web_24dp.png')
255 |                     ?> 2x" width="24" height="24" alt="navigation">
256 |                 </amp-img>
257 |             </a>
258 |             <a id="sample-logo" href="#">
259 |                 WompMobile &hearts; AMP
260 |             </a>
261 |         </div>
262 | 
263 |         <div class="contents">
264 | 
265 |             <!-- Product title -->
266 |             <h2 class="product-title">
267 |                 <?php echo $block->escapeHtml($product->getName()) ?>
268 |             </h2>
269 | 
270 |             <!-- Product tagline -->
271 |             <p class="product-tagline product-field">
272 |                 <?php echo $block->escapeHtml(strip_tags($product->getShortDescription())) ?>
273 |             </p>
274 | 
275 |             <!-- Product image gallery -->
276 |             <amp-carousel id="product-gallery"
277 |                 height="320"
278 |                 layout="fixed-height"
279 |                 type="slides"
280 |                 class="show"><?php foreach($block->getProductGalleryInfo() as $imageInfo): ?>
281 |                         <amp-img src="<?php echo $imageInfo['url'] ?>"
282 |                                  width="<?php echo strval($imageInfo['width']) ?>"
283 |                                  height="<?php echo strval($imageInfo['height']) ?>"
284 |                                  layout="responsive"
285 |                                  on="tap:gallery-lightbox"
286 |                                  role="button"
287 |                                  tabindex="0"
288 |                                  alt="Product Image">
289 |                         </amp-img>
290 |                     <?php endforeach; ?>
291 |             </amp-carousel>
292 | 
293 |             <!-- Zoom image -->
294 |             <amp-image-lightbox id="gallery-lightbox" layout="nodisplay">
295 |                 <div on="tap:gallery-lightbox.close" role="button" tabindex="0">
296 |                     <button class="close-gallery-button"
297 |                             on="tap:gallery-lightbox.close"
298 |                             role="button"
299 |                             tabindex="0">×</button>
300 |                 </div>
301 |             </amp-image-lightbox>
302 | 
303 |             <!-- Product description -->
304 |             <p class="product-description product-field">
305 |                 <?php echo $block->escapeHtml(strip_tags($product->getDescription())) ?>
306 |             </p>
307 | 
308 |             <!-- Product price -->
309 |             <p class="product-price product-field">
310 |                 $<?php echo $block->getProductPrice() ?>
311 |             </p>
312 | 
313 |             <!-- Add to cart action -->
314 |             <form class="product-field" id="add-to-cart" method="GET" action="/checkout/cart/add/" target="_top">
315 |                 <!-- Quantity -->
316 |                 <label for="quantity">Quantity:</label>
317 |                 <!-- TODO: Get max quantity -->
318 |                 <input class="quantity" type="number" name="qty" min="1" value="1">
319 | 
320 |                 <!-- Add to cart button -->
321 |                 <input type="submit" class="button" value="Add to Cart">
322 | 
323 |                 <!-- Hidden fields -->
324 |                 <input type="hidden" name="product" value="<?php echo $block->escapeHtml($block->getProductId()) ?>">
325 |                 <input type="hidden" name="form_key" value="<?php echo $block->escapeHtml($block->getFormKey()) ?>">
326 |                 <div submit-error>
327 |                     <template type="amp-mustache">
328 |                         Error! Looks like something went wrong with your shopping cart, please try to add an item again. {{error}}
329 |                     </template>
330 |                 </div>
331 |             </form>
332 | 
333 |             <!-- Social links -->
334 |             <div class="product-social">
335 |                 <amp-social-share type="twitter"
336 |                                   width="30"
337 |                                   height="22"></amp-social-share>
338 |                 <amp-social-share type="facebook"
339 |                                   width="30"
340 |                                   height="22"
341 |                                   data-attribution="254325784911610"></amp-social-share>
342 |                 <amp-social-share type="gplus"
343 |                                   width="30"
344 |                                   height="22"></amp-social-share>
345 |                 <amp-social-share type="email"
346 |                                   width="30"
347 |                                   height="22"></amp-social-share>
348 |                 <amp-social-share type="pinterest"
349 |                                   width="33"
350 |                                   height="22"></amp-social-share>
351 |             </div>
352 | 
353 |             <!-- Copyright/Branding -->
354 |             <div class="copyright-branding">
355 |                 <p>
356 |                     Copyright 2017 <a href="http://www.wompmobile.com/">WompMobile, Inc.</a><br>
357 |                     <a href="https://ampbyexample.com/samples_templates/product_page/">AMP Product Page Sample</a> used as reference.
358 |                 </p>
359 |             </div>
360 | 
361 |         </div>
362 | 
363 |     </body>
364 | </html>
365 | 


--------------------------------------------------------------------------------