Support
API Reference

Components in Depth

📘

Heads up!

Components are only used by the new designer launched in June 2016. Not sure which designer you're using? Check here.

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.

{{ components_helpers.render_components('index'}}

<!-- Renders into... -->

<section id="comp1">
</section>

...

<section id="comp9">
</section>

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:

File
component.htmlInserted into template via the render_components macro
component.cssAppended to the end of css/style.css when rendered
settings_schema.jsonControls what options are available inside the Cratejoy Designer tool. Read more, in "Settings in Depth"
component.jsInserted into the template via the 'scripts_for_page' macro. The javascript in this file needs to be contained inside <script> tags

Full Example: Testimonials

<section id="my-component" class="component-rich-text-center row">
	<div class="col-xs-10 col-xs-offset-1">
		<div class="content row">
			<div class="col-xs-12 text-center">
				{{ settings["my-component/content"] }}
			</div>
		</div>
    <div class="row">
			<div class="col-xs-12 text-center">
				<a type="button" class="btn" href="{{ settings['my-component/button_url'] }}">{{ settings["my-component/button_text"] }}</a>
			</div>
		</div>
	</div>
</section>

#my-component {
	background-color: {{ settings['my-component/background_color'] }};
}

#my-component .btn {
	background-color: {{ settings['my-component/button/color'] }};
	color: {{ settings['my-component/button/text_color'] }};
	font-family: {{ settings['my-component/button/font_face'] }};
}

#my-component .btn:hover {
	background-color: {{ settings['my-component/button/hover_color'] }};
	color: {{ settings['my-component/button/hover_text_color'] }};
}

<script type="text/javascript">
$("#my-component .btn").click(function() {
  alert("hello!");
});
</script>

{
	"label": "My Component",
	"settings": [
		{
			"id": "my-component/content",
			"type": "richtext"
		},
		{
			"id": "my-component/button_text",
			"label": "Button",
			"type": "text"
		},
		{
			"id": "my-component/button_url",
			"label": "Button URL",
			"type": "link"
		},
		{
			"id": "my-component/background_color",
			"label": "Background",
			"type": "color",
			"inherits": "content_background_color"
		},
    {
			"id": "my-component/button/font_face",
			"label": "Button",
			"type": "font_face",
			"inherits": "page_body/font_face"
		},
		{
			"id": "my-component/button/font_size",
			"type": "font_size",
			"inherits": "primary_button/font_size"
		},
		{
			"id": "my-component/button/color",
			"type": "color",
			"inherits": "primary_color"
		},
		{
			"id": "my-component/button/hover_color",
			"type": "color",
			"inherits": "accent_color"
		},
		{
			"id": "my-component/button/text_color",
			"type": "color"
		},
		{
			"id": "my-component/button/hover_text_color",
			"type": "color"
		}
  ]
}