Magento使用jQuery通過電子郵件檢查客戶是否已經存在

Question

我試圖避免離線用戶在已經注冊為客戶的firecheckout頁面上輸入電子郵件。 為此，我在一個開發控制器中創建了此示例php腳本：

public function mailExists(Varien_Object $customer, $mail, $websiteId)
{
    if($websiteId){
        $customer->setWebsiteId($websiteId);
    }
    $customer->loadByEmail($mail);
    if($customer->getId()){
        return $customer->getId();
    }
    return FALSE;
}

public function formAction()
{
    $customer = Mage::getModel('customer/customer');
    $websiteId = Mage::app()->getWebsite()->getId();
    $email = $_POST['email'];
    if($this->mailExists($customer, $email, $websiteId))
    {
        echo 'mail <u>'.$email.'</u> exists containing customer id '.$this->mailExists($customer, $email, $websiteId);
    }
    else{
        $this->_formPost();
    }
}

public function _formPost()
{
    echo "<form enctype='multipart/form-data' action='".Mage::getUrl('index/form/')."' method='post'>";
    echo "<input type='text' value='shane.test@hotmail.com' id='email' name='email' />";
    echo "<input type='submit' value='verzend' />";
    echo "</form>";
}

效果很好。 但是我擔心的是，當有人在結帳頁面上輸入所有字段並按下“提交”按鈕時，所有輸入的數據都被設置為空。 這會使我的客戶感到沮喪。 因此，我認為當用戶在電子郵件地址輸入字段中輸入電子郵件地址時，使用jQuery腳本會更好地通知離線客戶不要使用已注冊的電子郵件或登錄其帳戶。

我想讓我的jQuery腳本在用戶在電子郵件輸入字段上輸入的文本上運行。 我只想出了這個：

public function testAction()
{
    echo("
            <script src='http://code.jquery.com/jquery-latest.js'></script>
            <script type='text/javascript'>
            $(document).ready(function()
            { 
                $('#email').onChange(function()
                {
                    alert('input');
                });
            });
            </script>
        ");
    $this->_testPost();
}

public function _testPost()
{
    echo "<form name='test' enctype='multipart/form-data' action='".Mage::getUrl('index/form/')."' method='post'>";
    echo "<input type='text' value='' id='email' name='email' />";
    echo "<input type='submit' value='verzend' />";
    echo "</form>";
}

這將在警告框中打印input 。 我將如何在jQuery中實現我的PHP檢查？ 預先感謝，Shane

Answer 1

我將使用jQuery AJAX調用來調用您的控制器函數，而我將其重寫為如下所示：

public function ajaxAction()
{
    $customer = Mage::getModel('customer/customer');
    $websiteId = Mage::app()->getWebsite()->getId();

    if (array_key_exists('email', $_POST)) {
        $email = $_POST['email'];
    } else {
        $this->getResponse()->setBody(false);
        return;
    }
    if ($websiteId) {
        $customer->setWebsiteId($websiteId);
    }
    $customer->loadByEmail($email);
    if ($customer->getId()) {
        $this->getResponse()->setBody(true);
        return;
    }
    $this->getResponse()->setBody(false);
    return;
}

因此，實際上您想將所有JavaScript移出控制器並移至視圖中，然后使用jQuery.ajax方法執行以下操作：

    var mail = 'a@a.com';
jQuery.ajax({
    type: "POST",
    url: "<?php echo Mage::getUrl('your/frontend/ajax') ?>",
    dataType: "json",
    data: {email: mail},
    success: function (exists) {
        if (exists == 0) {
            // js for fail, hide disable button etc etc
        } else if (exists == 1) {
            // js for success bits
        }
    },
    error: function (jqXHR, textStatus, errorThrown) {
                   // error handling
    }
});

使用AJAX的好處在於，您可以在需要時進行檢查，因此您可以偵聽電子郵件是否完整並在他們輸入詳細信息后立即發出請求。

Answer 2

您不需要ajax。 如果用戶在一頁結帳中登錄，則頁面將重新加載，因此模板中的簡單javascript應該可以使用。 您可以直接在頁面加載時進行檢查，僅在需要時添加javascript。
例如：

<?php if({your check for the email}):?>
<script type='text/javascript'>
    $(document).ready(function()
    { 
        $('#email').onChange(function()
        {
            alert('input');
        });
    });
</script>
<?php endif;?>

或者如果您想使用原型而不是jquery：

<?php if({your check for the email}):?>
<script type='text/javascript'>
    $(document).observe('dom:loaded', function(){         
        $('#email').observe('change', function(){            
            alert('input');
        });
    });
</script>
<?php endif;?>