Upcoming Product Center Box Layout

[Fuzztrip]

157c
fuzztrip.com

Is there a way to change the layout of the upcoming product to match the other center boxes? It also shows no image. I'm assuming I'm missing something. Thanks!

[Fuzztrip]

In admin/configuration I have New, Featured, All and Index Listing. There is not a Upcoming Listing to modify. Is it somewhere else or is Upcoming Listing meant to be text only? Anyone using this, do images show for the Upcoming Listing in the center box? I get text/links only. Thanks!

[swguy]

you can modify

includes/templates/YOUR_TEMPLATE/templates/tpl_modules_upcoming_products.php

and adjust to taste.

[Fuzztrip]

you can modify

includes/templates/YOUR_TEMPLATE/templates/tpl_modules_upcoming_products.php

and adjust to taste.

Okay, so there is not a method similar to the other center boxes. I can stop looking for it lol. Modifying the template to work like the others would be over my head. I'll probably change the heading title from the Featured center box to Upcoming etc and make it work that way. Thanks!

[keneso]

If not present in your custom template copy

includes/modules/upcoming_products.php
to
includes/modules/responsive0clone/upcoming_products.php

and

includes/templates/template_default/templates/tpl_modules_upcoming_products.php
to
includes/templates/responsive0clone/templates/tpl_modules_upcoming_products.php

Open
includes/modules/responsive0clone/upcoming_products.php
change lines 26 and 44

from

$expected_query = "SELECT p.products_id, pd.products_name, products_date_available AS date_expected, p.master_categories_id 

to

$expected_query = "SELECT p.products_id, pd.products_name, products_date_available AS date_expected, p.master_categories_id, p.products_image 

Open
includes/templates/responsive0clone/templates/tpl_modules_upcoming_products.php
change lines 17 to 20

from

<tr>
  <th scope="col" id="upProductsHeading"><?php echo TABLE_HEADING_PRODUCTS; ?></th>
  <th scope="col" id="upDateHeading"><?php echo TABLE_HEADING_DATE_EXPECTED; ?></th>
</tr>

to

<tr>
  <th scope="col" id="upcomingProducts-tableProductHeading"><?php echo TABLE_HEADING_PRODUCTS; ?></th>
  <th scope="col" id="upcomingProducts-tableDateHeading"><?php echo TABLE_HEADING_IMAGE; ?></th>
  <th scope="col" id="upcomingProducts-tableDateHeading"><?php echo TABLE_HEADING_DATE_EXPECTED; ?></th>
</tr>

And add the following after the now line 26 (previous to the above addition line 25)

echo '<td class="" >' . zen_image(DIR_WS_IMAGES . $expectedItems[$i]['products_image'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</td>' . "\n"; 

You should now have this (lines 22-31)

<?php
    for($i=0, $row=0, $n=sizeof($expectedItems); $i<$n; $i++, $row++) {
      $rowClass = (($row / 2) == floor($row / 2)) ? "rowEven" : "rowOdd";
      echo '  <tr class="' . $rowClass . '">' . "\n";
      echo '    <td><a href="' . zen_href_link(zen_get_info_page($expectedItems[$i]['products_id']), 'cPath=' . $productsInCategory[$expectedItems[$i]['products_id']] . '&products_id=' . $expectedItems[$i]['products_id']) . '">' . $expectedItems[$i]['products_name'] . '</a></td>' . "\n";
      echo '    <td>' . zen_image(DIR_WS_IMAGES . $expectedItems[$i]['products_image'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</td>' . "\n";
      echo '    <td class="text-right" >' . zen_date_short($expectedItems[$i]['date_expected']) . '</td>' . "\n";
      echo '  </tr>' . "\n";
    }
?>

Now the image should be displayed.

[Fuzztrip]

Thank you for this! The images do show but they are full size. Also I can't figure out how to match the layout of the other center boxes

[keneso]

You should change the <table><tr><td> tags with <div>, and add styling to have them like the others.
You may need/want to remove the <th> group alltogether, and add a wrapper <div>

Don't know your template, hence can't give better suggestions.

As per the image size you could control it by the styling.

[dbltoe]

Tables should only be used for data. Using them to present upcoming products is probably not going to get by the checkers. And, IF really used for data, they should have the proper information in order to not violate accessibility.
https://www.w3.org/WAI/tutorials/tables/