{"_id":"560b5d953bcbd80d0077d0fd","project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","__v":6,"parentDoc":null,"category":{"_id":"560b5cbec341310d00de2a01","pages":["560b5d0b3616ac17004f1c99","560b5d405148ba0d009bd0c9","560b5d62af40a70d003df332","560b5d953bcbd80d0077d0fd","560b5fa83616ac17004f1c9d","569c8c15d326c80d0068f7b7","56d37d35d3f4650b007495ea","56d4ed5f8001e30b0089700c"],"__v":8,"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-30T03:53:34.449Z","from_sync":false,"order":14,"slug":"templates-required-directory","title":"Templates Reference"},"version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-30T03:57:09.546Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"[block:html]\n{\n  \"html\": \"Template compilation starts in the <span class=\\\"inline-code\\\">.../&lt;theme‑name&gt;/templates/pages</span> subdirectory (assuming that its required file names are intact). Below are two examples of how Handlebars statements in these pages shape your compiled storefront.<br>\\n\\n<h2> Example 1: Setting Up a Page</h2>\\n\\nIn this <span class=\\\"inline-code\\\">product.html</span> file:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n└── templates\\n  └── pages\\n      ├── product.html\\n</pre>\\n\\n\\n...the statement directly below:<br>\\n\\n<p></p><pre>{{#partial \\\"page\\\"}}\\n  {{#each breadcrumbs }}\\n      {{&gt; components/common/breadcrumbs this home=../urls.home}}\\n  {{/each}}\\n...</pre>\\n\\n\\n...creates a variable called <span class=\\\"inline-code\\\">page</span> that stores content from the whole code block excerpted above).<br>\\n\\n<p></p>Later in the <span class=\\\"inline-code\\\">product.html</span> page, this Handlebars statement:<br>\\n\\n<p></p><pre>{{&gt; layout/base}}</pre>\\n\\n\\n...points to this file:<br>\\n\\n<p></p><pre>&lt;theme‑name&gt;\\n└── templates\\n  └── layout\\n      ├── base.html</pre>\\n\\n\\nSimilarly, this Handlebars statement:<br>\\n\\n<p></p><pre>{{&gt; components/common/body }}</pre>\\n\\n\\n...points to this file:<br>\\n\\n<p></p><pre>&lt;theme‑name&gt;\\n└── templates\\n  └── common\\n      ├── body.html\\n</pre>\\n\\n\\nHere are that target file’s entire contents. Note the <span class=\\\"inline-code\\\">page</span> Handlebars statement:<br>\\n\\n<p></p><pre>&lt;div class=\\\"body\\\"&gt;\\n  {{#block \\\"hero\\\"}} {{/block}}\\n  &lt;div class=\\\"container\\\"&gt;\\n      {{#block \\\"page\\\"}} {{/block}}\\n  &lt;/div&gt;\\n  {{&gt; components/common/modal}}\\n  {{&gt; components/common/loading-notification}}\\n&lt;/div&gt;</pre>\\n\\n\\nThis <span class=\\\"inline-code\\\">{{#block \\\"&lt;br&gt;&lt;b&gt;page&lt;/b&gt;\\\"}} {{/block}}</span> statement references – and renders – the contents of the <span class=\\\"inline-code\\\">page</span> variable that we saw created in <span class=\\\"inline-code\\\">&lt;theme‑name&gt;/templates/pages/product.html</span>, at the head of this example.<br>\\n\\n\\n<h2> Example 2: Specifying Dynamic Template Paths</h2>\\n\\nYou can specify a custom target path to each set of required templates within the <span class=\\\"inline-code\\\">.../templates/components/</span> directory. You do so using the <span class=\\\"inline-code\\\">dynamicComponent</span> Handlebars helper.<br>\\n\\n<p></p>Here is a pair of examples in the <span class=\\\"inline-code\\\">&lt;theme‑name&gt;/templates/pages/product-view.html</span> file:<br>\\n\\n<p></p><pre>&lt;div data-product-options&gt;\\n   {{#each product.customizations}}\\n      {{{dynamicComponent 'components/products/customizations'}}}\\n   {{/each}}\\n \\n   {{#each product.options}}\\n      {{{dynamicComponent 'components/products/options'}}}\\n   {{/each}}\\n&lt;/div&gt;</pre>\\n\\n\\n<p></p>The above examples specify these paths:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;/templates/components/products/customizations/\\n&lt;theme-name&gt;/templates/components/products/options/</pre>\\n\\n\\nThese are the default subdirectories introduced earlier. However, you could specify custom locations by substituting their relative paths into the <span class=\\\"inline-code\\\">dynamicComponent</span> Handlebars statements, using the same format.\"\n}\n[/block]","excerpt":"","slug":"components-and-compilation","type":"basic","title":"Components and Compilation"}

Components and Compilation


[block:html] { "html": "Template compilation starts in the <span class=\"inline-code\">.../&lt;theme‑name&gt;/templates/pages</span> subdirectory (assuming that its required file names are intact). Below are two examples of how Handlebars statements in these pages shape your compiled storefront.<br>\n\n<h2> Example 1: Setting Up a Page</h2>\n\nIn this <span class=\"inline-code\">product.html</span> file:<br>\n\n<p></p><pre>&lt;theme-name&gt;\n└── templates\n └── pages\n ├── product.html\n</pre>\n\n\n...the statement directly below:<br>\n\n<p></p><pre>{{#partial \"page\"}}\n {{#each breadcrumbs }}\n {{&gt; components/common/breadcrumbs this home=../urls.home}}\n {{/each}}\n...</pre>\n\n\n...creates a variable called <span class=\"inline-code\">page</span> that stores content from the whole code block excerpted above).<br>\n\n<p></p>Later in the <span class=\"inline-code\">product.html</span> page, this Handlebars statement:<br>\n\n<p></p><pre>{{&gt; layout/base}}</pre>\n\n\n...points to this file:<br>\n\n<p></p><pre>&lt;theme‑name&gt;\n└── templates\n └── layout\n ├── base.html</pre>\n\n\nSimilarly, this Handlebars statement:<br>\n\n<p></p><pre>{{&gt; components/common/body }}</pre>\n\n\n...points to this file:<br>\n\n<p></p><pre>&lt;theme‑name&gt;\n└── templates\n └── common\n ├── body.html\n</pre>\n\n\nHere are that target file’s entire contents. Note the <span class=\"inline-code\">page</span> Handlebars statement:<br>\n\n<p></p><pre>&lt;div class=\"body\"&gt;\n {{#block \"hero\"}} {{/block}}\n &lt;div class=\"container\"&gt;\n {{#block \"page\"}} {{/block}}\n &lt;/div&gt;\n {{&gt; components/common/modal}}\n {{&gt; components/common/loading-notification}}\n&lt;/div&gt;</pre>\n\n\nThis <span class=\"inline-code\">{{#block \"&lt;br&gt;&lt;b&gt;page&lt;/b&gt;\"}} {{/block}}</span> statement references – and renders – the contents of the <span class=\"inline-code\">page</span> variable that we saw created in <span class=\"inline-code\">&lt;theme‑name&gt;/templates/pages/product.html</span>, at the head of this example.<br>\n\n\n<h2> Example 2: Specifying Dynamic Template Paths</h2>\n\nYou can specify a custom target path to each set of required templates within the <span class=\"inline-code\">.../templates/components/</span> directory. You do so using the <span class=\"inline-code\">dynamicComponent</span> Handlebars helper.<br>\n\n<p></p>Here is a pair of examples in the <span class=\"inline-code\">&lt;theme‑name&gt;/templates/pages/product-view.html</span> file:<br>\n\n<p></p><pre>&lt;div data-product-options&gt;\n {{#each product.customizations}}\n {{{dynamicComponent 'components/products/customizations'}}}\n {{/each}}\n \n {{#each product.options}}\n {{{dynamicComponent 'components/products/options'}}}\n {{/each}}\n&lt;/div&gt;</pre>\n\n\n<p></p>The above examples specify these paths:<br>\n\n<p></p><pre>&lt;theme-name&gt;/templates/components/products/customizations/\n&lt;theme-name&gt;/templates/components/products/options/</pre>\n\n\nThese are the default subdirectories introduced earlier. However, you could specify custom locations by substituting their relative paths into the <span class=\"inline-code\">dynamicComponent</span> Handlebars statements, using the same format." } [/block]