Lesson 15. CS-Cart Design — Layouts. Part 1

Layouts determine the structure of a storefront of CS-Cart php shopping cart program. A layout consists of layout pages, which represent various page types of a storefront.

Layouts are located at Design → Layouts. Layout pages correspond to the real store pages. The Default layout page is used for web shop software elements like Logo, Search, and others that are required for each page in a store. Under the list of layout pages there is a detailed structure of the selected page. Changes in this structure lead to changes on a storefront. This structure is the main layout tool. On the right side is the panel where administrators can switch between layouts to edit them. Layouts drastically change the look of a store. Also there is a widget code to embed a store into a third-party website. Use the Plus button to add a new layout, and the gear button to manage blocks, export and import layouts. To sum it up the layout structure determines what information and in what way is presented on a storefront.

Ecommerce shopping cart package layout pages consist of blocks nested inside containers. Blocks are white-blue rectangles, and containers are grey rectangles. They also called grids. Containers are divided into two groups — root containers and child containers. This is done for a better page zoning.

So, a block contains a certain piece of information like a logo, product details, breadcrumbs, etc. To change the structure of the page add, edit, remove, or simply move blocks. To temporary disable blocks click a switch icon. For deleting there is a trash icon on each block. To move blocks simply drag and drop them on a layout.

The same set of actions is applied to containers of the shopping cart program. By juggling blocks and containers it is easy to create a structure that suits any needs of any store. That’s it about blocks and containers in the CS-Cart php based shopping cart.