The Original Soy Company

The Original Soy Company needed their OpenCart website updated to be responsive and mobile compatible. 

The Original Soy Company Closed Down, 2022

The website, theoriginalsoycompany.com.au, went offline around 2016, and around 2021 went into an "Under Construction" state before going offline permantly sometime in 2022. From the Google entry the business has closed down.

WordPress with WooCommerce

In June 2017, the site gained an additional URL that is shorter, originalsoyco.com.au and to a new CMS, my favourite WordPress using WooCommerce as the sales platform; to a more "modern" design. I was not part of the rebuild.

The innovative design is lighter, cleaner but much less colourful. The home page is missing some content.

From what I can tell the only improvement is a couple of now gone header photos that actually show what the business does, making and selling candles.

The product images of the candles are the same as each other with no props to suggest what fragrance they are; a fact that was pointed out by me to them many times. I will be surprised if it does any better than the original OpenCart version. Buyers need to smell them before buying, which is how I like to buy my candles.

Moving from Magento to OpenCart — August 2014

The new site was to be vibrant and visually attractive to prospective customers.

I took this over from an existing OpenCart site. The site was to be redone with a special emphasis on being easily view-able on mobile and tablet devices. The change was easier than expected as all was needed to do was install a new template and set it up.

Stock Photos

I dressed the site up with images from The Dollar Photo Club (now an expensive Adobe stock photo site now sadly). This is only the third time I have bought stock photos. The bought ones look a lot better than the free ones that come off Free Images and RGB Stock. The free sites do have great photos, but you have to search a bit longer for suitable images.

The front category images need to grab the user's attention. The left-hand photos were coloured with shades to make them easier to navigate.

Setting Up

To install an OpenCart theme upload and unzip the theme to a folder under [site-root]/catalog/view/theme.

Next go to the site back end and then System->Settings. Choose Edit on the store being changed. Next click on the Store tab and change the drop-down box to the correct template as shown below.

VQMod Manager

OpenCart uses VQMod Manager, and this must be installed or the site won't work properly.

The Front Banners

The template comes with banners, and these are accessed through System->Design->Banners. Banner-5 is the large square to the rignt, Banners are the smaller squares to the left and slideshow is the slide show that sits above the before mentioned banners.

Click on Edit and to edit the banners you will get the screen below. Use what's there as a guide. Change the image, the link, and the description. The link can be copied from the menu on the front end.

Note the "fa" class in the description field. This is for the Font Awesome icons that caused problems with the Firefox browser.

The Top Product Category Menu

The top product menu fetches the categories from the back-end Catalog->Category, as shown below. Subcategories are shown with their parent and an ">" and they appear as drop downs on the menu. New menu items or categories are made by clicking Insert and removed with Delete. I'm not sure what Repair does or how well it works. I advise only trying it if something is wrong.

The order menu items are displayed is determined by the Sort Order. I found it best to write them down and then number each jumping by 5 each time so that more can be inserted later if needed.

Clicking on Edit allows more editing to be done. Click on the Data tab and make sure Top is checked or you won't see it in the menu. Having an SEO key word is a clever idea.

The Products and SEO

This site was already up and running with products. But very few of them had SEO key words. Strangely OpenCart does not create the SEO friendly URL short link when you create the product; quite different to WooCommerce in WordPress.

An effortless way to copy the product name across to the SEO, paste the following code in a file and call it "seo-links.php". Upload it to your admin directory and access it directly, meaning: http://www.yourdomain.com/admin/seo-links.php.

A solution from the OpenCart forum is shown below. From there it explains itself.

<?php

require_once('config.php');
require_once(DIR_SYSTEM . 'startup.php');

// Registry
$registry = new Registry();

// Loader
$loader = new Loader($registry);
$registry->set('load', $loader);

// Database
$db = new DB(DB_DRIVER, DB_HOSTNAME, DB_USERNAME, DB_PASSWORD, DB_DATABASE);
$registry->set('db', $db);

function seoURL($str) {
$str = preg_replace('/[^a-zA-Z0-9]+/', '-', $str);
$str = trim($str, '-');
$str = strtolower($str);

return $str;
}

?>
<html>
<head>
<title>Create SEO-links</title>
</head>
<style type="text/css">
body {
    font-family: "Arial";
    font-size: 12px;
}
</style>
<body>
<center>
    <h2>Script by Kartoffelz</h2>
    <?php

if(isset($_GET['products'])) {
$products   = $db->query("SELECT * FROM " . DB_PREFIX . "product");
$products   = $products->rows;

foreach($products as $product) {

$url = $db->query("SELECT * FROM " . DB_PREFIX . "url_alias WHERE query = 'product_id=" . (int)$product['product_id'] . "'");
$url = $url->rows;

if(!empty($url)) {
echo 'Match found for ' . $product['product_id'] . '). No action taken.<br>---------------<br>';
} else {
echo 'URL needed for ' . $product['product_id'] . '. Fetching information...<br>';
$info = $db->query("SELECT * FROM " . DB_PREFIX . "product_description WHERE product_id = '" . $product['product_id'] . "' LIMIT 1");
$info = $info->rows;

foreach($info as $data) {
echo 'Name: ' . $data['name'] . ' | Converting to: ' . seoURL($data['name']);
$data['name'] = seoURL($data['name']);
sleep(1);
$db->query("INSERT INTO " . DB_PREFIX . "url_alias SET query = 'product_id=" . (int)$product['product_id'] . "', keyword = '" . $db->escape($data['name']) . "'");
echo '<br>Inserted!<br>---------------<br>';
}
}
}

echo '<br><br>All done! <a href="seo-links.php">Back</a>';
}
elseif(isset($_GET['categories'])) {
$categories   = $db->query("SELECT * FROM " . DB_PREFIX . "category");
$categories   = $categories->rows;

foreach($categories as $category) {

$url = $db->query("SELECT * FROM " . DB_PREFIX . "url_alias WHERE query = 'category_id=" . (int)$category['category_id'] . "'");
$url = $url->rows;

if(!empty($url)) {
echo 'Match found for ' . $category['category_id'] . '). No action taken.<br>---------------<br>';
} else {
echo 'URL needed for ' . $category['category_id'] . '. Fetching information...<br>';
$info = $db->query("SELECT * FROM " . DB_PREFIX . "category_description WHERE category_id = '" . $category['category_id'] . "' LIMIT 1");
$info = $info->rows;

foreach($info as $data) {
echo 'Name: ' . $data['name'] . ' | Converting to: ' . seoURL($data['name']);
$data['name'] = seoURL($data['name']);
sleep(1);
$db->query("INSERT INTO " . DB_PREFIX . "url_alias SET query = 'category_id=" . (int)$category['category_id'] . "', keyword = '" . $db->escape($data['name']) . "'");
echo '<br>Inserted!<br>---------------<br>';
}
}
}

echo '<br><br>All done! <a href="seo-links.php">Back</a>';
} elseif(isset($_GET['information'])) {
$informationp    = $db->query("SELECT * FROM " . DB_PREFIX . "information");
$informationp    = $informationp->rows;

foreach($informationp as $information) {

$url = $db->query("SELECT * FROM " . DB_PREFIX . "url_alias WHERE query = 'information_id=" . (int)$information['information_id'] . "'");
$url = $url->rows;

if(!empty($url)) {
echo 'Match found for ' . $information['information_id'] . '. No action taken.<br>---------------<br>';
} else {
echo 'URL needed for ' . $information['information_id'] . '. Fetching information...<br>';
$info = $db->query("SELECT * FROM " . DB_PREFIX . "information_description WHERE information_id = '" . $information['information_id'] . "' LIMIT 1");
$info = $info->rows;

foreach($info as $data) {
echo 'Name: ' . $data['title'] . ' | Converting to: ' . seoURL($data['title']);
$data['title'] = seoURL($data['title']);
sleep(1);
$db->query("INSERT INTO " . DB_PREFIX . "url_alias SET query = 'information_id=" . (int)$information['information_id'] . "', keyword = '" . $db->escape($data['title']) . "'");
echo '<br>Inserted!<br>---------------<br>';
}
}
}
echo '<br><br>All done! <a href="seo-links.php">Back</a>';

}
else {
echo '<p><a href="?products">Products</a> - Create product-URLs</p>';
echo '<p><a href="?categories">Categories</a> - Create category-URLs</p>';
echo '<p><a href="?information">Information</a> - Create information-URLs</p>';
}

?>
</center>
</body>
</html>

One thing it doesn't change are the ampersands. To fix this run the following in PHPmyAdmin:

UPDATE `oc_url_alias` SET `keyword`=REPLACE(`keyword`,"-amp-","-and-") WHERE 1

Problems with the Install

As with any recent technology there are always a few teething problems.

Editing the Footer

Not really a problem but it illustrates that editing is not as easy as WordPress. To edit the footer, go to [site root]/admin/view/template/common/. Under here there are several TPL files. Look for the one called footer.tpl and edit it as required.

I took the opportunity to add icons to the menu items creating a great look. Have a look at the Font Awesome list of codes and examples.

Missing Icons

One problem that only affects Firefox was that Font Awesome icons were not being rendered. It turns out Firefox won't fetch assets over different domains.

The solution was to modify or create an .htaccess file to allow access:

# Fix the problem of Firefox not loading icons from 
# different domains.
<FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

The Result

You can check out the result at theoriginalsoycompany.com.au. The business and website closed down around 2022.