Author Topic: html5 layout - Menu block: product category drop-down image behavior  (Read 13265 times)

Offline junkyard

  • Full Member
  • ***
  • Posts: 127
  • Karma: +25/-0
    • View Profile
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

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 4358
  • Karma: +298/-10
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: html5 layout - Menu block: product category drop-down image behavior
« Reply #1 on: October 15, 2013, 03:47:37 PM »
Thank you for the comment. We will review
Please  rate your experience or leave your review
We need your help to build better free open source ecommerce platform for everyone. See how you can help

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 4358
  • Karma: +298/-10
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: html5 layout - Menu block: product category drop-down image behavior
« Reply #2 on: October 15, 2013, 03:49:05 PM »
- 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
Please  rate your experience or leave your review
We need your help to build better free open source ecommerce platform for everyone. See how you can help

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 4358
  • Karma: +298/-10
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: html5 layout - Menu block: product category drop-down image behavior
« Reply #3 on: October 17, 2013, 09:47:13 AM »
This has been implemented for future v1.1.8

Check the log if you are interested
https://github.com/abantecart/abantecart-src/commit/14124cf15118562712e2a706139e4576c0091aae
Please  rate your experience or leave your review
We need your help to build better free open source ecommerce platform for everyone. See how you can help

Offline junkyard

  • Full Member
  • ***
  • Posts: 127
  • Karma: +25/-0
    • View Profile
Re: html5 layout - Menu block: product category drop-down image behavior
« Reply #4 on: October 17, 2013, 04:21:17 PM »
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!

Offline calbashmc

  • Jr. Member
  • **
  • Posts: 52
  • Karma: +8/-0
    • View Profile
Re: html5 layout - Menu block: product category drop-down image behavior
« Reply #5 on: October 24, 2013, 02:35:14 AM »
Exactly what I was looking for also.  Thanks!

Offline thedarksyde

  • Full Member
  • ***
  • Posts: 131
  • Karma: +7/-1
    • View Profile
Re: html5 layout - Menu block: product category drop-down image behavior
« Reply #6 on: November 11, 2013, 02:59:43 PM »
Can I update these files now? Or would I break something?  Do I have to wait for 1.1.8?

Offline junkyard

  • Full Member
  • ***
  • Posts: 127
  • Karma: +25/-0
    • View Profile
Re: html5 layout - Menu block: product category drop-down image behavior
« Reply #7 on: November 11, 2013, 03:13:09 PM »
sure you can update-  we did so for category_top.tpl and custom.js  (unless you had your own customisations there)

Offline thedarksyde

  • Full Member
  • ***
  • Posts: 131
  • Karma: +7/-1
    • View Profile
Re: html5 layout - Menu block: product category drop-down image behavior
« Reply #8 on: November 12, 2013, 12:01:00 PM »
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?

Offline junkyard

  • Full Member
  • ***
  • Posts: 127
  • Karma: +25/-0
    • View Profile
Re: html5 layout - Menu block: product category drop-down image behavior
« Reply #9 on: November 12, 2013, 01:44:50 PM »
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

Offline llegrand

  • Hero Member
  • *****
  • Posts: 1798
  • Karma: +520/-7
    • View Profile
Re: html5 layout - Menu block: product category drop-down image behavior
« Reply #10 on: November 12, 2013, 01:59:07 PM »
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.


Offline thedarksyde

  • Full Member
  • ***
  • Posts: 131
  • Karma: +7/-1
    • View Profile
Re: html5 layout - Menu block: product category drop-down image behavior
« Reply #11 on: November 12, 2013, 05:32:47 PM »
Yes perfect thank you.

 

Powered by SMFPacks Social Login Mod