Column Layout for New Products Page

[Redcinamn]

lol That wont be happening anytime soon from my end ...is that something someone would do for a fee and I will pass the info to the client?
~Renee

[Ajeh]

You could post in the Commercial Help Wanted and see if someone will quote you on this ...

[BekahRuth]

Hi Red,
I just wanted to let you know what I decided to do since I don't know how to rewrite the code. It takes a little more work, but I created a category called What's New and I am manually linking new products to from other categories to the New category. It's not difficult, I'll just have to remove or add items to the What's new category by hand. (using the copy feature by the item I want to recreate in the what's new category).

[Redcinamn]

Thanks, I'm aware of that route but honestly they add so much on a daily basis this would not be something I would recommend for their volume of business I would spend days going and editing just this one category. I need something that works on its own like the one that is there now, but with the 3 column layout I'm looking for someone in the "contract help" to pay to re write the script :)
~Renee

[pjb923]

Ok guys, I have a quick solution for this.
You can see it in action here:
http://www.coquitodesigns.com/catalo...e=products_new

The solution was fairly simple and didn't involve rewriting very much code at all.
I was able to remove most of the <tr> and <td>'s from the code and replace them with <div>'s. Then define the <div>'s as float:left, and they will flow one after another until the end of the line is reached, then wrap to the next line. Adjust the width of the div depending on how many columns you want. Divide your center column width by the number of columns and set your div to that width.

Here are the changes.

Open up your tpl_modules_products_new_listing.php file.

Go to line 15 and remove the following code

<table border="0" width="100%" cellspacing="2" cellpadding="2">
          <tr>
            <td colspan="3"><hr /></td>
          </tr>

If you want to remove the space under the image, go to line 29 and change it
From:

$display_products_image = '<a href="' . zen_href_link(zen_get_info_page($products_new->fields['products_id']), 'products_id=' . $products_new->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $products_new->fields['products_image'], $products_new->fields['products_name'], IMAGE_PRODUCT_NEW_LISTING_WIDTH, IMAGE_PRODUCT_NEW_LISTING_HEIGHT) . '</a>' . str_repeat('<br clear="all" />', substr(PRODUCT_NEW_LIST_IMAGE, 3, 1));

To:

$display_products_image = '<a href="' . zen_href_link(zen_get_info_page($products_new->fields['products_id']), 'products_id=' . $products_new->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $products_new->fields['products_image'] , $products_new->fields['products_name'], IMAGE_PRODUCT_NEW_LISTING_WIDTH, IMAGE_PRODUCT_NEW_LISTING_HEIGHT) . '</a>' . str_repeat('', substr(PRODUCT_NEW_LIST_IMAGE, 3, 1));

Next, go to around line 115 and change
From:

 <tr>
            <td width="<?php echo IMAGE_PRODUCT_NEW_LISTING_WIDTH + 10; ?>" valign="top" class="main" align="center">

To:

<div class="new_products">

Then delete the following around line 151

</td>
            <td colspan="2" valign="top" class="main">

Finally, go down to around line 187 replace all the way to the end of the file:

Replace:

        </td>
          </tr>
<?php if (PRODUCT_NEW_LIST_DESCRIPTION != 0) { ?>
          <tr>
            <td colspan="3" valign="top" class="main">
              <?php
                echo $display_products_description;
              ?>
            </td>
          </tr>
<?php } ?>

          <tr>
            <td colspan="3"><hr /></td>
          </tr>
<?php
      $products_new->MoveNext();
    }
  } else {
?>
          <tr>
            <td class="main" colspan="2"><?php echo TEXT_NO_NEW_PRODUCTS; ?></td>
          </tr>
<?php
  }
?>
</table>

With:

<?php if (PRODUCT_NEW_LIST_DESCRIPTION != 0) { ?>
          
              <?php
                echo $display_products_description;
              ?>
          
<?php } ?>
           </div>
<?php
      $products_new->MoveNext();
    }
  } else {
?>
<?php echo TEXT_NO_NEW_PRODUCTS; ?>
<?php  } ?>

Now you have to add the class definition to your stylesheet.
The following code is what works for my layout. You will have to adjust the height and width depending on how many columns you want to show, and if you are displaying the product description, buy now button, etc...
You can remove the 2nd declaration if you don't want a border around the images.

.new_products {float: left;
width: 135px;
height: 200px;
text-align: center;
}

.new_products img {
border: 1px solid #000;
}

I think I covered everything. If anyone has any problems, post them here and I'll see what I can do to help.

[Berserker]

Hi there,

Do you know how I could do that box look for the new products center box on the main page?

[Redcinamn]

Hi!! First let me say your a genius!! Thank you thank you thank you!!!!


Can you have a look here and tell me how I would get the pagination links to show below the images instead of to the right of it?

http://www.moppetfrocks.com/shop/ind...e=products_new


Thank you again!!!!

~Renee

[neelam.gahlyan]

Ok guys, I have a quick solution for this.
You can see it in action here:
http://www.coquitodesigns.com/catalo...e=products_new

The solution was fairly simple and didn't involve rewriting very much code at all.
I was able to remove most of the <tr> and <td>'s from the code and replace them with <div>'s. Then define the <div>'s as float:left, and they will flow one after another until the end of the line is reached, then wrap to the next line. Adjust the width of the div depending on how many columns you want. Divide your center column width by the number of columns and set your div to that width.

Here are the changes.

Open up your tpl_modules_products_new_listing.php file.

Go to line 15 and remove the following code

<table border="0" width="100%" cellspacing="2" cellpadding="2">
          <tr>
            <td colspan="3"><hr /></td>
          </tr>

If you want to remove the space under the image, go to line 29 and change it
From:

$display_products_image = '<a href="' . zen_href_link(zen_get_info_page($products_new->fields['products_id']), 'products_id=' . $products_new->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $products_new->fields['products_image'], $products_new->fields['products_name'], IMAGE_PRODUCT_NEW_LISTING_WIDTH, IMAGE_PRODUCT_NEW_LISTING_HEIGHT) . '</a>' . str_repeat('<br clear="all" />', substr(PRODUCT_NEW_LIST_IMAGE, 3, 1));

To:

$display_products_image = '<a href="' . zen_href_link(zen_get_info_page($products_new->fields['products_id']), 'products_id=' . $products_new->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $products_new->fields['products_image'] , $products_new->fields['products_name'], IMAGE_PRODUCT_NEW_LISTING_WIDTH, IMAGE_PRODUCT_NEW_LISTING_HEIGHT) . '</a>' . str_repeat('', substr(PRODUCT_NEW_LIST_IMAGE, 3, 1));

Next, go to around line 115 and change
From:

 <tr>
            <td width="<?php echo IMAGE_PRODUCT_NEW_LISTING_WIDTH + 10; ?>" valign="top" class="main" align="center">

To:

<div class="new_products">

Then delete the following around line 151

</td>
            <td colspan="2" valign="top" class="main">

Finally, go down to around line 187 replace all the way to the end of the file:

Replace:

        </td>
          </tr>
<?php if (PRODUCT_NEW_LIST_DESCRIPTION != 0) { ?>
          <tr>
            <td colspan="3" valign="top" class="main">
              <?php
                echo $display_products_description;
              ?>
            </td>
          </tr>
<?php } ?>

          <tr>
            <td colspan="3"><hr /></td>
          </tr>
<?php
      $products_new->MoveNext();
    }
  } else {
?>
          <tr>
            <td class="main" colspan="2"><?php echo TEXT_NO_NEW_PRODUCTS; ?></td>
          </tr>
<?php
  }
?>
</table>

With:

<?php if (PRODUCT_NEW_LIST_DESCRIPTION != 0) { ?>
          
              <?php
                echo $display_products_description;
              ?>
          
<?php } ?>
           </div>
<?php
      $products_new->MoveNext();
    }
  } else {
?>
<?php echo TEXT_NO_NEW_PRODUCTS; ?>
<?php  } ?>

Now you have to add the class definition to your stylesheet.
The following code is what works for my layout. You will have to adjust the height and width depending on how many columns you want to show, and if you are displaying the product description, buy now button, etc...
You can remove the 2nd declaration if you don't want a border around the images.

.new_products {float: left;
width: 135px;
height: 200px;
text-align: center;
}

.new_products img {
border: 1px solid #000;
}

I think I covered everything. If anyone has any problems, post them here and I'll see what I can do to help.

I saw your.
The lovely one.
I also need a template like yours.

[IMG]file:///D:/DOCUME%7E1/raj/LOCALS%7E1/Temp/moz-screenshot.jpg[/IMG][IMG]file:///D:/DOCUME%7E1/raj/LOCALS%7E1/Temp/moz-screenshot-1.jpg[/IMG]

[neelam.gahlyan]

[quote=neelam.gahlyan;363127]I saw your.
The lovely one.
I also need a template like yours.
The menu bar in the upper and in the lower.
How can i get this

[fiji]

great, thank you very much, it works very well!!