Starting from CS-Cart version 4.1.4 the new Responsive theme is used (in beta testing). One of the reasons why it operates in beta testing mode is that this gives the developers enough time to adapt their add-ons by the time the theme becomes the default.
Further we will describe how to migrate your add-on to the Responsive theme.
Open the directory with your add-on files, find the themes_repository/basic directory (most probably in the var directory) and make its copy in the same directory. Rename the copy to themes_repository/responsive. When you install the add-on, its appearance for the basic theme will be defined by the files from the themes_repository/basic directory. For the responsive theme - by the files from the themes_repository/responsive directory.
Replace .css with .less
Rename the add-on styles .css file to the .less file. For example, if you had the styles.css file, rename it to styles.less. Do not forget to replase .css with .less in all files, where your styles are called back. In most cases it will be the styles.post.tpl file in the themes_repository/responsive/templates/addons/MYADDON/hooks/index/ directory. Where MYADDON is the name of your add-on. It is possible to use the .css files too, but it is reccomended to use .less to prevent the disorder when including files.
There are some templates that were removed from the Responsive theme. Check whether your add-on uses hooks in these templates. A list of templates that ware removed:
You can remove the hook files (for example, product_grid_list2.override.tpl for grid_list2.tpl) that are used in these templates from your add-on.
Changes in classes names
If your add-on uses the theme classes names, you should adapt these names for the Responsive theme.
The styles functionality was changed in the new theme. Now basic styles are stored in a single styles.less file, but not in two: base.css and styles.css. Now the class selectors (
.class) are widely used in styles (in the basic theme there were many styles with selectors defined by HTML tags).
For example, to define label for an input field in the basic theme, the
.control-group label was used.
In the Responsive theme you should define the
.ty-control-group__label class for label. In this case label will be placed above an input field. If you want label to be placed to the right of an input field, define
.ty-control-group__title for it.
This method gives more flexibility in defining selectors.
As you noticed, the
ty- prefix was added to classes. This prefix was added in order to prevent styles overlap with the styles of another site when using the Widget mode.
That is why it is important to look through classes that are used in templates, where a hook is built in.
Let’s take the Reward points add-on as an example. In the basic theme there is the following code for the
In the Responsive theme this code will look like this:
Adapt styles for the new appearance (use the styles less variables). Styles for different screen dimensions are possible to add to the responsive.less file. Add the file to themes_repository/responsive/templates/addons/MYADDON/hooks/index/styles.post.tpl
Do not forget about Media Queries to define different dimensions for different needs.
Usefull classes for the Responsive theme
- Non-table coloumn data were collected in div, and it is possible to use the
.ty-column[1-10]class for coloums. For example, if you need 3 coloumns use
.ty-column3. The smaller the screen dimension, the less the coloumns number in a line.
- Table data are represented by the
.ty-table class. For the small dimensions table changes its appearance.
<tbody> tags is necessary for this class.