Skip to main contentSkip to footer

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

Rupak Nepali
Share:
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.

installer Opencart

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

Modifications on edit directly from products list

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

Edit products list Opencart 3

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.

Prompt box for selecting the language for product name

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:

Edit product list Opencart

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:

Only numeric value for price

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:

Status change to Opencart

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

Product status update Opencart

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.

Comments

Join the conversation and share your thoughts

Leave a Comment

Your comment will be reviewed before publishing.

Be the first to comment on this post!

Innovation

Let's Make Something Amazing Together

We always provide our best creative ideas at the highest level. Tell us about your project and we will make it work.

InnovateBringing innovative solutions to complex problems
AutomateStreamlining processes through automation
DominateLeading the market with exceptional results
Build Smarter and Launch FasterEfficient development for rapid deployment