Content Blocks

Overview

Content blocks are used as part of content columns, to display reusable content above or below elements in your store, such as categories and products. There are a handful of content blocks you can immediately benefit from in your store. This article will go a bit deeper into each content column.

Requirements

The following prerequisites will be necessary to accomplish the goals of this article:

Have access to your Hotcakes store administration
Have a complete understanding of content columns

Getting Started

Please read through and know how content columns work, and how they relate to content blocks.

Hopefully, by now you know about content columns and how they interact with content blocks. If not, you should learn more about content columns now. It is important that you know that first, as the rest of this article will not make sense otherwise.

When you use content blocks, they are added as one or many elements that make up a content column. The content column is then injected into the top or bottom of product or category views, depending on how you set them up. These injected views still use your viewsets - so you can change everything about how the content block is displayed to your customers.

Each section below will contain a content block, with information about what it is and how to use it.

Category Rotator

The category rotator allows you to choose one or many categories to display to your customers in a way that rotates them, showing a different category each time the page is loaded. When you choose to edit the category rotator, you'll have a picker similar to other pickers throughout Hotcakes.

The categories you have created in your store will be displayed on the left side. Check the checkbox for each category you with to rotate in this content block, and then click the Add Selected button to save your changes. You'll see your selected categories updated on the right side.

When managing the selected categories, you can sort them to appear in a certain order, and set whether or not that order is observed. Finally, the delete icon will remove the respective category from the rotator.

Featured Products

When you edit products, you have the opportunity to specify whether or not the product is considered to be a "Featured Product." One of the things this does for you is allow these products to be displayed in this content column.

When you add this column, you don't have any options. If will just pull the products that you specified as featured and list them for you.

HTML

When you use the HTML content block, you'll be able to create any kind of free form content you wish. It could be images, text, or any kind of complex HTML design you can think of. When you first add this content block, it won't have any content. So you'll need to edit it.

The editing view contains a single setting, which is an HTML editor. You can begin typing and formatting your content immediately, and even paste in an HTML design from your web developers in the source mode.

Image Rotator

The image rotator does exactly what you think it might do... you're able to select one or many images, and have them rotate in front of your customers. This is ideal for cross-promoting categories, products, or even other things on your site. When you first add this content block, you'll need to edit it to add your images.

There are a few basic fields you can use to manage the images and how they rotate to your customers.

Setting	Description
CSS Class	The images that are rotated get wrapped by an HTML DIV tag. The class you enter here will be applied to that DIV. If you don't know what that means, it's safe to leave this value alone.
Pause For	The value you enter here should be a full number, representing the number of seconds you want for the rotator to wait, before it cycles to the next image. The default is 3.
Width	While the default width is 220, you can enter any full number here, which represents pixels. This will be applied to the style attribute of each image.
Height	While the default height is 220, you can enter any full number here, which represents pixels. This will be applied to the style attribute of each image.
Rotate Images in the Order Shown	By default this checkbox is not checked. When you check it, the images shown in the listing will be rotated in the order you see here, from top to bottom. When unchecked, the images will be rotated randomly.
Add Image	This button will open a popup, allow you to specify the image and other attributes of the image. See below.

What you see below is the popup that appears when you either choose to edit an image that's already been added to the rotator, or for new images you intend to add. When you click OK, your image will be added to the rotation.

Setting	Description
Image URL	If you know the exact path, you can manually type it here. Otherwise, clicking the browse button will open the image file manager, allowing you to look for, select, and upload the images you'd like to use.
Link To	Use this setting if you'd like for the images to be linked to a specific place. A valid value here would be a URL of some kind, such as http://example.com.
Tool Tip	A tool tip is a text snippet that will appear over the image, when you hover over it with your mouse cursor. If you want to have a specific value appear, such as "Click Me!" then enter it here.
Open In New Window	If you check this checkbox, the URL you entered above will open in a new window or a new tab, depending on the web browser your customer is using. In most cases, it will indeed be a new tab.

The image file manager below will appear if you choose to browse for an image to add to the rotator. Here, you can upload new files, create new folders, or even browse around for specific image files you've already uploaded when managing your products.

Setting	Description
Choose Files	If you're planning to upload a new image, click this button. It will open a familiar file browser dialog in your computer.
Upload	Click this button once you've selected a file to upload.
Add New Directory	By default, you'll see a "products" folder available. Use this feature to add a new folder to store files into. Simply enter a name into the textbox, then click the submit button. The folder will appear in the right panel. If you wish to put the folder in a specific place, you should navigate to that place in the right panel before creating your new folder.
Browse Files	By default, you'll begin in the root folder where your product images are stored. You can navigate into that "products" folder to use images from there, or other folders as you create them. Once images are found in the folder, you'll see an option to select or delete the images, as shown below.

Product Rotator

The product rotator content block works in very much the same way as the content rotator. You specify one or many products, and each time the page loads, this content block will randomly choose and display one of them. When you add this content block, you'll need to edit it to add the products you wish to rotate.

Now, use the product picker to search for, filter, and select the products you wish to include into the rotation. This instance of the product picker works in the same way as every other instance.

RSS Feed Viewer

If you have an RSS feed of information you'd like to display, this content block will parse it and display it as you specify. Any common standard RSS feed will be recognized. Like most content blocks, you'll notice that you will need to edit this one first, before it becomes useful.

Now that you have the content block edit view open, you can add the RSS feed and other settings, per your requirements.

Setting	Description
Feed URL	This is the URL of the RSS feed you would like to display. The RSS feed needs to be a standard RSS feed, in a standard RSS format.
Show Title	Each RSS feed item has a title. Check this checkbox if you wish to display the title. This is disabled by default.
Show Description	Each RSS feed item has a description. Check this checkbox if you wish to display the title. This is disabled by default.
Maximum Items	By default, you'll see the maximum listed here as 50. However, in most applications, you'll most likely want this number to be much lower. Enter any full integer here, such as a 5, to only list 5 items from the RSS feed.