Navbar button shown in small view - how to?

[piernas 125]

I want to add a language button on the left of the hamburger button of navbar visible on all sizes. From what I see the navbar modules can be placed on left, right or home (at the right of the brand) but not in that place. This is what I want to achieve:

 

 

Any help will be appreciated.

Edited November 2, 2016 by piernas

[♥Dan Cole 490]

@@piernas Juanma I haven't installed the new NavBar Modules yet so I'm just curious....what happens when you set it to be on the right?

 

Dan

[piernas 125]

@@Dan Cole oscommerce places the module on the right of the navbar, but it becomes collapsed on small view. Same with placing it on the left, on small view it goes to the menu on the hambugrer button.

Basically, on small view,  you only see the title on the left and the hamburger on the right.

[♥Dan Cole 490]

@@piernas Juanma understood...now I see what you want to do.  I'm no help but I get it.  I assume you googled around for a solution?

 

Dan

[♥Dan Cole 490]

@@piernas Juanma Does this help?

 

http://stackoverflow.com/questions/21037833/exclude-menu-item-from-the-collapse-of-bootstrap-3-navbar

 

Dan

[piernas 125]

@@Dan Cole I've been looking exactly at that example, but I'm getting weird results for now :blush:

Modular navbar has a different html setup and when I try to adapt that code I get the button on a second line or misaligned. Just spent this afternoon trying to get it working with no luck!

[♥Dan Cole 490]

@@piernas

 

@@Dan Cole I've been looking exactly at that example, but I'm getting weird results for now :blush:

Modular navbar has a different html setup and when I try to adapt that code I get the button on a second line or misaligned. Just spent this afternoon trying to get it working with no luck!

 

I'll leave you to it. :D

 

Dan

[burt 3,798]

I have done something similar(ish) where a client wanted a button available at all times...I remember it being pretty simple.  I'll dig it out.

[♥raiwa 1,077]

Juanma @@piernas,

 

You could try with "Brand":

<a class="navbar-brand" href="#">Brand</a>

Just add the button code.

 

See example:

http://getbootstrap.com/components/#navbar

 

saludos

Rainer

Edited November 3, 2016 by raiwa

[piernas 125]

Thanks @@raiwa it didn't work for me. I've finally managed too make it work by adding the buttons to the navbar-header part . I had to redo the structure of the navbar to  make a new one by splitting the output of the module into two parts and hiding the parts with CSS depending on screen size (button on small size or complete on desktop size).

 

 

If someone wants to play with it I can post the code or make a module.

 

[ArtcoInc 308]

@@piernas

If someone wants to play with it I can post the code or make a module.

 

Yes, please ... posting the code would probably give more chances to see what you've done. :thumbsup:

 

Malcolm

Edited November 22, 2016 by ArtcoInc

[piernas 125]

@@ArtcoInc here it goes the module in the attachment. There are some compatibility code for other addons and language files may need a deeper look.

Just copy files and enable "navbar extra" content module (You may want to temporary disable the standard navbar, too) and its submodules (they will appear on admin under modules).

 

Please let me know if it works fine for you :)
 

EDIT: Can't attach files :blush: will upload to the addons section.

Edited November 22, 2016 by piernas

[piernas 125]

@@ArtcoInc here it is: http://addons.oscommerce.com/info/9529

[piernas 125]

While trying to debug this one http://forums.oscommerce.com/topic/410466-bootstrap-and-breakpoints/?p=1750262 I've just noticed it works for me on firefox and chrome but not in edge. If someone finds a solution please let me know.

[piernas 125]

I've traced the problem to this CSS placed in includes\modules\content\navigation\cm_navbar_extra.php:

@[member=media] screen and (min-device-width: 768px){.hide-expanded {display: none !important;}}

Seems that edge is not detecting min-device-width. changing to min-width on  it works fine on Edge too.

 

I'll test on mobile devices also and correct the upload when done.

[PupStar 58]

@@piernas

 

I need to have these modules inside the 'header' so the width is constrained to the width of the store and not full page width.

 

Is it just a simple case of moving to the header module folder or would it require more than that.

 

I have been playing with this but keep breaking it lol

 

Thanks

 

Mark

[piernas 125]

@@PupStar O'm no sure if I understand you. You mean you wnat those buttons in header instead of in the navbar?

[PupStar 58]

@@PupStar O'm no sure if I understand you. You mean you wnat those buttons in header instead of in the navbar?

 

@@piernas

 

I moved the original navbar from 'includes/modules/navbar_modules' into 'includes/modules/content/header' so the navbar was constrained to the width of the body and not taking the full page width to fit with my design.

 

That is what I also want to do with your new navbar, does that make more sense?

 

Mark

[PupStar 58]

@@piernas

 

I moved the original navbar from 'includes/modules/navbar_modules' into 'includes/modules/content/header' so the navbar was constrained to the width of the body and not taking the full page width to fit with my design.

 

That is what I also want to do with your new navbar, does that make more sense?

 

Mark

@@piernas

 

ok I sorted it. instead of having a 'content/navigation' folder I copied the cm_navbar_extra.php file into the content/header folder and it worked. I must have made a mistake earlier when doing that so now it works.

[PupStar 58]

@piernas

 

ok I think I got the hang of this now.

 

I have created a new module by copying the contact_us module and changed it to what I want.

 

Now the bit I just can not seem to get my head around is how to make the full link I have degrade to just an icon like the search, cart or account link but without the collapsible part.

 

Maybe I am being blind but I just can not see how to do it.

 

Thanks

 

Mark

 

includes/modules/navbar_extra_modules/nbx_spare_parts.php

<?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_left';
    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;

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

        switch (MODULE_NAVBAR_EXTRA_SPARE_PARTS_CONTENT_PLACEMENT) {
          case 'Home':
          $this->group = 'navbar_extra_modules_home';
          break;
          case 'Left':
          $this->group = 'navbar_extra_modules_left';
          break;
          case 'Right':
          $this->group = 'navbar_extra_modules_right';
          break;
          case 'Buttons':
          $this->group = 'navbar_extra_modules_buttons';
          break;
        }
      }
    }

    function getOutput() {
      global $oscTemplate;

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

      $data = ob_get_clean();

      $oscTemplate->addBlock($data, $this->group);

    }

    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, set_function, date_added) values ('Content Placement', 'MODULE_NAVBAR_EXTRA_SPARE_PARTS_CONTENT_PLACEMENT', 'Left', 'Choose placement.', '6', '1', 'tep_cfg_select_option(array(\'Left\',\'Right\'), ', 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_CONTENT_PLACEMENT', 'MODULE_NAVBAR_EXTRA_SPARE_PARTS_SORT_ORDER');
    }
  }

includes/modules/navbar_extra_modules/templates/nbx_spare_parts.php

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

includes/languages/english/modules/navbar_extra_modules/nbx_spare_parts.php

<?php
  define('MODULE_NAVBAR_EXTRA_SPARE_PARTS_TITLE', 'Spare Parts Finder');
  define('MODULE_NAVBAR_EXTRA_SPARE_PARTS_DESCRIPTION', 'Show link to Spare Parts Finder in the navigation bar.');
  define('MODULE_NAVBAR_EXTRA_SPARE_PARTS_PUBLIC_TEXT', 'Spare Parts Finder'); //<li><a href="' . tep_href_link('parts_finder.php?filterid=1') . '"><i class="fa fa-wrench"></i><span class="hidden-sm">  Spare Parts Finder</span></a></li>');
  define('MODULE_NAVBAR_EXTRA_SPARE_PARTS_SHORT_TEXT', 'Spare Parts Finder'); //<li><a href="' . tep_href_link('parts_finder.php?filterid=1') . '"><i class="fa fa-wrench"></i><span class="hidden-sm">  Spare Parts Finder</span></a></li>');

[aurelou 4]

Hello @@piernas thank you for this great module.

 

All is find visually but in mobile view the links don't work on the buttons. I click and nothing happend, it's the same for all button modules (search, account, cart...).

 

The other links which are not buttons work. I have the new EDGE version, don't know if it's related to the bug.

Edited December 14, 2016 by aurelou

[PupStar 58]

Hello @@piernas thank you for this great module.

 

All is find visually but in mobile view the links don't work on the buttons. I click and nothing happend, it's the same for all button modules (search, account, cart...).

 

The other links which are not buttons work. I have the new EDGE version, don't know if it's related to the bug.

@@aurelou

 

I can only replicate this problem when viewing the my site using a responsive site tester I have installed in chrome.

 

If I view the site on my Samsung mobile or Lenovo tablet the buttons work ok.

 

How are you viewing your site?

 

Mark

[PupStar 58]

 

@piernas

 

ok I think I got the hang of this now.

 

I have created a new module by copying the contact_us module and changed it to what I want.

 

Now the bit I just can not seem to get my head around is how to make the full link I have degrade to just an icon like the search, cart or account link but without the collapsible part.

 

Maybe I am being blind but I just can not see how to do it.

 

Thanks

 

Mark

 

includes/modules/navbar_extra_modules/nbx_spare_parts.php

<?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_left';
    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;

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

        switch (MODULE_NAVBAR_EXTRA_SPARE_PARTS_CONTENT_PLACEMENT) {
          case 'Home':
          $this->group = 'navbar_extra_modules_home';
          break;
          case 'Left':
          $this->group = 'navbar_extra_modules_left';
          break;
          case 'Right':
          $this->group = 'navbar_extra_modules_right';
          break;
          case 'Buttons':
          $this->group = 'navbar_extra_modules_buttons';
          break;
        }
      }
    }

    function getOutput() {
      global $oscTemplate;

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

      $data = ob_get_clean();

      $oscTemplate->addBlock($data, $this->group);

    }

    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, set_function, date_added) values ('Content Placement', 'MODULE_NAVBAR_EXTRA_SPARE_PARTS_CONTENT_PLACEMENT', 'Left', 'Choose placement.', '6', '1', 'tep_cfg_select_option(array(\'Left\',\'Right\'), ', 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_CONTENT_PLACEMENT', 'MODULE_NAVBAR_EXTRA_SPARE_PARTS_SORT_ORDER');
    }
  }

includes/modules/navbar_extra_modules/templates/nbx_spare_parts.php

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

includes/languages/english/modules/navbar_extra_modules/nbx_spare_parts.php

<?php
  define('MODULE_NAVBAR_EXTRA_SPARE_PARTS_TITLE', 'Spare Parts Finder');
  define('MODULE_NAVBAR_EXTRA_SPARE_PARTS_DESCRIPTION', 'Show link to Spare Parts Finder in the navigation bar.');
  define('MODULE_NAVBAR_EXTRA_SPARE_PARTS_PUBLIC_TEXT', 'Spare Parts Finder'); //<li><a href="' . tep_href_link('parts_finder.php?filterid=1') . '"><i class="fa fa-wrench"></i><span class="hidden-sm">  Spare Parts Finder</span></a></li>');
  define('MODULE_NAVBAR_EXTRA_SPARE_PARTS_SHORT_TEXT', 'Spare Parts Finder'); //<li><a href="' . tep_href_link('parts_finder.php?filterid=1') . '"><i class="fa fa-wrench"></i><span class="hidden-sm">  Spare Parts Finder</span></a></li>');

 

@piernas

 

I still have not worked this out if you woud not mind helping out.

 

Thanks

 

Mark

[piernas 125]

@@aurelou,

 

I can't reproduce the issue. For me it works on android 4 and 5, pc (firefox & chrome). I got stuck with making typeahead search inside the collapsible menu and I stopped until christmas sales gives me some free time.

 

Under what OS/browsers do you experience the problems?

 

@@PupStar,

 

I'll test your code and get back with something ;)

[piernas 125]

I have created a new module by copying the contact_us module and changed it to what I want.

 

Now the bit I just can not seem to get my head around is how to make the full link I have degrade to just an icon like the search, cart or account link but without the collapsible part.

 

Maybe I am being blind but I just can not see how to do it.

 

 

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.