Hello,
We want to create a custom fresh, clean, modern template for our business.
It has to be minimal, framework-free, and utilize the latest VM3 features.
Is there a base template/code that we can start or borrow code from?
Is the default VM3 template (whichever it is, never looked at it) up to the task?
Thanks
https://extensions.virtuemart.net/english/manufacturer/virtuemarttemplates
fast, clean, easy to adapt, up to date, no frameworks
QuoteIs the default VM3 template (whichever it is, never looked at it) up to the task?
nope . it is just the core tmpl files on Beez
Quote from: GJC Web Design on April 19, 2020, 16:59:31 PM
https://extensions.virtuemart.net/english/manufacturer/virtuemarttemplates
fast, clean, easy to adapt, up to date, no frameworks
HERA : Not full responsive, but when you are not en expert, can be right but not modern
ZEUS : Modern and full responsive but a little to many scripts and css(bad pagespeed)
HORNE3 pro : is not so modern, but not so many scripts.
If you have no time and money to do your own template, this can be a choice, but you need to like the design.
Hello,
Horme 3 is a nice and popular free template.
but they have finished to maintain these 3 templates (Horme, Zeus, Hera) - according to this:
QuoteDear visitors and customers, the template club has shutdown since January 2020.
We don't sell, update or support our Joomla! templates and extensions anymore.
(from olympianthemes)
:(
And what now, dear Horme 3 users (to which i almost joined)? Is it possible still use Horme 3 and to make all updates on one's own?
Of course it is.
But there are no free lunches :)
Jörgen @ Kreativ Fotografi
Dear, I would have never cared less about free lunches :P Any tips how to go from J2.5 template to J3.6 template would be appreciated, though. :)
Quote from: Adwans on April 21, 2020, 17:58:36 PM
Dear, I would have never cared less about free lunches :P Any tips how to go from J2.5 template to J3.6 template would be appreciated, though. :)
Some template need quick adjustment and some other using frameworks can be a pain to adjust.
Quote// echo '<div>'.' " '.$rquote->quote.' "'.'</div>';
echo '<div>'.' "-'. .$rquote->quote. .'-"'.'</div>';
All Olympianthemes are Joomla 3, no need for a 2.5 Joomla start...
Joomla.org has probably some tutorials
Jörgen @ Kreativ Fotografi
Quote from: Adwans on April 21, 2020, 16:34:07 PM
they have finished to maintain these 3 templates (Horme, Zeus, Hera) - according to this:
QuoteDear visitors and customers, the template club has shutdown since January 2020.
We don't sell, update or support our Joomla! templates and extensions anymore.
Those templates are available from VM Extensions, eg https://extensions.virtuemart.net/template/templates/hera-virtuemart-template-detail
Why avoid template frameworks? We use Gantry Framework for all new websites and don't seem to have any issues with performance.
Is it different with VirtueMart or are we just talking about margins?
Quotedon't seem to have any issues with performance.
Logically - each framework loads around 1.2 - 2.4MB JS and CSS compared to a template that uses only those parts that I allow or create.
Just because you don't see it doesn't mean it's not seen by clients, Google or others.
You also don't have to have the right sites (5,000 users at a time and 100 orders at a time) and that's why you think you're ok.
Exactly as Pinochio states.
For your base template, load what you need in as few calls as possible - not what someone else puts in to make it fit a wider user base.
Bloatware is often present in these framework templates and can have a major impact on user experience and Google.
https://developers.google.com/speed/pagespeed/insights/ (https://developers.google.com/speed/pagespeed/insights/)
Quote from: w360 on April 22, 2020, 14:07:54 PM
Why avoid template frameworks? We use Gantry Framework for all new websites and don't seem to have any issues with performance.
Is it different with VirtueMart or are we just talking about margins?
Frameworks is not the only problem, but most time it's used to simplify the designers task with plenty of options to check, system plugins, rendering ...
And the CSS use bootstrap + template extra style.css,layout.css, inline.css with !important inside, extra fonts, extra javascripts.
So Yes most time a template made with a framework is 2 time slower then a hand made template. But f course it's not always the case.
If you know that you need 8 template positions, know your customer needs, color and design. You can save many loading time.
When you want to have a real perfect fast site and good user experience you do not only load what you need. You should check "above the fold" to fit into 14k whenever possible as well.
Explanation is very technical but worth to spend the time to learn some network technology.
Frameworks are not needed so much nowadays. You can do responsive layouts using CSS Grid and Flexbox. I plan to go that direction in the future.
I would like to ask from the VM dev team to make a few improvements to their default template (+ dashboard settings), because it is getting out of date pretty fast.
1) Remove dependencies on jQuery.
2) Remove dependencies on obsolete libraries (facebox etc)
3) Decouple HTML-JS code... put scripts in separate files.
4) Strive for async JS code.
Currently, you cannot defer or make VM JS code load asynchronously. The template breaks.
But it is essential (for fast load times, UX, pagespeed, SEO) to be able to just load your scripts last, after everything else, after the first page render.
Makes for much faster user experience. And, it's the current and future gold standard.
It's not hard to accomplish, but you need to design your HTML/CSS/JS for this scenario.
i.e. do not depend on an immediately executing script to fix your presentation & functionality.
You may as well put a placeholder in the content, and once/when the script loads (asynchronously, sometime in the future), then present the component.
Maybe you have already done this work in your templates?
Yes removing inline JS is a good idea.
Best not to put scripts in separate files - rather combine into a single minified file allowing a single call - which reduces time to load.
Same for CSS.
VM has just introduced capability for use of img attribute loading="lazy" which can (and does) significantly reduce page load speed on product browse pages
JQuery will be with us for some time.
QuoteBut it is essential (for fast load times, UX, pagespeed, SEO) to be able to just load your scripts last, after everything else, after the first page render.
Fast load times/pagespeed/SEO - they are all the same point - and how prey does this all help UX?
No need to bundle and minify resources, because it hurts editability/customization. There are Joomla plugins that do the bundling just fine.
jQuery may be with us for some time, steps can (must) be taken now to gradually move away from it. It's a dead-end, most are moving away from it.
My joomla website still loads up the 300k+ mootools library because a couple of extensions require it.
Don't let us fall into the same trap, or a couple years from now it will be too late.
Async javascript helps UX, because the user doesn't have to wait as long for the page to appear.
It doesn't have to be 100% functional, but stuff should be shown in the DOM as soon as possible.
It's ok for the "Add to Cart" button to be functional a second or two after the page has loaded.
It sounds like an e-shop optimization, which I do to the extent (depth) how much the customer pays.
It is not related to Joomla or VirtueMart basic installation.
The administrator does what he can (I do) and then he has much better work results than others, which is why customers order it.
The administrator does not know what the developers is able to modify.
I'm able to leave up to 100 hours for optimization, I'll be happy if VirtueMart solves my problems for me.
QuotejQuery may be with us for some time, steps can (must) be taken now to gradually move away from it. It's a dead-end, most are moving away from it.
I'm not 100% sure.
Yes, there were attempts to replace JQuery with something else. Then it was found that another solution to cover all cases is much more robust and currently I have information that the developers are returning to jQuery back.
QuoteMy joomla website still loads up the 300k+ mootools library because a couple of extensions require it.
Yes, my too.
Welcome, now you can make optimalization.
Is VirtueMart really responsible for this?
QuoteAsync javascript helps UX, because the user doesn't have to wait as long for the page to appear.
It doesn't have to be 100% functional, but stuff should be shown in the DOM as soon as possible.
It's ok for the "Add to Cart" button to be functional a second or two after the page has loaded.
Joomla has the ability to load javascripts like async and defer using parameters.
It's up to you whether you fix it (you can't say developer bugs) or not. There are cases when it is not possible to clearly determine that async or defer is needed, and this decision should be up to the e-shop developer and not the extension developer.
It's just up to you to create the e-shops and I think this is the right way - there is a possibility that it is up to you whether to use it (according to your final output).
QuoteNo need to bundle and minify resources, because it hurts editability/customization. There are Joomla plugins that do the bundling just fine.
Your point was speed - you cannot have it both ways - calling less files does have a significant impact on page load times. That does not mean you have to remove the the core unminified versions.
To further help - the latest version of VirtueMart provides a hidden config to load a single CSS "vm-ltr-combined-min.css" (up to you what it contains) this will replace the two files -site.css and -common.css.
It will also not load the -reviews.css if reviews and ratings are disabled.
This can be invoked using
VMcombinedCssFE=1 in virtuemart.cfg
QuotejQuery may be with us for some time, steps can (must) be taken now to gradually move away from it. It's a dead-end, most are moving away from it.
QuoteMy joomla website still loads up the 300k+ mootools library because a couple of extensions require it.
Oh dear, I would suggest that such modules are removed or updated - the extra calls for modules and the potential for additional css and js has an even worse hit on page speed.
As google thinks "mobile first" try thinking about what you can prevent from loading (not just loading and hiding!) when viewed on a mobile, people don't hold their phones in landscape mode ;-)
Loading loads of modules and plugins will kills site speed - but try and tell that to the "would be developers" that just look for the ready made solution (usually at the lowest price or free!)
QuoteDon't let us fall into the same trap, or a couple years from now it will be too late.
It is never too late but also good to be thinking about such things now.
QuoteAsync javascript helps UX, because the user doesn't have to wait as long for the page to appear.
For many sites - the lazy loading of images has the potential to massively improve page load speed times - so many are thick with large banners and images that kill site speed, far worse than a couple of js and css files.
I agree in part with pinochio:
Much of a sites overall performance is not down to VM - you have to think holistically and design your total site to take advantage of what you know! VM alone will not sort out the issues of a slow site, my first thought was "put it on a decent host" but of course you probably already do that.
As you may have seen from the options for Lazy loading media and combined CSS - some useful generic things have moved forward in the latest version that may benefit many users.
Welcome to the world of Open Source :)
You are a music conductor who has many musicians at his disposal and his only concern is for everyone to play (work) best as one orchestra.
This is your job. Not the work of developers. They are preparing their extension to the default Joomla template and mostly without optimization, which takes another time in longer (I dare say) 100% development.
Nobody will pay for that. Just look at what price, for example, some offer extensions for VirtueMart. (10 EUR and the like). The result also corresponds to this.
For those who misunderstood...
My point is simple: VM's default template has some "issues" and I pointed them out, with suggestions.
Why it matters?
1) Because most 3rd party templates I've seen are based on the VM default, and build upon these core issues.
2) Because it makes it really difficult to build truly modern and competitive websites, if you can't squeeze out every bit of performance.
3) Google already complains that the TTI (Time To Interactive) is already too high... (because all the scripts have to be loaded first, before anything is usable).
It matters now, and It will matter a lot more in the future.
Yes it is good to keep people thinking.
If you want to see how the paid for guys are performing for Mobile - regarding TTI and page speed just take a peek at some of these in the top 50 : https://www.shopify.com/blog/shopify-stores (https://www.shopify.com/blog/shopify-stores)
hmm, I tryied generate report from lighthhouse for https://www.tluxe.com/collections/50-under (one site on 3 place in top) and is the same as our eshop without optimalization :)
Try for example the eshop www.notino.cz. The developers spent 600 hours on it for optimization. The result is also not much.