#StackBounty: #magento-1.9 #product #exception #zipcode I want to set exceptions on add_to_cart button

Bounty: 50

I am building E-Commerce website in Magento 1.9. I want to add below functionalities on my add_to_cart button on product page:

  1. Want to keep add_to_cart button disabled always.
  2. I want every user check the zipcode first & if their zipcode is valid then only unfreeze the add_to_cart button, if the zipcode is invalid then keep the add_to_cart button disabled.
  3. Always refresh the product page whenever user checks zipcode & keep add_to_cart button disabled if zipcode is invalid & unfreeze if it is valid.

These exceptions are useful for me because I am running my E-Commerce store in limited area. I have attached the view.phtml, restriczip.phml & product page screenshot. If any more things needed please ask me. Any help will be appreciated.

view.phtml

<?php $_helper = $this->helper('catalog/output'); ?>
<?php $_product = $this->getProduct(); ?>
<script type="text/javascript">
    var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->toHtml() ?></div>
<div class="product-view">
    <div class="product-essential">
        <form action="<?php echo $this->getSubmitUrlCustom($_product, array('_secure' => $this->_isSecure()), false) ?>"
              method="post"
              id="product_addtocart_form"
              <?php if ($_product->getOptions()): ?> enctype="multipart/form-data" <?php endif; ?>>
            <?php echo $this->getBlockHtml('formkey') ?>
            <div class="no-display">
                <input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
                <input type="hidden" name="related_product" id="related-products-field" value="" />
            </div>

            <div class="product-img-box">
                <div class="product-name">
                    <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
                </div>
                <?php echo $this->getChildHtml('media') ?>
            </div>

            <div class="product-shop">
                <div class="product-name">
                    <span class="h1"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></span>
                </div>

                <div class="price-info">
                    <?php echo $this->getPriceHtml($_product); ?>
                    <?php echo $this->getChildHtml('bundle_prices') ?>
                    <?php echo $this->getTierPriceHtml() ?>
                </div>

                <div class="extra-info">
                    <?php echo $this->getReviewsSummaryHtml($_product, 'default', false)?>
                    <?php echo $this->getChildHtml('product_type_availability'); ?>
                </div>

                <?php echo $this->getChildHtml('alert_urls') ?>

                <?php if ($_product->getShortDescription()):?>
                    <div class="short-description">
                        <div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
                    </div>
                <?php endif;?>




                <?php echo $this->getChildHtml('other');?>

                <?php if ($_product->isSaleable() && $this->hasOptions()):?>
                    <?php echo $this->getChildChildHtml('container1', '', true, true) ?>
                <?php endif;?>

            </div>

            <div class="add-to-cart-wrapper">
                <?php echo $this->getChildHtml('product_type_data') ?>
                <?php echo $this->getChildHtml('extrahint') ?>

                <?php if (!$this->hasOptions()):?>
                    <div class="add-to-box">
                        <?php if($_product->isSaleable()): ?>
                            <?php echo $this->getChildHtml('addtocart') ?>
                            <?php if( $this->helper('wishlist')->isAllow() || $_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product)): ?>
                                <span class="or"><?php echo $this->__('OR') ?></span>
                            <?php endif; ?>
                        <?php endif; ?>
                        <?php echo $this->getChildHtml('addto') ?>
                        <?php echo $this->getChildHtml('sharing') ?>
                    </div>
                    <?php echo $this->getChildHtml('extra_buttons') ?>
                <?php elseif (!$_product->isSaleable()): ?>
                    <div class="add-to-box">
                        <?php echo $this->getChildHtml('addto') ?>
                        <?php echo $this->getChildHtml('sharing') ?>
                    </div>
                <?php endif; ?>
            </div>

            <?php echo $this->getChildHtml('related_products') ?>

            <div class="clearer"></div>
            <?php if ($_product->isSaleable() && $this->hasOptions()):?>
                <?php echo $this->getChildChildHtml('container2', '', true, true) ?>
            <?php endif;?>
        </form>
        <script type="text/javascript">
        //<![CDATA[
            var productAddToCartForm = new VarienForm('product_addtocart_form');
            productAddToCartForm.submit = function(button, url) {
                if (this.validator.validate()) {
                    var form = this.form;
                    var oldUrl = form.action;

                    if (url) {
                       form.action = url;
                    }
                    var e = null;
                    try {
                        this.form.submit();
                    } catch (e) {
                    }
                    this.form.action = oldUrl;
                    if (e) {
                        throw e;
                    }

                    if (button && button != 'undefined') {
                        button.disabled = true;
                    }
                }
            }.bind(productAddToCartForm);

            productAddToCartForm.submitLight = function(button, url){
                if(this.validator) {
                    var nv = Validation.methods;
                    delete Validation.methods['required-entry'];
                    delete Validation.methods['validate-one-required'];
                    delete Validation.methods['validate-one-required-by-name'];
                    // Remove custom datetime validators
                    for (var methodName in Validation.methods) {
                        if (methodName.match(/^validate-datetime-.*/i)) {
                            delete Validation.methods[methodName];
                        }
                    }

                    if (this.validator.validate()) {
                        if (url) {
                            this.form.action = url;
                        }
                        this.form.submit();
                    }
                    Object.extend(Validation.methods, nv);
                }
            }.bind(productAddToCartForm);
        //]]>
        </script>
    </div>

    <div class="product-collateral toggle-content tabs">
        <?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?>
            <dl id="collateral-tabs" class="collateral-tabs">
                <?php foreach ($detailedInfoGroup as $alias => $html):?>
                    <dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt>
                    <dd class="tab-container">
                        <div class="tab-content"><?php echo $html ?></div>
                    </dd>
                <?php endforeach;?>
            </dl>
        <?php endif; ?>
    </div>

    <?php echo $this->getChildHtml('upsell_products') ?>
    <?php echo $this->getChildHtml('product_additional_data') ?>

</div>

restrictzip.phtml

<div id="meetanshi-restrictzip">
    <ul class="messages cod-available">
        <li class="success-msg">
            <ul>
                <li>
                    <span>
                    <?php echo $this->__(Mage::helper('restrictzip')->getSuccessMsg()) ?> 
                    </span>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="messages cod-available">
        <li class="success-msg"   style="display:<?php echo Mage::helper('restrictzip')->isShowDelivery();?>">
            <ul>
                <li><span id="extpected_delivery_time"> </span>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="messages cod-not-available">
        <li class="error-msg">
            <ul>
                <li><span>
                        <?php echo $this->__(Mage::helper('restrictzip')->getErrorMsg()) ?>
                    </span>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="messages cod-validation">
        <li class="error-msg">
            <ul>
                <li><span><?php echo $this->__('Please enter a ZIP code.')?></span></li>
            </ul>
        </li>
    </ul>
    <ul class="messages cod-error">
        <li class="error-msg">
            <ul>
                <li>
                    <span>
                        <?php echo $this->__('There was a problem while checking for COD availability. 
                        Please try again after some time.')?>
                    </span>
                </li>
            </ul>
        </li>
    </ul>
    <h4>
        <?php echo $this->__(Mage::helper('restrictzip')->getTitle())?>
    </h4>
    <label for="meetanshi-zip"><?php echo $this->__('ZIP Code')?></label>
    <input id="meetanshi-zip" type="text" name="zip_code" value="" maxlength="10" class="input-text"/>

    <button class="button check-zip" type="button" class="button"><span><span><?php echo $this->__('Check')?></span></span></button>

    <img src="<?php echo $this->getSkinUrl('meetanshi/loading.gif'); ?>" width="20" height="20"
         alt="" class="loading-spinner"/>
</div>
<script type="text/javascript">
    var meetanshi_restrictzip_ajax_url = '<?php echo $this->getUrl('restrictzip/restrictzip'); ?>';
</script>

<style>
#meetanshi-restrictzip {
    padding: 15px;
    border: 1px solid #CCC;
    margin-bottom: 15px;
}
#meetanshi-restrictzip .input-text {
  height: 38px;
  width: 100px;
}
.button.check-zip {
  height: 38px;
}
#meetanshi-restrictzip .cod-available,
#meetanshi-restrictzip .cod-not-available,
#meetanshi-restrictzip .cod-validation,
#meetanshi-restrictzip .cod-error,
#meetanshi-restrictzip .loading-spinner {
    display: none;
}
</style>


<script>
document.observe( 'dom:loaded', function() {

    $$( '#meetanshi-restrictzip .check-zip' ).invoke( 'observe', 'click', function( e ) {
        var the_zip_code = $( 'meetanshi-zip' ).value;
        if ( the_zip_code == '' ) {
            $$( '#meetanshi-restrictzip .cod-available' ).each( function (e) { e.setStyle({ display: 'none' }); } );
            $$( '#meetanshi-restrictzip .cod-not-available' ).each( function (e) { e.setStyle({ display: 'none' }); } );
            $$( '#meetanshi-restrictzip .cod-validation' ).each( function (e) { e.setStyle({ display: 'block' }); } );
            $$( '#meetanshi-restrictzip .cod-error' ).each( function (e) { e.setStyle({ display: 'none' }); } );

            return;
        }

        $$( '#meetanshi-restrictzip .loading-spinner' ).each( function (e) { e.setStyle({ display: 'inline-block' }); } );
        $$( '#meetanshi-restrictzip .cod-available' ).each( function (e) { e.setStyle({ display: 'none' }); } );
        $$( '#meetanshi-restrictzip .cod-not-available' ).each( function (e) { e.setStyle({ display: 'none' }); } );
        $$( '#meetanshi-restrictzip .cod-validation' ).each( function (e) { e.setStyle({ display: 'none' }); } );
        $$( '#meetanshi-restrictzip .cod-error' ).each( function (e) { e.setStyle({ display: 'none' }); } );

        // Send an AJAX request
        new Ajax.Request( meetanshi_restrictzip_ajax_url, {
            method: 'post',
            parameters: { zip_code: the_zip_code },
            asynchronous: true,
            onSuccess: function( response ) {
                var json_response = response.responseText.evalJSON();
                
                
                if ( json_response.status == 'success' ) {
                    if ( json_response.allowed_zip == true ) {
                        $$( '#meetanshi-restrictzip .cod-available' ).each( function (e) { e.setStyle({ display: 'block' }); } );
                        
                        $$( '#meetanshi-restrictzip .cod-not-available' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                        $$( '#meetanshi-restrictzip .cod-validation' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                        $$( '#meetanshi-restrictzip .cod-error' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                        
                        document.getElementById("extpected_delivery_time").innerHTML = "Estimated Delivery Time : "+json_response.estimate_delivery_time;                       
                    }
                    else {
                        $$( '#meetanshi-restrictzip .cod-available' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                        $$( '#meetanshi-restrictzip .cod-not-available' ).each( function (e) { e.setStyle({ display: 'block' }); } );
                        $$( '#meetanshi-restrictzip .cod-validation' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                        $$( '#meetanshi-restrictzip .cod-error' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                    }
                }
                else {
                    $$( '#meetanshi-restrictzip .cod-available' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                    $$( '#meetanshi-restrictzip .cod-not-available' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                    $$( '#meetanshi-restrictzip .cod-validation' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                    $$( '#meetanshi-restrictzip .cod-error' ).each( function (e) { e.setStyle({ display: 'block' }); } );
                }

                $$( '#meetanshi-restrictzip .loading-spinner' ).each( function (e) { e.setStyle({ display: 'none' }); } );
            },
            onException: function( request, ex ) {
                //alert( ex.toSource() );
            },
            onFailure: function() {
                $$( '#meetanshi-restrictzip .cod-available' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                $$( '#meetanshi-restrictzip .cod-not-available' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                $$( '#meetanshi-restrictzip .cod-validation' ).each( function (e) { e.setStyle({ display: 'none' }); } );
                $$( '#meetanshi-restrictzip .cod-error' ).each( function (e) { e.setStyle({ display: 'block' }); } );

                $$( '#meetanshi-restrictzip .loading-spinner' ).each( function (e) { e.setStyle({ display: 'none' }); } );
            }
        });


        e.stop();
    });

});

</script>

enter image description here


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.