• General / Off Topic

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

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>

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

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

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

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

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

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

              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.

                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.

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

                      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);
});
                        8 days later
                        2 years later