Joomla做产品展示是很多人要实现的,看到网友中有使用专门组件的(如productbook,VM),也有用图库组件的,但是如果你只是做一个简单的产品展示,如点击产品分类后,显示一个3行3列的产品列表(用图片来显示),点击相应的产品后进行产品详细页面,这个够简单了吧。

符合中国网民阅读习惯的产品展示效果
符合中国网民阅读习惯的产品展示效果

 

我刚好要做这么一个产品展示,参考网络上大家的看法,决定用joomla内置的组件com_content来做,在做的过程中碰到个小问题,经Autoit的指点,又经过数小时奋战(不懂php,没办法,只好依什么画什么了,呵呵),终于做出在大致效果。记下来,以备日后查看,也为有相同需求的有朋友有个参考,好了,废话少说。

先说功能,很简单,页面左边显示产品分类列表,点击某个分类后,页面右侧显示这个分类的产品列表,列表以三行三列显示(当然你也可以五行五列,或其它的),每个产品用一个产品图片来显示(如下图,图片没有做好,没有写上产品的名字等信息)。当用户点击产品列表中的产品时,右侧显示产品的详细页面,就这么简单。

我的思路是这样的,先为产品建好单元及相应的分类,然后建菜单项,菜单项类型选“blog风格 - 内容分类”,然后选择对应的产品分类(因为我们要实现点击分类名来显示分类中的内容列表)。至于右侧的菜单如何做,有很多种做法,用不同的模块可以实现不同的效果,你也可以用flash来实现,这个不是本文的重点。

看到这里,大家都明白,关键是如何控制产品的列表显示,一个是地方是三行三列,一个是显示一张产品的小图。先说第一个把,这个简单,你可以在刚才建的分类菜单项(菜单类型为“blog风格 - 内容分类”)中设置(可以在新建时就设置好,也可以以后修改),要写下去就是一堆,干脆看下面的图吧。

实现产品展示的后台设置
实现产品展示的后台设置

相信你一看就明白,三行三列,也就是一页显示三栏,共显示九个产品,这样com_content就会自动按三行三列显示(其它显示方式以此类推)。如果你要深究这里为什么要这样设置,建议你去找找joomla的用户手册看看,有中文版的。

第一个问题解决了,现在是第二个问题,每个产品在产品分类列表中只是显示一个小图,默认的“blog风格 - 内容分类”菜单项是显示作者、时间、标题、摘要等其它内容,我们这里只保留摘要,其它全部设置成不显示,可以在全局设置,也可以在这个分类名的菜单项的详细信息中设置,看你的需要了。为什么只保留摘要,答案只有一个,我们将产品的小图片放在摘要中,只放一个产品的小图片,当然你也可以在摘要中写几个文字说明,不过你要注意版面了。

好了,现在开始新建几个产品内容来测试,和joomla普通加文章内容一样,你只要注意在文章摘要中只插入一张产品小图,最好不要有其它内容,如果有,那你要控制好前台的显示,看个人的本事了,呵呵。这里我只是说思路。又有人要问,如何插入一张产品小图,你如果不熟joomla,请阅读joomla的用户手册。这里要设置不显示标题,摘要等等。

现在基本完成了,可是在前台发现那个摘要没有链接,也就是说在前台显示产品分类列表后,点击产品小图片没有反应,这是com_content组件的原因,com_content可以设置标题成链接到文章详细内容,或者有个“阅读全文”的链接,但是摘要不显示链接,当然,如果我来做com_content组件,也会这样做,现在只有改com_content的内容了。还好比较简单,当然对网站上一些有其它文章内容要显示,并且和这个有冲突的地方,例如其它的文章中有摘要,而这个摘要不需要链接到文章内容,就不好用这个方法了,毕竟是改了joomla内置组件。

怎么改呢,找到文件components/com_content/content.php,再查找


$row->text = $row->introtext. ( $params->get( 'intro_only' ) ? '' : chr(13) . chr(13) . $row->fulltext);

将这一行替换成

$introlink = sefRelToAbs( 'index.php?option=com_content&task=view&id='. $row->id . $Itemid ); 
$row->text = '<a href="'.$introlink.'">'.$row->introtext. ( $params->get( 'intro_only' ) ? '' : chr(13) . chr(13) .'</a>'. $row->fulltext);

然后保存即可。

说明:以上得到autoit(joomla在中国的先辈啊)的帮助,他说可以用“阅读全文”的链接加到文章摘要中,可本人愚钝,做不出来,后来参考mod_latestnewspicscroller,把那里面的链接拿来用,没想到还真成了。如果你还要做一些产品列表显示方式的修改,那试试css控制,不行的话就改com_content。