bsmither

The path of div blocks (an 'xpath') mentioned by Google is created and put in place under javascript control via the jQuery 'Rating' plugin. Which is to say, you won't find these div's in the Foundation templates. If you can live without reviews, in admin, Store Settings, Features tab, disable "Product Reviews".

Short answer, no. We very much recommend CC651 when running PHP8.1+.

The "Off Canvas" is a feature of the Foundation skin, programmed by Zurb (not CubeCart's programmers). https://get.foundation/sites/docs-v5/components/offcanvas.html As such, I suppose one can experiment with using a different tag - instead of an <a> tag - but I do not know what that could be. Of course, I do not know why Zurb chose to use an <a> tag to effect a "click" event. (There is a disclaimer about Off Canvas vs. Accessibility on the above page.) Maybe one can add a title attribute to this particular link -- I do not know. (Line 104 in the template main.php and 73 in main.checkout.php.)

The Foundation template file main.checkout.php, near line 38, there is: Note: Line split for readability: <div class="right text-center show-for-small"> <a class="left-off-canvas-toggle button trans tiny" href="#"> <svg class="icon icon-x2"><use xlink:href="#icon-bars"></use></svg> </a> </div> This shows only the 'hamburger bars' (a "menu" icon), but offers no discernable text or label for accessibility (screen readers).

I used the guidelines at: https://dequeuniversity.com/rules/axe/4.4/button-name https://dequeuniversity.com/rules/axe/4.4/label to suggest changes in the issue I posted in the Github: https://github.com/cubecart/v6/issues/3312 "Cubecart automatically switches to the special mode for mobile device." If you mean the Category page that shows product panels in a grid, then it is javascript that shows/hides each of two separate sections: product_list_view and product_grid_view. If it is the grid view being shown, the javascript tests if the screen is at medium width or wider, and if so will add a CSS class to the list to make a three-across grid. If not at medium width or wider, the existing one-across grid stays in force. The 'path' elements are "breadcrumbs". Search through foundation.css to find everything related to breadcrumbs. You should overrule those CSS rules by adding your custom rules in cubecart.default.css, including its color. The 'path' is the sequence of Home through the category hierarchy to the name of the product. Constructing this chain is enabled by addBreadcrumb() in the GUI class file. Here, data is collected into an array. The data comes from everywhere - related to what is being shown. Finally, the displayCommon() function in the GUI class file gives the array to the template rendering engine (Smarty).

I have identified six files that could be tweaked based on your comments above regarding labels and accessible names. I will post an issue in the Github.

Personally, I do not like the More... function for seeing more products - although major web sites do this (Google, automatically, for one). One cannot back away from showing page 2 (appended to page 1) once the browser has shown it. That is, viewing another page, then returning to this page, will continue to show page 1 and page 2. It is controlled by a cookie that lasts 10 minutes. I don't know of a way, currently, to get around this.

The "Shop by Category" phrase is strange. I am not sure where in Foundation that is used. But the Review Stars is controlled by the jQuery plugin found at Foundation's /js/vendor/jquery.rating.min.js file. There is no attribution, but it appears to be this one: https://github.com/fyneworks/star-rating This plugin is implemented in the Foundation template element.product_reviews.php, starting near line 70.

Again, knowing the ins and outs of these metrics is above my pay grade. Foundation is CSS controlled to perform as a 'responsive' skin from the mobile-first philosophy. That is to say, what Foundation is optimized for a mobile viewport, then adjustments, via CSS, are made to accommodate wider viewports.

In Foundation's /templates/ folder, open the file element.css.php for editing in a programmer's text editor. Delete the first line: <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type='text/css'>

Just remove the line. (But be aware that an upgrade will replace the edited file. CubeCart upgrades are 'whole-cloth'.)

Not directly, however, please examine the .htaccess file in CubeCart's main folder. If there exists the following lines: ##### START CubeCart .htaccess ##### ### GZIP Compression ### <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript </ifmodule> then these directives will compress text-type content of all content - not just the product page.. See: https://en.wikipedia.org/wiki/Mod_deflate (Your hosting provider may have already configured the web server to automatically do this.)

The "Make Payment" feature is not yet perfect. It's being worked on. The confusion, if I have this right, is that the customer is still logged in, and/or has stuff in their shopping basket already (saved to the database). If the customer, having logged in, finds themselves with stuff already in their shopping basket, the basket must be emptied, then when the customer clicks Make Payment, the checkout cart contents should show the updated inventory and other particulars.

Image compression? CubeCart takes a source image, typically PNG or JPG, 750x750 pixels for example, then creates sized variants specific to the intended layout area and page. The source is uploaded to /images/source/, and CubeCart's variants are saved in /images/cache/. The specific variants are coded in the skin's config.xml file. Take a look a Foundation's config.xml file in a programmer's text editor. Here, you will find image nodes with the reference attribute indicating where the image is used. The product page uses 'medium' and 'gallery'. The maximum attribute specifies the length of the longest side, maintaining proportionality, but never longer than the original. (That is, if the source is 450x450 pixels, variants could be smaller, but will never be larger than that.) And, of course, the browser can scale the image to fit the layout's placement if the HTML coding allows it. Note also the quality attribute. For many image formats, there is the 'compression ratio', expressed as a 'quality' -- 100 being very lightly compressed, if at all, and 10 looking like crap. I have visited web pages that initially show a super-blurry image (high compression), then eventually, under javascript control, fetches a high-quality (large filesize) image to replace the blurry one. Currently, CubeCart does not do this.

According to: https://developers.google.com/speed/docs/insights/v5/about Google constructs a mobile environment by simulating the performance characteristics of a Motorola G4 (maybe using the data plan and not using Wi-Fi?). The desktop environment is a simulated tower box on ethernet. So, from your observations, are you using the same device to make your comparisons? I used Firefox's "Responsive Design Mode" which does not simulate a "mobile network". Please know that CrUX, PSI, FCP, FID, LCP, etc are above my pay-grade.