Build products block for Journal Opencart theme and create custom filter – setting and coding tutorial

In this Opencart Journal theme tutorial, we are showing you how to add or manage the products modules like featured, bestseller, specials, related, from the same category, from the same brand, also bought, recently viewed, most viewed, random, custom, and advanced in pages in Journal theme, then we will show coding tutorial to add another Product rules to show the products as you desired, we will take auctions products as an example.

How to manage products in Journal 3 Opencart theme?

You can show products with multiple filters in Journal 3 theme, like for examples featured products, bestseller products, specials products, related product, products from the same brand, products from the same category, products also bought, products recently viewed, products most viewed, random products, custom rules, and filter, and most advanced filters for the products.

To show the products module, log in to the admin >> Journal >> Modules >> Products >> Then, click the blue + button.

Products module in the Journal theme Opencart
  • General Tab
    • Enter the module Name
    • Select the Status to enabled
    • Schedule the timing, if you want to show always then leave it blank
    • Enter the Image Dimensions or leave it blank for auto sizes
  • Product Data
    • Description limit
    • Products Stat 1
    • Products Stat 2
  • View Options
    • View (Either Grid or List)
    • Product Grid Style and Product List Style
  • Display Options
    • You can display products in Blocks or Tabs or Accordion
    • You can select options for Blocks or Tabs or Accordion
  • Items per row
    • Select the items set at variables
    • Enter the Container gutter as per need
  • Carousel Options
    • Enter the setting for carousel mode
  • Module Styles
    • Enter the background settings
    • Padding and Margin settings
  • Tooltip Style
    • Enter the tooltip style

Once, above general settings are entered, click the blue button below General, now you will see the new section:

Opencart Journal theme products setting

Here you can enter the details as per need. The Product Rules is the products filter to show in the frontend module. In the Products Rules you can see the following options:

  • Latest
  • Specials
  • Bestsellers
  • Related
  • From same category
  • From same brand
  • Also bought
  • Recently viewed
  • Most viewed
  • Random
  • Custom
  • Advanced

Others are self explanatory, let’s see the custom and advanced option.

Custom: When you select the Custom option in Product Rules, then you will see Products field where you can add the any products you want and those products will be shown in the frontend.

Advanced: When you select the Advanced option in Product Rules, then you will see other fields where you can select categories, manufacturers, options, attributes, filters and others options to filtered out the products as per your needs.

Advanced Products filter in Journal theme

With the above settings and Product Rules, you can filter out most of the Products that you want to show in the module. If you have a custom database table where you have the products Ids that you want to show then it is not possible with this Product Rules, for that you need to create the custom Product Rules.

Read: Upgrade Opencart from version 2.3 to 3.0.3.1 and Journal theme 2 to 3?

Coding tutorial to add another Product rules in Journal theme admin

Let’s take an example of multi-vendor where you store products as per the customer id, in such case Journal theme Product Rules cannot filter out those products, thus we need some coding to achieve those Product Rules. Let’s say we have a database table “oc_customer_to_product” and have data like below, now if we want to show products as per customer, here the customer_id 3 will show product_id of 2, 5, 9, 17, 21, 46 and the same for other customers.

Opencart database table

To achieve that open file admin/view/javascript/journal3/dist/main.js and find word “alsobought” and you will see codes like below:

b&&e.createElement(m.a,{value:"all"},"All"),e.createElement(m.a,{value:"latest"},"Latest"),e.createElement(m.a,{value:"special"},"Specials"),e.createElement(m.a,{value:"bestseller"},"Bestsellers"),!b&&e.createElement(m.a,{value:"related"},"Related"),!b&&e.createElement(m.a,{value:"related_category"},"From Same Category"),!b&&e.createElement(m.a,{value:"related_manufacturer"},"From Same Brand"),!b&&e.createElement(m.a,{value:"alsobought"},"Also Bought"),!b&&e.createElement(m.a,{value:"recently_viewed"},"Recently Viewed")

Now add following line of code in between commas

e.createElement(c.a, { value: "customer_products" }, "Customer Products"),

Once you add the above code and if your code is formatted, then it may looks like similar in the image below:

Custom Code in Journal Theme

With above lines of code addition, it will show the “Customer Products” option in the Product Rules.

Custom filter in Journal Opencart theme

With this the admin section work is done. Now, let make change for the frontend.

Code to change in the frontend to show custom Product rules in Journal theme

Open system/library/journal3/options/productfilter.php and add following lines of code:

case 'customer_products':
	$result['customer_products'] = true;
	$result['sort'] = 'p.date_added';
	$result['order'] = 'DESC';
	break;
Journal custom code Products

Open catalog/controller/journal3/products.php and add followings lines of code

case 'customer_products':
     $results = $this->model_journal3_product->getCustomerProduct($limit);
     $products = $this->parseProducts($results);
     break;
Journal custom code products

Open catalog/model/journal3/product.php and add following method:

public function getCustomerProduct($limit = 5)
{
	$sql = "
	SELECT
		p.product_id
	FROM `{$this->dbPrefix('product')}` p
	LEFT JOIN `{$this->dbPrefix('product_to_store')}` p2s ON (p.product_id = p2s.product_id)
	LEFT JOIN `{$this->dbPrefix('customer_to_product')}` c2p ON (p.product_id = c2p.product_id)
	WHERE
		p.status = '1'
		AND c2p.customer_id='{$this->dbEscapeInt($this->customer->getId())}'
		AND p.date_available <= NOW()
		AND p2s.store_id = '{$this->dbEscapeInt($this->config->get('config_store_id'))}'";

	if ($this->journal3->settings->get('filterCheckQuantity')) {
		$sql .= ' AND p.quantity > 0';
	}

	$sql .= "
	ORDER BY viewed DESC";

	if ((int) $limit) {
		$sql .= " LIMIT {$this->dbEscapeInt($limit)}";
	}

	$query = $this->db->query($sql);

	return $this->getProduct($query->rows);
}

With these code changes you can now show the custom Journal products block in the frontend.

Show the custom Journal products block in the frontend

Go to admin >> Journal >> Layouts >> Click Account << Click CB in Active positions << Click add module in content bottom << Click Products in the left column of the popup << Then, select “Products as per Customer” << finally click the tick Save button.

With that settings, the products of that customers will show in the account URLs. One example is

Products as per customer Journal theme

In this way, you can create a products block to show in the Journal theme, and customize the code for Journal theme to make different Product Rule in Product modules. Please post your questions or comments or errors so that we can help you. You can follow us at our twitter account @rupaknpl. Subscribe to our YouTube channel for Opencart tutorials, and click to see all Opencart tutorials.

Previous articleHow does the Store credit of Order total works in Opencart
Next articleThe Importance of Payment Gateway Security for E-commerce

2 COMMENTS

  1. how to use opencart journal theme dynamic block. I want to learn it with Example.
    I want to create a new tab like “description” “specification”.

LEAVE A REPLY

Please enter your comment!
Please enter your name here