Hide Text & display message when we click on Button

Question

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

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

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.

Thats just the text, for us its not required to calculate any sellers count. — user33510, Commented Mar 28, 2016 at 20:13
So the only thing that you need is to hide/show the different sections? — MagePal Extensions, Commented Mar 28, 2016 at 20:25
you are right.... means the some text + entered zip code + change button..... — user33510, Commented Mar 28, 2016 at 20:31

Abdul · Accepted Answer · 2016-03-30 13:07:59Z

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
Commented Mar 30, 2016 at 13:09 — user33510, Commented Mar 30, 2016 at 13:09

Vinaya Maheshwari · Accepted Answer · 2016-03-29 04:55:17Z

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();
...

answered Mar 29, 2016 at 4:55

Vinaya Maheshwari

2,1744 gold badges36 silver badges76 bronze badges

i am trying your solution, i will let you know soon.....
– user33510
Commented Mar 29, 2016 at 6:23
i followed your solution. i tried this : pastebin.com/zbwRMUCU , but it didt worked for me.
– user33510
Commented Mar 29, 2016 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
Commented Mar 29, 2016 at 9:18
sorry, i updated code like this, please check : pastebin.com/jeMByQ6B
– user33510
Commented Mar 29, 2016 at 9:27
Either use jQuery in place of $ or define $ like var $ = jQuery.noConflict(); before use.
– Vinaya Maheshwari
Commented Mar 29, 2016 at 9:29

| Show 4 more comments

Stack Exchange Network

Hide Text & display message when we click on Button

2 Answers 2

Your Answer

Hot Network Questions

Hide Text & display message when we click on Button

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions