4elements, web design and consultancy

  1. Building a Product CSV Import Tool in OpenCart - Part 1

    Suppose you have a list of products for your store which prices needs to be updated on site. But you hate manual jobs? You want a solution where you can directly import that list and all of your products & prices are updated in just a few clicks. Yes! this is what we are going to do. By default, OpenCart doesn't provide the facility to import the products from any outer source, in this case we have to develop a module which can be used for import.

    In our previous article, we have exported out some products and their information (product id, model, product name & price) so carrying on our previous work, lets start building an import tool!

    What Are We Going To Do?

    Today we are going to add an import system in OpenCart. As we know that OpenCart is a free e-commerce solution which also let it developers to customize it accordingly. Let’s talk about Shopping Stores. On daily bases things change very often e.g. change in quantity, change in price, change in description, etc. 

    For any business to grow, it is quite essential to update the store and an owner should be aware of its competitors, so things change...! Now question is if one is running a shop online and he wanted to change the prices of products. What will he do? For this purpose we provide a way through which users can alternate things as per their business needs. So if you're running an e-store and you want to make some alternations, this import system will help you out in a best way. So in this first part we will be making a form / interface where an admin user can upload the CSV file. For reference please visit Building a Product CSV Export Tool - OpenCart .

    Step # 1: Adding a Link

    1. Navigate to (store_path)/admin/controller/catalog/product.php

    2. Find the code line: $this->data['products'] = array();

    3. Insert the given code after it: 
       

    (The Above code we parsed the link so we can assign that to a button)

    Step # 2: Adding a Button in a View

    1. Go to (store_path)/admin/view/template/catalog/product_list.tpl
    2. You’ll find some HTML code.
    3. Just find class called “button”
    4. In class you will see further buttons like “insert”, “copy” etc.
    5. Just paste the given code on the top of all buttons 
    6. <a onclick="location = '<?php echo $import_csv; ?>'" class="button">Import CSV</a>
    OpenCart Dashboard

    Step #3: The Controller Function

    As we created a button above now we’ll create a public function in that same controller file i.e., (store_path)/admin/controller/catalog/product.php. Make sure that the function name should match with the name you mention above in link. So we wrote a public function named as importCSV()

    Inside the function, there are few lines of code need to be written

    3.1 Setting Titles & Headings

    3.2 Loading Model

    The following line loads the model for our later use:

    3.3 Action & Cancel URLs

    As we are creating a form now, we're going to parse the "Upload" and "Cancel" links for the user.

    3.4 Breadcrumbs

    3.5 Setting Up Template

    We are going to tell the controller that render the import_csv.tpl for the view.

    Step # 4: CSV Upload Form

    Now we need to create another template which will be displayed after clicking the button

    1. Simply follow the above path (store_path)/admin/view/template/catalog
    2. Create a file name as import_csv.tpl 
    3. Open the template in your favorite IDE and paste the following simple HTML code.
    OpenCart Catalog

    You can make your own template, the above code is a simple version of it.

    Conclusion

    In this Part of Tutorial we followed some steps to create an "Import Tool", in this regard, we modified a template, created a form to provide a better feasibility for the user. In our next part of this article. The purpose of portioning this article in two (2) series is to make you clear about the "Layouts" and the "Business Logic" of this module. So in our next article, CSV will directly co-ordinate with the database and import the data accordingly. Thank you for taking interest, please provide with your suggestion & comments. Till next article, Happy Coding!

     

    0 Comments

    Leave a comment › Posted in: Daily

0 Comments

Got anything to add?

(Basic HTML is fine)