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:
Want to keep add_to_cart button disabled always.
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.
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>
