{"_id":"58112e73ded0340f0085d071","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"},"parentDoc":null,"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,"project":"551e85be610f400d00837db7","user":"56439928549c4d0d00d7e910","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-30T15:17:16.728Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"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 can 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\nAfter installing components via the Cratejoy Designer, you can edit the source code of your components to customize layout or add new functionality.\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# Editing Installed Components\n\nAfter a components are installed into a theme, all of their source code will be available in the `components/` directory. You can edit these components individually without affecting components on any other page.\n\n# Definition\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    \"2-0\": \"`settings_schema.json`\",\n    \"1-1\": \"Appended to the end of `css/style.css` when rendered\",\n    \"2-1\": \"Controls what options are available inside the Cratejoy Designer tool. Read more, in \\\"[Settings in Depth](doc:settings-details)\\\"\",\n    \"3-0\": \"`component.js`\",\n    \"3-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\": 4\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\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\">\\n$(\\\"#my-component .btn\\\").click(function() {\\n  alert(\\\"hello!\\\");\\n});\\n</script>\",\n      \"language\": \"http\",\n      \"name\": \"component.js\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n\\t\\\"label\\\": \\\"My Component\\\",\\n\\t\\\"settings\\\": [\\n\\t\\t{\\n\\t\\t\\t\\\"id\\\": \\\"my-component/content\\\",\\n\\t\\t\\t\\\"type\\\": \\\"richtext\\\"\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\t\\\"id\\\": \\\"my-component/button_text\\\",\\n\\t\\t\\t\\\"label\\\": \\\"Button\\\",\\n\\t\\t\\t\\\"type\\\": \\\"text\\\"\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\t\\\"id\\\": \\\"my-component/button_url\\\",\\n\\t\\t\\t\\\"label\\\": \\\"Button URL\\\",\\n\\t\\t\\t\\\"type\\\": \\\"link\\\"\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\t\\\"id\\\": \\\"my-component/background_color\\\",\\n\\t\\t\\t\\\"label\\\": \\\"Background\\\",\\n\\t\\t\\t\\\"type\\\": \\\"color\\\",\\n\\t\\t\\t\\\"inherits\\\": \\\"content_background_color\\\"\\n\\t\\t},\\n    {\\n\\t\\t\\t\\\"id\\\": \\\"my-component/button/font_face\\\",\\n\\t\\t\\t\\\"label\\\": \\\"Button\\\",\\n\\t\\t\\t\\\"type\\\": \\\"font_face\\\",\\n\\t\\t\\t\\\"inherits\\\": \\\"page_body/font_face\\\"\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\t\\\"id\\\": \\\"my-component/button/font_size\\\",\\n\\t\\t\\t\\\"type\\\": \\\"font_size\\\",\\n\\t\\t\\t\\\"inherits\\\": \\\"primary_button/font_size\\\"\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\t\\\"id\\\": \\\"my-component/button/color\\\",\\n\\t\\t\\t\\\"type\\\": \\\"color\\\",\\n\\t\\t\\t\\\"inherits\\\": \\\"primary_color\\\"\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\t\\\"id\\\": \\\"my-component/button/hover_color\\\",\\n\\t\\t\\t\\\"type\\\": \\\"color\\\",\\n\\t\\t\\t\\\"inherits\\\": \\\"accent_color\\\"\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\t\\\"id\\\": \\\"my-component/button/text_color\\\",\\n\\t\\t\\t\\\"type\\\": \\\"color\\\"\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\t\\\"id\\\": \\\"my-component/button/hover_text_color\\\",\\n\\t\\t\\t\\\"type\\\": \\\"color\\\"\\n\\t\\t}\\n  ]\\n}\",\n      \"language\": \"json\",\n      \"name\": \"settings_schema.json\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"components-details","type":"basic","title":"Components in Depth"}

Components in Depth


[block:callout] { "type": "info", "body": "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 can 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). After installing components via the Cratejoy Designer, you can edit the source code of your components to customize layout or add new functionality. [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] # Editing Installed Components After a components are installed into a theme, all of their source code will be available in the `components/` directory. You can edit these components individually without affecting components on any other page. # 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`", "2-0": "`settings_schema.json`", "1-1": "Appended to the end of `css/style.css` when rendered", "2-1": "Controls what options are available inside the Cratejoy Designer tool. Read more, in \"[Settings in Depth](doc:settings-details)\"", "3-0": "`component.js`", "3-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": 4 } [/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] [block:code] { "codes": [ { "code": "<script type=\"text/javascript\">\n$(\"#my-component .btn\").click(function() {\n alert(\"hello!\");\n});\n</script>", "language": "http", "name": "component.js" } ] } [/block] [block:code] { "codes": [ { "code": "{\n\t\"label\": \"My Component\",\n\t\"settings\": [\n\t\t{\n\t\t\t\"id\": \"my-component/content\",\n\t\t\t\"type\": \"richtext\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"my-component/button_text\",\n\t\t\t\"label\": \"Button\",\n\t\t\t\"type\": \"text\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"my-component/button_url\",\n\t\t\t\"label\": \"Button URL\",\n\t\t\t\"type\": \"link\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"my-component/background_color\",\n\t\t\t\"label\": \"Background\",\n\t\t\t\"type\": \"color\",\n\t\t\t\"inherits\": \"content_background_color\"\n\t\t},\n {\n\t\t\t\"id\": \"my-component/button/font_face\",\n\t\t\t\"label\": \"Button\",\n\t\t\t\"type\": \"font_face\",\n\t\t\t\"inherits\": \"page_body/font_face\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"my-component/button/font_size\",\n\t\t\t\"type\": \"font_size\",\n\t\t\t\"inherits\": \"primary_button/font_size\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"my-component/button/color\",\n\t\t\t\"type\": \"color\",\n\t\t\t\"inherits\": \"primary_color\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"my-component/button/hover_color\",\n\t\t\t\"type\": \"color\",\n\t\t\t\"inherits\": \"accent_color\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"my-component/button/text_color\",\n\t\t\t\"type\": \"color\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"my-component/button/hover_text_color\",\n\t\t\t\"type\": \"color\"\n\t\t}\n ]\n}", "language": "json", "name": "settings_schema.json" } ] } [/block]