You are here:  » Sidebar with Categories Accordion


Sidebar with Categories Accordion

Submitted by Panos on Mon, 2016-03-07 16:16 in

Hi David,
i'd really appreciate your help highly on the following:

  1. Build a category accordion in sidebar as found in this catdemo.php
  2. Embed an Adsense Banner inside search results as in this demo page

As far as point 1 is concerned i've already created a sidebar as per your instructions found here.

Thanks a lot ! in advance,
P.

Submitted by support on Mon, 2016-03-07 17:51

Hello Panos,

Re 1;

Here is the Foundation based code to create a Category Hierarchy accordion.

<?php
  
function dropdown($parent)
  {
    global 
$config_databaseTablePrefix;
    global 
$accordionId;
    
$sql2 "SELECT * FROM `".$config_databaseTablePrefix."categories_hierarchy` WHERE parent='".$parent."'";
    if (
database_querySelect($sql2,$rows2))
    {
      foreach(
$rows2 as $category)
      {
        
$sql3 "SELECT id FROM `".$config_databaseTablePrefix."categories_hierarchy` WHERE parent='".$category["id"]."' LIMIT 1";
        if (
database_querySelect($sql3,$rows3))
        {
          print 
"<dd>";
          
$accordionId++;
          print 
"<a href='#panel".$accordionId."'>".$category["name"]."</a>";
          print 
"<div id='panel".$accordionId."' class='content'>";
          print 
"<dl id='accordion".$accordionId."' class='accordion' data-accordion>";
          
dropdown($category["id"]);
          print 
"</dl>";
          print 
"</div>";
          print 
"</dd>";
        }
        else
        {
          
$categoryHierarchyArray tapestry_categoryHierarchyArray(array($category["id"]));
          
$itemHREF tapestry_indexHREF("category",tapestry_hyphenate($categoryHierarchyArray[$category["id"]]));
          print 
"<dd>";
          print 
"<span class='node' onclick='JavaScript:window.location=\"".$itemHREF."\";'>".$category["name"]."</span>";
          print 
"</dd>";
        }
      }
    }
  }
  
$accordionId 1;
  print 
"<dl id='accordion".$accordionId."' class='accordion' data-accordion>";
  
dropdown(0);
  print 
"</dl>";
?>

Place this into the sidebar content area, indicated in the instructions at node 5821 by the following comment:

   <!-- sidebar content here -->

You can style dl a and dd as required, ideally in html/default.css. catdemo.php uses the following;

  dl a {
    font-size: 13px !important;
  }
  dd {
    font-size: 13px;
  }
  .node {
    cursor:pointer;
    color: #008CBA;
  }

Re 2;

To embed AdSense at the n'th row of Search Results as on the demo site, edit html/searchresults.php and look for the following code at line 7:

    <?php foreach($searchresults["products"] as $product): ?>

...and REPLACE with:

    <?php foreach($searchresults["products"] as $k => $product): ?>
    <?php if ($k==5): ?>
      <div class='row pt_sr_each'>
        <div class='small-2 columns show-for-small-only'>&nbsp;</div>
        <div class='small-8 medium-2 columns'>&nbsp;</div>
        <div class='small-2 columns show-for-small-only'>&nbsp;</div>
        <div class='medium-8 columns'>
          <!-- AdSense code here -->
        </div>
        <div class='medium-2 columns pt_sr_each_price'>&nbsp;</div>
        <div class='small-12 columns show-for-small-only'><hr /></div>
      </div>
    <?php endif; ?>

Replace the comment <!-- AdSense code here --> with your AdSense code as required - using the AdSense default "Responsive" Ad Unit code will serve an ad appropriate for the device being used...

Cheers,
David.
--
PriceTapestry.com

Submitted by Panos on Tue, 2016-03-08 09:53

Good morning David,
thanks so much for your help, your support always goes the extra mile!

Cheers
P.

Submitted by bastty on Thu, 2016-06-16 14:19

Hy Davide

Can we use this category accordion in sidebar with custom category links ?

I'm not using the Category Hierarchy Mapping insted i use the simple Category Mapping so in this case can i put the links in this accordion sidebar ?

Thank you

Submitted by support on Thu, 2016-06-16 16:01

Hello bastty,

Sure - you can manually create a category accordion pointing to simple Category Mapping category pages with the following markup - use where required, e.g. within the sidebar content area as described above;

<dl id='accordion1' class='accordion' data-accordion>
  <dd><a href='#panel1'>Category 1</a>
    <div id='panel1' class='content'>
      <dl id='accordion2' class='accordion' data-accordion>
        <dd><span class='node' onclick='JavaScript:window.location="/category/Sub-Category-1/";'>Sub Category 1</span></dd>
        <dd><span class='node' onclick='JavaScript:window.location="/category/Sub-Category-2/";'>Sub Category 2</span></dd>
      </dl>
    </div>
  </dd>
  <dd><a href='#panel2'>Category 2</a>
    <div id='panel2' class='content'>
      <dl id='accordion3' class='accordion' data-accordion>
        <dd><span class='node' onclick='JavaScript:window.location="/category/Sub-Category-3/";'>Sub Category 3</span></dd>
        <dd><span class='node' onclick='JavaScript:window.location="/category/Sub-Category-4/";'>Sub Category 4</span></dd>
      </dl>
    </div>
  </dd>
</dl>

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by bastty on Fri, 2016-06-17 09:01

Perfect, thank you Davide