`
xllily
  • 浏览: 119738 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ecshop ajax 局部刷新购物车功能

阅读更多

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层  搞定。

0
2
分享到:
评论

相关推荐

    ECSHOP仿淘宝添加购物车提示框效果

    在电子商务网站中,用户体验是至关重要的,而购物车功能作为用户与商品互动的核心部分,其设计和实现方式直接影响着用户的购买决策。ECSHOP是一款流行的开源电商系统,它的功能强大,灵活性高,深受众多商家喜爱。本...

    ecshop解决购物车ajax修改商品数量

    本文将详细介绍如何在ecshop系统中利用Ajax技术实现在不刷新页面的情况下修改购物车内的商品数量。 #### 二、关键技术点 1. **Ajax技术**:Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页...

    ecshop商品列表页面筛选功能插件 仿淘宝

    - **Ajax**:实现无刷新的数据交换,提高用户体验。 - **PHP**:作为ECSHOP的主要后端语言,处理筛选请求并返回相应数据。 - **MySQL**:存储商品信息和筛选条件,进行高效的数据库查询。 文件名“商品列表页面”...

    ecshop加入购物车效果插件

    标题中的“ecshop加入购物车效果插件”指的是在ECShop电子商务系统中增强购物车功能的一个特定插件。ECShop是一款开源的B2C在线商城系统,由上海商派网络公司开发,它提供了完整的电子商务解决方案,包括商品管理、...

    ecshop中ajax操作原理

    在现代Web开发中,Ajax技术因其能够实现页面局部刷新而被广泛运用。本篇文章将深入解析ecshop平台中的Ajax操作原理,帮助开发者更好地理解其工作流程和技术细节。 #### 二、ecshop中的Ajax操作背景与应用场景 ...

    ecshop更新购物车

    "实测好用,ecshop实时更新购物车"表明ECShop系统在购物车管理方面实现了无刷新(Ajax)更新,即在用户增加、减少商品数量或删除商品时,无需刷新整个页面就能即时显示更新后的购物车状态,提升了用户体验。...

    ECSHOP批量添加商品到购物车

    ECSHOP批量添加商品到购物车的功能,主要是通过后台编程实现的。通常涉及到的主要技术包括前端交互(JavaScript、Ajax)和后端处理(PHP)。用户在前端界面选择多个商品后,通过Ajax异步请求将商品ID列表发送到...

    ECshop页面调用购物车数量多商品显示功能插件

    然而,这个"ECshop页面调用购物车数量多商品显示功能插件"能够提供更加丰富的信息,不仅显示购物车的数量,还能展示购物车中包含的具体商品图片列表。 这一功能对于提升用户体验非常有帮助,因为用户可以一眼看到...

    ecshop 点击加入购物车弹出

    ECSHOP是一款流行的开源电商系统,它提供了丰富的功能来构建在线商店,包括商品浏览、添加到购物车、结算等。在这个场景下,我们主要讨论的是用户在浏览商品时,点击“加入购物车”按钮后,如何实现弹出窗口以确认...

    ecshop迷你购物车

    ECShop是一款专为中小企业设计的开源电子商务平台,其迷你购物车功能是系统核心组件之一,主要负责处理用户的选购商品、存储、结算等操作。在电商网站中,购物车扮演着至关重要的角色,它允许用户在浏览商品时将感...

    ecshop 手机购物车 多选多删除插件

    本插件针对ECSHOP的手机购物车功能进行了增强,实现了“多选多删除”的操作,极大地提升了用户在移动设备上进行购物的体验。 首先,我们要理解“多选多删除”这个概念。在标准的购物车功能中,用户通常只能逐个添加...

    ecshop 下拉购物车加删除功能

    本篇文章将详细探讨如何在ECSHOP中实现下拉购物车以及添加删除功能。 一、下拉购物车的设计与实现 1. 用户体验考虑:下拉购物车是一种常见的交互设计,它允许用户在不离开当前页面的情况下查看购物车内的商品。...

    ecshop购物车加减插件

    在这个场景中,"ecshop购物车加减插件"是一个针对ECShop系统的功能增强插件,旨在优化用户的购物体验。这个插件在购物车页面上添加了"+"和"-"按钮,允许用户直接通过点击这些按钮来增加或减少选定商品的数量,而无需...

    ecshop右边悬浮购物车

    "ecshop右边悬浮购物车"是指在ECShop这个开源电商系统中实现的一种设计模式,它将购物车图标以悬浮的方式固定在页面右侧,无论用户滚动浏览到页面的哪个位置,购物车始终可见,便于用户随时查看购物车内商品信息和...

    ecshop 购物车加减插件

    **ECSHOP购物车加减插件详解** 在电商网站开发中,购物车功能是不可或缺的一部分,它允许用户在不立即购买商品的情况下,将心仪的商品暂存并进行数量的调整。ECSHOP是一款非常流行的开源电子商务系统,其强大的功能...

    ECSHOP 立即购买与加入购物车并存

    ECSHOP 立即购买与加入购物车并存. 自己亲自修改, 思路简单, 非网上那些到处转来转去的文章.

    ECSHOP立即购买插件【商品立即购买和购物车并存插件】

    此插件完美基于ecshop本身自带一步购物功能,给每个商品页面加入“立刻购买”按钮,实现点击立刻购买按钮,直接跳过购物车页面,不用再到购物车“直接结算” 。同时保留加入购物车按钮功能,互不影响使用。 此功能...

    ecshop 购物车页添加购买数量加减按钮

    通过这个插件,用户可以更直观地调整购物车中商品的数量,无需反复刷新页面或手动输入数字,从而提高了购物流程的效率。 该插件的实现主要涉及到以下几个关键知识点: 1. **前端交互设计**:在购物车页面,商品...

Global site tag (gtag.js) - Google Analytics