piernas Posted November 2, 2016 Share Posted November 2, 2016 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. Link to comment Share on other sites More sharing options...
Dan Cole Posted November 2, 2016 Share 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. Link to comment Share on other sites More sharing options...
piernas Posted November 2, 2016 Author Share 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. Link to comment Share on other sites More sharing options...
Dan Cole Posted November 2, 2016 Share 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. Link to comment Share on other sites More sharing options...
Dan Cole Posted November 2, 2016 Share 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. Link to comment Share on other sites More sharing options...
piernas Posted November 2, 2016 Author Share 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! Link to comment Share on other sites More sharing options...
Dan Cole Posted November 2, 2016 Share 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 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. Link to comment Share on other sites More sharing options...
burt Posted November 3, 2016 Share 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. Link to comment Share on other sites More sharing options...
♥raiwa Posted November 3, 2016 Share Posted November 3, 2016 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 About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
piernas Posted November 22, 2016 Author Share 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. Link to comment Share on other sites More sharing options...
ArtcoInc Posted November 22, 2016 Share Posted November 22, 2016 @@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 Link to comment Share on other sites More sharing options...
piernas Posted November 22, 2016 Author Share Posted November 22, 2016 @@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. Link to comment Share on other sites More sharing options...
piernas Posted November 22, 2016 Author Share Posted November 22, 2016 @@ArtcoInc here it is: http://addons.oscommerce.com/info/9529 Link to comment Share on other sites More sharing options...
piernas Posted November 23, 2016 Author Share Posted November 23, 2016 While trying to debug this one http://www.oscommerce.com/forums/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. Link to comment Share on other sites More sharing options...
piernas Posted November 23, 2016 Author Share 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. Link to comment Share on other sites More sharing options...
PupStar Posted November 26, 2016 Share 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 Link to comment Share on other sites More sharing options...
piernas Posted November 26, 2016 Author Share 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? Link to comment Share on other sites More sharing options...
PupStar Posted November 26, 2016 Share 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 Link to comment Share on other sites More sharing options...
PupStar Posted November 26, 2016 Share 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. Link to comment Share on other sites More sharing options...
PupStar Posted November 27, 2016 Share 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>'); Link to comment Share on other sites More sharing options...
aurelou Posted December 14, 2016 Share Posted December 14, 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. Link to comment Share on other sites More sharing options...
PupStar Posted December 15, 2016 Share 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 Link to comment Share on other sites More sharing options...
PupStar Posted December 15, 2016 Share 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 Link to comment Share on other sites More sharing options...
piernas Posted December 15, 2016 Author Share 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 ;) Link to comment Share on other sites More sharing options...
piernas Posted December 16, 2016 Author Share 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.