0

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

0

In restrictzip.phtml replace it with below code and check:

<script>
document.observe( 'dom:loaded', function() {
    document.getElementsByClassName("btn-cart")[0].setAttribute('disabled','disabled');
    $$( '#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;                   
            document.getElementsByClassName("btn-cart")[0].removeAttribute('disabled');    
                    }
                    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' }); } );
            document.getElementsByClassName("btn-cart")[0].setAttribute('disabled','disabled');
                    }
                }
                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' }); } );
            document.getElementsByClassName("btn-cart")[0].setAttribute('disabled','disabled');
                }

                $$( '#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>

Also, please note that this is just a javascript level check on the client side. For stopping the add to cart on server side you can use observer. Reference: https://huztechbuzz.wordpress.com/2014/04/26/complete-list-of-all-events-in-magento/

| improve this answer | |
  • I will check & get back you. – Salman Dalal Sep 28 at 8:48
  • I have not seen any changes. The add_to_cart button is not get freezed initially when user go on product page. The add_to_cart button is not configured with restrict pincode extension. Check your code again. – Salman Dalal Sep 28 at 9:02
  • Hi @Debajit are u there? – Salman Dalal Sep 28 at 14:33
  • R u there @Debajit Guha – Salman Dalal Sep 28 at 17:18
  • document.getElementsByClassName("btn-cart")[0].setAttribute('disabled','disabled'); will make your add_to_cart button disabled at first. So, in any document ready event of js you can add it to set it disabled initially.After that based on your 'json_response' status in the code you can set to enable or disable conditionally. – Debajit Guha Sep 29 at 9:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.