[Addon] Categories Accordion Box for 2.3.1

xtronics · March 2, 2015

but it's built into jQueryUI,

Actually, one could detect that there are no subcategories and put conditional text where I have it in my example. The workaround I posted works well enough for me, Nothing in jQueryUI is a show stopper.

I think you mean to simply not have the bottom half - which might actually confuse people.

I thought about simply putting a right pointing arrow grafic in empty subcategories.

♥kymation · March 2, 2015

Yes, I wasn't very clear. I meant that there is no way to do something different if there is nothing to put in the box, so you have to put something there or have an empty box showing.

It can be made to work, it's just not always easy to make it look good.

Regards

Jim

Roaddoctor · June 5, 2015

It shouldn't be too hard. Look at the output of the Accordion box. It's controlled by the Javascript attached to the categoriesMenu ID. You'll need a n copy of that script with a different ID to control the new accordion. Then it's just a matter of using the same structure.

You could also add the other links into the Categories box. Just add links to the $data variable just after these lines:
$data = ' <div id="categoriesMenu">' . PHP_EOL;
$data .= $categories_string . PHP_EOL;
$data .= ' </div>' . PHP_EOL;
Regards

Jim

@@kymation

Jim,

I'm trying to add two links (Jack;s All Products SEO) and have them appear as categories. Right now I have the following but only get text links to appear

      $category_count = 0;
      $this->tep_show_category($first_element);

// Begin add title
      $data .= '<div class="infoBoxContainer"><div class="ui-widget-header ui-corner-top infoBoxHeading">' . MODULE_BOXES_CATEGORIES_ACCORDION_BOX_TITLE . '</div>';
// End add title

      $data .= $categories_string . PHP_EOL;

      $data .= '</div>'; // infoBoxContainer - bfd

/// New links here
	 /**** BEGIN ALL PRODUCTS SEO ****/
	 $data .= '<div><a href="' . tep_href_link(FILENAME_ALLPRODS_SEO, '', 'NONSSL') . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '">' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '</a></div>';
	 if (ALL_PRODUCTS_SEO == 'true' && ALL_PRODUCTS_SEO_DISPLAY_PRICE_LIST == 'true') {
		 $data .= '<div><a href="' . tep_href_link(FILENAME_ALLPRODS_SEO_PRICE_LIST, '', 'NONSSL') . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_PRICE_LIST . '"><nobr>' . BOX_INFORMATION_ALLPRODS_SEO_PRICE_LIST . '</nobr></a></div>';
	 }
	 /**** END ALL PRODUCTS SEO ****/
/// end new links

      return $data;
    }

Could you possibly tell me what I am not doing correctly?

The site is here. 2.3.4 not bs

Thx much!

♥kymation · June 5, 2015

You're adding the new "categories" outside the box container so they don't get styled. Try this:

      $category_count = 0;
      $this->tep_show_category($first_element);

// Begin add title
      $data .= '<div class="infoBoxContainer"><div class="ui-widget-header ui-corner-top infoBoxHeading">' . MODULE_BOXES_CATEGORIES_ACCORDION_BOX_TITLE . '</div>';
// End add title

      $data .= $categories_string . PHP_EOL;

/// New links here
	 /**** BEGIN ALL PRODUCTS SEO ****/
	 $data .= '<div><a href="' . tep_href_link(FILENAME_ALLPRODS_SEO, '', 'NONSSL') . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '">' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '</a></div>';
	 if (ALL_PRODUCTS_SEO == 'true' && ALL_PRODUCTS_SEO_DISPLAY_PRICE_LIST == 'true') {
		 $data .= '<div><a href="' . tep_href_link(FILENAME_ALLPRODS_SEO_PRICE_LIST, '', 'NONSSL') . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_PRICE_LIST . '"><nobr>' . BOX_INFORMATION_ALLPRODS_SEO_PRICE_LIST . '</nobr></a></div>';
	 }
	 /**** END ALL PRODUCTS SEO ****/
/// end new links

      $data .= '</div>'; // infoBoxContainer - bfd

      return $data;
    }

Regards

Jim

Roaddoctor · June 5, 2015

@@kymation

Thank you Jim. That change was correct, the links are in the container now. They remain as text links though. I've read thru this thread back to page 11 and saw some similar questions but could not find any example.

Has anyone adapted the All Products SEO into bm_categories_accordion.php? if so please share :)

Thx much

Dave

♥kymation · June 5, 2015

You need to change your links to make them look like the accordion box links. So, instead of

$data .= '<div><a href="' . tep_href_link(FILENAME_ALLPRODS_SEO, '', 'NONSSL') . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '">' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '</a></div>';

you need to have

        $data .= '    <h3';
        $data .= ' onclick="location.href=\'';
        $data .= tep_href_link( FILENAME_ALLPRODS_SEO );
        $data .= '\';"';
        $data .= '>';

        $data .= '<a href="#">';
        $data .= BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES;
        $data .= '</a>';

        $data .= '</h3>' . PHP_EOL;

Regards

Jim

Multiple edits: This forum hates me today.

Edited June 5, 2015 by kymation

Roaddoctor · June 6, 2015

@@kymation

Thank you Jim. Everything worked fine with above, with one bug... The 2 links work every other click. home page / proper page alternating. If I use the original link syntax, but add in a <h3> I get the same appearance and the links work fine. Both methods formatted the text correctly but did not give the link a "category" (jquery) like appearance. I'm "good enough" for now but I attached the file if anyone else would like to improve upon it.

Thanks again Jim - your appreciated.

Dave

<?php
/*
  $Id: bm_categories_accordion.php v1.2 20130612 Kymation $
  $Loc: catalog/includes/modules/boxes/ $   -adapted for All Products SEO 6/6/2015-

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2013 osCommerce

  Released under the GNU General Public License
*/

  class bm_categories_accordion {
    var $code = 'bm_categories_accordion';
    var $group = 'boxes';
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;
    var $pages;

    function bm_categories_accordion() {
    	global $PHP_SELF;

      $this->title = MODULE_BOXES_CATEGORIES_ACCORDION_TITLE;
      $this->description = MODULE_BOXES_CATEGORIES_ACCORDION_DESCRIPTION;

      if ( defined('MODULE_BOXES_CATEGORIES_ACCORDION_STATUS') ) {
        $this->sort_order = MODULE_BOXES_CATEGORIES_ACCORDION_SORT_ORDER;
        $this->enabled = (MODULE_BOXES_CATEGORIES_ACCORDION_STATUS == 'True');
        $this->pages = MODULE_BOXES_CATEGORIES_ACCORDION_DISPLAY_PAGES;
        $this->group = ((MODULE_BOXES_CATEGORIES_ACCORDION_CONTENT_PLACEMENT == 'Left Column') ? 'boxes_column_left' : 'boxes_column_right');
      }
    }

    function tep_show_category($counter) {
      global $tree, $categories_string, $cPath_array, $category_active_id, $category_count, $PHP_SELF;

      if ($tree[$counter]['parent'] == 0) {
        $cPath_new = 'cPath=' . $counter;
        $category_count++;
      } else {
        $cPath_new = 'cPath=' . $tree[$counter]['path'];
      }

      if( $tree[$counter]['level'] == 0 ) {
       if ($tree[$counter]['category_number'] == 0 ) {
        	$category_active_id = 'false';
        } else {
          $categories_string .= '    </div>' . PHP_EOL;
        }                                            

        if (isset($cPath_array) && in_array($counter, $cPath_array)) {
          $category_active_id = $tree[$counter]['category_number'];
        }

        $categories_string .= '    <h3';
        $categories_string .= ' onclick="location.href=\'';
        $categories_string .= tep_href_link( FILENAME_DEFAULT, $cPath_new );
        $categories_string .= '\';"';
        $categories_string .= '>';

        $categories_string .= '<a href="#">';
        $categories_string .= $tree[$counter]['name'];
        $categories_string .= '</a>';

        $categories_string .= '</h3>' . PHP_EOL;
        $categories_string .= '    <div>' . PHP_EOL;
//test        $categories_string .= '<div><b>' . $tree[$counter]['name'] .'  → </b>' . PHP_EOL;

      } else {
      	$category_indent = ($tree[$counter]['level'] * 0.5 ) - 1;

        $categories_string .= '    <div style="margin: 0 -15px 0 ' . $category_indent . 'em; border-top: 1px solid #cccccc; padding-top:5px; padding-bottom: 5px;">' . PHP_EOL;

        $categories_string .= '      <a href="';
        $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';

        if (isset($cPath_array) && in_array($counter, $cPath_array)) {
          $categories_string .= '<strong>';
        }

        // display category name
        $categories_string .= $tree[$counter]['name'];

        if (isset($cPath_array) && in_array($counter, $cPath_array)) {
          $categories_string .= '</strong>';
        }

        if (tep_has_category_subcategories($counter)) {
          // Uncomment the next line if you want the ugly text arrows
          // $categories_string .= '->';
        }

        $categories_string .= '</a>';
        if (SHOW_COUNTS == 'true') {
          $products_in_category = tep_count_products_in_category($counter);
          if ($products_in_category > 0) {
            $categories_string .= ' (' . $products_in_category . ')';
          }
        }

        $categories_string .= '    </div>' . PHP_EOL;

      }

      if ($tree[$counter]['next_id'] != false) {
        $this->tep_show_category($tree[$counter]['next_id']);

      } else {
        $categories_string .= '    </div>' . PHP_EOL;
        $categories_string .= '  </div>' . PHP_EOL;
        $categories_string .= '  <script type="text/javascript">' . PHP_EOL;
        $categories_string .= '    $(function() {' . PHP_EOL;
        $categories_string .= '      $( "#categoriesMenu" ).accordion({' . PHP_EOL;
        $categories_string .= '        autoHeight: false,' . PHP_EOL;
        $categories_string .= '        collapsible: true,' . PHP_EOL;
        $categories_string .= '        icons: {' . PHP_EOL;
        $categories_string .= "          'header': 'ui-icon-" . MODULE_BOXES_CATEGORIES_ACCORDION_ICON . "'," . PHP_EOL;
        $categories_string .= "          'headerSelected': 'ui-icon-" . MODULE_BOXES_CATEGORIES_ACCORDION_ICON_SELECTED . "'" . PHP_EOL;
        $categories_string .= '        },' . PHP_EOL;
        $categories_string .= '        active: ' . $category_active_id . PHP_EOL;
        $categories_string .= '      });' . PHP_EOL;
        $categories_string .= '    });' . PHP_EOL;
        $categories_string .= '  </script>' . PHP_EOL;
      }
    }

    function getData() {
      global $categories_string, $tree, $languages_id, $cPath, $cPath_array;
         $data = ''; // per kymation
		 
      $categories_string = '<div id="categoriesMenu">' . PHP_EOL;
      $tree = array();

      $categories_query_raw = "
        select
          c.categories_id,
          cd.categories_name,
          c.parent_id
        from
          " . TABLE_CATEGORIES . " c
          join " . TABLE_CATEGORIES_DESCRIPTION . " cd
            on (cd.categories_id = c.categories_id)
        where
          c.parent_id = '0'
          and c.categories_status = 1
		  and cd.language_id='" . ( int )$languages_id ."'
        order by
          sort_order,
          cd.categories_name
      ";
      $categories_query = tep_db_query( $categories_query_raw );

      $category_number = 0;
      while ($categories = tep_db_fetch_array($categories_query))  {
        $tree[$categories['categories_id']] = array('name' => $categories['categories_name'],
                                                    'parent' => $categories['parent_id'],
                                                    'level' => 0,
                                                    'path' => $categories['categories_id'],
                                                    'next_id' => false,
                                                    'category_number' => $category_number
                                                   );

        $category_number++;

        if (isset($parent_id)) {
          $tree[$parent_id]['next_id'] = $categories['categories_id'];
        }

        $parent_id = $categories['categories_id'];

        if (!isset($first_element)) {
          $first_element = $categories['categories_id'];
        }
      }

      if (tep_not_null($cPath)) {
        $new_path = '';
        reset($cPath_array);
        while (list($key, $value) = each($cPath_array)) {
          unset($parent_id);

          if (isset($first_id)) {
            unset($first_id);
          }

          $categories_query_raw = "
            select
              c.categories_id,
              cd.categories_name,
              c.parent_id
            from
              " . TABLE_CATEGORIES . " c
              join " . TABLE_CATEGORIES_DESCRIPTION . " cd
                on (c.categories_id = cd.categories_id)
            where
              c.parent_id = '" . (int)$value . "'
              and c.categories_status = 1
              and cd.language_id='" . (int)$languages_id ."'
            order by
              sort_order,
              cd.categories_name
          ";
          $categories_query = tep_db_query( $categories_query_raw );
          if (tep_db_num_rows($categories_query)) {
            $new_path .= $value;
            while ($row = tep_db_fetch_array($categories_query)) {
              $tree[$row['categories_id']] = array('name' => $row['categories_name'],
                                                   'parent' => $row['parent_id'],
                                                   'level' => $key+1,
                                                   'path' => $new_path . '_' . $row['categories_id'],
                                                   'next_id' => false,
                                                   'category_number' => false
                                                   );

              if (isset($parent_id)) {
                $tree[$parent_id]['next_id'] = $row['categories_id'];
              }

              $parent_id = $row['categories_id'];

              if (!isset($first_id)) {
                $first_id = $row['categories_id'];
              }

              $last_id = $row['categories_id'];
            }
            $tree[$last_id]['next_id'] = $tree[$value]['next_id'];
            $tree[$value]['next_id'] = $first_id;
            $new_path .= '_';
          } else {
            break;
          }
        }
      }

      $category_count = 0;
      $this->tep_show_category($first_element);

// Begin add title
      $data .= '<div class="infoBoxContainer"><div class="ui-widget-header ui-corner-top infoBoxHeading">' . MODULE_BOXES_CATEGORIES_ACCORDION_BOX_TITLE . '</div>';
// End add title

      $data .= $categories_string . PHP_EOL;
///      $data = $categories_string . PHP_EOL;

/// New links here
	 /**** BEGIN ALL PRODUCTS SEO ****/
      $data .= '<div><h3><a href="' . tep_href_link(FILENAME_ALLPRODS_SEO, '', 'NONSSL') . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '">' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '</a></h3></div>';
/*
  $data .= '<div>';
        $data .= '    <h3';
        $data .= ' onclick="location.href=\'';
        $data .= tep_href_link( FILENAME_ALLPRODS_SEO );
        $data .= '\';"';
        $data .= '>';

        $data .= '<a href="#">';
        $data .= BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES;
        $data .= '</a>';

        $data .= '</h3>' . PHP_EOL;
  $data .= '</div>';
*/

	 if (ALL_PRODUCTS_SEO == 'true' && ALL_PRODUCTS_SEO_DISPLAY_PRICE_LIST == 'true') {
		$data .= '<div><h3><a href="' . tep_href_link(FILENAME_ALLPRODS_SEO_PRICE_LIST, '', 'NONSSL') . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_PRICE_LIST . '"><nobr>' . BOX_INFORMATION_ALLPRODS_SEO_PRICE_LIST . '</nobr></a></h3></div>';
/*
  $data .= '<div>';
        $data .= '    <h3';
        $data .= ' onclick="location.href=\'';
        $data .= tep_href_link( FILENAME_ALLPRODS_SEO_PRICE_LIST );
        $data .= '\';"';
        $data .= '>';

        $data .= '<a href="#">';
        $data .= BOX_INFORMATION_ALLPRODS_SEO_PRICE_LIST;
        $data .= '</a>';

        $data .= '</h3>' . PHP_EOL;
  $data .= '</div>';
*/
	 } // if (ALL_PRODUCTS_SEO
	 /**** END ALL PRODUCTS SEO ****/
/// end new links

        $data .= '</div>'; // infoBoxContainer


      return $data;
    }

    function execute() {
      global $SID, $oscTemplate;

      if ((USE_CACHE == 'true') && empty($SID)) {
        $output = tep_cache_categories_accordion_box();
      } else {
        $output = $this->getData();
      }

      $oscTemplate->addBlock($output, $this->group);
    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_BOXES_CATEGORIES_ACCORDION_STATUS');
    }

    function install() {
      tep_db_query( "insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Categories Module', 'MODULE_BOXES_CATEGORIES_ACCORDION_STATUS', 'True', 'Do you want to add the module to your shop?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query( "insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Placement', 'MODULE_BOXES_CATEGORIES_ACCORDION_CONTENT_PLACEMENT', 'Left Column', 'Should the module be loaded in the left or right column?', '6', '2', 'tep_cfg_select_option(array(\'Left Column\', \'Right Column\'), ', now())");
      tep_db_query( "insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_BOXES_CATEGORIES_ACCORDION_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '3', now())");
      tep_db_query( "insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Selected Icon', 'MODULE_BOXES_CATEGORIES_ACCORDION_ICON_SELECTED', 'minus', 'Select the icon to use for the selected tab.', '6', '5', 'tep_cfg_pull_down_icon(', now())");
      tep_db_query( "insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Unselected Icon', 'MODULE_BOXES_CATEGORIES_ACCORDION_ICON', 'plus', 'Select the icon to use for the unselected tabs.', '6', '4', 'tep_cfg_pull_down_icon(', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Display in pages.', 'MODULE_BOXES_CATEGORIES_ACCORDION_DISPLAY_PAGES', 'all', 'select pages where this box should be displayed. ', '6', '0','tep_cfg_select_pages(' , now())");
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      $keys = array();
      $keys[] = 'MODULE_BOXES_CATEGORIES_ACCORDION_STATUS';
      $keys[] = 'MODULE_BOXES_CATEGORIES_ACCORDION_CONTENT_PLACEMENT';
      $keys[] = 'MODULE_BOXES_CATEGORIES_ACCORDION_SORT_ORDER';
      $keys[] = 'MODULE_BOXES_CATEGORIES_ACCORDION_ICON_SELECTED';
      $keys[] = 'MODULE_BOXES_CATEGORIES_ACCORDION_ICON';
      $keys[] = 'MODULE_BOXES_CATEGORIES_ACCORDION_DISPLAY_PAGES';
      return $keys;
    }
  } // class


  ////
  // Generate a pulldown menu of the available jquery icons
  //   Requires a text file containing a list of the icons, one per line,
  //   at: ext/jquery/ui/icons.txt
  if (!function_exists('tep_cfg_pull_down_icon')) {
    function tep_cfg_pull_down_icon($icon, $key = '') {
      $icons_array = array ();

      $file = DIR_FS_CATALOG . '/ext/jquery/ui/icons.txt';
//      $file = '/ext/jquery/ui/icons.txt';
      if (file_exists($file) && is_file($file)) {
        $name = (($key) ? 'configuration[' . $key . ']' : 'configuration_value');
        $file_contents = @file($file);

        foreach ($file_contents as $icon_name) {
          $icon_name = trim($icon_name);

          if (strlen($icon_name) > 0) {
            $icon_name = str_replace('ui-icon-', '', $icon_name);

            $icons_array[] = array (
              'id' => $icon_name,
              'text' => $icon_name
            );

          } // if (strlen
        } // foreach ($file_contents
      } // if( file_exists

      return tep_draw_pull_down_menu($name, $icons_array, $icon);
    } // function tep_cfg_pull_down_icon
  } // if (!function_exists
?>

♥kymation · June 6, 2015

The documentation for the jQueryUI Accordion function tells me that should not work. So much for the documentation. Go with what works and don't worry about it.

Regards

Jim

[Addon] Categories Accordion Box for 2.3.1

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

kymation

kymation

kymation

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation