Edit products directly from the list in the Opencart 3 – editable table widget

In this free Opencart module, we can edit products directly from the product list in the opencart 3, it is using editable table widget javascript, with this you can easily edit the product name, module, price, quantity, and status.

First, download the Opencart 3 free module by clicking the button below:

Download the “EditFromProductsList” module

From the above download, you will get a zip file named “editfromproductslist.ocmod.zip“.

Now login to your admin section >> go to Extensions >> Installer >> Upload the zip file and you will see the editfromproductslist.ocmod.zip in the install history.

Now, go to admin >> Extensions >> Modifications >> you will see the “Edit directly from Products list” in the list >> Then click the refresh button

Now go to the admin >> Catalog >> Products, now Product name, Model, Price, Quantity, and Status is editable directly from the product list.

Now edit any of the product names, then it will ask to choose the active language. If you want to update a different language then we need to enter the language id in the prompt box.

Once you click Ok or enter the language and click Ok, then, the product name is updated and it will show the alert box like below:

Similarly, you can edit the Model. But for the price you don’t need to enter the $ sign, you just add the number of the price that you want to update. If you enter something other than a number then it will alert is like below:

In the same way, for quantity also you just need to enter the number, if you don’t enter the number it will show an alert like above.

For the status, you need to enter 1 or 0 only. 1 is to enabled and 0 is to disabled. If you don’t enter then it will alert like:

Once you enter the 1 or 0 then it will show a success alert message like below:

In this way, you can easily edit the products’ name, model, price, quantity, and status directly from the product lists.

We are using the editable table Js and the following OCMOD modification:

<?xml version="1.0" encoding="utf-8"?>
<modification>
    <name>Edit directly from Products list</name>
    <version>3.0</version>
    <author>Rupak Nepali</author>
    <link>https://webocreation.com</link>
    <code>webocreation_edit_products_in_admin</code>
    <description>Edit products directly from the list in Opencart 3</description>

    <file path="admin/controller/catalog/product.php">
        <operation>
            <search><![CDATA[public function autocomplete()]]></search>
            <add position="before"><![CDATA[
                public function editableTableUpdate()
                {
                    $updated = "Please edit the right column";
                    $id = explode("___", $_POST['value']['id']);
                    $product_id = $id[1];
                    $columnToUpdate = $id[0];
                    if (in_array($columnToUpdate, array('name', 'model', 'price', 'quantity', 'status'))) {
                        $valueToUpdate = $_POST['value']['value'];
                        $lang = $_POST['value']['lang'];
                        $this->load->model('catalog/product');
                        $updated = $this->model_catalog_product->updateEditableTable($columnToUpdate, $product_id, $valueToUpdate, $lang);
                    }
                    $this->response->addHeader('Content-Type: application/json');
                    $this->response->setOutput(json_encode($updated));
                }
            ]]>
            </add>
        </operation>

        <operation>
            <search><![CDATA[$data['products'] = array();]]></search>
            <add position="before"><![CDATA[
          $data['active_language'] = $this->config->get('config_language_id');    
        ]]>
            </add>
        </operation>
    </file>

    <file path="admin/model/catalog/product.php">
        <operation>
            <search><![CDATA[public function getTotalProductsByLayoutId($layout_id)]]></search>
            <add position="before"><![CDATA[ 
            public function updateEditableTable($columnToUpdate, $product_id, $valueToUpdate, $lang)
            {
                try {
                    if ($columnToUpdate == "name") {
                        $this->db->query("UPDATE " . DB_PREFIX . "product_description SET " . $columnToUpdate . " = '" . $valueToUpdate . "' WHERE product_id = '" . (int) $product_id . "' and language_id = '" . $lang . "'");
                    } else {
                        $this->db->query("UPDATE " . DB_PREFIX . "product SET " . $columnToUpdate . " = '" . $valueToUpdate . "' WHERE product_id = '" . (int) $product_id . "'");
                    }
                    return "Product ID " . $product_id . "'s " . $columnToUpdate . " is updated with value " . $valueToUpdate;

                } catch (ConnectionException $e) {
                    return $e->getMessage();
                } catch (\RuntimeException $e) {
                    return $e->getMessage();
                }
            }
            
            ]]>            </add>
        </operation>
    </file>

    <file path="admin/view/template/catalog/product_list.twig">
        <operation>
            <search><![CDATA[{{ footer }} ]]></search>
            <add position=" "><![CDATA[ 

          <script type="text/javascript" src="view/javascript/jquery/mindmup-editabletable.js"></script>
<script>
            $('#editable').editableTableWidget();
            $('#editable td').on('change', function (evt, newValue) {
              var targetid = evt.target.id;
              if (['', 'name', 'status', 'quantity', 'price'].indexOf(targetid.split('___')[0])) {
              }else{return false;}
              if (targetid.split('___')[0] == 'name') {
                var lang = prompt(
                  'The active language is' +
                    {{active_language}} +
                    '. If you want to update different language then please enter here',
                  {{active_language}}
                );
              }
              if (targetid.split('___')[0] == 'status') {
                var statusenter = 1;
                if (newValue == 0 || newValue == 1) {
                  statusenter = 0;
                }
                if (statusenter) {
                  alert('The value need to be 0 or 1');
                  exit();
                }
              }
              if (targetid.split('___')[0] == 'quantity') {
                if (isNaN(newValue)) {
                  alert('Please enter the numeric value');
                  exit();
                }
              }
              if (targetid.split('___')[0] == 'price') {
                if (isNaN(newValue)) {
                  alert('Please enter the numeric value');
                  exit();
                }
              }
              const postvalue = { id: targetid, value: newValue, lang: {{active_language}} };
              $.post( 'index.php?route=catalog/product/editableTableUpdate&user_token={{ user_token }}',
                { value: postvalue }
              ).done(function (data) {
                alert(data);
              });
            });

            $('#editable td.uneditable').on('change', function (evt, newValue) {
              return false;
            });         
          </script>
            ]]>            </add>
        </operation>

        <operation>
            <search><![CDATA[<td class="text-left">{{ product.status }}]]></search>
            <add position="replace"><![CDATA[<td class="text-left" id="status___{{product.product_id}}">{{ product.status }}]]></add>
        </operation>

        <operation>
            <search><![CDATA[<td class="text-right">{% if product.quantity <= 0 %}]]></search>
            <add position="replace"><![CDATA[<td class="text-right" id="quantity___{{product.product_id}}">{% if product.quantity <= 0 %}]]></add>
        </operation>

        <operation>
            <search><![CDATA[<td class="text-right">{% if product.special %}]]></search>
            <add position="replace"><![CDATA[<td class="text-right" id="price___{{product.product_id}}">{% if product.special %}]]></add>
        </operation>

        <operation>
            <search><![CDATA[<td class="text-left">{{ product.model }}]]></search>
            <add position="replace"><![CDATA[<td class="text-left" id="model___{{product.product_id}}">{{ product.model }}]]></add>
        </operation>

        <operation>
            <search><![CDATA[<td class="text-left">{{ product.name }}]]></search>
            <add position=" "><![CDATA[<td class="text-left" id="name___{{product.product_id}}">{{ product.name }}]]></add>
        </operation>

        <operation>
            <search><![CDATA[<td class="text-center">{% if product.image %}]]></search>
            <add position=" "><![CDATA[<td class="text-center uneditable">{% if product.image %}]]></add>
        </operation>

        <operation>
            <search><![CDATA[<td class="text-center">{% if product.product_id in selected %}]]></search>
            <add position=" "><![CDATA[<td class="text-center uneditable">{% if product.product_id in selected %}]]></add>
        </operation>

        <operation>
            <search><![CDATA[<table class="table table-bordered table-hover">]]></search>
            <add position=" "><![CDATA[<table id="editable" class="table table-bordered table-hover">]]></add>
        </operation>
    </file>
    
</modification>

We hope that this module will help someone who needs to edit the products frequently for the product name, model, price, quantity, and status. Hope you liked these Opencart free modules, let us know if you have any questions or suggestions, please subscribe to our YouTube Channel for Opencart video tutorials and find more free opencart modules here. You can also join us on Twitter and Facebook.