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

标签：Zen Cart插件，随机产品

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

效果图

安装方法

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); //间隔时间

下载

  首页随机产品横向滚动效果.rar (3.7 KB, 980 次)

– – – – – – – – – – – – – – – – – – – – – – – – – -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');
}
 ?>

  首页随机产品横向滚动效果(jq版).rar (6.9 KB, 658 次)

声明: 本文由Ezencart原创,转载请保留链接:[更新]ZenCart首页随机产品横向滚动效果

本文链接地址: http://www.ezencart.com/pages/675.html

相关日志：

• 2013/08/24 -- ZenCart验证码插件
• 2013/08/11 -- [付费插件开放源代码]ZenCart 支付国家/金额/数量/邮寄方式/IP/Email限制插件 Payment_Limit_Controler V1.0
• 2013/08/06 -- [付费模块开放源代码][8月6号更新]ZenCart订单导出Excel(含图片)Order Excel Export v1.5模块
• 2013/06/30 -- 用户自定义分页产品数目插件Set number of products displayed per page
• 2013/05/26 -- ZenCart属性全部列出展示插件/尺码表
• 2013/02/07 -- ZenCart纯CSS头部下拉菜单pure_css_mega_menu插件
• 2012/10/29 -- ZenCart Minimum Customer Account Information虚拟产品简化用户信息插件
• 2012/10/26 -- ZenCart EZpages增加meta信息插件
• 2012/10/11 -- ZenCart 1.5版Easy Populate CSV批量上传插件安装及bug修正
• 2012/09/10 -- [付费工具][9月10号更新]ZenCart产品页meta信息自动生成工具meta2products_v1.5

1. 过冬了 说道：

   2012/02/26 15:29

   非常感谢！

   回复
2. 过冬了 说道：

   2012/02/26 15:30

   来句经典：哦了

   回复
3. chankit 说道：

   2012/02/29 18:48

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

   回复
4. chankit 说道：

   2012/02/29 18:48

   急用

   回复
   • E-zencart 说道：

     2012/02/29 19:41

     已发送

     回复
5. em 说道：

   2012/03/02 15:07

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

   回复
   • E-zencart 说道：

     2012/03/02 15:41

     增加了Dbank网盘下载

     回复
6. polly 说道：

   2012/04/13 13:26

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

   回复
   • E-zencart 说道：

     2012/04/13 15:10

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

     回复
7. polly 说道：

   2012/04/17 11:49

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

   回复
8. kale888 说道：

   2012/04/26 02:24

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

   回复
   • E-zencart 说道：

     2012/04/26 15:04

     这个要自己调整css的

     回复
     • polly 说道：

       2012/05/11 14:35

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

       回复
       • E-zencart 说道：

         2012/05/11 23:40

         tpl_main_page.php对应位置

         回复
9. polly 说道：

   2012/05/05 17:59

   不错不错！！！！

   回复
10. alex 说道：

    2012/05/09 18:35

    您辛苦了， 不错的插件，请问怎么设置滚动图片的大小呢? 我想把图片固定，这样就不会不整齐了， 这个定义图片的：$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 说道：

      2012/05/09 19:09

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

      回复
11. kk 说道：

    2012/05/29 19:29

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

    回复
    • E-zencart 说道：

      2012/05/29 22:58

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

      <?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 说道：

    2012/06/20 19:01

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

    回复
    • ezencart 说道：

      2012/06/20 21:19

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

      回复
      • hakeem2012 说道：

        2012/07/12 14:46

        1.5英文版本的可以装吗？可以装的话需要额外改动些什么？

        回复
        • E-zencart 说道：

          2012/07/12 15:19

          可以装，不用任何改动

          回复
          • hakeem2012 说道：

            2012/07/12 15:38

            可是安装了 他不是自动滑动的 只有刷新了 才发现他起作用了 不刷新都不动

            回复
            • E-zencart 说道：

              2012/07/13 12:31

              安装方法第二步，模板名没有修改，导致js没有加载

              回复
13. polly 说道：

    2012/07/16 12:37

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

    回复
    • E-zencart 说道：

      2012/07/16 13:33

      你有js和上面的滚动效果冲突了

      回复
14. xzhang 说道：

    2012/07/23 17:29

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

    回复
    • E-zencart 说道：

      2012/07/23 19:49

      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;
      

      回复
      • xzhang 说道：

        2012/07/24 11:16

        谢谢啊 我去试试

        回复
15. wangh 说道：

    2012/08/02 11:40

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

    回复
    • E-zencart 说道：

      2012/08/02 12:03

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

       li_size:1, //每次滚动li个数

      回复
16. luni 说道：

    2013/01/20 00:53

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

    回复
    • E-zencart 说道：

      2013/01/21 23:38

      查看下源代码，看是不是名称被css给hidden掉了

      回复
17. 大熊 说道：

    2013/05/28 15:17

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

    回复
    • E-zencart 说道：

      2013/05/28 16:09

      sql里

       AND a.products_type = 1

      删掉

      回复
      • 大熊 说道：

        2013/05/28 16:24

        正解的方法是：删除

         AND a.products_quantity > 0
         AND a.products_type = 1

        这2个判断，多谢

        回复
18. leesx 说道：

    2013/06/13 11:27

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

    回复
    • E-zencart 说道：

      2013/06/14 15:44

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

      回复
19. cyj211314 说道：

    2013/07/22 09:24

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

    回复
20. ok09 说道：

    2013/11/30 14:59

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

    回复
21. ok09 说道：

    2013/11/30 17:52

    装好后显示不出图片，只有左右的箭头。请问什么问题呢？

    回复
22. a1217723 说道：

    2016/12/26 11:52

    可以滚动分类名称吗？

    回复
23. targetmarts 说道：

    2018/03/18 11:43

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

    回复

姓名 (必填)

电子邮件 (不会被公开) (必填)

站点





提交(Ctrl+Enter) 重置 取消回复 插入代码

有人回复时邮件通知我