News:

Support the VirtueMart project and become a member

Main Menu

tutorial for show pages editing

Started by gianluca.brizi, November 10, 2022, 17:34:52 PM

Previous topic - Next topic

gianluca.brizi

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.

pinochico

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)
www.minijoomla.org  - new portal for Joomla!, Virtuemart and other extensions
XML Easy Feeder - feeds for FB, GMC,.. from products, categories, orders, users, articles, acymailing subscribers and database table
Virtuemart Email Manager - customs email templates
Import products for Virtuemart - from CSV and XML
Rich Snippets - Google Structured Data
VirtueMart Products Extended - Slider with products, show Others bought, Products by CF ID and others filtering products

jenkinhill

#2
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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

gianluca.brizi

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.

gianluca.brizi

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.

GJC Web Design

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 ?
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

gianluca.brizi

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.

gianluca.brizi

HELLO - UP
why the default_new.php is changed but the changes are not visible? No <hr /> no <p></p> no <br /> are visible .....

GJC Web Design

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
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

gianluca.brizi

#9
Thanks for your precious help, I am going to work after this suggestions.
Every change I make I erase two cache: old and new.

jenkinhill

I use the Regular Labs Cache Cleaner to automatically clear caches after making edits/changes.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

gianluca.brizi

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?

gianluca.brizi

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?