Design Technologies and Creating Theme

From osCommerce Wiki
Revision as of 15:43, 19 January 2022 by Admin (talk | contribs) (Protected "Design Technologies and Creating Theme" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)) [cascading])
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Note: This manual is for osCommerce v4.

Technologies:

- css

- html

- ajax

- jQuery

- smarty

In Trueloaded the data connected with the design is kept in the database. CSS and jQuery are cached and while saving the theme CSS and jQuery are automatically updated. Also only those CSS and jQuery that are used on the page are downloaded to the page.

In CSS and jQuery there is version accounting for caching.

All CSS and jQuery changes can be seen under Log tab in the designer.

Image 621.png

The theme is fully set up based on the widgets. Each widget has its styles and settings.

Image 622.png

Creating the theme

Go to the admin area. In the left hand menu choose Design and CMS, then Themes.

Then click on Add Theme button.

Image 623.png

It is possible to create the theme copying the current theme or creating the blank theme. Also it is possible to download the theme.

Image 624.png

Working with widgets

There is the list of widgets in the theme. The template page is divided into three sections: header, content and footer.

To add a widget point your mouse cursor to the required place for pop-up button Add Widget to show. Then choose the required widget from the widget list.

The first widget Block

With the help of this widget the page layout is made. The system automatically generates the page layout. In the widget Block you can choose the number of columns.

Image 625.png

In the system there are a lot of widgets set up by default.

Image 626.png

Working with banners

To add a banner go to Marketing tools -> Banner Manager.

Then click on New Banner button. Switch it on under Sales channels tab for the required platform. Then create the new banner group.

Image 627.png

Under Name and description tab fill in the data and upload the image.

Image 628.png

Then go to your theme and add the widget banner. Then point your mouse cursor to it and click on Edit. In the pop-up window choose the required banner group and add your settings.

Image 629.png

Working with menu

To add the menu create it under Design and CMS -> Menus tabs.

Then click on Create menu and in the pop up window fill in the menu name. Then drag and drop the required menu points from the left to the right column and click on Save button.

Then go to your theme and add the menu widget. Then point your mouse cursor to it and click on Edit.

In the pop-up window choose your menu. Also you can add your settings to the widget.

Image 630.png

Working with CSS and jQuery

In the designer you can add styles and scripts via the admin area.

Image 631.png

Under the tab CSS you can find the drop down tool, where the styles are arranged according to widgets. You can also add the new class for a widget.

Image 632.png

Under the tab js you need to use the function tl() and add your code within it.

Image 633.png

For example

tl (){

console.log(‘Hello’);

}