Design Technologies and Creating Theme

This section explains the design technologies used in osCommerce and provides step-by-step instructions for creating and configuring a theme.

Note: This manual is for osCommerce v4.

1) Design Technologies Used

osCommerce uses the following technologies for front-end design and theme structure:

• CSS
• HTML
• AJAX
• jQuery
• Smarty

Key Characteristics:

1. Design-related data is stored in the database.
2. CSS and jQuery are cached, and updates are applied automatically when saving a theme.
3. Only the CSS and jQuery used on the specific page are loaded for improved performance.
4. Version numbering is used for cache control.
5. All changes to CSS and jQuery can be reviewed under the Log tab in the designer.

6. The theme is built using widgets, each with its own styles and settings.

2) Creating a Theme

1. Access the admin area of your website.
2. In the left-hand menu, select Design and CMS.
3. Click on the Themes tab.
4. Click the Add Theme button.

5. Choose one of the following options:

• Copy the current theme, or
• Create a blank theme, or
• Upload a theme file.

3) Working with Widgets

The template page is divided into three main sections:

• Header
• Content
• Footer

1. To add a widget, move your cursor to the desired location.

2. A pop-up button Add Widget will appear.

3. Click the button and choose a widget from the list.

The “Block” Widget

• Used to create the main page layout.
• Allows selecting the number of columns.
• The system automatically generates layout structure.

• osCommerce includes many pre-defined widgets for various purposes.

4) Working with Banners

1. Go to Marketing Tools → Banner Manager.
2. Click New Banner.
3. Under the Sales Channels tab, enable the banner for the required platform.
4. Create a new banner group.

5. Under the Name and Description tab, enter the details and upload the banner image.

6. Go back to your theme and add the Banner widget.

7. Hover over the widget and click Edit.

8. In the pop-up window, select the banner group and adjust settings as needed.

5) Working with Menus

1. Go to Design and CMS → Menus.
2. Click Create Menu.
3. Enter the menu name in the pop-up window.
4. Drag and drop the required menu items from the left column to the right.
5. Click Save.
6. Return to your theme and add the Menu widget.
7. Hover over the widget and click Edit.
8. Select your menu and add your settings to the widget if necessary.

6) Working with CSS and jQuery

1. Open the Designer in the admin area.

2. To manage CSS:

• Go to the CSS tab.
• Use the dropdown to access styles grouped by widgets.
• Add new classes if needed.

3. To manage JavaScript:

• Go to the js tab.
• Use the tl() function wrapper to insert your code.

Example:

tl (){

console.log(‘Hello’);

}

Your theme setup and UI components can now be customized further depending on layout and design requirements.