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

ecshop商品详情页实现商品属性选择弹出层效果

冰旋2024-01-16Ecshop商城教程已有人查阅

导读通过本教程可以实现ECSHOP购买商品选择属 时弹出层来选择:1.在commen.js中找到function addToCartRespons

通过本教程可以实现ECSHOP购买商品选择属 时弹出层来选择:
1.在commen.js中
找到
function addToCartResponse(result)
中的
else if (result.error == 6)
{
<span style="color:#FF0000;"><span style="color:#FF0000;">openSpeDiv(result.message, result.goods_id, result.parent);</span></span>
}
将if中的内容换为
<span style="color:#FF0000;">openSpeDiv(result.message, result.goods_id, result.parent,result.goods_title,result.goods_thumb,result.goods_name);</span>

function openSpeDiv(message, goods_id, parent)
整个函数,替换为
function openSpeDiv(message, goods_id, parent,goods_title,goods_thumb,goods_name) {  var _id = "speDiv";  var m = "mask";  if (docEle(_id)) document.removeChild(docEle(_id));  if (docEle(m)) document.removeChild(docEle(m));  //计算上卷元素值  var scrollPos;   if (typeof window.pageYOffset != 'undefined')   {     scrollPos = window.pageYOffset;   }   else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')   {     scrollPos = document.documentElement.scrollTop;   }   else if (typeof document.body != 'undefined')   {     scrollPos = document.body.scrollTop;   }   var i = 0;  var sel_obj = document.getElementsByTagName('select');  while (sel_obj[i])  {    sel_obj[i].style.visibility = "hidden";    i++;  }   // 新激活图层  var newDiv = document.createElement("div");  newDiv.id = _id;  newDiv.style.position = "absolute";  newDiv.style.zIndex = "10000";  newDiv.style.width = "500px";  newDiv.style.height = "380px";  newDiv.style.top = (parseInt(scrollPos + 200)) + "px";  newDiv.style.left = (parseInt(document.body.offsetWidth) - 400) / 2 + "px"; // 屏幕居中  newDiv.style.background = "#fff";  newDiv.style.border = "5px solid #ffcae3";  var html = '';    //生成层内内容  html = '<div  style="font-size:14;background:#fae3e9;width:480px;height:40px;line-height:40px;padding:0 10px;font-size:14px; "><span style="float:left; font-weight:bold">产品购买</span><a href=\'javascript:cancel_div()\' style="float:right;padding:0 26px 0 0;background:url(themes/xaphp/images/ico_closebig.gif) right center no-repeat;cursor:pointer;" >关闭</a></div><div class="cartpopDiv"><div class="toptitle"><a href="goods.php?id='+goods_id+'" class="pic"><img src='+goods_thumb+' /></a><p>'+goods_title+'</p></div>';    html += '<div class="coninfo">';    html +='<table cellspacing="7" cellpadding="0"><tr><td class="left"><span>品名:</span></td><td>'+goods_name+'</td></tr>'; for (var spec = 0; spec < message.length; spec++)  {        html +='<tr>';    html +='<td class="left" valign="top">'+message[spec]['name']+':</td>';    html +='<td>';    html +='<ul class="choose">';      if (message[spec]['attr_type'] == 1)      {        for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++)        {                       if (val_arr == 0)          {                         html += "<li  id='aa_"+val_arr+"' ><a id="+val_arr+" class='selected'   onclick='changeAtt(this,id,name)' name="+message[spec]['values'][val_arr]['id']+"   href='javascript:;'><input style='display:none'  type='radio' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' /><span>" + message[spec]['values'][val_arr]['label'] +'</span><i></i></a></li>';                }          else          {            html += "<li id='aa_"+val_arr+"' ><a  onclick='changeAtt(this,id,name)' id="+val_arr+"   name="+message[spec]['values'][val_arr]['id']+"   href='javascript:;'><input style='display:none' type='radio' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' /><span>" + message[spec]['values'][val_arr]['label'] + '</span><i></i></a></li>';                     }        }        html += "<input type='hidden' name='spec_list1' id='spe_num'  value='" + val_arr + "' />";        html += "<input type='hidden' name='spec_list'  value='" + val_arr + "' />";      }      else      {        for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++)        {          html += "<li><input  type='checkbox' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' />" + message[spec]['values'][val_arr]['label'] + '</li>';             }        html += "<input type='hidden' name='spec_list' value='" + val_arr + "' />";      }    html +='</ul>';    html +='</td>'    html +='</tr>';  }    html += '</table>';    html +='</div>';    html +="<div class='botmbtn'><a href='javascript:submit_div(" + goods_id + "," + parent + ")'><img type='image'  src='themes/xaphp/images/btn_addcart.png'></a>&nbsp;&nbsp;<a href='javascript:collect("+goods_id+")'><img type='image' src='themes/xaphp/images/btn_favorite.png'></a></div>";    html +='</div></div>';   newDiv.innerHTML = html;   document.body.appendChild(newDiv);  // mask图层  var newMask = document.createElement("div");  newMask.id = m;  newMask.style.position = "absolute";  newMask.style.zIndex = "9999";  newMask.style.width = document.body.scrollWidth + "px";  newMask.style.height = document.body.scrollHeight + "px";  newMask.style.top = "0px";  newMask.style.left = "0px";  newMask.style.background = "#FFF";  newMask.style.filter = "alpha(opacity=30)";  newMask.style.opacity = "0.40";  document.body.appendChild(newMask);}
2.在flow.php中的
if ($_REQUEST['step'] == 'add_to_cart')
$result['error'] = ERR_NEED_SELECT_ATTR;
$result['goods_id'] = $goods->goods_id;
$result['parent'] = $goods->parent;
​​​​​​​$result['message'] = $spe_array;
下面添加
$goods_row = $GLOBALS['db']->getRow("select goods_name,goods_title,goods_thumb from ".$GLOBALS['ecs']->table('goods')." where goods_id='".$goods->goods_id."'");$result['goods_title']= $goods_row['goods_title'];$result['goods_thumb']= $goods_row['goods_thumb'];$result['goods_name'] = $goods_row['goods_name'];
大功告成

本文标签:

很赞哦! ()

相关源码

  • (PC+手机)帝国cms7.5漫画图片连载网站源码免费下载本模板基于帝国CMS7.5深度开发,为漫画阅读类网站打造。整体设计风格贴合漫画行业特性,界面布局充分考虑漫画作品的展示需求,支持多种漫画阅读模式。模板采用响应式设计,能够自动适配PC端和移动端设备,为读者提供流畅的阅读体验。查看源码
  • (自适应)帝国cms7.5模板自媒体文章新闻博客为帝国CMS7.5设计的响应式模板,采用H5技术构建现代化内容展示框架。通过智能断点检测技术实现手机、平板、PC三端适配查看源码
  • (自适应响应式)家电维修清晰服务网站pbootcms模板免费下载本模板基于PbootCMS内核开发,为维修服务类企业打造,特别适合家电维修、设备维护等行业使用。通过简洁直观的界面设计,帮助企业快速搭建专业级服务平台,实现线上业务高效管理。查看源码
  • 响应式粉色美容整形化妆品pbootcms网站模板开源源码该网站模板为美容整形、化妆品企业设计,采用响应式布局确保在手机、平板及PC端自动适配显示效果。基于PbootCMS内核开发,支持一键替换图文内容快速转换至其他行业应用。查看源码
  • (自适应多语言)WordPress开源主题MirageV资讯个人博客源码MirageV资讯类个人博客主题源码/WordPress主题/全开源MirageV 是一款开源的 WordPress 主题,支持自适应、暗黑模式、多语言等功能,查看源码
  • PbootCMS(自适应手机端)智能电话AI机器人网站模板产品概述基于PbootCMS内核开发的智能电话AI机器人网站模板,为语音交互服务场景设计,采用HTML5+CSS3响应式布局技术,实现PC端与移动端数据实时同步展示。模板适用于智能电话查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐