html5 layout - Menu block: product category drop-down image behavior

[junkyard]

Dear Abantecart,

Thanks for the great HTML5 template, we do like its look and feel. There is, however, some room for improvements.

As we know, a top category thumb image that is shown to customers on the front page drop-down menu is by design an image of the last sub-category of a given top category that you point your mouse over.  This behavior is fixed and may not be suitable to all shops.

At the same time, we have functionality in the control panel to add the images to all sub-categories, and even the top category itself. 
The top category image, however, will only be shown to Admin herself in her control panel, and not the end users. As a workaround,  you can still make the top-cat image available to your customers in the Menu block drop-down (instead of the last sub-cat thumb) by modifying the tpl file manually this way (based on http://forum.abantecart.com/index.php?topic=1079.0 ):

# diff storefront/view/default_html5/template/blocks/category_top.tpl  category_top.tpl.old
38,40c38,40
<                                  <li><img style="display:block" src="<?php echo $category['thumb']; ?>"
<                                         alt="<?php echo $category['name']; ?>"
<                                         title="<?php echo $category['name']; ?>">
---
>                                  <li><img style="display:block" src="<?php echo $scat['thumb']; ?>"
>                                         alt="<?php echo $scat['name']; ?>"
>                                         title="<?php echo $scat['name']; ?>">

But this wasn't the feature we were going to suggest 
Here is a related feature that doesn't seem to be possible to achieve even with hacks like the above:

ideally, the image(s) shown in Menu block category drop-down on the storefront page should change dynamically, depending on where your mouse is pointing:

- the moment you point at one of top categories (menu items corresponding to the 1st level product categories), you are presented with the top cat image to the right of the drop-down which shows sub-cats,
- next, when you start moving your mouse down drop-down, that thumb image changes dynamically depending on which exact sub-category your hovering over (with images of corresponding 2nd level sub-cat).

This way would allow us to present the top-category and 2nd level sub-cats images on the storefront page in a neat way!
(Currently, the only chance consumers have to see images of the sub-cats is on those rare occasions when they click directly on the 1st level product categories names in the menu rather than choosing sub-cat from drop-down).

Hope it makes sense to you, 
thank you

[abantecart]

Thank you for the comment. We will review

[abantecart]

- the moment you point at one of top categories (menu items corresponding to the 1st level product categories), you are presented with the top cat image to the right of the drop-down which shows sub-cats,
- next, when you start moving your mouse down drop-down, that thumb image changes dynamically depending on which exact sub-category your hovering over (with images of corresponding 2nd level sub-cat).

This is very good idea

[abantecart]

This has been implemented for future v1.1.8

Check the log if you are interested
https://github.com/abantecart/abantecart-src/commit/14124cf15118562712e2a706139e4576c0091aae

[junkyard]

Wow!  It works like a charm!
We have replaced category_top.tpl and custom.js with the new ones from
github.com/abantecart/abantecart-src/raw/14124cf15118562712e2a706139e4576c0091aae/public_html/storefront/view/default_html5/template/blocks/category_top.tpl
github.com/abantecart/abantecart-src/raw/14124cf15118562712e2a706139e4576c0091aae/public_html/storefront/view/default_html5/javascript/custom.js
  and cleared the 'Layouts & Blocks' cache.  Thank you so much!

[calbashmc]

Exactly what I was looking for also.  Thanks!

[thedarksyde]

Can I update these files now? Or would I break something?  Do I have to wait for 1.1.8?

[junkyard]

sure you can update-  we did so for category_top.tpl and custom.js  (unless you had your own customisations there)

[thedarksyde]

Can you explain a little how I do that from those links?  Do I save as those names and then just upload to that file on my system?

[junkyard]

Can you explain a little how I do that from those links?  Do I save as those names and then just upload to that file on my system?

That is correct.  The path to place under public_html you can see in the links.
... Before the copying, you may want to backup (rename) current files, if you ever need to revert.  Also a good idea is to try and make new files permissions to match your old ones,  though in the most cases permissions set automatically are good enough..  Cheers

[llegrand]

Yes,  is the short answer. Here's a bit of detail of how I would do it.

If you don't have a source code editor that you use here's what I like:
Notepad++ as my source code editor,  it is a free download here http://notepad-plus-plus.org/
Just download the files to the editor,  save them where you can find them again.
Open your FTP or Cpanel,  find the exact files on the server .
FIRST  (important) rename the existing server file,  I use  this scheme:
Existing.php   renamed to existing.phpHOLD 
SECOND – upload the new file
That's it. Test out your site and see if it fixed your issue.

If  you need to rollback,  just go back to the server files,  delete the one you uploaded AND rename the HOLD file back to the correct name.  You're back where you started.
If it works,  you should probably delete the HOLD file from the server to keep things tidy.

Hope this helps a bit.

[thedarksyde]

Yes perfect thank you.