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

ecshop添加购物车飞入效果的实现代码示例

薛敬文2025-01-14Ecshop商城教程已有人查阅

导读为ecshop的添加购物车,加入图片飞入效果。首先:在goods.dwt中查找添加购物车按钮:
为添加购物车按钮加上id:例如:然后:在js中加入:

为ecshop的添加购物车,加入图片飞入效果。
首先:
在goods.dwt中查找添加购物车按钮:
为添加购物车按钮加上id:
例如:
<a id="iproduct_{$goods.goods_id}" href="javascript:{addToCart({$goods.goods_id})">
< img src="images/bnt_cat.gif" /></a>
然后:在js中加入:
<script type="text/javascript">
var Cart = {
id: 'ECS_CARTINFO',
addProduct: function(cpid, num, t) {
//添加商品
var ops = $("[id=iproduct_"+cpid+"]").parents("#goodsInfo").children(".goodsItem").find("[id=product_"+cpid+"]");
if(ops.length>0) {
var nps = ops.clone().css({"position":"absolute", "top": ops.offset().top, "left": ops.offset().left, "z-index": 999999999}).show();
nps.appendTo("body").animate({top:$("#ECS_CARTINFO").offset().top, left: $("#ECS_CARTINFO").offset().left, width: 50, height:50}, {duration: 1000,
callback: function(){}, complete: function(){nps.remove();addToCart({$goods.goods_id});} });
}
var op = $("[id=iproduct_"+cpid+"]").parents("#goodsInfo").children('.imgInfo').find("img:first");
if(op.length>0) {
var np = op.clone().css({"position":"absolute", "top": op.offset().top, "left": op.offset().left, "z-index": 999999999}).show();
np.appendTo("body").animate({top:$("#ECS_CARTINFO").offset().top, left: $("#ECS_CARTINFO").offset().left, width: 50, height:50}, {duration: 1000,
callback:function(){}, complete: function(){np.remove();addToCart({$goods.goods_id});} });
}
}
}
$(function() {
$('[id^=iproduct_{$goods.goods_id}]').click(function() {
var cpid = this.id.replace('iproduct_{$goods.goods_id}','{$goods.goods_id}');
var n=$('#number').val();
if(n!=null||n!=undefined) {
if(n<1) {n=1;}
Cart.addProduct(cpid, n, 0);
}else{
Cart.addProduct(cpid, 1, 0);
}
return false;
});
});
< /script>
修改:
修改购物车函数:
添加购物车成功后:修改购物车显示信息:
回调函数后加入change_cart_info
在js中添加函数:
//ajax添加后更新购物车的显示信息
function change_cart_info(){
$.ajax({
type: "POST",
url: "flow.php",
data: "step=ajax_update_cart",
success:function(res){
$("#ECS_CARTINFO").html(res)
}
})
}
在flow.php中添加处理函数:
if ($_REQUEST['step'] == 'ajax_update_cart'){
// echo "ok";
$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;
}
$str = sprintf($GLOBALS['_LANG']['cart_info'], $number, price_format($amount, false));
exit('<a href="flow.php" title="' . $GLOBALS['_LANG']['view_cart'] . '">' . $str . '</a>');
}

本文标签:

很赞哦! ()

相关源码

  • 蓝色工业机械五金设备pbootcms模板源码下载(PC+WAP)为机械制造与五金设备企业设计的响应式网站模板,基于PbootCMS内核开发。采用蓝色工业风格强化行业属性,宽屏布局突出设备细节展示,支持PC与WAP端自适应查看源码
  • (PC+WAP)绿色产品环保设备垃圾桶厂家公司网站pbootcms模板为垃圾桶生产商、环保设备企业打造的高端响应式门户模板,基于PbootCMS开源内核深度开发。采用HTML5自适应架构,无缝实现PC与手机端数据实时同步与交互优化查看源码
  • (自适应响应式)个人作品技术文章博客网站模板下载基于PbootCMS内核开发的响应式博客模板,为数字营销、技术分享类内容打造。采用前沿设计理念,兼顾内容展示与阅读体验,适配各类终端设备。通过本模板可快速构建专业级行业博客,有效传播专业知识与案例成果。查看源码
  • (PC+手机)帝国cms7.5漫画图片连载网站源码免费下载本模板基于帝国CMS7.5深度开发,为漫画阅读类网站打造。整体设计风格贴合漫画行业特性,界面布局充分考虑漫画作品的展示需求,支持多种漫画阅读模式。模板采用响应式设计,能够自动适配PC端和移动端设备,为读者提供流畅的阅读体验。查看源码
  • (自适应)蓝色五金制品配件管件pbootcms网站源码下载基于PbootCMS内核开发的五金行业专用模板,采用响应式设计架构,确保产品展示在各类移动设备上的呈现。通过模块化布局与工业风视觉设计,帮助五金企业高效展示产品规格、应用场景及技术支持,建立专业可靠的行业形象。查看源码
  • (自适应响应式)英文外贸电子产品手机配件网站pbootcms模板专业级外贸网站模板基于PbootCMS内核开发,为电子产品跨境贸易企业设计。采用响应式布局技术,确保电脑、平板、手机等设备访问时自动适配显示效果。数据实时同步管理,一次编辑全平台生效。查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐