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

• 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:

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.

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.

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:

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

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;

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;

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