Jump to content

CJAnnihilatorCustoms

Members
  • Content count

    8
  • Joined

  • Last visited


Reputation Activity

  1. Like
    CJAnnihilatorCustoms got a reaction from De Dokta in Categories Menu with multiple subs in the header navbar   
    Nobody is giving you feedback, so I've gotta step up and say keep at it, this is helping me a ton. 
  2. Like
    CJAnnihilatorCustoms reacted to De Dokta in Bootstrap 3 in 2.3 new products rows aligning   
    Hi,
     
    I had the same problem when the headline needed more than one row. My solution:
     
    user.css add:
    .headliner{ min-height: 40px;} or if you don't need a min-height in the collapsed view (test it):
    @[member=media] (min-width: 768px) { .headliner{ min-height: 40px;} } includes/modules/new_products.php change:
    $new_prods_content .= '      <p class="text-center"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a></p>'; to: 
    $new_prods_content .= '      <p class="text-center headliner"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a></p>'; That's it!
     
    J.J.
     
  3. Like
    CJAnnihilatorCustoms got a reaction from De Dokta in Categories Menu with multiple subs in the header navbar   
    Nobody is giving you feedback, so I've gotta step up and say keep at it, this is helping me a ton. 
  4. Like
    CJAnnihilatorCustoms reacted to De Dokta in Categories Menu with multiple subs in the header navbar   
    Hi
     
    I have long been looking for a way to integrate the categories menu with multiple sub categories into  the header navbar, but I always failed to embed the appropriate code into the category_tree.php.  :(  With the help of the code gadlol has recently posted, some JS and CSS I have now found a way without changing the category_tree.php.
    Looks like this:

    How it works:

     In includes/functions/html_output.php add a new function:
    function tep_show_tree($root_id = 0,$mainUlClass='dropdown-menu',$submenuUlClass='dropdown-menu sub-menu'){     global $languages_id,$cPath_array;     $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");     $items = array();     while ($categories = tep_db_fetch_array($categories_query))  {         $items[$categories['categories_id']] = array('name' => $categories['categories_name'], 'parent_id' => $categories['parent_id'], 'id' => $categories['categories_id']);     }     $citems=count($items);          if($citems<=0) return '';     elseif($citems==1) $children[] = $items; //in case we have one category item without subcategories, rare but possible     else foreach( $items as $item ) $children[$item['parent_id']][] = $item;         $loop = !empty( $children[$root_id] );         $parent = $root_id;         $parent_stack = array();     $html=array();//store html code         $stack=array();//helper array so to know the current level     $pic=''; //products_in_category string         $html[]='<ul class="'.$mainUlClass.'">';         while ( $loop && ( ( $option = each( $children[$parent] ) ) || ( $parent > $root_id ) ) ){             if ( $option === false ){                 $parent = array_pop( $parent_stack );                 $html[] = '</ul>';                 $html[] = '</li>';                 array_pop( $stack );             }elseif ( !empty( $children[$option['value']['id']] ) ){                 $stack[]=$option['value']['id'];                   $rt=$root_id>0 ? $root_id.'_' : '';                   $cpath_new=count($stack)<=0 ? 'cPath='.$rt.$option['value']['id'] : 'cPath='.$rt.implode('_',$stack);                 $html[]= '<li><a class="trigger right-caret" href="'.tep_href_link(FILENAME_DEFAULT, $cpath_new).'">';           if (SHOW_COUNTS == 'true') {             $products_in_category = tep_count_products_in_category($option['value']['id']);             if ($products_in_category > 0) {               $pic=' (' . $products_in_category . ')';             }           }           $sm=0;                   if((isset($cPath_array) && in_array($option['value']['id'], $cPath_array))){             $sm=1;             $html[]='<strong>'.stripslashes($option['value']['name']).$pic.'</strong>';           }else{             $html[]=stripslashes($option['value']['name']) . $pic;           }             $html[]='</a>';             $html[] = '<ul class="'.$submenuUlClass.'">';                 $parent_stack[]=$option['value']['parent_id'];                 $parent = $option['value']['id'];           }else{         $rt=$root_id>0 ? $root_id.'_' : '';                 $cpath_new= count($stack)<=0 ? 'cPath='.$rt.$option['value']['id'] : 'cPath='.$rt.implode('_',$stack).'_'.$option['value']['id'];                 $html[]= '<li><a href="'.tep_href_link(FILENAME_DEFAULT, $cpath_new).'" >';         if (SHOW_COUNTS == 'true') {           $products_in_category = tep_count_products_in_category($option['value']['id']);           if ($products_in_category > 0) {             $pic=' (' . $products_in_category . ')';           }         }                 if (isset($cPath_array) && in_array($option['value']['id'], $cPath_array)) {           $html[]='<strong>'.stripslashes($option['value']['name']).$pic.'</strong>';         }else{           $html[]=stripslashes($option['value']['name']).$pic;         }         $html[]='</a>';         }        }         $html[]='</ul>';      $data = '<li class="dropdown">' .              '<a class="dropdown-toggle" data-toggle="dropdown">' . HEADER_CATS . '</a>' .                implode($html) .              '</li>';       return $data;   } includes/footer.php add:
    <script type="text/javascript"> $(function(){     $(".dropdown-menu > li > a.trigger").one("click",function(e){         e.preventDefault();         var current=$(this).next();         var grandparent=$(this).parent().parent();         if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))             $(this).toggleClass('right-caret left-caret');         grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');         grandparent.find(".sub-menu:visible").not(current).hide();         current.toggle();         e.stopPropagation();     });     $(".dropdown-menu > li > a:not(.trigger)").one("click",function(){         var root=$(this).closest('.dropdown');         root.find('.left-caret').toggleClass('right-caret left-caret');         root.find('.sub-menu:visible').hide();     }); })(jQuery); </script> user.css add:
    .dropdown-menu>li /* To prevent selection of text */ {   position:relative;     padding-left: 5px;     -webkit-user-select: none; /* Chrome/Safari */             -moz-user-select: none; /* Firefox */     -ms-user-select: none; /* IE10+ */     /* Rules below not implemented in browsers yet */     -o-user-select: none;     user-select: none;     cursor:pointer; } .dropdown-menu .sub-menu {     left: 100%;     position: absolute;     top: 0;     display:none;     margin-top: -1px;     box-shadow:none; } .right-caret:after,.left-caret:after  {  content:"";     border: 5px solid transparent;     border-top: 5px solid transparent;     display: inline-block;     height: 0;     vertical-align: middle;     width: 0;     margin-left:15px; } .right-caret:after {        border-left: 5px solid #ffaf46; } .left-caret:after {     border-right: 5px solid #ffaf46; } in includes/header.php after:
    <?php echo '<li><a class="store-brand" href="' . tep_href_link(FILENAME_DEFAULT) . '">' . HEADER_HOME . '</a></li>'; ?> add:
    <?php echo '<li>' . tep_show_tree() . '</li>'; ?> or somewhere else where you like it!
    includes/languages/english.php add:
    define('HEADER_CATS', '<i class="glyphicon glyphicon-cog"></i><span class="hidden-sm"> Categories</span> <span class="caret"></span>'); or any other glyphicon.
     
    I tested it with Mozilla 30. IE 8, Chrome and Opera - seems to work properly in full and collapsed size. 
     
    Hope you enjoy it!
     
    J.J.
  5. Like
    CJAnnihilatorCustoms reacted to De Dokta in Categories Menu with multiple subs in the header navbar   
    To continue and bring to an end my soliloquy: Sometimes the solution ist that simple! I moved the script from the footer to the header und now it works as it should - also in IE (8 in my case).   Finally it looks like that: - end of header.php <script type="text/javascript"> function smartRows(){ var rows = $('.dropdown-menu.row > li').size();    if(rows > 20) {                      /// script only runs with 20 or more rows/categories var columns = Math.ceil(rows/20);       /// maximum of rows per column var $ul = $('.dropdown-menu.row'),     $elements = $ul.children('li'),     breakPoint = Math.round($elements.length/columns);     $ordered = $('<ul></ul>'); function appendToUL(i) {     if ($ul.children().eq(i).length > 0) {         $ordered.append($ul.children().eq(i).clone());     }     else $ordered.append($('<li></li>')); } function reorder($el) {     $el.each(function(){         $item = $(this);         if ($item.index() >= breakPoint) return false;         appendToUL($item.index());         for (var i = 1; i < columns; i++) {             appendToUL(breakPoint*i+$item.index());         }     });      $ul.removeClass('row').addClass('column');      $ul.html($ordered.children().css('width',100/columns+'%')); } reorder($elements); } }; document.onload=smartRows(); </script> - user.css
    @[member=media] screen and (min-width: 768px){ .column {     list-style:none;     width: 500px; } .column > li {     float: left;     width: 100%;  /* 1 column - default*/     height: 2em;     } } .row{} - first line of function tep_show_tree in html_output.php
    function tep_show_tree($root_id = 0,$mainUlClass='dropdown-menu row',$submenuUlClass='dropdown-menu sub-menu'){ In that form the script splits the menu only on the first level into columns. It's possible to split also submenus - but that looks ugly and is somewhat confusing.....
     
    J.J.
     
×