Jump to content
piernas

Navbar button shown in small view - how to?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

Does the other modules on that navbar show ok?

@@piernas

 

yes everything else shows ok


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@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:


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@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');
      }
    }

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@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

post-256780-0-71666900-1483014353_thumb.png

post-256780-0-86499500-1483014360_thumb.png


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@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


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@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.

Share this post


Link to post
Share on other sites

@@piernas

 

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


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@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.

Share this post


Link to post
Share on other sites

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


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

 

 

Share this post


Link to post
Share on other sites

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 by Bobber

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×