How to login and add product in Opencart using CasperJS

It will be more interesting if we add product automatically in our Opencart store. Nowadays we all want to do our work in very lesser time and efforts. Of course, it is possible. We can add product automatically in our Opencart store using CasperJS. In previous blog , we have learned how to sign up in our Opencart store. In this blog, we will learn how to login in our Opencart store and after that we will add product.

Let’s start our script with login process and after that, we will add the product in our Opencart store.

As discussed in the previous blog, we use the verbose setting for tracing every step made. For login and to add product in Opencart using CasperJS we can use following methods- fill(), then(), click(), getTitle().

For adding a product into the store, firstly we have to log in. Once you will login successfully you can add a product in Opencart store. For login into the Opencart store, we have to enter username and password.

var casper = require('casper').create({ 
  verbose: true, 
  logLevel: 'debug',
  });

var url = 'http://example.com/admin/index.php?route=catalog/product/add';
var urlLogin = 'http://example.com/admin/index.php?route=common/login';

casper.start(url, function() {
 this.echo(this.getTitle());
 this.waitForSelector('form[action="' + urlLogin + '"]');
});

casper.then(function(){
 this.fill('form', { 
  username: 'admin', 
  password: 'admin'
 }, true);
 this.echo('Login Completed');
});

After the successful login, we have to add a product in our Opencart store. For adding the product we have to fill out the form. We can use fill() method for filling the form. fill() method, fills the fields of a form with given values and submits it. click() method performs a click on the element matching the provided selector expression.

casper.then(function(){
  this.fill('form#form-product', {
  'product_description[1][name]' : 'Shirt',
  'product_description[1][meta_title]' : 'Shirt',
  'model' : '1',
  'price' : '200',
  'quantity' : '100',
  'category': '33'

  }, false);
  
});

casper.then(function(){
  this.click(".container-fluid button.btn.btn-primary");
});

casper.run();

Here is the full script for the whole login and add product process.

/**
* Webkul Software.
*
* @category Webkul
* @package Webkul_CasperJS
* @author Shikha Bhardwaj
* @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
var casper = require('casper').create({ 
  verbose: true, 
  logLevel: 'debug',
  });

var url = 'http://example.com/admin/index.php?route=catalog/product/add';
var urlLogin = 'http://example.com/admin/index.php?route=common/login';

casper.start(url, function() {
 this.echo(this.getTitle());
 this.waitForSelector('form[action="' + urlLogin + '"]');
});

casper.then(function(){
 this.fill('form', { 
  username: 'admin', 
  password: 'admin'
 }, true);
 this.echo('Login completed');
});
casper.then(function(){
  this.fill('form#form-product', {
  'product_description[1][name]' : 'Shirt',
  'product_description[1][meta_title]' : 'shirt',
  'model' : '1',
  'price' : '200',
  'quantity' : '100',
  'category': '33'

  }, false);
  
});

casper.then(function(){
  this.click(".container-fluid button.btn.btn-primary");
});

casper.run();

After preparing the script, you have to execute the command in terminal. Here is the command.

$ casperjs ProductAdd.js

Here, ProductAdd.js is the js file in which we have written script for login and add a product in Opencart store process.

Thank You Very Much, My Beloved Readers 🙂