How does Layout works in CS-Cart

In this article, we’ll explore how does layout works in CS-Cart and how to use its various tools to create a stunning eCommerce website.

When it comes to building an online store, layout is a crucial aspect of creating a visually appealing and user-friendly website. CS-Cart is a popular eCommerce platform that offers a range of tools and features to help merchants create custom layouts that suit their needs.

Themes and Templates

The first step in creating a layout in CS-Cart is to select a theme or template. CS-Cart offers a wide range of pre-built themes and templates that merchants can choose from. Alternatively, you can create a custom theme.

Layout Editor

Once you’ve chosen a theme or template, you can use the layout editor to customize the layout of your website. The editor is a visual tool that enables you to drag and drop elements like product lists, banners, and blocks of text onto a page and arrange them in a specific order. You can also change the size and position of elements, adjust the spacing between them, and add custom CSS styles.

Blocks and Grids For Layout in CS-Cart

CS-Cart utilizes a system of blocks and grids to create complex layouts. Users can add pre-built sections of content, such as product lists or newsletter subscription forms, to pages or templates. This system empowers users to actively design and customize their layouts with ease.

Grids organize the layout into a set of rows and columns, which can then be populated with blocks. This active approach facilitates the creation of responsive layouts that dynamically adjust to various screen sizes and devices. To create custom blocks for CS-Cart Layouts, follow the active steps outlined below:

File Structure to create a Block for Layout in CS-Cart

  app 
    |_addons
        |_addon_name
            |_addon.xml
            |_func.php
            |_init.php      
            |_schemas
                 |_block_manager
                     |_blocks.post.php
            
            
design
    |_themes
        |_responsive
            |_templates
                |_addons
                    |_addon_name
                         |_follow the path described in blocks.post.php 

Before all of this, first we must know how to create a New addon in CS-Cart.

Then create a new file block.post.php in schemas/block_manager/{‘filename’} where we will define the structure and content of your block. For example : –

use Tygh\Registry;

require_once Registry::get('config.dir.addons') . 'addon_name/schemas/block_manager/blocks.functions.php';

/**
 * @var array<string, array> $schema
 */

$schema['name'] = [
    'content' => [
        'phone_number' => [
            'type' => 'function',
            'function' => ['fn_my_custom_block'],
        ]
    ],
    'templates' => '{addons}/{addon_name}/templates/blocks/my_custom_block.tpl',
    'wrappers' => 'blocks/wrappers',
    'cache' => [
        'request_handlers' => ['%COMPANY_ID%']
    ],
];

return $schema;

Now, we will create a function in func.php to generate content data for block.

 <?php
    function fn_my_custom_block($params, $content) {
        return '<div class="my-custom-block">' . $content . '</div>';
    }

All that is left to do is create a tpl file in the same directory as mentioned in block.post.php. If more customization of the block is needed, it can be done in the tpl file.

That is all there to how does layout works in CS-Cart. If you need custom CS-Cart Development services then feel free to reach us and also explore our exclusive range of CS-Cart Addons.

!!Have a Great Day Ahead!!