您现在的位置是:首页 > cms教程 > Ecshop商城教程Ecshop商城教程

ecshop的ajax刷新购物车功能实现方法

凡蕾2025-01-20Ecshop商城教程已有人查阅

导读1、比如我们category.dwt 里有。我们现在需要实现点击按钮后页面不刷新去更新上面购物车数量2、首先我们需要调入系统这俩个js文件 是有关ajax实现效果的类问题 我们大可不去管 只需要调入 下来我们打开系统的common.js文件

1、比如我们category.dwt 里有
<a href='flow.php'><SPAN id='cart_count_all'>{insert name='cart_info'}</SPAN></A>
<a onclick="javascript:addToCart_xaphp({$goods.goods_id});" style="cursor: pointer;">添加购物车</a>
我们现在需要实现点击按钮后页面不刷新去更新上面购物车数量
2、首先我们需要调入系统
{insert_scripts files='transport.js,utils.js'}
这俩个js文件 是有关ajax实现效果的类问题 我们大可不去管 只需要调入 下来我们打开系统的common.js文件
进行添加我们自己的添加购物车函数
function addToCart_xaphp(goodsId, parentId) {
var goods = new Object();
var spec_arr = new Array();
var fittings_arr = new Array();
var number = 1;
var formBuy = document.forms['ECS_FORMBUY'];
var quick = 0;
// 检查是否有商品规格
goods.quick = quick;
goods.spec = spec_arr;
goods.goods_id = goodsId;
goods.number = number;
//goods.guige = guige;
goods.parent = (typeof(parentId) == "undefined") ? 0 : parseInt(parentId);
Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJSONString(), addToCartResponse_xaphp, 'POST', 'JSON'); }
解释;
a.点击按钮首先执行这个函数 获取我们的数据 ecshop二次开发整理Ecshop ajax应用讨论
b. Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJSONString(), addToCartResponse_xaphp, 'POST', 'JSON');
这是局部执行 也就是无刷新执行flow.php?step=add_to+cart 同时把数据通过POST提交,有关json具体原理想研究的朋友可以去网上找资料。
c、addToCartResponse_xaphp回调函数很重要.
3、以上系统内部访问flow.php 那么我们当然要去flow.php
打开flow.php 我们找到 if($_REQUEST['step'] == 'add_to_cart' ){
添加购物车的程序}
解释:
a、我们通过POST传递了数据 在.php文件当然需要接收。首先我们要调入json处理数据文件 include_once('includes/cls_json.php'); 这个文件很重要 即 js 和php 直接通过一种方式俩者进行数据交互
b、$result = array('error' => 0, 'message' => '', 'content' => '', 'goods_id' => ''); 这个也是我们常用的 默认定义数组。
c、$json = new JSON;声明json类
d、$goods = $json->decode($_POST['goods']); 数据接收给$goods
4、 比如我们添加购物车成功 我们可以数组里定义 $result['error']=0; 就是把我们用到的数据放入$result数组
形象点 个人理解就是 通过 die($json->encode($result));数据传递给我们刚才的回调函数
下来我看回调函数的写法
function addToCartResponse_xaphp(result)
{
if (result.error > 0)
{
// 如果需要缺货登记,跳转
if (result.error == 2) {
if (confirm(result.message))
{
location.href = 'user.php?act=add_booking&id=' + result.goods_id;
}
}
// 没选规格,弹出属性选择框
else if (result.error == 6)
{ openSpeDiv(result.message, result.goods_id, result.parent);
} else {
alert(result.message);
}
} else {
getCartNumber();
}
}
function getCartNumber(){
Ajax.call('transport.php?act=cart_number', '', getCartNumberResponse, 'GET', 'JSON');
}
解释:回调函数里我们又调用 getCartNumber()函数 在这个函数里我们又一次利用ajax查询购物车数量 transport.php代码
if($_REQUEST['act'] =='cart_number')
{ include_once('includes/cls_json.php');
//$_POST['goods'] = json_str_iconv($_GET['goods_id']);
$sql = 'SELECT SUM(goods_number) AS number, SUM(goods_price * goods_number) AS amount' . ' FROM ' . $GLOBALS['ecs']->table('cart') . " WHERE session_id = '" . SESS_ID . "' AND rec_type = '" . CART_GENERAL_GOODS . "'"; $row = $GLOBALS['db']->GetRow($sql); if ($row) { $number = intval($row['number']); $amount = floatval($row['amount']); } else { $number = 0; $amount = 0; }
$json = new JSON; $result['content'] = $number; die($json->encode($result)); }
然后在传 调函数
function getCartNumberResponse(result)
{
//alert(result.content);
var message = '('+result.content+')';
document.getElementById('cart_count_all').innerHTML = message;
}
好我们接收数据库查询到的数量然后通过innerHTML写入到 cart_count_all层搞定。

本文标签:

很赞哦! ()

相关源码

  • WordPress个人博客主题 - wp-Concise-v1.0免费下载wp-Concise-v1.0是一款专为个人博客设计的简约风格主题,采用全宽排版设计理念,注重内容呈现效果。该模板适用于个人随笔、技术分享、生活记录等博客场景,帮助用户打造专业的内容展示空间。查看源码
  • (自适应)高端集团跨国公司产业联盟机构网站模板免费下载基于PbootCMS内核开发的集团级企业网站模板,采用响应式设计架构,确保在各类移动设备上获得浏览体验。通过模块化布局与简约大气的视觉风格,帮助集团企业高效展示组织架构、发展历程和业务矩阵,建立专业的企业形象窗口。查看源码
  • 帝国cms淘宝客京东联盟网站整站源码下载本模板基于帝国CMS内核深度开发,为淘宝客行业量身定制。随着腾讯微信与淘宝生态的互联互通,淘宝客链接现可在微信、QQ等平台直接分享,为推广带来更多便利。模板特别优化了店铺推广功能,有效避免商品下架导致的链接失效问题,同时支持京东联盟等多平台商品推广。查看源码
  • (自适应)工业机械制造设备网站pbootcms模板下载为机械制造、工业设备类企业设计,特别适合各类机械设备、生产线、工业自动化产品展示。采用响应式技术,确保在不同设备上都能清晰展示机械产品的技术参数和细节特点。查看源码
  • 响应式粉色美容整形化妆品pbootcms网站模板开源源码该网站模板为美容整形、化妆品企业设计,采用响应式布局确保在手机、平板及PC端自动适配显示效果。基于PbootCMS内核开发,支持一键替换图文内容快速转换至其他行业应用。查看源码
  • (自适应响应式)动力刀座五金机械设备pbootcms网站源码下载为动力刀座及五金机械企业定制的响应式网站框架,基于PbootCMS系统深度开发,助力传统制造企业实现数字化转型升级。采用手工编写的DIV+CSS前端架构,代码执行效率提升40%。查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐