zen-cart网站,模版,采集,二次开发

首页 » ZenCart » ZenCart教程 » 阅读文章

[更新]ZenCart首页随机产品横向滚动效果

2012-07-13 12:32 206629 44 发表评论
标签:


昨天有位想要这种效果,今天做出来分享给大家。

效果图

安装方法

1.将文件夹YOUR_TEMPLATE改为你模板的名称

2.将includes\templates\YOUR_TEMPLATE\templates\tpl_random_default.php中文件末尾

<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE/jscript/random.js"></script>

中YOUR_TEMPLATE改为你模板的名称

3.上传文件即可

使用方法

在需要调用的地方增加

<?php
  require($template->get_template_dir('/tpl_random_default.php',DIR_WS_TEMPLATE, $current_page_base,'templates').'/tpl_random_default.php'); ?>

小技巧

1.修改随机产品个数

修改includes\templates\YOUR_TEMPLATE\templates\tpl_random_default.php

 $num=10;//随机产品数量

2.删除产品名称或价格,在includes\templates\YOUR_TEMPLATE\templates\tpl_random_default.php将注释名称和价格的下的代码注释

3.更改自动移动速度,在includes\templates\YOUR_TEMPLATE\jscript\random.js

 AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间

下载

– – – – – – – – – – – – – – – – – – – – – – – – – -2012-7-13更新 – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

有朋友说js效果不滚动等原因,但是我自己在默认模板 IE Firefox google chrome测试时都是正常的,今天看到一款jq的图片滚动效果不错,索性就将换来的js换掉,直接套到这个插件里

演示

DEMO:http://demo.ezencart.com/zen139/

安装方法

1.将文件夹YOUR_TEMPLATE改为你模板的名称

2.将includes\templates\YOUR_TEMPLATE\common\html_header.php中

<?php if (isset($canonicalLink) && $canonicalLink != '') { ?>
<link rel="canonical" href="<?php echo $canonicalLink; ?>" />
<?php } ?>

下面引入google的jq库

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

如果模板中已经引入jq库,则可以省略

3.上传文件即可

效果控制

在includes\templates\YOUR_TEMPLATE\jscript\jscript_random.js末尾

$(document).ready(function(){
        $("#slideUl").slide({
			li_size:1, //每次滚动li个数,默认一屏
			speed:1000, //速度:数值越大,速度越慢(毫秒)默认500
			timer:4000, //不需要自动滚动删掉该参数
			li_w:143, //每个li的宽度(包括border,margin,padding,都要算进去)
			left:"sildeLeft",
			right:"sildeRight"
		});
});

调用

在在需要调用的地方增加,如在includes\templates\YOUR_TEMPLATE\common\tpl_header.php中增加

<?php
  if ($this_is_home_page) {
   require($template->get_template_dir('/tpl_random_default.php',DIR_WS_TEMPLATE, $current_page_base,'templates').'/tpl_random_default.php');
}
 ?>
相关日志:

评论 共44条 (RSS 2.0) 发表评论

  1. 过冬了 说道:

    非常感谢!

  2. 过冬了 说道:

    来句经典:哦了 :smile:

  3. chankit 说道:

    :cry: 大哥你的附件下载不了啊
    能不能发给我啊 thanks very much!
    邮箱chen@apptailor.com

  4. chankit 说道:

    急用 :cry:

  5. em 说道:

    lz可以发我一份么,那边下不了

  6. polly 说道:

    请问为什么我安装了都没效果啊?“在需要调用的地方增加” 是什么地方啊?求助。。。

    • E-zencart 说道:

      检查js是否有冲突,在需要调用的地方增加,就是任何你想显示的地方,如:放到模板tpl_header.php里

  7. polly 说道:

    不好意思,我比较菜,再请教一下,怎么检查js是否有冲突?能不能说一下路径?谢谢。。

  8. kale888 说道:

    老大,我安装显示了 但是为什么会有个横向滑块在 下面啊 怎么去除这个滑块?

    • E-zencart 说道:

      这个要自己调整css的

      • polly 说道:

        你好,首先谢谢你,我想请问您一下,就是我在tpl_header.php里面调用了,可是显示在版权信息下面,我想让他显示在中间栏的底端,该在那个文件里调用?

  9. polly 说道:

    不错不错!!!!

  10. alex 说道:

    您辛苦了, 不错的插件,请问怎么设置滚动图片的大小呢? 我想把图片固定,这样就不会不整齐了, 这个定义图片的:$content.=’fields['products_id']), ‘cPath=’ .GetFullcPath($random->fields['categories_id']). ‘&products_id=’ . $random->fields['products_id']) . ‘”>’.zen_get_products_image($random->fields['products_id']).’‘;怎么修改呢?

    • alex 说道:

      嘿嘿,自己改了下解决了,在css里 .rollBox .Cont .box{width:150px;加个 height:150px;就整齐了!

  11. kk 说道:

    :?: 老大,为什么我成功添加了,但是它在每个页面都有显示啊,请问还要怎么操作才只显示在首页呢?

    • E-zencart 说道:

      调用的地方加上只首页显示的判断

      <?php
        if ($this_is_home_page) {
         require($template->get_template_dir('/tpl_random_default.php',DIR_WS_TEMPLATE, $current_page_base,'templates').'/tpl_random_default.php');
      }
       ?>
  12. slowly 说道:

    额。楼主,这个插件我之前有安装过,安装成功后,在firefox浏览器上是没有问题的,可以用ie浏览器打开的时候,刚开始是可以的,大概2分钟后,他图片滚动就不循环了,图片也显示不出来了,js不兼容啊!怎么解决

    • ezencart 说道:

      这个我没具体看过,你可以去懒人图库之类的找个类似效果的js套进去即可。

  13. polly 说道:

    你好,我安装了,在tpl_main_page.php中调用,但是结果每个页面都有…而且 首页和分类页的功能正常,但产品详细页就不能自动滚动了。其他页面都可以。我不知道是不是模板的原因,我想问版主有没有解决的办法?谢谢

  14. xzhang 说道:

    我想问下产品可以只调用产品内页同类产品吗? 怎么弄成这样的效果了 不是随机的 是调用同类产品的 急——-

    • E-zencart 说道:

      tpl_random_default.php第30行sql替换为

      if($_GET['products_id']){
      	$cPath= zen_get_product_path((int)$_GET['products_id']);
      	$small_id=explode("_",$cPath);
      	$small_id2=end($small_id);
      	$ctrl=' AND a.master_categories_id='.$small_id2.' ';
      }else{
      	$ctrl='';
      }
      $sql="select * from ".TABLE_PRODUCTS ." a
       LEFT JOIN ".TABLE_PRODUCTS_DESCRIPTION ." b ON (a.products_id=b.products_id)
       LEFT JOIN ".TABLE_PRODUCTS_TO_CATEGORIES ." c ON (a.products_id=c.products_id)
       WHERE a. products_status = 1
      ".$ctrl."
       AND a.products_quantity > 0
       AND a.products_type = 1
       ORDER BY RAND() limit ".$num;
      
  15. wangh 说道:

    你好,能否说明支持的版本?还有如何修改实现每3个为一列的输出,以便于其他用途。

    • E-zencart 说道:

      都有详细注释的,1.5和1.39都能用

       li_size:1, //每次滚动li个数
  16. luni 说道:

    我在1.5上安装了。。只有图片。没有产品名称

  17. 大熊 说道:

    貌似有缺陷哦,此插件只适合普通商品,文档类商品无效哦 :cry:

  18. leesx 说道:

    请问下,为什么我下载下来,文件里没有YOUR_TEMPLATE这个啊???

    • E-zencart 说道:

      当时忘了改了,默认模板classic就是YOUR_TEMPLATE,修改为你自己的模板名

  19. cyj211314 说道:

    我把这个模块放在了产品详情页下边,现在在刷新页面的时候有的时候随机出现的产品会出现这样的链接http://www.abc.com/-p-.html 图片也是空的 源代码如下 不知道是哪的问题啊

  20. ok09 说道:

    如果要在中间栏增加新进商品的滚动和推荐商品滚动,请问sql怎么替换~谢谢!

  21. ok09 说道:

    装好后显示不出图片,只有左右的箭头。请问什么问题呢? :shock:

  22. a1217723 说道:

    可以滚动分类名称吗?

  23. targetmarts 说道:

    :?: zen cart1.5.4 UC浏览器检查:
    jscript_random.js:213 Uncaught TypeError: $(…).slide is not a function
    jscript_random.js 213行 $(“#slideUl”).slide
    请问如何解决

发表评论

  • 
  • 插入代码

联系我 Contact Me

回到页首