{"_id":"58112e73ded0340f0085d06f","project":"551e85be610f400d00837db7","version":{"_id":"58112e71ded0340f0085d02a","project":"551e85be610f400d00837db7","__v":4,"createdAt":"2016-10-26T22:30:09.862Z","releaseDate":"2016-10-26T22:30:09.862Z","categories":["58112e72ded0340f0085d02b","58112e72ded0340f0085d02c","58112e72ded0340f0085d02d","58112e72ded0340f0085d02e","58112e72ded0340f0085d02f","58112e72ded0340f0085d030","58112e72ded0340f0085d031","58112e72ded0340f0085d032","58112e72ded0340f0085d033","58112e72ded0340f0085d034","581137cc604d3c230048b7e4","58dc367221742d0f00a73f98","590768e54669da0f00db5c0b"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"new designer","version_clean":"2.0.0","version":"2.0"},"__v":0,"category":{"_id":"58112e72ded0340f0085d02c","project":"551e85be610f400d00837db7","__v":0,"version":"58112e71ded0340f0085d02a","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-07T18:58:09.521Z","from_sync":false,"order":2,"slug":"theme-logic","title":"Theme Logic & Components"},"user":"56439928549c4d0d00d7e910","parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-06-29T22:18:17.380Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Theme components are only used by the new designer launched in June 2016. Not sure which designer you're using? [Check here](https://help.cratejoy.com/hc/en-us/articles/211679366-Do-I-have-the-new-designer-or-the-old-designer-).\",\n  \"title\": \"Heads up!\"\n}\n[/block]\nReusable sections of pages that can be used on various pages. Users will be able add, remove, and reorder components to pre-specified sections on certain pages. Each component has its own markup, styles, and settings. Some components are site-wide (e.g. promotional banner) while others are page specific (e.g. HTML area or video embed).\n\n# Usage\nPages that want to display a list of components should simply call the `render_components` macro with a unique identifier.\n\nContaining elements dictate the direction of layout of the components (column or row).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{ components_helpers.render_components('index'}}\\n\\n<!-- Renders into... -->\\n\\n<section id=\\\"comp1\\\">\\n</section>\\n\\n...\\n\\n<section id=\\\"comp9\\\">\\n</section>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Components are only used in the underlying rendering system and new component types cannot be defined, though you can edit installed components.\"\n}\n[/block]\n# Editing Installed Components\n\nAfter a components are installed into a theme, all of their generated source code will be available in the `components/` directory. Any edits to these files will not affect other components or the source component. This allows components to be safely edited without breaking others.\n\n# Definition\n\n\nComponents should be styled to fit in any size container (within reason). Each component has its own directory under `components` with these files:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"File\",\n    \"h-1\": \"\",\n    \"0-1\": \"Inserted into template via the `render_components` macro\",\n    \"0-0\": \"`component.html`\",\n    \"1-0\": \"`component.css`\",\n    \"1-1\": \"Appended to the end of `css/style.css` when rendered\",\n    \"2-0\": \"`component.js`\",\n    \"2-1\": \"Inserted into the template via the 'scripts_for_page' macro. The javascript in this file needs to be contained inside `<script>` tags\"\n  },\n  \"cols\": 2,\n  \"rows\": 3\n}\n[/block]\n# Full Example: Testimonials\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<section id=\\\"my-component\\\" class=\\\"component-rich-text-center row\\\">\\n\\t<div class=\\\"col-xs-10 col-xs-offset-1\\\">\\n\\t\\t<div class=\\\"content row\\\">\\n\\t\\t\\t<div class=\\\"col-xs-12 text-center\\\">\\n\\t\\t\\t\\t{{ settings[\\\"my-component/content\\\"] }}\\n\\t\\t\\t</div>\\n\\t\\t</div>\\n    <div class=\\\"row\\\">\\n\\t\\t\\t<div class=\\\"col-xs-12 text-center\\\">\\n\\t\\t\\t\\t<a type=\\\"button\\\" class=\\\"btn\\\" href=\\\"{{ settings['my-component/button_url'] }}\\\">{{ settings[\\\"my-component/button_text\\\"] }}</a>\\n\\t\\t\\t</div>\\n\\t\\t</div>\\n\\t</div>\\n</section>\",\n      \"language\": \"html\",\n      \"name\": \"component.html\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#my-component {\\n\\tbackground-color: {{ settings['my-component/background_color'] }};\\n}\\n\\n#my-component .btn {\\n\\tbackground-color: {{ settings['my-component/button/color'] }};\\n\\tcolor: {{ settings['my-component/button/text_color'] }};\\n\\tfont-family: {{ settings['my-component/button/font_face'] }};\\n}\\n\\n#my-component .btn:hover {\\n\\tbackground-color: {{ settings['my-component/button/hover_color'] }};\\n\\tcolor: {{ settings['my-component/button/hover_text_color'] }};\\n}\\n\",\n      \"language\": \"css\",\n      \"name\": \"component.css\"\n    }\n  ]\n}\n[/block]\n# Common Mistakes & Errors:\n\n** Error when saving and edited component file**\nWhen editing the CSS or HTML of a component in the code editor, you may only use the settings that belong to that specific component. For example `my-component/button/color`. If you try to use a setting found in another component, for example `my-other-component/button/color` you will be presented with an error message when you try to save the file.","excerpt":"","slug":"components","type":"basic","title":"Components"}
[block:callout] { "type": "info", "body": "Theme components are only used by the new designer launched in June 2016. Not sure which designer you're using? [Check here](https://help.cratejoy.com/hc/en-us/articles/211679366-Do-I-have-the-new-designer-or-the-old-designer-).", "title": "Heads up!" } [/block] Reusable sections of pages that can be used on various pages. Users will be able add, remove, and reorder components to pre-specified sections on certain pages. Each component has its own markup, styles, and settings. Some components are site-wide (e.g. promotional banner) while others are page specific (e.g. HTML area or video embed). # Usage Pages that want to display a list of components should simply call the `render_components` macro with a unique identifier. Containing elements dictate the direction of layout of the components (column or row). [block:code] { "codes": [ { "code": "{{ components_helpers.render_components('index'}}\n\n<!-- Renders into... -->\n\n<section id=\"comp1\">\n</section>\n\n...\n\n<section id=\"comp9\">\n</section>", "language": "html" } ] } [/block] [block:callout] { "type": "info", "body": "Components are only used in the underlying rendering system and new component types cannot be defined, though you can edit installed components." } [/block] # Editing Installed Components After a components are installed into a theme, all of their generated source code will be available in the `components/` directory. Any edits to these files will not affect other components or the source component. This allows components to be safely edited without breaking others. # Definition Components should be styled to fit in any size container (within reason). Each component has its own directory under `components` with these files: [block:parameters] { "data": { "h-0": "File", "h-1": "", "0-1": "Inserted into template via the `render_components` macro", "0-0": "`component.html`", "1-0": "`component.css`", "1-1": "Appended to the end of `css/style.css` when rendered", "2-0": "`component.js`", "2-1": "Inserted into the template via the 'scripts_for_page' macro. The javascript in this file needs to be contained inside `<script>` tags" }, "cols": 2, "rows": 3 } [/block] # Full Example: Testimonials [block:code] { "codes": [ { "code": "<section id=\"my-component\" class=\"component-rich-text-center row\">\n\t<div class=\"col-xs-10 col-xs-offset-1\">\n\t\t<div class=\"content row\">\n\t\t\t<div class=\"col-xs-12 text-center\">\n\t\t\t\t{{ settings[\"my-component/content\"] }}\n\t\t\t</div>\n\t\t</div>\n <div class=\"row\">\n\t\t\t<div class=\"col-xs-12 text-center\">\n\t\t\t\t<a type=\"button\" class=\"btn\" href=\"{{ settings['my-component/button_url'] }}\">{{ settings[\"my-component/button_text\"] }}</a>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>", "language": "html", "name": "component.html" } ] } [/block] [block:code] { "codes": [ { "code": "#my-component {\n\tbackground-color: {{ settings['my-component/background_color'] }};\n}\n\n#my-component .btn {\n\tbackground-color: {{ settings['my-component/button/color'] }};\n\tcolor: {{ settings['my-component/button/text_color'] }};\n\tfont-family: {{ settings['my-component/button/font_face'] }};\n}\n\n#my-component .btn:hover {\n\tbackground-color: {{ settings['my-component/button/hover_color'] }};\n\tcolor: {{ settings['my-component/button/hover_text_color'] }};\n}\n", "language": "css", "name": "component.css" } ] } [/block] # Common Mistakes & Errors: ** Error when saving and edited component file** When editing the CSS or HTML of a component in the code editor, you may only use the settings that belong to that specific component. For example `my-component/button/color`. If you try to use a setting found in another component, for example `my-other-component/button/color` you will be presented with an error message when you try to save the file.