Loading...

Layouting Example

We no longer maintain the Knowledge Base since version 4.3.x. All the latest user and developer documentation for 4.3.x and newer versions is now available at docs.cs-cart.com.

  • This article applies to CS-Cart versions:
  • 3.0.x

In this brief tutorial a basic page layout making in CS-Cart 3.x will be explained.

First off, log in to your store admin panel and go to Design -> Blocks. You will see the Block manager with the Default location opened for editing.

Click on the Add Location button:

Add Location

A New location dialog will appear. There are several obligatory fields needing filling out.

Dispatch defines the controller (and optionally mod and action) to handle a particular location. You can find more information about controllers in this section. Do not bother with all that right now.

We will use a pre-defined dispatch to save time and concentrate on layouting rather than core programming. Select Home page in the dropdown list. The dispatch for this location is now set to 'index'. This means that the location will be accessible from the browser by the following URL: %yourstoredomain%/index.php?dispatch=index. You can check the location appearance at any time by simply following this URL.

Name the location Sandbox.

Leave the rest of the fields empty and click Save.

Now the location has appeared among all the others and is opened for editing. It is blank, which is perfect for our educational purposes:

Blank Sandbox Location

Note that the TOP and BOTTOM containers are inactive and can not be modified in this particular location. This is because the location is not marked as default. All locations inherit TOP and BOTTOM container content from the default location. Any location can be marked as default (including our test location).

Grids

Page layouting starts with grid placing. Grids are fixed width and define the page structure.

We are going to create a layout for the CENTRAL container similar to that of Amazon.com.

In order to help you understand how the grids should be arranged I have marked up the central part of Amazon main page with 12 columns (according to the 960.gs layout principle):

Amazon Grid

Basically, just 2 grids will suffice — one to hold the main content (Grid 8) and one for the ads, special offers, etc. (Grid 4)

Back in the block manager you can see similar column mark up. The container is by default split to 16 columns, so enter the container settings by clicking on the cog icon , change the Width parameter to 12 and click Save.

Click on the + icon on the central container, then click on Add grid:

Add Grid

Set its width to 8. Leave the rest of the fields as they are and click Save. A new grid of width 8 will appear on the workspace.

New Grid

Create the second grid the same way, only this time set the width to 4, so the two grids will fully cover the page space.

That's it for gridding! That was easy, wasn't it?

Although the grids define the page structure they do not define the content: if you go to %yourstoredomain%/index.php?dispatch=index right now, you will see but a blank page (with only top and bottom parts inherited from the default location.

Now we can fill the page with content, which means placing blocks.

Blocks

On the Amazon page there are actually just 4 kinds of blocks present (marked in blue on the picture above):

  • product blocks (all the bestsellers, recommended items, best price, etc.)
  • category blocks (products by brand or type)
  • banner blocks (banners at the upper left side)
  • HTML blocks (more complex data like the Kindle ads with multiple links)

Click on the + icon on the first grid and choose Add block:

Add Block

First let's create an HTML block. This is the kind of block that can hold any kind of HTML content.

Go to Create New Block tab and pick HTML block:

HTML Block

Name it the way you like and put some HTML content on the Content tab (I use just some randomly generated text and images):

HTML Content

Now click Save and see your block appear in the first grid.

Click on the + icon and on Add block again to add another block. This time pick Products in the em tab.

Name this block Bestsellers. In order for this product block to look similar to the one on the Amazon page set the template to Grid and set the Number of columns in the objects list parameter to 4 in the Settings entry. Go to the Content tab and set the Filling to Bestsellers (make sure you have the Bestsellers add-on installed) and set the Limit to 4, so that there would be only a single row. Click Save.

Now you have 2 blocks in the first grid. You can move the blocks around by simply dragging them (try it, you'll like it!)

Add some Banner blocks to the 2nd grid. You can create graphical banners in the Website -> Banners section (make sure the Banners add-on is installed). Make the images for the banners 250 pixels wide to fit the grid width and look similar to those of Amazon.

Click on the + icon on the second grid and pick Add block. Go to Create new block and pick Banners.

Choose the Original template for simple static banners. Go to Content, set the filling to Manually, click on Add banners and pick some banners via the form. You can choose multiple banners for a single block, this way they will be shown one above another according to the order they are shown on the Content tab.

After you have finished adding banners click Create to create the block.

Finally we'll add a category block in the 2nd grid. Just like before click + and choose Add block.

In the Create New Block tab pick Categories.

Creating a category block is very similar to creating a product block which was described above. The trick is to pick the right template and configure it to make the items in the block fit the containing grid. Choose the template Multi-column list with the Number of columns in the objects list parameter set to 2.

Go to the Content tab. The filling should be set to Dynamic tree so that the grand-children categories of the selected category will not be shown. Click on the picker icon in the Parent category setting. In the appeared picker choose Electronics and click Choose. Now save the block.

So far your workspace should work similar to this:

Go to the URL %yourstoredomain%/index.php?dispatch=index to see the resulting page. It should look similar to this (with your content of course):

This is merely a short example of how simple page layouting in CS-Cart 3 is. You can customize the page further by playing with wrappers, creating more blocks and reorganizing the layout the way you like it.

<< Read previous Read next >>
Home / Docs / Design and Layout / Layouting Example