VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: gianluca.brizi on November 10, 2022, 17:34:52 PM

Title: tutorial for show pages editing
Post by: gianluca.brizi on November 10, 2022, 17:34:52 PM
Hello. I need to know where I can find a tutorial to editing the category and product style. For example the template displays H1 and H2 typography correctly but I need to show for example H4 for category title. Is there a place where to find informations on how manipulate the way by with virtuemart shows the products and the category? In the documentation is written that we have to use the joomla template at first. It is impossible with the simple configuration settings, to change the products page style. Please suggest me a documentation page or a link to study the way to change the style to showing pages. Many thanks.
Title: Re: tutorial for show pages editing
Post by: pinochico on November 10, 2022, 19:17:50 PM
you can edit template for category.
First - learn about Joomla MVC - model, view, controllers
Second - learn about Joomla override view template
Third - find view for category - create override view, put in your template and edit.

Some like as this: components/com_virtuemart/views/category/tmpl/default.php

BUT!

We hard working a lot of years on SEO for shops. And

QuoteI need to show for example H4 for category title

is totally wrong  8)
Title: Re: tutorial for show pages editing
Post by: jenkinhill on November 10, 2022, 22:45:40 PM
Template files provide the basic layout and code markup. Joomla templates provide the basic site layout and an extension like VirtueMart uses its own template files to be included within the Joomla layout. In standard VirtueMart these can be found in (for example) the
JoomaRoot/components/com_virtuemart/views/productdetails/tmpl/ directory.  These are used in conjunction with "sublayouts" which are in JoomlaRoot/components/com_virtuemart/sublayouts

If these files are edited then the edited files are used as template overrides.  These are stored within your Joomla templates HTML directory.
For tutorials on Joomla template overrides see https://www.joomlashack.com/blog/joomla/list-of-ostraining-resources-on-joomla-teamplate-overrides/

The layout is styled using cascading style sheets - or CSS. Those for the Joomla template will be located within the template's directory and those for default VirtueMart in JoomlaRoot/components/com_virtuemart/assets/css   Edited CSS styles are usually used in override files, and can often be included in a Joomla template ustom.css file.
A good CSS course is https://www.w3schools.com/css/

So it's not easy to change layouts & styles. Just takes a little learning and experience.
Title: Re: tutorial for show pages editing
Post by: gianluca.brizi on November 11, 2022, 08:20:11 AM
Thanks for your replies. In the product view Virtuemart is too raw. I would liket to create a page where the Virtuemart product is a column, and the other column there are imformations as an article. This is dofficult and probably impossible. I have to notice that the VM product page is ugly. It is not editable since I tried a lot of combunationa and often the website briks.
Title: Re: tutorial for show pages editing
Post by: gianluca.brizi on November 11, 2022, 08:44:09 AM
Hello. I made the first tests based on your replies that helped and thanks for it. I will creare a my own page php hopeing to find that in the dropdown menu of the category view slide. But please: why I cannot see the category description? If I set "yes" to the dropdown menu: Show Category description. Something is not working. I set YES but the description in the category view is not shown. I made a description and it is not shown. I tryed to create the custom field. Ok I will talk about it in other thread and I will find info about the custom field. But I can create a good page through the creation of custom fields. Can be right to create a copy of default.php and thed edit that? Thanks in advance.
Title: Re: tutorial for show pages editing
Post by: GJC Web Design on November 11, 2022, 09:38:32 AM
QuoteCan be right to create a copy of default.php and thed edit that?

yes -- most people start this way

Quotewhy I cannot see the category description?

checked your settings in the menu to your category ?
Title: Re: tutorial for show pages editing
Post by: gianluca.brizi on November 11, 2022, 09:56:42 AM
Thanks for your reply. Yes I edited a default.php file and I renamed default_new.php. I found it in the dropdown menu of the single category settings in the virtuemart category panel. For one of the two category I choosed the default_new.php layout. Nothing changed. I did not see any changes. I only added a <p>something somewhere</p>. I pasted it everywhere in the document. Nothing appened. The Category is shown as the old file.
I tried to create a new file in the same way in the folder: joomlahome/templates/mytemplate/html/com_virtuemart/sublayouts/default_new.php
and I created the same file in this folder: joomlahome/components/com_virtuemart/sublayouts/default_new.php
I noticed that it compares in the proper dropdown menu in the category settings slide. I choosed this file as a sublayout for category view ------- the website was in brick. So I retoruned back to the default setting of the beginning.
Any suggestion to what is the file to edit? I know the differences between HTML code mixed with the PHP code, I did not changed the PHP code but I changed only the HTML code. I noticed the DIV tags and I inserted there some <p>...</p> elements.
Title: Re: tutorial for show pages editing
Post by: gianluca.brizi on November 11, 2022, 16:12:59 PM
HELLO - UP
why the default_new.php is changed but the changes are not visible? No <hr /> no <p></p> no <br /> are visible .....
Title: Re: tutorial for show pages editing
Post by: GJC Web Design on November 12, 2022, 11:07:21 AM
cleared all caches? cat views are cached by VM no matter what your settings are .

u must manually clear them ..  /administrator/index.php?option=com_cache

Quotejoomlahome/templates/mytemplate/html/com_virtuemart/sublayouts/default_new.php

this is correct
Title: Re: tutorial for show pages editing
Post by: gianluca.brizi on November 12, 2022, 11:26:03 AM
Thanks for your precious help, I am going to work after this suggestions.
Every change I make I erase two cache: old and new.
Title: Re: tutorial for show pages editing
Post by: jenkinhill on November 12, 2022, 13:03:35 PM
I use the Regular Labs Cache Cleaner (https://regularlabs.com/cachecleaner) to automatically clear caches after making edits/changes.
Title: Re: tutorial for show pages editing
Post by: gianluca.brizi on November 13, 2022, 10:20:16 AM
Hello. Thanks for your replies.

It is just to up and to suggest an interesting thing

I deactivated cache in the VM config panel. Unsure if this works I erase cache immediately after any changes. After I changed the configuration in the VM panel, nothing is shown in the joomla cache list, so I presume that no cache is opened. Anyway I erase cache pressing buttons even if the list is empty.

I created some files cloning the templates present in sublayout folder of VM. I copied them renaming them, and I placed them in the following folder:

joomla_root/templates/mytemplate/html/com_virtuemart/sublayouts

I changed name as suggesting ballon tells: "products_ " prename. So them are called products_by_cyb1.php products_by_cyb2.php and so on .....

Every sublayouts are showing in the dropdown menu of the Categosy settings in the VM control panel, so they are recognezed by the VM system.

Ok, as you friendly suggested I am going to change the code in these files. If I change something in PHP the website briks.
I write here some changes I made.
Below is the code at line 49 of the default product view:
<div class="<?php echo $type ?>-view">
  <h4><?php echo $productTitle ?></h4>

-----------------------
below is the code I inserted that should show some text inside the page, only text:

<div class="<?php echo $type ?>-view">
<?php echo "Prova CYB" ?>
  <h4><?php echo $productTitle ?> by CYB</h4>
<?php // Start the Output
}

-------------------------
The problem is not that never changed because I made mistakes, the REAL problem is: why it doesn't change? Why isn't there any arrors? Why nothing changed after every cache was erased?
Title: Re: tutorial for show pages editing
Post by: gianluca.brizi on November 13, 2022, 12:42:19 PM
Hello. I am trying to understand why the templates are not changing after my changes and after cache erasing. My problems are sostantially ONE: to have the product page in two coumns.
I tried to do this change in the default.php file that is in the following folder:

joomla_root/components/com_virtuemart/views/productdetails/tmpl

<div class="product-container productdetails-view productdetails columns-2">
I took this way from the template producer website. It should work. But what is the dropdown menu to choose from?