piernas 125 Posted November 2, 2016 (edited) 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 Share this post Link to post Share on other sites
♥Dan Cole 490 Posted November 2, 2016 @@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 Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Share this post Link to post Share on other sites
piernas 125 Posted November 2, 2016 @@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
♥Dan Cole 490 Posted November 2, 2016 @@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 Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Share this post Link to post Share on other sites
♥Dan Cole 490 Posted November 2, 2016 @@piernas Juanma Does this help? http://stackoverflow.com/questions/21037833/exclude-menu-item-from-the-collapse-of-bootstrap-3-navbar Dan Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Share this post Link to post Share on other sites
piernas 125 Posted November 2, 2016 @@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
♥Dan Cole 490 Posted November 2, 2016 @@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 1 piernas reacted to this Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Share this post Link to post Share on other sites
burt 3,793 Posted November 3, 2016 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
♥raiwa 1,077 Posted November 3, 2016 (edited) 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 About Me: http://forums.oscommerce.com/user/249059-raiwa/ Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Pheonix 1.0.0.0) here. Share this post Link to post Share on other sites
piernas 125 Posted November 22, 2016 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. 1 Bobber reacted to this Share this post Link to post Share on other sites
ArtcoInc 308 Posted November 22, 2016 (edited) @@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 Get the latest Responsive osCommerce CE (community edition) here . Share this post Link to post Share on other sites
piernas 125 Posted November 22, 2016 (edited) @@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 Share this post Link to post Share on other sites
piernas 125 Posted November 22, 2016 @@ArtcoInc here it is: http://addons.oscommerce.com/info/9529 1 Bobber reacted to this Share this post Link to post Share on other sites
piernas 125 Posted November 23, 2016 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. Share this post Link to post Share on other sites
piernas 125 Posted November 23, 2016 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. 1 Bobber reacted to this Share this post Link to post Share on other sites
PupStar 58 Posted November 26, 2016 @@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
piernas 125 Posted November 26, 2016 @@PupStar O'm no sure if I understand you. You mean you wnat those buttons in header instead of in the navbar? Share this post Link to post Share on other sites
PupStar 58 Posted November 26, 2016 @@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 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 58 Posted November 26, 2016 @@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
PupStar 58 Posted November 27, 2016 @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
aurelou 4 Posted December 14, 2016 (edited) 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 Share this post Link to post Share on other sites
PupStar 58 Posted December 15, 2016 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
PupStar 58 Posted December 15, 2016 @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
piernas 125 Posted December 15, 2016 @@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
piernas 125 Posted December 16, 2016 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. 1 ArtcoInc reacted to this Share this post Link to post Share on other sites