Responsive Classic Redesign Support thread

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

I made the changes you requested. Had to make some minor template adjustments to make it consistent across the board. Before I upload I have one question. Since this module is encapsulated what is the best way to override the css.
Do i just put it in my template css file?

chadlly2003:

I made the changes you requested. Had to make some minor template adjustments to make it consistent across the board. Before I upload I have one question. Since this module is encapsulated what is the best way to override the css.
Do i just put it in my template css file?
If you want to make changes, then copy POSM's options_stock_styles.css to your template's /css subdirectory. POSM creates a stylesheet link for its file first, and then (if present) one of the same name from the active template directory.

Just wanted to give a quick update on this template. I’ve been doing a lot of work behind the scenes, and the site has come a long way.

As of now, the demo site has all features fully active — nothing is hidden — so you can get a true feel for everything that can be accomplished with Zen Cart.

Any backend changes you make, including page listings, categories, layouts, or settings, will not break the design. No matter what configuration you choose, the site will continue to maintain a clean, professional, and consistent look and feel.

The template is built with 100% W3C-valid HTML and CSS giving a smoother experience across modern browsers and devices.

Once this update is complete, the fun really begins. The next phase is making the backend settings work even more seamlessly with the frontend. Many features already do this, but my goal is to make everything as simple and user-friendly as possible, allowing users to customize their store without needing to touch code.

One final note — if there’s anything you feel should be added, improved, or adjusted, please let me know. I’ll be releasing the next update within the next few days, so now is the perfect time for feedback and suggestions.

All the updates are live on the demo site. Dont forget to clear your cache before viewing the site.

https://www.zencartdemo.com/

Wow!
I have dropped a copy onto my zc3.0.0 test site. This is the first time I have seen a template that I have felt am immediate need to modify/ enhance.

OldNGrey:

Wow!
I have dropped a copy onto my zc3.0.0 test site. This is the first time I have seen a template that I have felt am immediate need to modify/ enhance.

If you notice anything that doesn't look right, please let me know.

I figured one more week and I should have this 100% completed. I am just double checking everything before i submit the final version.

Please note: All has been tested on Mobile, Tablet and Desktop (all pages looking good)

OldNGrey:

Wow!
I have dropped a copy onto my zc3.0.0 test site. This is the first time I have seen a template that I have felt am immediate need to modify/ enhance.
That should have been
This is the first time I have seen a template that I have NOT felt am immediate need to modify/ enhance

For what version of ZC is it? Looking at non-template files, it is close to v2.2.2 but different. Class files are not needed at all for ZC v2.2.2 or v3.0.0.
Could you clarify for which ZC range it is designed, please?

Looking really good.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.zencartdemo.com%2F

https://jigsaw.w3.org/css-validator/validator?profile=css3&warning=0&uri=https%3A%2F%2Fwww.zencartdemo.com%2F

Unless you are changing the .cart-content font size when going mobile, you may want to jump it up to 16 px. Otherwise, it may be hard to read on mobile.

Other testers are complaining that you have set a min-height but not a min-width on stylesheet.css line 627. Also, the items are covered by stylesheet_zcustom.css on line 1256.

I understand that most folks know what the "hamburger" is for, but you need to have the same cursor change on hover as you do for the other icons in the header. I haven't really looked at mobile or tablet, but remember that there's no mouse involved, which means you have to use some other method to identify "tappable links".

Whether you go with one aria landmark or a landmark for each section of the opening window, it needs at least one.

It's not an error, but you might want to consider adding a closing icon at the bottom of the opening window to avoid having to return to the beginning to close the window.

jQuery CDN is really throwing a monkey wrench into page load. It's not really relevant with today's browsers but if you must, consider adding defer so pages can load much faster. With today's speed, making the customer wait for 3 seconds on a mobile phone is liable to lose them. https://www.zencartdemo.com/index.php?main_page=product_info&cPath=2_18&products_id=21 - Lighthouse shows 3.7s for LCP on a mobile. with jQuery CDN responsible for 1.12 s of that time.

https://www.zencartdemo.com/index.php?main_page=checkout_one -- Problems on this page deal with proper labeling of table cells and form fields. Probably with your loaded version of OPC. The actual checkout page has the same table and form problem along with an added color contrast problem for Shipping Address, Same as Billing? (Try #7b11df) and Redemption Code (Try #006120).

Mentioned before - https://www.zencartdemo.com/index.php?main_page=product_info&cPath=54_58&products_id=154. You might want to find an image of some rope.:P

The first Shipping Address... on the initial Guest Checkout should be #6001B7.

The first Shipping Address... on the final Guest Checkout should be #7C1DD4.

The Redemption Code color should have been #1B6120

pilou2:

For what version of ZC is it? Looking at non-template files, it is close to v2.2.2 but different. Class files are not needed at all for ZC v2.2.2 or v3.0.0.
Could you clarify for which ZC range it is designed, please?
What is "it"?

Not sure if anyone having issue logging into zencart but i keep getting security warnings all of a sudden.

I will make all the adjustments you guys recommend this week. Thank you for the feedback keep it coming.

pilou2:

For what version of ZC is it? Looking at non-template files, it is close to v2.2.2 but different. Class files are not needed at all for ZC v2.2.2 or v3.0.0.
Could you clarify for which ZC range it is designed, please?

This template should work properly with version 2.0 and above. At this time, I have not received any updates regarding version 3.0. Once I am notified that the template files for 3.0 are complete, I will make any necessary adjustments and release an updated version.

Please note that the files will not be exactly the same as the originals, as modifications were required during the template-rebuilding process.

dbltoe:

Looking really good.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.zencartdemo.com%2F

https://jigsaw.w3.org/css-validator/validator?profile=css3&warning=0&uri=https%3A%2F%2Fwww.zencartdemo.com%2F

Unless you are changing the .cart-content font size when going mobile, you may want to jump it up to 16 px. Otherwise, it may be hard to read on mobile.

Other testers are complaining that you have set a min-height but not a min-width on stylesheet.css line 627. Also, the items are covered by stylesheet_zcustom.css on line 1256.

I understand that most folks know what the "hamburger" is for, but you need to have the same cursor change on hover as you do for the other icons in the header. I haven't really looked at mobile or tablet, but remember that there's no mouse involved, which means you have to use some other method to identify "tappable links".

Whether you go with one aria landmark or a landmark for each section of the opening window, it needs at least one.

It's not an error, but you might want to consider adding a closing icon at the bottom of the opening window to avoid having to return to the beginning to close the window.

jQuery CDN is really throwing a monkey wrench into page load. It's not really relevant with today's browsers but if you must, consider adding defer so pages can load much faster. With today's speed, making the customer wait for 3 seconds on a mobile phone is liable to lose them. https://www.zencartdemo.com/index.php?main_page=product_info&cPath=2_18&products_id=21 - Lighthouse shows 3.7s for LCP on a mobile. with jQuery CDN responsible for 1.12 s of that time.

https://www.zencartdemo.com/index.php?main_page=checkout_one -- Problems on this page deal with proper labeling of table cells and form fields. Probably with your loaded version of OPC. The actual checkout page has the same table and form problem along with an added color contrast problem for Shipping Address, Same as Billing? (Try #7b11df) and Redemption Code (Try #006120).

Mentioned before - https://www.zencartdemo.com/index.php?main_page=product_info&cPath=54_58&products_id=154. You might want to find an image of some rope.:P

Give me a few days and I will make the changes you requested. I may have some questions.
The only problem is with OPC its not a core app. So to make those work with Siteimprove and Wave and pass all the compliance test I will have to edit the opc files. Let me see what i can come up with. Because I only created the css file so people could just slide that file in and have OPC look good on the redesign website

dbltoe:

The first Shipping Address... on the initial Guest Checkout should be #6001B7.

The first Shipping Address... on the final Guest Checkout should be #7C1DD4.

The Redemption Code color should have been #1B6120

I would be happy to make the changes. Can you be a little more specific. Not really that clear

chadlly2003:

I would be happy to make the changes. Can you be a little more specific. Not really that clear

disregard i figured it out

dbltoe:

Looking really good.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.zencartdemo.com%2F

https://jigsaw.w3.org/css-validator/validator?profile=css3&warning=0&uri=https%3A%2F%2Fwww.zencartdemo.com%2F

Unless you are changing the .cart-content font size when going mobile, you may want to jump it up to 16 px. Otherwise, it may be hard to read on mobile.

Other testers are complaining that you have set a min-height but not a min-width on stylesheet.css line 627. Also, the items are covered by stylesheet_zcustom.css on line 1256.

I understand that most folks know what the "hamburger" is for, but you need to have the same cursor change on hover as you do for the other icons in the header. I haven't really looked at mobile or tablet, but remember that there's no mouse involved, which means you have to use some other method to identify "tappable links".

Whether you go with one aria landmark or a landmark for each section of the opening window, it needs at least one.

It's not an error, but you might want to consider adding a closing icon at the bottom of the opening window to avoid having to return to the beginning to close the window.

jQuery CDN is really throwing a monkey wrench into page load. It's not really relevant with today's browsers but if you must, consider adding defer so pages can load much faster. With today's speed, making the customer wait for 3 seconds on a mobile phone is liable to lose them. https://www.zencartdemo.com/index.php?main_page=product_info&cPath=2_18&products_id=21 - Lighthouse shows 3.7s for LCP on a mobile. with jQuery CDN responsible for 1.12 s of that time.

https://www.zencartdemo.com/index.php?main_page=checkout_one -- Problems on this page deal with proper labeling of table cells and form fields. Probably with your loaded version of OPC. The actual checkout page has the same table and form problem along with an added color contrast problem for Shipping Address, Same as Billing? (Try #7b11df) and Redemption Code (Try #006120).

Mentioned before - https://www.zencartdemo.com/index.php?main_page=product_info&cPath=54_58&products_id=154. You might want to find an image of some rope.:P

I believe the jquery can be removed from the template.

path: common/html_header.php

i can edit out this line

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<?php if (file_exists(DIR_WS_TEMPLATE . "jscript/jquery.min.js")) { ?>
<script title="jQuery check - template">window.jQuery || document.write('<script src="<?= $template->get_template_dir('.js',DIR_WS_TEMPLATE, $current_page_base,'jscript') ?>/jquery.min.js"><\/script>');</script>
<?php } ?>
<script title="jQuery check - template_default">window.jQuery || document.write('<script src="<?= $template->get_template_dir('.js','template_default', $current_page_base,'jscript') ?>/jquery.min.js"><\/script>');</script>

Since there are no modules installed on the demo template except opc. I believe i can safely remove this. Though how does this impact if people start downing other modules and need jquery in the template? What are your thoughts. i am going to do some test not 100% sure about this

chadlly2003:

Since there are no modules installed on the demo template except opc. I believe i can safely remove this. Though how does this impact if people start downing other modules and need jquery in the template? What are your thoughts. i am going to do some test not 100% sure about this

You will find CDN in the core, but it is generally along side a self-hosted jQuery just in case CDN is down. You can Google Plain jQuery vs jQuery CDN for a more detailed explanation of the differences. There are some advantages, but with e-commerce in mind, the security problems make it a no-no for me.

The only real option any mod developer has in this type of situation is to put a mention in the readme.

But, as many a developer will point out, the shrink wrap is hardly ever broken on a mod's instructions until there's a problem, they complained on the forum, and the developer pointed them to the appropriate spot in the readme/docs. :P

Re: removing jQuery

There are a bunch of plugins (many that I've offered) that **require **jQuery for their proper operation; the now in-core POSM being one.

lat9:

Re: removing jQuery

There are a bunch of plugins (many that I've offered) that **require **jQuery for their proper operation; the now in-core POSM being one.

I figured that. Best to be left as is

I made the updates from the feedback i got. If there anymore suggestions please let me know.

I will be submitting the new version in the next few days.

**note OPC is now compliant with WCAG. The OPC files I change are located on git hub
**
***** dont forget to clear your cache or you wont see the changes ******