Editing the JKassa component template

Written by GeneticsPro | Category: Blog | Hits: 13

This tutorial shows you how to change the parameters of a JKassa component template and the HTML code in its files.

When you create an online store, you can customize its appearance and the behavior of its elements. You can change the style according to your brand and add functionality or special information related to your business.

What are the JKassa component templates?

A component template is a collection of files that control the layout and appearance of the component and JKassa modules. The component template is not responsible for the overall appearance of your entire site, the main Joomla template is responsible for this. To achieve maximum effect, the component template must inherit and blend in with the Joomla core template styles.

Most component templates have built-in parameters that you can easily configure without changing the code for the template files. To make deeper changes to your theme or make changes that are not available in the template settings, you need to make changes to the code of its files using the built-in HTML editor.

Most of the files that make up the JKassa component template have the extension .tpl and contain the code for the language Liquid. In addition to the Liquid code, the template files also contain HTML, CSS and JavaScript code. Other files can have different extensions.

Beginning of work

The first step is to go to the template editing page in the administrative part of the JKassa component (Components → JKASSA → Tools → Design).

edit_template_01

After selecting a template, you can configure it in two ways:

  1. Change the built-in parameters for your theme by going to the "Options" tab.
  2. Change the code of your theme by selecting the desired file in the list of template files on the "Editor" tab.

Template options

Template options allow you to change the appearance of some elements of your theme. The Settings tab displays a list of options that you can change.

To make changes to certain types of pages in your store, change the required option and save the changes. For example, if you want to display the product quantity selection field on the product list page, select Show in the Field for Quantity box (1), then click the Save button (2) to save the changes to the template settings.

edit_template_02

Editing HTML/CSS and other files

On the "Editor" tab you can edit existing files and add new ones.

Select the desired file from the list of template files (1) to edit it directly in the browser, in a special HTML code editor (2). The HTML editor allows you to edit the code of the files that make up your theme.

edit_template_03

After saving the template file (1), a copy will be created with your changes (2), which will be used in the external interface of the store to display its elements. With all subsequent saving of the copy file, the copy will be changed, not the default file. This allows you not to lose changes in the files when updating the component template. Files that have been changed are marked with a pencil icon (3).

edit_template_04

You can store an unlimited number of copies, but use only one.

To create a new copy of the file, switch to the default file (1) and save it again. The previous copy of the file (2) will remain inactive, and a new copy (3) will be responsible for the design of your theme.

edit_template_05

You can freely switch between your copies or return to the default file.

To delete a previously created copy, click on the "Delete file" icon in the right side of the button. The file will be deleted without the ability to restore it.

edit_template_06

After making all the changes, close the template editing screen by clicking the "Undo" button on the toolbar.

Comments (0)

There are no comments posted here yet

Leave your comments

Posting comment as a guest. Sign up or login to your account.
Type the text presented in the image below