Posts and Pages Tagged ‘opencart’

Opencart unable to access admin after updating Last updated:13 June 2018

Spent this morning updating a client’s site to Opencart 1.5.6.4. All went well until I tried to log in to admin, when the admin login screen just refreshed, no error message, nothing in error log. After some digging, I identified that although the site was ussing SSL, the form was being submitted to a non-SSL URL. So it failed. The solution was to edit the admin config.php file to set the HTTP_SERVER constant to use https.

define('HTTP_SERVER', 'http://yourdomain.com/admin/');

There are lots of mutterings on various boards about this, but didn’t see this as a solution…Hope it helps.

Opencart – Setting up multiple stores Last updated:6 February 2018

Here’s how to set up multiple stores on Opencart using subdomains. You could use this to set up a separate store to run a different theme – although this is not essential – you can run several stores with the same theme if you want.

The steps will vary depending upon your version of Opencart.

Opencart 1.5.x

Create your subdomain

Let’s assume you’re running your main store on www.yourshop.com, and that your web hosting locates the files for your store in its root directory public_html. For a mobile store, let’s also assume you’re going to sit this on m.yourshop.com.

You need to create your new domain and point it at the same folder that your main store uses. If your hosting uses cPanel then it should look something like this:

Screenshot of additional domain in cPanel

Create your new store

The next step is to create the new store in Opencart. Go to System > Settings and click the ‘Insert’ button. This should bring up screens to create your new store. For the Store URL and SSL URL, enter your new domain, adding https to the SSL URL if you have a certificate installed. Make sure you close your entries with a ‘/’ or it won’t work. Fill out the rest of the details on the General tab, and your screen should look something like this:

Screenshot of Opencart store configuration screen

Now the Store tab. Here you need to enter the store name, and select the theme you want to use (e.g. a mobile theme). Set the default layout to ‘Default’. Your screen should look something like this:

Screenshot of Opencart store configuration screen

You can then save your new store.

Configure your new store

Opencart will create your new store with all the default settings, so you will need to amend all the store settings as required.

Opencart will not load any categories, products, manufacturers or information pages to your new store (unfortunately?). You’ll need to do all these manually, or by running some SQL queries from the backend. To do this manually:

  • Categories – From the Category edit screen, go to Data > Stores to mark the checkbox against your new store.
  • Products – From the Product edit screen, go to Links > Stores to mark the checkbox against your new store.
  • Manufacturers – From the Manufacturer edit screen, mark the checkbox against your new store.
  • Information – From the Information edit screen, go to Data > Stores to mark the checkbox against your new store.

Modules in your new store – using Layouts

If you’re using Opencart 1.5.x, then any Modules that you have configured will not be carried over to your new store. Opencart manages the display of extensions by using the concept of Layouts – which is a little tricky to grasp, I think.

A Layout is the entity which links Modules to pages and stores. When a page is to be displayed on a store, Opencart looks up the layout appropriate to that page on that store, and then finds any modules configured for that layout.

So, if you make no changes to any Layouts after creating your new store, then when a page on your new store is displayed, Opencart will search for the appropriate Layout, and not find one. It will therefore use the Default layout which we assigned when the store was set up. This (probably) has no Modules assigned to it, and so no Modules will be displayed. So, to display a Module on your new store, we need to configure a Layout.

I’ll illustrate this with an example. Let’s assume you have some Modules on your default store homepage, and you want to display the same Modules on your new store. First thing is to navigate to System > Design > Layouts and click ‘Edit’ against the ‘Home’ Layout. You should then see something like this:

Screenshot of Opencart store configuration screen

You’ll see that the existing (default) entry tells Opencart that for the default store the Layout ‘Home’ should be used with the route, or page ‘common/home’ – which is the home page. We need to tell Opencart to use the same Layout for the new store. So, click ‘Add Route’, select the new store and enter ‘common/home’ against the route – like this:

Screenshot of Opencart store configuration screen

Click ‘Save’ and you’re done.

You can probably see from this that it’s possible to display different modules on your new store homepage by creating a new Layout and assigning it to your new store only. Here’s some more details on how to do this.

You’re done

Once this is complete, your new store should display via the subdomain, with the products etc and modules that you have enabled in the steps above. Payment, Shipping and Order Totals will all be the same as your existing store.

Opencart 2.x and 3.x

Create your subdomain

For my example, I’m assuming a store running on www.yourstore.com, with its root directory public_html. For a substore, let’s also assume you’re going to sit this on trade.yourshop.com.

You need to create your new domain and point it at the same folder that your main store uses. If your hosting uses cPanel then it should look something like this:

Screenshot of additional domain in cPanel

Create your new store

The next step is to create the new store in Opencart. Go to System > Settings – which shows Stores – and click the blue ‘+’ button. This should bring up screens to create your new store. For the Store URL and SSL URL, enter your new domain, adding https to the SSL URL if you have a certificate installed. Make sure you close your entries with a ‘/’ or it won’t work. Fill out the rest of the details on the General tab, and your screen should look something like this:

Screenshot of Opencart store configuration screen

Now the Store tab. Here you need to enter the store name, and select the theme you want to use (YooBlue in my example). Set the default layout to ‘Default’. Your screen should look something like this:

Screenshot of Opencart store configuration screen

You can then save your new store.

Configure your new store

Opencart will create your new store with all the default settings, so you will need to amend all the store settings as required.

Opencart will not load any categories, products, manufacturers or information pages to your new store (unfortunately?). You’ll need to do all these manually, or by running some SQL queries from the backend. To do this manually:

  • Categories – From the Category edit screen, go to Data > Stores to mark the checkbox against your new store.
  • Products – From the Product edit screen, go to Links > Stores to mark the checkbox against your new store.
  • Manufacturers – From the Manufacturer edit screen, mark the checkbox against your new store.
  • Information – From the Information edit screen, go to Data > Stores to mark the checkbox against your new store.

Modules in your new store – using Layouts

If you’re using Opencart 2.x or later, when you create a your new store, all the Modules that you have configured will automatically be carried over to your new store (note this is different to 1.5.x).

Opencart manages the display of extensions by using the concept of Layouts. A Layout is the entity which links Modules to pages and stores. When a page is to be displayed on a store, Opencart looks up the Layout appropriate to that page on that store, and then finds any Modules configured for that Layout. You can find Layouts under Design > Layouts. If you edit the Home Layout you should see something like this:

Screenshot of Opencart store configuration screen

You’ll see that the first entry tells Opencart that the ‘Home’ Layout applies to the default store when the route, or page ‘common/home’ is displayed – the home page. When we created our second store Opencart duplicates this for use, so the ‘Home’ layout also applies to our new store when the route ‘common/home’ is used. Result – the Modules assigned to the Layout ‘Home’ are displayed on both the default and trade store.

You can probably see from this that it’s possible to display different modules on your new store homepage by creating a new Layout and assigning it to your new store only. Here’s some more details on how to do this.

You’re done

Once this is complete, your new store should display via the subdomain, with the products etc and modules that you have enabled in the steps above. Payment, Shipping and Order Totals will all be the same as your existing store.

Opencart – implementing a mobile theme Last updated:15 June 2015

There’s a number of approaches to implementing a mobile theme on Opencart. First off, let’s assume that you’re not just catering for mobiles, and that you want to make different pages available to mobiles.

Option 1 – Use a single responsive theme

In theory it’s possible to serve a single theme which will adapt itself to the screen size used via css media queries. Originally, this approach required too many compromises to result in a good experience all round. Media queries mean that you’re just displaying the page differently, but the html served to the page is identical, and hence there’s no way to avoid serving lots of big images to a mobile (or conversely, serving poor quality images to a desktop browser). With improved mobile networks, this is far less of an issue, and this is now my preferred approach. (The BBC, currently, are serving low quality images and then using js to add better quality images dependent on screen size, resulting in a horrible experience on a desktop. Hum.)

Option 2 – Create a separate store that uses a mobile specific theme

Once you take this step (instructions here) then there are again some options as to how this is implemented. For the purposes of this document I’ll assume a main store set up on http://www.mystore.com and a mobile store on http://m.mystore.com. The mobile store has id=1 within Opencart.

Option 2A – Detect the mobile browser using PHP

There are a number of mobile browser detect scripts out there. These attempt to identify a browser as coming from a mobile from the header information passed from the browser when it calls the page. I tried using the Mobile Detect class. This is simple to use. I stored the Mobile_Detect.php file in the root of my store, and included the following code (in red_ in catalog/controller/common/home.php:

class ControllerCommonHome extends Controller {
	public function index() {
	
		include $_SERVER['DOCUMENT_ROOT'].'/Mobile_Detect.php';
		$detect = new Mobile_Detect();
		if ($detect->isMobile() && !$detect->isTablet() && $this->config->get('config_store_id')!=1){
			header('Location: http://m.mystore.com');
		}	
	
		$this->document->setTitle($this->config->get('config_title'));

So, I’m calling the Mobile_Detect() class, and from the results of that, if it’s a mobile, and if it’s not a tablet, and if it’s not already the mobile store (identified by store_id = 1 here, check your own installation), then I’m redirecting to the mobile store homepage.

This works fine, and redirects all calls to the default store homepage only from a mobile (phone) to the mobile store. You could use similar code in catalog/controller/common/header.php to redirect any page to its mobile equivalent. Something like:

class ControllerCommonHeader extends Controller {
	protected function index() {
	
		include $_SERVER['DOCUMENT_ROOT'].'/Mobile_Detect.php';
		$detect = new Mobile_Detect();
		
		if ($detect->isMobile() && !$detect->isTablet() && $this->config->get('config_store_id')!=1){
			if (isset($this->request->server['HTTPS'])) {
				$mobile_redirect = 'http://m.mystore.com';
			} else {
				$mobile_redirect = 'http://m.mystore.com';
			}
			if ($_SERVER['REQUEST_URI']) $mobile_redirect .= html_entity_decode($_SERVER['REQUEST_URI']);
			header('Location: '.$mobile_redirect);
		}		
			
		$this->data['title'] = $this->document->getTitle();

Here I need to additionally construct the URL to redirect to from the entered URL. I’ve tested this across a number of pages, both with and without SEO URLs, and it seems to work fine. I don’t have access to a test server with SSL enabled, however, so be warned…

A potential issue here is that the customer doesn’t really know what’s happened to them, and worse, they can’t get back to the main store, because they’ll always be redirected. The other downside is that the redirect itself relies on accurately detecting the device from the headers. A glance at the code in Mobile_Detect.php reveals a whole list of device identifiers that is going to become outdated at some point, leading to incomplete redirections. While it’s quite neat (at least at the moment), I’m not keen on the inflexibility.

Option 2B – Detect the mobile browser using javascript

It would be possible to detect the screen width of the browser, and redirect to your mobile store if the width is less than a certain value. If you just want to implement this on your home page, then it’s quite simple – just add the following to your default store home.tpl:

<script type="text/javascript">
if (screen.width <= 699) {
window.location('http://m.oc1531.simonbattersby.com');
}
</script>

If you want to redirect every page it get's messy, and it's easier I think to do some of the work in the controller - you could add the following to catalog/controller/common/header.php:

		if (isset($this->request->server['HTTPS'])) {
			$mobile_redirect = 'http://m.mystore.com';
		} else {
			$mobile_redirect = 'http://m.oc1531.simonbattersby.com';
		}
		if ($_SERVER['PHP_SELF']) $mobile_redirect .= $_SERVER['PHP_SELF'];
		if  ($_SERVER['QUERY_STRING']) $mobile_redirect .= '?'.html_entity_decode($_SERVER['QUERY_STRING']);
		$this->data['mobile_redirect'] = $mobile_redirect;

This is using the same logic to build the redirect URL as above. Then, in your default store header.tpl:

<script type="text/javascript">
if (screen.width <= 699) {
window.location='<?php echo $mobile_redirect;?>';
}
</script>

Using javascript has the advantage that you're just relying on the screen's width, and hence are not dependent on any list of browsers being kept up to date. I'm still not keen on the inflexibility however...

Option 2C - Let the customer choose

You could just let the customer choose which version they want to use...they'll always know if they're using a mobile or not (hopefully).

One way of doing this is to use Opencart's Store module, which will list all your stores and let the customer navigate from one to the other from a drop down menu. You could also just add a manual link (by editing header.tpl) to point at your mobile store.

Opencart 1.5 Mobile Theme Last updated:28 May 2015

Following on from playing around with my existing theme to develop an Opencart Mobile Theme for 1.4.9.5, I’ve now done a rather more comprehensive job and created a complete mobile theme for Opencart 1.5. You can view the theme here.

Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme

I’ve attempted to keep as much content as possible, consistent with making the interface a little simpler and adapting controls where sensible for a mobile user. The theme is designed for a screenwidth down to 320px. Here’s a summary of the changes made from the default theme:

Common

  • Mobile doctype used
  • Removed breadcrumbs throughout, in a few cases replaced these with “back to parent” links
  • Removed the compare capability because it doesn’t really work on a small screen
  • Removed search
  • Removed the sitemap
  • Removed 99% of the tables, leaving a few true “tabular data” tables which shouldn’t break the design – on checkout summary, order info, return history and reward history
  • Removed all popup messages
  • Removed the content_left and content_right display entirely, and moved content_top into the header
  • Moved language and currency selection to the footer

Category and product pages

  • Added a check to lists of categories so they’re only displayed if the category contains products – note this assumes that there are no empty parent categories
  • On the category pages, defaulted the display to list, and removed the option to change the display
  • Added a message displayed at the top of the product page if the user clicks add to cart from a category page for a product requiring options to be selected – otherwise I think it’s a slightly confusing user experience
  • On the product page, replaced the tabs with an accordion, which works much better with the smaller screen, and replaced the image popups with a simple image replacement
  • On Featured, Specials, Bestsellers, Latest and Manufacturer pages, defaulted the display to grid, and removed the option to change the display

Checkout

  • For “add to cart” and “add to wish list”, replaced the top of the screen messages with ones create near the clicked button
  • Replaced the header cart with a link showing the quantity of items in a cart
  • Removed the horrible “estimate shipping costs” capability – just because I think the user experience is so poor
  • Reworked the checkout so that any messages are displayed in the body rather than at the top of the page, and rationalised the vast amount of js on that page down to a mere 690 lines
  • Added in the ability to redeem coupons during checkout (in version for OC 1.5.2.1 and later)

Configuration changes needed

  • Set the Additional Product Image size to 228px, same as the Product Large Image size
  • Set wish list and cart images to 50px

Pretty much every file in the theme has been amended in some way. Here are some ways the theme could be used. You might need to create a separate store, or create a new layout.

Can I use this on my site?

Probably. See my policies on using code from this site.

For the moment, I’ve made the theme files available free here. If you do download it, please let me have any feedback. If you use it, then a small donation would be appreciated.

The theme may not be repackaged and/or offered as a download, either free or for sale, without my permission.

Opencart version Download file
1.5.1, 1.5.1.1, 1.5.1.2 Mobile Theme (289kB)
1.5.1.3 Mobile Theme (289kB)
1.5.2, 1.5.2.1 Mobile Theme (297kB)
1.5.3, 1.5.3.1 Mobile Theme (299kB)
1.5.4, 1.5.4.1, 1.5.5, 1.5.5.1, 1.5.6, 1.5.6.1, 1.5.6.2, 1.5.6.3, 1.5.6.4 Mobile Theme (291kB)

The themes all require vQmod. The versions available here have been tested against the corresponding Opencart version (versions for 1.5.1, 1.5.2.1, 1.5.3.1 and 1.5.4 tested against every page).

If you’re interested, here is a list of the undocumented changes between Opencart 1.5.x versions that I identified.

Opencart SSL issues with reverse proxy Last updated:28 February 2014

I got involved sorting out an interesting problem this week. A user (not one of my clients) had implemented SSL on his server, but his Opencart secure pages (Login, My Account etc) were displaying without any css being applied. This manifested in part because the href attribute on the secure page was displayed as http:// not https://.

Now, this value is controlled within Opencart by checking the value of $_SERVER['HTTPS'], set by the server. If this value is set, then Opencart sets the href as https://. If it isn’t it doesn’t.

All well and good, but in this case (123-reg) the server is set up with SSL Reversed Proxy & Load Balanced SSL Proxy, and this results in the server setting $_SERVER['HTTP_X_FORWARDED_SSL'] instead of $_SERVER['HTTPS'] – which is why the problem manifests.

The fix is relatively straightforward in that the checks need to be repointed at the new $_SERVER index. This can be fixed by changing /catalog/controller/common/header.php, catalog/model/tool/image.php for basic stores, more files dependent on the payment gateways. However, it’s simpler I think to make a modification to /system/library/request.php. This is straightforward since Opencart creates its own server variable (accessed through $this->request->server, so this can be changed independently of $_SERVER. Here’s a vQmod example:

<modification>
	<id>Reverse Proxy Handler</id>
	<version>for OC 1.5.6</version>
	<vqmver>2.2.1</vqmver>
	<author>Simon Battersby www.simonbattersby.com</author>
	<file name="/system/library/request.php">
		<operation>
			<search position="replace" ><![CDATA[$this->server = $_SERVER;]]></search>
			<add><![CDATA[
				if(isset($_SERVER['HTTP_X_FORWARDED_SSL']) && !isset($_SERVER['HTTPS'])){
					$https = array('HTTPS'=>$_SERVER['HTTP_X_FORWARDED_SSL']);
				} else {
					$https = array();
				}
				$this->server = array_merge($_SERVER,$https);
			]]></add>
		</operation>
	</file>
</modification>

All this is doing is checking if $_SERVER['HTTP_X_FORWARDED_SSL'] is set instead of $_SERVER['HTTPS'], and if it is set, adding the value ‘HTTPS’ to Opencart’s local server setting. If you use this, let me know if it works throughout, as I don’t have access to a reverse proxy SSL server.