首 页  >>  E商学院  >>  zencart百科  >>  给zencart后台商品列表添加图像预览

给zencart后台商品列表添加图像预览

为了更直观的看到产品的样子,可以为商品分类和商品列表添加对应的商品预览图,这样就方便管理多了。

本修改适用于 Zen Cart 1.3x 和 最新的 1.5x, 涉及的文件和修改处并不太多亦不复杂,

打开 你的管理目录 /includes/modules/category_product_listing.php 文件

下面所有的修改 就在这里进行了,

第一步, 添加一个标题列 查找

  1. <td class="dataTableHeadingContent"><?php echo TABLE_HEADING_CATEGORIES_PRODUCTS; ?></td>  

在其后面 添加一句

  1. <td class="dataTableHeadingContent" align="left">Image</td>  

当然如果想追求完美, 可以将上面的代码片断中的 图像 二字 改成一个自定义常量,

然后语言文件夹下再另行指定对应的语种,

第二步, 给分类列表添加对应的预览图并附一个条件判断,当没有指定分类图标时用以默认显示的图标, 查找

  1. <td class="dataTableContent"><?php echo '<a href="' . zen_href_link(FILENAME_CATEGORIES, zen_get_path($categories->fields['categories_id'])) . '">' . zen_image(DIR_WS_ICONS . 'folder.gif', ICON_FOLDER) . '</a>&nbsp;<b>' . $categories->fields['categories_name'] . '</b>'; ?></td>  

在其后面 添加下面这段代码:

  1. <td class="dataTableContent" align="left">&nbsp;   
  2.  <?php if ($categories->fields['categories_image'] != '') {echo '<br>'. zen_image(DIR_WS_CATALOG_IMAGES . $categories->fields['categories_image'] ,60,60) . '</a>&nbsp' ;} else {echo '<img src="images/noimage.gif">' ;}?>   
  3. </td>  

上面代码中的 图像链接涵数 末的 60,60 为想要显示的图片宽高,
自己找一张或制作一张没有图像时默认的图标 扔到 管理目录下的 images 文件夹中.

第三步 给分类下的商品列表添加对应的商品预览图,

并附一个条件判断, 当无图商品时显示一张默认的图标, 查找

  1. <td class="dataTableContent"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT, 'cPath=' . $cPath . '&pID=' . $products->fields['products_id'] . '&action=new_product_preview&read=only' . '&product_type=' . $products->fields['products_type'] . (isset($_GET['page']) ? '&page=' . $_GET['page'] : '')) . '">' . zen_image(DIR_WS_ICONS . 'preview.gif', ICON_PREVIEW) . '</a>&nbsp;' . $products->fields['products_name']; ?></td>  

在其后 添加下面这段

  1. <td class="dateTableContent" >   
  2. <?php if ($products->fields['products_image'] != '') {echo '<br>'. zen_image(DIR_WS_CATALOG_IMAGES . $products->fields['products_image'] , $order->products[$i]['name'], 80,80) . '</a>&nbsp' ;} else {echo '<img src="images/noimage.gif">' ;}?>   
  3. </td>  

同上 代码中 图像链接涵数末的 80,80 为调整图像宽高.

用以无图商品显示的默认图标可直接使用上面的无图分类默认图标也可以自己另行指定, 看代码最后一句.

至此 简简单单三步 这一功能修改就算收工大吉了,

在此基础之上, 如果有闲心 还可以给各个标题 列表项 加上对应的 样式类,

然后在CSS定义修饰 以达到更美观的显示效果, 这里就不赘述了.

最后附两张 修改后的效果图.


点击次数:669  发布日期:2014-05-22  【打印此页】  【关闭