Navbar button shown in small view - how to?

[aurelou 4]

Thank you for your answers, I really don't know why it didn't work. I viewed it on pc firefox and chrome and android. Maybe it came from my site. Maybe because I have the last Edge version.

 

Finally I deleted this navbar and made my own changes on the native navbar to make it as I wanted. It's not good code but it works, I'll stay with it for the moment.

[PupStar 58]

So if I understand well you want a button that does not contain any dropdown menu (like contact us) and that does not belong to the hamburger menu on mobile view (unlike contact us). Please try this:

 

Module:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2016 osCommerce

  Released under the GNU General Public License
*/

  class nbx_spare_parts {
    var $code = 'nbx_spare_parts';
    var $group = 'navbar_extra_modules_buttons';
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function __construct() {
      $this->title = MODULE_NAVBAR_EXTRA_SPARE_PARTS_TITLE;
      $this->description = MODULE_NAVBAR_EXTRA_SPARE_PARTS_DESCRIPTION;
    }

    function getOutput() {
      global $oscTemplate;

//      ob_start();
      require('includes/modules/navbar_extra_modules/templates/nbx_spare_parts.php');

      $oscTemplate->addBlock($button_mobile, 'navbar_extra_modules_buttons');
      $oscTemplate->addBlock($button_desktop, 'navbar_extra_modules_left');

    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_NAVBAR_EXTRA_SPARE_PARTS_STATUS');
    }

    function install() {
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable New products Module', 'MODULE_NAVBAR_EXTRA_SPARE_PARTS_STATUS', 'True', 'Do you want to add the module to your Navbar?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_NAVBAR_EXTRA_SPARE_PARTS_SORT_ORDER', '550', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from configuration where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_NAVBAR_EXTRA_SPARE_PARTS_STATUS', 'MODULE_NAVBAR_EXTRA_SPARE_PARTS_SORT_ORDER');
    }
  }

Template:

<?php
// This is the button that shows when the navbar is on a mobile view:
$button_mobile ='<a type="button" id="btn-wrench" class="btn-primary navbar-toggle" href="' . tep_href_link("parts_finder.php?filterid=1") . '">
        <i class="fa fa-wrench"></i>
</a>';
// This is the button that shows when the navbar is on desktop view(on the left side):
$button_desktop = '<li><a href="' . tep_href_link('parts_finder.php?filterid=1') . '"><i class="fa fa-wrench"></i><span class="hidden-sm">  ' . MODULE_NAVBAR_EXTRA_SPARE_PARTS_PUBLIC_TEXT . '</span></a></li>';

This example generates two different buttons with the same contents that shows in one case or another. One icon will show at the right of the logo on expanded view (and hide on mobile); The other will show between the logo and the hamburger button (only on mobile view and hide on desktop view).

 

The position of both icons are fixed so the config part with the position (MODULE_NAVBAR_EXTRA_SPARE_PARTS_CONTENT_PLACEMENT) has been removed.

 

@@piernas

 

I have tried the code above but nothing shows either on desktop or mobile???

 

Mark

[piernas 126]

@@piernas

 

I have tried the code above but nothing shows either on desktop or mobile???

 

Mark

 

Does the other modules on that navbar show ok?

[PupStar 58]

Does the other modules on that navbar show ok?

@@piernas

 

yes everything else shows ok

[PupStar 58]

@@piernas

 

sorry to bug you at this time of year but I dont suppose you have had chance to give your code the once over have you?

 

I have had a go but not sure why it will not display :wacko:

[piernas 126]

@@PupStar I'll try it on a clean install as soon as I can do it, this week is busy when you have a store :)

[PupStar 58]

@@piernas

 

I have solved the issue of the link/button not showing, half of the __construct function was missing :thumbsup:

function __construct() {
      $this->title = MODULE_NAVBAR_EXTRA_SPARE_PARTS_TITLE;
      $this->description = MODULE_NAVBAR_EXTRA_SPARE_PARTS_DESCRIPTION;

      if ( defined('MODULE_NAVBAR_EXTRA_SPARE_PARTS_STATUS') ) {
        $this->sort_order = MODULE_NAVBAR_EXTRA_SPARE_PARTS_SORT_ORDER;
        $this->enabled = (MODULE_NAVBAR_EXTRA_SPARE_PARTS_STATUS == 'True');
      }
    }

[PupStar 58]

@@piernas

 

ok I have created another button called 'Home' using the same principles applied to the spare_parts button.

 

Now 3 issues I can not seem to solve:

 

1. The sort order does not stay in the same position from desktop to mobile view

 

2. All of the buttons are not the same height, any ideas on how to make them all the same size

 

3. I can not seem to see how to add some padding above the mobile buttons

 

See attached screenshots.

 

Thanks

 

Mark

[PupStar 58]

@@piernas

 

ok I have created another button called 'Home' using the same principles applied to the spare_parts button.

 

Now 3 issues I can not seem to solve:

 

1. The sort order does not stay in the same position from desktop to mobile view

 

2. All of the buttons are not the same height, any ideas on how to make them all the same size

 

3. I can not seem to see how to add some padding above the mobile buttons

 

See attached screenshots.

 

Thanks

 

Mark

@@piernas

 

still not resolved issue 1 and 2 above, any chance you could revisit and advise?

 

Thanks

 

Mark

[piernas 126]

@@PupStar the sort order may be different as in fact these are different buttons on mobile and on desktop; we're hiding one set and displaying the other.

 

For the icon sizes it's probably because you use <button> and <a> links, you'll have to tweak the css for both displaying the same size.

 

I'd need a copy of the modules to be more specific.

[PupStar 58]

@@piernas

 

Thanks for getting back to me. I will have a look at the code and report back

[piernas 126]

@@PupStar if you can't find it please send me the files

[piernas 126]

@@piernas

 

ok I have created another button called 'Home' using the same principles applied to the spare_parts button.

 

Now 3 issues I can not seem to solve:

 

1. The sort order does not stay in the same position from desktop to mobile view

 

2. All of the buttons are not the same height, any ideas on how to make them all the same size

 

3. I can not seem to see how to add some padding above the mobile buttons

 

See attached screenshots.

 

Thanks

 

Mark

 

Hi Mark I've received the files.

 

1 - This must be because of the way the navbar assigns the buttons to each group. Will try to find how can be reordered.

 

2 - I believe this one is because some buttons are pure buttons and other are links. It can be overriden by putting fixed height on css for each element.

 

3- You have to apply padding to the navbar-header group that contains the buttons.

[PupStar 58]

Hi Mark I've received the files.

 

1 - This must be because of the way the navbar assigns the buttons to each group. Will try to find how can be reordered.

 

2 - I believe this one is because some buttons are pure buttons and other are links. It can be overriden by putting fixed height on css for each element.

 

3- You have to apply padding to the navbar-header group that contains the buttons.

 

@@piernas

 

 

2 - I believe this one is because some buttons are pure buttons and other are links. It can be overriden by putting fixed height on css for each element.

 

OK thanks, I have now sorted the button height by adding this to user.css

.button-height {height: 40px;}

and only adding the class to the buttons not in the standard addon

 

did you have any luck with the reorder issue

 

Mark

[joe122joe 2]

@@piernas is there any way to show categories menu in the navbar extra modules

 

Joe

[piernas 126]

@@piernas is there any way to show categories menu in the navbar extra modules

 

Joe

 

 

I couln't study the way to do it yet

[Bobber 23]

Awesome Contribution: https://apps.oscommerce.com/s9Kqr @piernas!

I have a open question for everyone...

When the Navbar is displayed in mobile and you click the Search Button... the search box appears instantly and the black background slowly moves downward behind the search bar...

Is it possible for the search box to be located in the black area that moves downward and be revealed in it... like how the account information or cart information is nestled in the menu area...

[piernas 126]

50 minutes ago, Bobber said:

When the Navbar is displayed in mobile and you click the Search Button... the search box appears instantly and the black background slowly moves downward behind the search bar...

Is it possible for the search box to be located in the black area that moves downward and be revealed in it... like how the account information or cart information is nestled in the menu area...

That's the way it works for me in firefox. Maybe a browser issue?

[Bobber 23]

4 minutes ago, piernas said:

That's the way it works for me in firefox. Maybe a browser issue?

I have tried it in Chrome ( usually my go to... ) as well as safari on my iphone...

[Bobber 23]

I have attached a video of what I am talking about...

When you click the search box button the search box immediately displays and the black background slowly display downward behind the search box... same when clicked to close the search box...

20171130_000322000_iOS.mp4

[piernas 126]

On 30/11/2017 at 1:07 AM, Bobber said:

I have attached a video of what I am talking about...

When you click the search box button the search box immediately displays and the black background slowly display downward behind the search box... same when clicked to close the search box...

20171130_000322000_iOS.mp4

I've compared the files with my current setup and there are some differences (mainly CSS and js code). Can you please test this one to see if the problem dissapears?

navbar extra 1.2.zip

[Bobber 23]

1 hour ago, piernas said:

I've compared the files with my current setup and there are some differences (mainly CSS and js code). Can you please test this one to see if the problem dissapears?

navbar extra 1.2.zip

@piernas Thank You So Much For The Help!!!

This Completely Fixed The Little Problem With The Search Box Drop Down Annimation...

Is it possible for you to upload this update to your OsCommerce App: https://apps.oscommerce.com/s9Kqr so others can enjoy as well?

You Deserve Much More Credit Than I Can Give You @piernas!!!

Amazing Job My Friend :-D

[piernas 126]

8 minutes ago, Bobber said:

@piernas Thank You So Much For The Help!!!

Is it possible for you to upload this update to your OsCommerce App: https://apps.oscommerce.com/s9Kqr so others can enjoy as well?

Amazing Job My Friend :-D

@Bobber Thanks for your words :) Of course I'll upload it - I vaguely remember having fixed the problem but wanted to check if everything worked fine before uploading.

 

 

[Bobber 23]

For some reason the search box is no being displayed in the header under the logo after this update... in mobile display.

Are you seeing that too @piernas???

Edited December 1, 2017 by Bobber

[Bobber 23]

I found the source of the problem...

navbar extra 1.2 > includes > modules > navbar_extra_modules > templates > nbx_search_button

Working to see if I can change it so the search bar is still displayed in the header area...