Magento Porto theme with ExtensionsMall v5 Color Swatch

If you plan to use Porto Theme (from SmartWave company) on your Magento store and also want to have swatches than only two modules can be really considered. One is Magento built-in swatches module and other is ExtensionsMall Color Swatch (latest version is 5.0), both work very well with theme however Emall module comes with few nice tricks. Installation of module is quite straight forward and only thing that you should pay attention is where you copy files (instead default or RWD folder, you want to copy files into smartwave/porto folder). Module works very well on catalog pages, no matter did you enabled AJAX features like ‘price slider’ or ‘infinite scroll’. With a bit knowledge of Magento it is possible to integrate swatches in all product list blocks such as ‘Featured products’, ‘New products’ and other.

If you are building a store from scratch you can save some time if you during installation of theme skip patch for Magento built in swatches, that way you will avoid any conflict with ‘ExtensionsMall’ Color Swatch module. Also if you have installed theme you can order module and ask developers to prepare modified module for Porto theme.

Porto theme - color swatch
Porto theme – color swatch

Notice from ExtensionsMall:
All customers that have previous version of Color Swatch (version 3 or 4) can upgrade module to latest version (version 5) and keep all settings, uploaded swatches and settings on product level will stay untouched after upgrade. Color Swatch 5 bring lot of new features and can’t be really compared with Magento built-in swatches module.
Extensionsmall Color Swatch module page (there is documentation in PDF format):
http://www.extensionsmall.com/magento-color-swatch.html

there is also a demo site availble:
http://demo.extensionsmall.com/index.php/color-swatch-363.html

Onestepcheckout does not work with shipping coupon fix

Default Magento checkout process can be quite boring, because customer need to enter data in steps. After finishing one step customer need to press button to proceed to next step and in case that he want to change something in previous steps he will need to repeat process. That is why ‘one-page’ and ‘one-step’ checkout modules are popular, they allow customer to enter all data on one screen with additional option to populate fields in custom order.

Magestore developed solid ‘One Step Checkout’ however I run into a bug that was quite disappointing. Our idea was to enable free shipping when customers enter coupon code, to complicate things a bit more store was already using Matrix Rates party shipping method modules. Issue occur when customer enter promo code, ‘One Step Checkout’ reload several blocks however shipping methods stay same and new fees are not calculated properly.

I contacted Magestore support but they didn’t replied to my question, also I found topic about same issue on there forum but without answers (just few spam posts).

Due lack of time I wanted to fix issue with minimal changes on module, in case that we decide to update plugin and issue is still present in next version.
Open java script file located in folder:
/js/magestore/onestepcheckout.js

find function that add coupon add_coupon_code and in Ajax onSuccess event add this line of code: location.reload(true);

that part of function should look like this:
onSuccess: function (transport) {
var response = getResponseText(transport);
if (response.error) {
paymentShow();
reviewShow();
$('remove_coupon_code_button').hide();
alert(response.message);
}
else {
save_shipping_method(shipping_method_url, 1, 1);
$('remove_coupon_code_button').show();
location.reload(true);
}
}

repeat same for function that remove coupon remove_coupon_code.

Save file and test new setup, on checkout page enter coupon code and hit ‘Apply coupon’ button, if code is valid page will reload and shipping methods will be properly updated (including fees, which was main issue). Since this small hack is opposite form ‘One Step Checkout’ idea to use AJAX and keep customer on page without reloading I asked few friends to test complete setup. Coupon code was positioned just above ‘Place order’ button so reloading page didn’t disturbed much there shopping experience.

Show ‘out of stock’ products as last

Customer behavior studies shows that customers check products on first page, if searched product is not there they will only small number will go to second page or third page. Most likely they will try to use search or redefine there search parameters to get better results. That is why is important to display on first page products that are ‘in stock’ and can be purchased right away.

Magento offer several options how to sort products on catalog page, with this little snippet we will extend that feature by keeping same order but ‘out of stock’ products will be displayed as last on catalog page.

There are many ways to do that however we will go for simplest one, by copying Magento files into our ‘local’ folder, or course same code can be wrapped up in form of module for more effective use. For example we want to use this feature only on ‘Sale’ category to effectively keep available products on top of list.

First step would be to copy file ‘Toolbar.php’ from Magento core folder to our local folder:
/app/code/local/Mage/Catalog/Block/Product/List/Toolbar.php

than open file in editor and find function ‘setCollection’ and copy complete code. We will rename new function from ‘setCollection’ to ‘setCatalogCollection’ and add code that will sort products by stock status. New function should look like this:

public function setCatalogCollection($collection)
{
$this->_collection = $collection;

$this->_collection->setCurPage($this->getCurrentPage());

// we need to set pagination only if passed value integer and more that 0
$limit = (int)$this->getLimit();
if ($limit) {
$this->_collection->setPageSize($limit);
}

if ($this->getCurrentOrder()) {
$this->_collection->joinField('inventory_in_stock', 'cataloginventory_stock_item', 'is_in_stock', 'product_id=entity_id','is_in_stock>=0', 'left')->setOrder('inventory_in_stock', 'desc');
$this->_collection->setOrder($this->getCurrentOrder(), $this->getCurrentDirection());
}
return $this;
}

We will need to copy one more from Magento core folder to our local folder:
/app/code/local/Mage/Catalog/Block/Product/List.php

In ‘List.php’ file find line:
$toolbar->setCollection($collection);
and replace it with our new function:
$toolbar->setCatalogCollection($collection);

Save all changes, refresh cache and check front end to see how code works. If everything is done properly your catalog page ordering will be adjusted and ‘out of stock’ products will be listed as last in collection.

It is important not to overwrite Magento default function ‘setCollection’ since it might happen that some 3rd party modules will use it and can cause site to crash (issue confirmed with free blog extensions).

I hope that this little trick with help you, if I have some free time in next few weeks I will try to create module to save you time and spare you from editing files.