Responsive Classic Redesign Support thread

[chadlly2003]

matchHeight.js is historical and has been used in responsive_classic for historic times to match grid heights.

For lighthouse: it depends which device and which connection you are testing. Moto G4 and 4G?

The harder you optimize responsive_classic the more you will see FCP = LCP = document complete

Everything will wait till matchHeight.js has done work for the whole site.

It can and IMHO should be substituted by modern CSS.

I can say it works. It tested that but stopped at refinement for category layout.

My front-page hero is full of slide-in animations. So Layout Shift could become a problem.

IMHO one step to really new templating

What you think?

I used CSS Grid to build this template, so the max-height script is essentially unnecessary — the layout is already handled by the CSS. Later today, I’ll remove the script and check whether anything still depends on it.

[chadlly2003]

I used CSS Grid to build this template, so the max-height script is essentially unnecessary — the layout is already handled by the CSS. Later today, I’ll remove the script and check whether anything still depends on it.

Okay those are files from the original responsive classic template. good catch
**note: This change should have no impact on the site

On the next update i will remove the following files.....

includes\templates\responsive_classic\jscript\jscript_matchHeight-min.js
includes\templates\responsive_classic\jscript\jquery.matchHeight-min.js
includes\templates\responsive_classic\jscript\jquery.matchHeight.js

Let me know what your score is after removing those files. Just want to see if it makes a difference...

[chadlly2003]

Okay those are files from the original responsive classic template. good catch
**note: This change should have no impact on the site

On the next update i will remove the following files.....

includes\templates\responsive_classic\jscript\jscript_matchHeight-min.js
includes\templates\responsive_classic\jscript\jquery.matchHeight-min.js
includes\templates\responsive_classic\jscript\jquery.matchHeight.js

Let me know what your score is after removing those files. Just want to see if it makes a difference...

I am going to double check myself on this. to be continued

[chadlly2003]

As mentioned i will update the template this week. It is safe to remove the following files as they are from the original classic template.

includes\templates\responsive_classic\jscript\jscript_matchHeight-min.js
includes\templates\responsive_classic\jscript\jquery.matchHeight-min.js
includes\templates\responsive_classic\jscript\jquery.matchHeight.js

[Shop Suey]

It's a really good thing you purge matchHeight.js

At https://www.zencartdemo.com/index.ph...index&cPath=23 there are several items for "New Products For April - Test Examples". Some of the have longer titles with >1 line. At original responsive_classic that would break the layout without matchHeight.js.

And there is no Cumulative Layout Shift at the front-page. That is technically a real step forward to modern webdesign.
At

[chadlly2003]

Template has been updated to version- Zen Cart Classic Template Rebuild V4D

I just updated the template and have been working on cleaning up the CSS to make it more user-friendly. I significantly reduced the size of stylesheet_zcustom.css, which is the main stylesheet for this template. I’ll continue refining and improving the template moving forward

[chadlly2003]

Just an update on the template. I haven’t submitted version 6.0 to Zen Cart yet, but it is active on GitHub..

You can view some of the changes i made on the product listing page
https://www.zencartdemo.com/index.ph...e=products_all

On the product Listing page
1. No matter which option you choose for the following setting, the layout will maintain a clean and consistent appearance:
Display Product Add to Cart Button
(0 = Off, 1 = On, 2 = On with Qty Box per Product)

2. The following settings now integrate smoothly into the product listing layout and provide a much cleaner look and feel:
- Display Product Manufacturer Name
- Display Product Model
- Display Product Quantity
- Display Product Weigh

Also, under Configuration -> Layout Settings, enabling Use split-login page now provides a cleaner and more polished layout experience

3. I also combined and cleaned up a large number of unnecessary CSS files.
This will continue to be a work in progress as I refine and optimize the template further.

4. Fixed all accessibility and W3C HTML/CSS validation issues for the latest browser updates.
The template is now back to 100% compliance across the board.



My question is:
Are there any other backend settings that can significantly affect the look and feel of the template like the ones above? I want to make sure I cover all the bases because it’s easy to overlook something. My goal is that even if a user changes settings in the admin panel, the template will still maintain a polished and professional appearance with minimal extra work on their end.

Also, if anyone has suggestions for features, improvements, or changes, I’d really appreciate the feedback.

It’s amazing how much time and effort I’ve put into this template, but I’m finally feeling confident that anyone will be able to use it and truly make it their own.

[pilou2]

You definitely did a great job! Thanks for all your hard work.

I have some CSS I use for forms that really improve visibility of what you have to fill in, it might interest you. I am not sure if it renders well on all type of browser, but it won't hurt anyway. It shows required fields placeholder in red.

#country:has(option:first-child:checked), #stateZone:has(option:first-child:checked), #state::placeholder, input:required::placeholder {
    color: #8b0000;
}

#country option:not(:first-child), #stateZone option:not(:first-child) {
    color: black;
}

[chadlly2003]

Update on the ZenCart Classic Redesign Template...

I’ve made a lot of changes over the last few weeks, and this is now becoming a true Zen Cart template redesign instead of just a visual refresh.

Some of the biggest improvements:

Removed a large amount of unnecessary CSS to make customization much easier
Cleaned up the layout and simplified the structure for better usability
Re-enabled and restored many Zen Cart features/modules that were hidden in the original design
All previously hidden modules are now active and visible

The goal was to make the template easier to work with, easier to customize, and more functional while still keeping the classic Zen Cart feel.

There are still some minor changes I’m working on, and I should have everything wrapped up within the next two weeks for Version 6.0.

Examples of demo pages. Files are also on github

https://www.zencartdemo.com/index.ph...products_id=34
https://www.zencartdemo.com/index.ph...products_id=42
https://www.zencartdemo.com/index.ph...index&cPath=22


FEEDBACK IS WELCOME

[lat9]

Have you tested this template with POSM? The wrapper that's used for the attributes' blocks (.attribsBlock) is non-standard and will require customization within POSM's configuration settings; see https://www.zencartdemo.com/index.ph...products_id=34