Jump to content
piernas

Navbar button shown in small view - how to?

Recommended Posts

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:

 

post-181458-0-92343600-1478111889_thumb.jpg

 

Any help will be appreciated.

Edited by piernas

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

post-181458-0-69814700-1479817727_thumb.jpg

 

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

 

Share this post


Link to post
Share on other sites

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

Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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


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

post-256780-0-48500200-1480195158_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

 

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.


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

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

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

Share this post


Link to post
Share on other sites

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


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


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

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

Share this post


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

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

×