You are here:  » Changing atoz.php layout


Changing atoz.php layout

Submitted by Convergence on Fri, 2012-06-01 21:33 in

v12/10B

Greetings,

We are using merchant logos on our /merchants/ page. Currently we have 4 columns set in atoz.php - Problem we are having is there are often many more merchants beginning with one letter than another. This leaves huge gaps until the next row begins.

We would like to change our layout to omit the 'Letter' and to simply have the logos one after another, alphabetically.

Example:

MerchantA1 MerchantA2 MerchantA3 MerchantB1
MerchantC1 MerchantC2 MerchantD1 MerchantD2
MerchantD3 MerchantP1 MerchantT1 MarchentW1
MerchantZ1

We understand that we may have to create a new atoz file so this will not change how 'brands' and 'categories' are displayed.

Any suggestions would be appreciated.

And always, thank you for your great support!

Submitted by support on Sat, 2012-06-02 12:08

Hi,

Here's an alternative html/atoz.php that produces a tighter layout...

<div class='atoz'>
<?php
  $columns = 4;
  $columnWidth = intval(100/$columns);
  $currentLetter = "";
  $currentColumn = 0;
  print "<table width='100%'>";
  foreach($atoz["items"] as $item)
  {
    $firstLetter = strtoupper(substr($item["name"],0,1));
    if ($firstLetter !== $currentLetter)
    {
      if ($currentLetter !== "")
      {
        print "</tr>";
      }
      print "<tr><td colspan='".$columns."'><h4>".$firstLetter."</h4></td></tr>";
      $currentLetter = $firstLetter;
      $currentColumn = 0;
      print "<tr>";
    }
    if ($currentColumn==$columns)
    {
      print "</tr><tr>";
      $currentColumn = 0;
    }
    print "<td width='".$columnWidth."%'>";
      print "<a href='".$item["href"]."'>";
      if (isset($item["logo"]))
      {
        print "<img src='".$item["logo"]."' border='0' />";
      }
      else
      {
        print $item["name"];
      }
      print "</a>";
    print "</td>";
    $currentColumn++;
  }
  print "</tr>";
  print "</table>";
?>
</div>

If you only wanted this style of layout for the Merchant A-Z then simply save it as something different, e.g. html/atozmerchant.php and in merchants.php look for the following code at line 44:

  require("html/atoz.php");

...and REPLACE with:

  require("html/atozmerchant.php");

Cheers,
David.
--
PriceTapestry.com

Submitted by Convergence on Sat, 2012-06-02 18:38

Hi David,

Thanks for the suggestion. We'll have to try and come up with something else as this didn't meet our needs.

We actually wanted to drop the Letter A,B,C,D, etc. and just have the logos in order without any spaces. Left to right, then start a new row on #5, #9, #13, etc. (without the >, of course.

MerchantA1>MerchantA2>MerchantA3>MerchantB1>return
MerchantC1>MerchantC2>MerchantD1>MerchantD2>return
MerchantD3>MerchantP1>MerchantT1>MarchentW1>return
MerchantZ1

Thanks again for the suggestion and for giving it a go!

Submitted by Convergence on Sat, 2012-06-02 20:43

Hi David,

However, your code DOES work perfectly for the 'Brand' page. Thank you!

Submitted by Convergence on Sat, 2012-06-02 21:37

Hi David,

One small issue with the above (using it for 'Brand'.

It creates an extra column, in this case a 5th column and that 5th column begins with an empty space.

{link saved}

Tried playing around with your code but, to no avail :(

Also, I added
    print "</p>";
beneath
    print "</a>";
at the bottom to give it some more breathing room. A little too tight - lol.

Submitted by support on Wed, 2012-06-06 10:00

Hi,

There was a logic error in the above code; this line:

    if ($currentColumn==($columns+1))

...should actually be just:

    if ($currentColumn==$columns)

...and the $currentColumn++ increment at the end of each <td> - both corrected above.

For a continuous output without letter separation; base your new version on something like this (includes above correction!)....

<div class='atoz'>
<?php
  $columns = 4;
  $columnWidth = intval(100/$columns);
  $currentLetter = "";
  $currentColumn = 0;
  print "<table width='100%'>";
  print "<tr>";
  foreach($atoz["items"] as $item)
  {
    if ($currentColumn==($columns))
    {
      print "</tr><tr>";
      $currentColumn = 0;
    }
    print "<td width='".$columnWidth."%'>";
    print "<a href='".$item["href"]."'>";
    if (isset($item["logo"]))
    {
      print "<img src='".$item["logo"]."' border='0' />";
    }
    else
    {
      print $item["name"];
    }
    print "</a>";
    print "</td>";
    $currentColumn++;
  }
  print "</tr>";
  print "</table>";
?>
</div>

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by Convergence on Wed, 2012-06-06 16:26

Hi David,

Wow! Works perfectly for what we are doing. Thank you.

Will shoot you an email when we launch this beauty so you can see your handiwork.

Thanks, again!