you can add an automatic update only to a specified div (in this case, it would be a checkout status div) using javascript.jquery For the customer’s order status to be updated, without having to update the order page

Design > Themes > Tasty-orange-child Pages > Checkout-Success : <div class="container"> <div class="row py-4"> <div class="col-sm-9 m-auto refreshme"> <?= component('orderPage'); ?> </div> <div class="col-sm-9 m-auto text-center"> <p>This page will be updated when the status of your order changes.</p> </div> </div> </div> if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } Design > Themes > Tasty-orange-child > customize > advanced : $(document).ready(function(){ setInterval(function(){ $(".refreshme").load(window.location.href + " .refreshme" ); }, 3000); }); if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); }

I’m not a programmer, but I’m studying and trying to do that! But if someone already knows, and can collaborate! We will be grateful

Or you could do something that’s even better : add the class or id “refreshme” to the markup in the file success.php : <div class="col-sm-9 m-auto refreshme"> and then add this in the scripts : $(document).ready(function(){ setInterval(function(){ $(".refreshme").load(window.location.href + " .refreshme" ); }, 3000); }); if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } you can also add the “refreshme” class or id to the the main container in the new refresh layout, lots of options really. Try them all. Doing this will allow you to refresh only the status message not the entire page. Check out this gif : Then you can change this line in Orders_model.php : (390) : $data['order_view_url'] = $controller->pageUrl('account/order', [ to $data['order_view_url'] = $controller->pageUrl('checkout/success', [ in order to get the email to point to this page too.

Auto refresh only a particular div (Status checkout) using javascript.jquery

mlattke

matheus Which page which section would you like to update?

matheus

just the order status for example the word “in preparation” which in this case would be the order status

mlattke

matheus would you mind to share an image of the section you want to update every n time

matheus

mlattke

matheus check this post, you can add that piece of code incheckout\success or orderpage\default and will reload the page every n seconds

https://forum.tastyigniter.com/d/1252-auto-refresh-orders-tab-in-admin/9

wakey18

mlattke that refreshes the entire page, the matheus is referring to just the order status part

zharkan

If you want to refresh that page only then you have to create a new layout copying the default one and then you can add in the head section this snippet : <meta http-equiv="refresh" content="30" />
This way it will refresh the page every 30 seconds !
The page on which one you want to change the layout is Checkout/Success.

zharkan

Or you could do something that’s even better : add the class or id “refreshme” to the markup in the file success.php :
<div class="col-sm-9 m-auto refreshme"> and then add this in the scripts :

$(document).ready(function(){
setInterval(function(){
      $(".refreshme").load(window.location.href + " .refreshme" );
}, 3000);
});

you can also add the “refreshme” class or id to the the main container in the new refresh layout, lots of options really. Try them all.
Doing this will allow you to refresh only the status message not the entire page. Check out this gif :

Then you can change this line in Orders_model.php : (390) :
$data['order_view_url'] = $controller->pageUrl('account/order', [
to
$data['order_view_url'] = $controller->pageUrl('checkout/success', [
in order to get the email to point to this page too.

mlattke

zharkan Great job!! 😃

matheus

zharkan
I tried to do it, but I couldn’t. Could you send me the codes of the gif file? Full codes please

allrocknmetal789

zharkan Finally auto refresh a div that actually works, thank you so much!

zharkan

Design > Themes > Tasty-orange-child
Pages > Checkout-Success :

<div class="container">
    <div class="row py-4">
        <div class="col-sm-9 m-auto refreshme">
            <?= component('orderPage'); ?>
        </div>
        <div class="col-sm-9 m-auto text-center">
        	<p>This page will be updated when the status of your order changes.</p>
        </div>
    </div>
</div>

Design > Themes > Tasty-orange-child > customize > advanced :

$(document).ready(function(){
setInterval(function(){
      $(".refreshme").load(window.location.href + " .refreshme" );
}, 3000);
});

matheus

zharkan Friend, thank you! I did it, it helped me a lot!