1

please visit link1 , you can see there is option to find shipping is available or not for particular zip code : image1

enter image description here

what i want is , once we enter " 110001" in textfield, click on "check" button, it should show as below image 2 :

enter image description here

means 1)"Available with 14 sellers" text + 2)"entered zip code" + 3)"change" button.

Now i got solution for 1) & @2) , i need to to display "change" button.

once we click on "change" button, again it should show as in image 1.

we are using custom module for displaying shipping charges in Product View page. you can download using Magento Display shipping estimation block

Form.phtml

app/design/frontend/default/default/template/webdevlopers/productpageshipping/estimate/form.phtml

<?php if ($this->isFieldVisible('postcode')): ?> 
<li class="item"> 

<label for="search"<?php if ($this->isFieldRequired('postcode')):?> class="required" <?php endif;?>><?php if ($this->isFieldRequired('postcode')):?><em>*</em><?php endif;?><?php echo Mage::helper('webdevlopers_productpageshipping')->__('') ?></label> 
<div class="search"> 

<input placeholder="Enter your PIN Code" class="input-text validate-postcode<?php if ($this->isFieldRequired('postcode')):?>
required-entry<?php endif;?>" type="text" id="estimate_postcode" name="estimate[postcode]" 
value="<?php echo $this->htmlEscape($this->getFieldValue('postcode')) ?>" onkeydown="if (event.keyCode == 13) { return false;}" /> 
</div> 
</li> 
<?php endif; ?> 

Script

<script type="text/javascript"> 
var $ = jQuery.noConflict(); 
( function($) { 
$(document).ready(function(){ 
$('#estimate_postcode').keydown(function(e){ 

var items = $$(['.shipping-estimation-form input', 
'.shipping-estimation-form select', 
'#product_addtocart_form input', 
'#product_addtocart_form select']); 
var estimationUrl = '<?php echo $this->jsQuoteEscape($this->getEstimateUrl());?>'; 
var parameters = Form.serializeElements(items, true); 
console.log("zipcode onkeypress worked"); 
if (!e) e = window.event; 
var keyCode = e.keyCode || e.which; 
if (keyCode == '13'){ 
//disable default enter action 
e.preventDefault(); 
console.log("Enter button was pressed"); 
$('#shipping-estimate-loading-message').show(); 
$('#shipping-estimate-results').hide(); 

new Ajax.Updater('shipping-estimate-results', estimationUrl, { 
parameters: parameters, 
onComplete: function() { 
console.log("ajax updater worked"); 
$('#shipping-estimate-loading-message').hide(); 
$('#shipping-estimate-results').show(); 
$('#unique_id').hide(); 
//$('unique_id').hide(); 
$('estimate_postcode').val()
} 
}); 
}; 
}); 
}); 
} ) ( jQuery ); 

function estimateProductShipping() 
{ 

var estimationUrl = '<?php echo $this->jsQuoteEscape($this->getEstimateUrl());?>'; 
var items = $$(['.shipping-estimation-form input', 
'.shipping-estimation-form select', 
'#product_addtocart_form input', 
'#product_addtocart_form select']); 

var validationResult = true; 

// Check the valid input 
if (!items.map(Validation.validate).all()) { 
return; 
} 

var parameters = Form.serializeElements(items, true); 

$('shipping-estimate-loading-message').show(); 
$('shipping-estimate-results').hide(); 


new Ajax.Updater('shipping-estimate-results', estimationUrl, { 
parameters: parameters, 
onComplete: function() { 
console.log("ajax updater worked"); 
$('shipping-estimate-loading-message').hide(); 
$('shipping-estimate-results').show(); 
// $('#unique_id').hide(); 
$('unique_id').hide(); 
$('estimate_postcode').val()
} 
}); 
} 

//]]> 
</script> 

complete code of the file : https://gist.github.com/anonymous/ebe868508b2c21e9c032

result.phtml

app/design/frontend/default/default/template/webdevlopers/productpageshipping/estimate/result.phtml

<p><?php echo "Available with 14 sellers at";?>
<?php  $addressInfo = $this->getRequest()->getPost('estimate',array()); ?>
<?php if(isset($addressInfo['postcode']) && $addressInfo['postcode']):?>
<?php echo ' '.$this->htmlEscape($addressInfo['postcode']); ?>
<?php endif;?>
</p>

Edit

Once i used below answer , than i got my solution for displaying message.

Now i need to display change button after message.

  • How do you calculate the number of sellers ? – Renon Stewart Mar 28 '16 at 17:48
  • Thats just the text, for us its not required to calculate any sellers count. – user33510 Mar 28 '16 at 20:13
  • So the only thing that you need is to hide/show the different sections? – Renon Stewart Mar 28 '16 at 20:25
  • you are right.... means the some text + entered zip code + change button..... – user33510 Mar 28 '16 at 20:31
0
+50

Add bellow code

result.phtml

<p style="font-size:20px;"><?php echo "Available with 14 sellers at";?>
<?php  $addressInfo = $this->getRequest()->getPost('estimate',array()); ?>
<?php if(isset($addressInfo['postcode']) && $addressInfo['postcode']):?>
    <?php echo ' '.$this->htmlEscape($addressInfo['postcode']); ?>
<?php endif;?>
    <a style="text-decoration: underline" href="javascript:void(0)" onclick="changeEstimate();"><?php echo $this->__('change')?></a>
</p>

Script:

app/design/frontend/default/default/template/webdevlopers/productpageshipping/estimate/form.phtml

<script type="text/javascript"> 
var $ = jQuery.noConflict(); 
( function($) { 
$(document).ready(function(){ 
$('#estimate_postcode').keydown(function(e){ 

var items = $$(['.shipping-estimation-form input', 
'.shipping-estimation-form select', 
'#product_addtocart_form input', 
'#product_addtocart_form select']); 
var estimationUrl = '<?php echo $this->jsQuoteEscape($this->getEstimateUrl());?>'; 
var parameters = Form.serializeElements(items, true); 
console.log("zipcode onkeypress worked"); 
if (!e) e = window.event; 
var keyCode = e.keyCode || e.which; 
if (keyCode == '13'){ 
//disable default enter action 
e.preventDefault(); 
console.log("Enter button was pressed"); 
$('#shipping-estimate-loading-message').show(); 
$('#shipping-estimate-results').hide(); 

new Ajax.Updater('shipping-estimate-results', estimationUrl, { 
parameters: parameters, 
onComplete: function() { 
console.log("ajax updater worked"); 
$('#shipping-estimate-loading-message').hide(); 
$('#shipping-estimate-results').show(); 
$('#unique_id').hide(); 
//$('unique_id').hide(); 
$('estimate_postcode').val()
} 
}); 
}; 
}); 
}); 
} ) ( jQuery ); 

function estimateProductShipping() 
{ 

var estimationUrl = '<?php echo $this->jsQuoteEscape($this->getEstimateUrl());?>'; 
var items = $$(['.shipping-estimation-form input', 
'.shipping-estimation-form select', 
'#product_addtocart_form input', 
'#product_addtocart_form select']); 

var validationResult = true; 

// Check the valid input 
if (!items.map(Validation.validate).all()) { 
return; 
} 

var parameters = Form.serializeElements(items, true); 

$('shipping-estimate-loading-message').show(); 
$('shipping-estimate-results').hide(); 


new Ajax.Updater('shipping-estimate-results', estimationUrl, { 
parameters: parameters, 
onComplete: function() { 
console.log("ajax updater worked"); 
$('shipping-estimate-loading-message').hide(); 
$('shipping-estimate-results').show(); 
// $('#unique_id').hide(); 
$('unique_id').hide(); 
$('estimate_postcode').val()
} 
}); 
}

function changeEstimate(){
    $('unique_id').show();
    $('shipping-estimate-results').hide();
}

/* 

Event.observe('delivery-pincode-change', 'click', function(event){
$('unique_id').show();
$('shipping-estimate-results').hide();               
$('delivery-html').hide();
});

*/


/* 

$(document).ready(function(){ 
$('check1234').on('click', function(){ 
$('#unique_id').hide(); 
$('#shipping-estimate-results').show(); 
}); 
}); 

*/ 
//]]> 
</script>
  • i will check & let you know.... – user33510 Mar 30 '16 at 13:09
1
+50

Give a unique id to block-shipping-estimate div :

...
<div class="block block-shipping-estimate" id="unique_id">
    // first block
</div>

<div id="shipping-estimate-results">
    // result block
</div>
...

After that hide this div in your ajax onComplete :

...
new Ajax.Updater('shipping-estimate-results', estimationUrl, {
    parameters: parameters,
    onComplete: function() {
       console.log("ajax updater worked");
       $('shipping-estimate-loading-message').hide();
       $('shipping-estimate-results').show();
       $('#unique_id').hide();                      // hide 
    }    
});
...

On click change button run below script :

...
$('#shipping-estimate-results').hide();
$('#unique_id').show();
...
  • i am trying your solution, i will let you know soon..... – user33510 Mar 29 '16 at 6:23
  • i followed your solution. i tried this : pastebin.com/zbwRMUCU , but it didt worked for me. – user33510 Mar 29 '16 at 7:55
  • Hello @profile 101, Change <div class="block block-shipping-estimate id=" unique_id"=""> to <div class="block block-shipping-estimate" id="unique_id">. After that please try again. And use jQuery in place of $. – Vinaya Maheshwari Mar 29 '16 at 9:18
  • sorry, i updated code like this, please check : pastebin.com/jeMByQ6B – user33510 Mar 29 '16 at 9:27
  • Either use jQuery in place of $ or define $ like var $ = jQuery.noConflict(); before use. – Vinaya Maheshwari Mar 29 '16 at 9:29

Your Answer

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