CODEWITHSUNDEEP
phpopencart
geoff
geoff

Reputation: 45

Trying to add a "preview" feature to the Orders page in OpenCart

Disclaimer: First time working with OpenCart, and first time working with an MVC environment.

I'm trying to modify the main Orders screen, so that while I'm looking at the list of orders, I can click a "Preview" button on any of the orders and see the details of that order (shipping address, items ordered, shipping method, order total cost, etc.) appear in a div that floats to the right of the order list. Basically, to save myself the trouble of having to go into each order and then back out to the main screen.

In a previous environment (osCommerce) I was able to achieve this by having the Preview button execute a Javascript function that took the order ID it was given and sent it via POST to a separate PHP script that queried the database based on that order ID and returned the relevant order information in an HTML block, which then replaced the previous contents of the order preview div on the main order list page. Using this feature, I was able to quickly click through the pending orders and see what was ordered, where it was going, etc., without losing my place in the list.

So far (using vQMod for all changes to core files), I have gotten as far as adding a "Preview" button/link next to each order's "View" and "Edit" buttons. That link is essentially "onclick=getorderinfo('XXX')" where getorderinfo is a javascript function I have defined in the section, and XXX is the order ID of the order in that row of the list. I have also modified the layout and created an empty div to the right of the list of orders, and I can click my Preview buttons and get the div to display the order ID that was sent to order_check.php via POST. But beyond that, I am totally lost as far as how to retrieve order details from the database and display them there.

I was hoping that it would just be a matter of calling the right function or class with a given order ID and returning an array of information, but it seems way more involved than that.

There are numerous OpenCart mods that are called things like "Order Preview," but none of them do anything like what I described above.

To anyone with with a lot of experience with OpenCart, does it sound like what I'm describing is even possible?

Upvotes: 0

Views: 428

Answers (1)

DigitCart
DigitCart

Reputation: 3000

You can use ajax to achieve this.

I used jquery's load and bootstrap's modal, you can customize modal's position and its size. Here is the vqmod file:

<?xml version="1.0" encoding="UTF-8"?>
<modification>
    <id>Admin quick view orders</id>
    <version>1.0.0</version>
    <vqmver>2.4.0</vqmver>
    <author>digitcart.ir</author>
    <file name="admin/view/template/sale/order_list.tpl">
        <operation>
            <search position="iafter"><![CDATA[title="<?php echo $button_edit; ?>" class="btn btn-primary"><i class="fa fa-pencil"></i></a>]]></search>
            <add><![CDATA[
                <a href="<?php echo $order['view']; ?>" class="btn btn-info quick-view">quick view</a>
            ]]></add>
        </operation>
        <operation>
            <search position="before"><![CDATA[<?php echo $footer; ?>]]></search>
            <add><![CDATA[
                <script>        
                    $(document).delegate('.quick-view', 'click', function(e) {
                        e.preventDefault();
                        $('#modal-quick-view').remove();
                        var element = this;
                        var url = $(element).attr('href') + ' #content',
                        html  = '<div id="modal-quick-view" class="modal">';
                        html += '  <div class="modal-dialog modal-lg">';
                        html += '    <div class="modal-content">';
                        html += '      <div class="modal-header">';
                        html += '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
                        html += '        <h4 class="modal-title">' + $(element).text() + '</h4>';
                        html += '      </div>';
                        html += '      <div class="modal-body"><?php echo $text_loading; ?></div>';
                        html += '    </div';
                        html += '  </div>';
                        html += '</div>';

                        $('body').append(html);
                        $('#modal-quick-view .modal-body').load(url);
                        $('#modal-quick-view').modal('show');
                        $('.modal-backdrop').remove();
                    });
                </script>
            ]]></add>
        </operation>
    </file>
</modification>

Tested on opencart 2.3.0.2

Upvotes: 1

Related Questions