opencart | Simon Battersby's blog

Posts and Pages Tagged ‘opencart’

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.

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.

Tags: opencart
Posted in | 88 Comments

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.

Tags: opencart, ssl
Posted in Web Design and Build | 1 Comment

Opencart cart not cleared after Paypal purchase Last updated:23 February 2014

Yesterday we had a customer complaining that when they logged on to Opencart to place an order, their previous order was still showing in their cart.

On investigation, this occurs where a customer makes a Paypal payment, but then does not return to Opencart after completing the Paypal transaction. In fact most of our customers seem to do this – why bother returning, I suppose. However, it’s the checkout/success page which clears the customer’s cart. In the absence of this, the cart remains stored against the customer’s record, and hence appears next time they log on.

Now, this has never been mentioned before, and this particular Opencart installation has been live for over 18 months, so it’s obviously not a massive issue, but it’s still not quite what you’d want. We’re still running a (heavily customised) OC 1.4.9.5, but in fact the problem remains on OC 1.5.4, and presumably, although I haven’t tested, with any other payment gateway where the payment is handled offsite.

It seemed to me that it would be better to clear the cart when the IPN message is returned from Paypal (this is what sets the order status and updates stock etc). The important cases are where a payment comes through as Completed, or as Pending (complete but waiting Paypal confirmation), so I edited catalog/controller/payment/pp_standard.php, adding the code in red:

		switch($data['payment_status']){
			case 'Completed':
				if ($this->order_info['customer_id']){//only run this if the customer has created an account, not for guest checkouts
					$this->model_checkout_order->clearCustomerCart($this->order_info['customer_id']);
				}
				if ($verified) {
					if ($this->order_info['order_status_id'] == '0') {
						$this->model_checkout_order->confirm($order_id, $this->config->get('pp_standard_order_status_id'), 'Thank you for your Paypal payment');
					} elseif (isset($data['payment_type']) && $data['payment_type'] == 'echeck') {
						$this->model_checkout_order->update($order_id, $this->config->get('pp_standard_order_status_id'), $data['payment_status'], TRUE);
					} elseif ($this->order_info['order_status_id'] != $this->config->get('pp_standard_order_status_id')) {
						$this->model_checkout_order->update($order_id, $this->config->get('pp_standard_order_status_id'), $data['payment_status'], FALSE);
					}

and similarly, a little further down:

			case 'Pending':
				if ($this->order_info['customer_id']){
					$this->model_checkout_order->clearCustomerCart($this->order_info['customer_id']);
				}
				if ($this->order_info['order_status_id'] == '0') {
					$this->model_checkout_order->confirm($order_id, $this->config->get('pp_standard_order_status_id_pending'), 'This payment is subject to a review by Paypal');
				} else {
					$this->model_checkout_order->update($order_id, $this->config->get('pp_standard_order_status_id_pending'), $comment, TRUE);
				}
				break;

In turn, this calls the following code appended to catalog/model/checkout/order.php:

	public function clearCustomerCart($customer_id){
	
		$this->db->query("UPDATE `" . DB_PREFIX . "customer` SET cart = '' WHERE customer_id = '" . (int)$customer_id . "'");
		$this->session->data['cart'] = array();
	
	}

I’ve shown here direct edits in OC1.4.9.5, but you could just as easily apply this via vQmod. This fix has now been working for several weeks with no problem.

vQmod for OC1.5.x

This code works with minor adjustments in OC1.5.x. Here’s a vQmod, tested in OC1.5.6.1:

<modification>
	<id>vQmods for Opencart mobile theme</id>
	<version>For OC 1.5.6</version>
	<vqmver>1.0</vqmver>
	<author>Simon Battersby</author>
	<file name="catalog/controller/payment/pp_standard.php">
		<operation>
			<search position="after"><![CDATA[$order_status_id = $this->config->get('pp_standard_completed_status_id');]]></search>
			<add><![CDATA[
				//Completed status
				$this->clearCustomerCart($order_info['customer_id']);
			]]></add>
		</operation>
		<operation>
			<search position="after"><![CDATA[case 'Pending':]]></search>
			<add><![CDATA[
				//Completed status
				$this->clearCustomerCart($order_info['customer_id']);
			]]></add>
		</operation>
		<operation>
			<search position="after" offset="2"><![CDATA[curl_close($curl);]]></search>
			<add><![CDATA[
				//function to clear cart
				public function clearCustomerCart($customer_id){
				
					if($customer_id){
						$this->db->query("UPDATE `" . DB_PREFIX . "customer` SET cart = '' WHERE customer_id = '" . (int)$customer_id . "'");
						$this->session->data['cart'] = array();
					}
				
				}			
			]]></add>
		</operation>		
	</file>
</modification>

Linked to this, I also noticed that the default session expiry, set via php.ini is 138 days:

session.gc_maxlifetime = 12000000;

This seems excessive….I’ve set mine to the more reasonable 24 hours.

Tags: opencart
Posted in Web Design and Build | 9 Comments

Opencart – differences between 1.5.x versions Last updated:12 February 2013

While working through a mobile theme for different versions of Opencart 1.5, I came across quite a lot of differences between the versions which are not documented on the Opencart site itsef. These differences are those that affect the development of themes, rather than anything solely in the Controller or Model files. I started with version 1.5.1.

Opencart 1.5.1 to Opencart 1.5.1.1

No changes identified

Opencart 1.5.1.1 to Opencart 1.5.1.2

No changes identified

Opencart 1.5.1.2 to Opencart 1.5.1.3

The reward points variable created by catalog/controller/checkout/cart is renamed from points to reward
catalog/controller/payments/nochex passes $test variable instead of tpl calling config directly

Opencart 1.5.1.3 to Opencart 1.5.2

A new module is created for language
A new module is created for currency
The catalog/controller/checkout/payment controller and template are renamed payment_method
view/checkout/address.tpl is split into payment_address.tpl and shipping_address.tpl
view/checkout/shipping.tpl is renamed shipping_method.tpl
The function to add a product in controller/checkout/cart, called from several pages, is renamed from update to add
Similarly, the function to add to wish list in controller/checkout/cart is renamed from update to add
Coupon/voucher/reward/shipping data is passed and handled differently from controller/checkout/cart
Remove from cart ajax function added
A large number of ajax responses on checkout.tpl are different and hence are handled differently
Some buttons have different ids on checkout page
The zone function on guest address is moved to checkout/checkout from checkout/guest_shipping
catalog/controller/payment/paypoint passes an additional $digest variable
A reorder button added to account/order_list
Variable names are changed on account/return_list
The return form is simplified and restricted to a single product
A remove button added to wishlist
Gift voucher is located under account rather than checkout
Variable name changed on download page

Opencart 1.5.2 to Opencart 1.5.2.1

No changes identified

Opencart 1.5.2.1 to Opencart 1.5.3

Change to the way categories are handled in catalog/controller/common/header.php
Zone functions are different on checkout/register and affiliate
Company and tax id added to customer data

Opencart 1.5.3 to Opencart 1.5.3.1

No changes identified

Opencart 1.5.3.1 to Opencart 1.5.4

Variable name changed from entry_account to entry_customer_group on checkout/register, checkout/guest and account/register

Opencart 1.5.4 to Opencart 1.5.4.1

There are no changes between these versions, 1.5.4.1 includes solely a change to the encryption class

Opencart 1.5.4.1 to Opencart 1.5.5

URLs generated when navigating between stores using the Store module pass an additional query string identifying the session

Tags: opencart
Posted in | 7 Comments

Opencart – Use different modules on multiple stores Last updated:23 October 2012

If you have multiple stores on one Opencart installation, it’s quite likely you might want to display different versions of the same module on your different stores. I first came across this issue when developing a mobile theme, designed to be used alongside a ‘standard’ theme suitable for desktops. While most modules transfer fairly easily across from one theme to another, one that doesn’t is Banner, and Slideshow is much the same. On my standard site I want a nice wide banner to take up the whole width of the home page, but if this is transferred directly to the mobile theme, designed to have an entirely fluid width to fit a screen down to 320px wide, it won’t fit. This could perhaps be overcome with css, but the Slideshow module creates an inline style setting the width, which on the face of it appears insuperable…

The good news is that this is easily addressed using Opencart’s Layout functionality. 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. Let’s use the Slideshow example to show how we can use two different slideshows on the homepages for our default and mobile stores. The first thing to do is to create a new layout for the mobile store home page. First we create the new Layout, via System > Design > Layouts, and click the ‘Insert’ button. I’ll call the new layout Home_Mobile. Now I need to tell Opencart which pages (or routes) on which store this Layout should be used for. Click ‘Add Route’, select the mobile store from the dropdown and then, to use this on the homepage, add the route ‘common/home’. Like this:

Screenshot of Opencart Layout config page

Click ‘Save’. Now we’ve done this, assuming no other changes have been made, Opencart will use the Layout Home for the home page on the default store – this is set up already, but for the mobile store it will use the Layout Home_Mobile.

Once we’ve done this the next bit’s easy…. Let’s assume we’ve got a suitably sized Banner already created. Bring up the Slideshow module config screen (Extensions > Modules > Slideshow – Edit), then click ‘Add Module’, and fill in the details for your new Slideshow, selecting ‘Home_Mobile’ as the Layout to which this module is applied. Something like:

Click ‘Save’ and it’s done – you have two separately sized Slideshows visible on the two different homepages.

Tags: opencart
Posted in | 24 Comments

Simon Battersby

Categories

Tags