Responsive Classic Redesign Support thread

pilou2:

This is simply GREAT!
My first reaction was 'Wooah...'
I tested the demo site on a smart phone and a big screen PC, everything looks great and works great! On big screen, where thumbnails are on the left, I did not see at first that I could scroll up and down and thought there were only 5 images for Bugs' Life DVD. After watching the gallery, I realized there were more and found out I can scroll through thumbnails even on a big screen PC, which I think is still a rare functionality at this size of screen. Perhaps a visual indicator that scrolling is possible would be nice.
I really hope that this will become a ZC core functionnality.

Thank you for the response. I took your suggestion and added the arrows in. It the little things that make a difference. If there is anything else that you see please feel free to give some feedback. This is exactly what i was looking for....

chadlly2003:

Thank you for the response. I took your suggestion and added the arrows in. It the little things that make a difference. If there is anything else that you see please feel free to give some feedback. This is exactly what i was looking for....

I am almost done with this module. Finally got it to work on all devices. There were a of tablet and swip issue that had to be resolved.

Just need to hide arrows that don't need to show. Should have this wrap up sometimes this week.

Posted this in the wrong forum - I think this pertains to the template I'm using - Responsive Classic Redesign. Moving from v1.5.6 to 2.1.0, and it's like moving from English to Esperanto for a shopkeeper like me. I'm getting there, but still stuck on very basic settings.

So I got "Show Featured Products on Main Page" to show featured products, but new products are also being displayed first, even though it's set to zero. No clear idea what I'm doing wrong.

Don Wagner:

Posted this in the wrong forum - I think this pertains to the template I'm using - Responsive Classic Redesign. Moving from v1.5.6 to 2.1.0, and it's like moving from English to Esperanto for a shopkeeper like me. I'm getting there, but still stuck on very basic settings.

So I got "Show Featured Products on Main Page" to show featured products, but new products are also being displayed first, even though it's set to zero. No clear idea what I'm doing wrong.

not sure why that is not working. You could do this to solve your issue

Add to the very bottom
path includes/templates/responsive_classic/css/stylesheet_zcustom.css

#whatsNew {
display: none;
}

Thanks Chadlly! That fixed it for sure. I appreciate your contribution.

I finished the image gallary you can check it out on the Demo site.
https://zencartdemo.com/index.php?main_page=product_info&cPath=22&products_id=34

Files on github
https://github.com/chadlly2003/zencart_responsive_classic_redesign

To install
Upload the files directly to your Zen Cart root folder (where index.php is located).
No additional setup required — the script will automatically detect thumbnails and the main image on your product pages.

**Fully featured image gallery with thumbnails, drag/swipe scrolling, infinite looping, arrows, and a modal lightbox
**
• A main image display
• A thumbnail strip (left side or horizontal on mobile)
• Click + hover thumbnail switching
• Drag-to-scroll thumbnails (mouse + touch)
• Optional infinite thumbnail looping
• Navigation arrows (if needed)
• A modal/lightbox when clicking the main image
• Swipe support inside the modal (mobile)
• Prevents background scrolling while modal is open

You may have to clear your cache after installation. Also if you viewed the demo site i would recommend clearing out your browser cache so you can see the updated functionality.

Do you like to have a challenge?
Eliminate matchHeight.js

That will have serious impact for lighthouse.

ShopSuey

I am always up for a challenge. I just ran light house for desktop and mobile on the responsive classic template. All seems good. Am I misunderstanding?

See results below

mobile reults

desktop results

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?

Shop Suey:

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

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

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

At https://www.zencartdemo.com/index.php?main_page=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

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

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.php?main_page=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.

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;
}

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.php?main_page=product_info&cPath=22&products_id=34
https://www.zencartdemo.com/index.php?main_page=product_info&cPath=28&products_id=42
https://www.zencartdemo.com/index.php?main_page=index&cPath=22

FEEDBACK IS WELCOME

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.php?main_page=product_info&cPath=22&products_id=34