可筛选下拉框在Magento商城中的应用

Browsing all articles from 十二月, 2010

十二

紫月蓝骋

Magento, 前端相关 Tags

伪select

在Magento添加可配置产品的时候，某一属性如果选项很多，我们就要盯着下拉框一个一个扫描下去了，这样会崩溃的。我用jQuery写了个可以对属性进行筛选的方法。实现原理就是弄了个假的select选择框覆盖在上面。先看下事例图。
未进行筛选的下拉框
Magento-select
筛选后的下拉框

在app/design/adminhtml/default/default/template/cagalog/product /edit/super/config.phtml加入以下代码.
其中#simple_product_huaxing是select的id，改为你的select的iD即可

<div id="huase">
<div id="selecthuaxin"><input type="text" /></div>
</div>
<script type="text/javascript">// <![CDATA[
 jQuery("#huase").insertBefore("#simple_product_huaxing");
jQuery("#selecthuaxin input").keyup(function(){
      var inputval=jQuery(this).val();
      jQuery("#weiselect li").remove()
jQuery("#simple_product_huaxing option:contains("+inputval+")").each(function(){
            var selecton=jQuery(this).text();
            var opval=jQuery(this).val();
var li=jQuery("
 
	<li />")
li.text(selecton)
jQuery("#weiselect").append(li)
li.addClass(opval)
jQuery("#weiselect li").click(function(){
      var lion=jQuery(this).attr("class")
      var litext= jQuery(this).text()
jQuery("#simple_product_huaxing").val(lion);
 jQuery("#selecthuaxin input").val(litext)
 jQuery("#weiselect li").remove()
})
jQuery("#simple_product_huaxing").change(function(){
var selcted=jQuery("#simple_product_huaxing option:selected").text()
  jQuery("#selecthuaxin input").val(selcted)
})
jQuery("#weiselect li").hover(function(){
jQuery(this).css({background:"#2E4A99",color:"#fff"})
},function(){
jQuery(this).css({background:"#fff",color:"#000"})
} ) 
 
      });
 
})
// ]]></script>

十二

Magento注册验证加强

紫月蓝骋

Magento

Magento注册验证

Magento有自带的一个验证机制，但是用起来，用户体验不太好，Magento是在点击提交按钮以后才开始验证的。良好的用户体验是在客户提交表单前就提出错误的地方，可以去玩下淘宝的注册。

我先讲下Magento自带的验证机制的使用方法，首页看下js/prototype/validation.js，整个网站的验证相关的东西都写这里面，有能力的可以直接在这里面改，改成你想要的模式。Magento是通过class名来触发这个验证。我以注册页面为例，先看下注册页面的Email的html

1	<input type="text" class="input-text validate-email required-entry" id="email_address" name="email">

required-entry说明这个是必填项，validate-email说明这个是邮箱验证。如果你想在其他的地方做这些验证只要加上这两个class就行。
我在Magento的基础上，用jQuery做了点判断，做成类似淘宝的了。 Magento注册
我是通过blur事件来触发的，隐藏和显示div达到这个效果，下面发一些判断的正则。
判断电话号码，手机，座机一起判断的