You can change layout of the front end of the IPrice minimart component by overriding CSS styles, overriding templates and layouts of the coponent.
CSS style override
CSS styles of the front end of the component are located in the site folder /components/com_ipricecalc/css in the appropriate subfolders. For details, see the corresponding subsection in this section.
To override CSS styles, use the special folder /components/com_ipricecalc/css-override, which has a similar structure to the /components/com_ipricecalc/css folder. Create the CSS file in the /css-override folder in the corresponding subfolder with the same name that you want to change in the /css folder. Add to the created file only those classes and attributes of classes that you want to change. Thus, when the component is updated later, the styles in the /css folder will be replaced with the styles of the new version, but your style changes will remain in the /css-override folder and apply. For example, if you want to override some price list styles that are in the file /components/com_ipricecalc/css/price/default.php, then create the file /components/com_ipricecalc/css-override/price/default.php. Then copy the CSS classes you want to modify into this created file and make the necessary changes for these CSS classes. It is recommended to include in the created file only those attributes of styles that you have changed, removing all unchanged attributes. This will ensure maximum compatibility with previous versions when updating a component.
Layout override
Layouts are fragments of HTML code that are used repeatedly on the pages of the IPrice minimart component. Layouts are located in the site folder /components/com_ipricecalc/layouts/com_ipricecalc/. The component contains the following layouts:
- cart-modal.php - HTML code of the pop-up window of the shopping cart content, which is displayed after pressing the "Add to cart" button.
- catalog_card1.php - product card with design style 1 displayed in the catalog mode.
- catalog_card2.php - product card with design style 2 displayed in the catalog mode.
- catalog_minicard.php - product card with a minimized design style (default), displayed in directory mode. Also the recommended products are displayed on the product page using the mini-card layout.
- image.php - HTML code to display the product image.
- imagegallery.php - HTML code for displaying the product gallery. It is used on the product page and on the category page, if the category has a gallery of images.
- inputqty.php - HTML code for displaying the item quantity selection field. It is used on all pages of the component where input of the quantity of goods is provided.
You can override any of the layouts by saving the layout file to your site’s template folder /templates/[template_name]/html/layouts/com_ipricecalc/ and changing the layout file to your needs. It is necessary to carefully change the PHP layout code, since the layouts in the new versions may be completely different and not fully compatible with the layouts of the old versions, especially if the difference in versions is large. Therefore, if you encounter a problem with the work of the redefined layout, it is recommended to copy the layout file of the new version into the Joomla template folder again and make the necessary changes to it again.
Template override
You can override the output templates of the component by copying the appropriate template to the folder of your site’s template /templates/[template_name]/html/com_ipricecalc/. For example, to change the price list output template, copy the /components/com_ipricecalc/views/price/tmpl/default.php file to the /templates/[template_name]/html/com_ipricecalc/price/ folder and make the necessary changes in the copied file. It is necessary to change the PHP code of the template with caution, as the templates in the new versions may be completely different and not fully compatible with the templates of the old versions, especially if the difference in versions is large. Therefore, if you encounter a problem with the redefined template, it is recommended to copy the new version template file into the Joomla template folder again and make the necessary changes to it again.