eBay Dynamic eBay Store Categories Script Updated

Dynamic eBay Categories ExampleOver the weekend several updates were added to the Dynamic eBay Store Categories Script were released.

If you’ve not heard of this before, this is a “eBay Compatible” widget that allows you to add in your eBay shop categories into your listings remotely and have complete control over how they appear and look.

The Updates:

The updates to this script are as follows:

eBay Store search added

You can now have a eBay search box at the top of your categories bar in your listings that allows customers to make searches in your eBay shop, straight from your listing. Add in your eBay shop URL and set the setting to true to enable this feature.

Ability to order the categories

This was a feature request because sometimes the ordering that eBay gives you in the “Manage my Shop” section isn’t good enough and now you have the option of setting the ordering of the categories either to follow the eBay ordering or to order them alphabetically on each of the 3 levels of categories

Speed improvements & better compatibility with more hosting providers

Not all web hosting is born equal, several changes have been made so that you don’t run into challenges with hosting provided by the majority of the UK & US web hosting companies. Also added to this were several faster ways of rendering the final output code too and cache management

Upgrading

If you’re already purchased & are using this widget to bring in your eBay shop categories in your listing templates, the upgrade details are in your email inbox :) You can download the latest version from your account on this site and I’ve increased the download limit by 2 to allow you to grab the latest version.

Would you like your eBay shop categories in your listings?

eBay compatible applicationThis is a stand alone script that runs from your web hosting for maximum control and allows you to not only show your eBay shop categories in your listings, but also includes a search feature and is completely configurable through the template system I added last year as well.

You can find out more about this script here (there is a video included too).

Matt

PS. If you’re a web designer, there is a special web designers version also available for use with multiple clients which is being used by several high profile eBay shop & listing template design companies

Showing Available Configurable Options on the List or Grid View in Magento

Do you sell sized products in Magento or have products with colour options and would like to show the available product options on the gallery or list views like the image above?

If so read on, I have some code for you.

 

Products with Options

The same as variations on eBay or Amazon, when you’ve got products that are the same, but come in different colours, sizes or both, then both eBay and Amazon allow you to make variation listings. You can do the same in Magento with configurable products, but unlike eBay and Amazon where you’re restricted on what you can do, but with your own website you can do whatever you like.

From a customer’s point of view there are probably only looking for a specific colour of dress or if I’m shopping for shoes, I’m a size 10, I don’t really care about any other sizes and for me as the customer having to trawl through umpteen products on a website is plain annoying.

So what can we do about this? Read on.

Showing customers available options in Magento

We can add some simple copy and paste code to our Magento website, that will show which options are available, so when your customer is looking at your category list pages, where you have multiple products being shown, you can clearly show them which sizes or colours are still in stock.

An example of what we’ll be doing is below:

show available sizes in Magento

As we can see from the image above, the available shoe sizes are being shown on each product. If we think back to me being a size 10, I can immediately rule out the products that are not available in my size and just click on the ones that are (not that Women’s shoes are my kind of thing I hasten to add!).

To do this, first I’m going to share the code snippet with you and then explain what it does and how you can extend it further or alter it to your needs.
[php]
<?php
$sizes = array();
$colours = array();
if($_product->isConfigurable()){
$allProducts = $_product->getTypeInstance(true)->getUsedProducts(null, $_product);
foreach ($allProducts as $subproduct) {
if ($subproduct->isSaleable() && floor($subproduct->getStockItem()->getQty()) > 0 ) {
$sizes[] = $subproduct->getAttributeText(‘config_sizes’);
$colours[] = $subproduct->getAttributeText(‘config_colours’);
}
}
if(count($sizes)>0) {
sort($sizes);
?>
<div class=”desc std config_sizes”>
Sizes: <? echo implode(“, “, $sizes); ?>
</div>
<?
}
if(count($colours)>0) {
sort($colours);
?>
<div class=”desc std config_colours”>
Colours: <? echo implode(“, “, $colours); ?>
</div>
<?
}
}
?>
[/php]
This code was originally posted on http://stackoverflow.com/, but lacked the option to show only the options that had stock on them. Adding “&& floor($subproduct->getStockItem()->getQty()) > 0” on line 7 filtered the items without stock on them out.

Code run down:

  • Lines 1 & 2 set up the arrays we’ll be using to show the available options
  • Line 4 makes sure we have a configurable product
  • Lines 5 & 6 grabs all the simple products and starts to go through each of them
  • Line 7 is the cool line, as that line only adds in products that should be added
  • Lines 8 & 9 add values for specific attributes to each array (more on these later)
  • Then lines 12 to 19 and 20 to 27 spill the options out to the website

Tip: If your website is only ever going to have sizes as options, then you can remove lines 3, 9 and 20 to 27 for the colour options or the opposite lines for the sizes if you’re only using colours on your site.

The two fields you must be aware of are in lines 8 & 9.

These are the attribute names for the configurable products. In this case, they are called “config_sizes” & “config_colours” and must match exactly to the attribute code names that are being used for you size and colour options in Magento.

You can find out what yours are called by going to the Magento admin section, Catalog > Attributes > Manage Attributes and then clicking into your configurable attribute(s) and the code name is in the first box.

Pretty cool so far right? Now let’s this to your site.

Adding this code to your site

In the code snippet above, we must update our configurable options on lines 8 & 9 otherwise this won’t work for us.

Also I’m going to assume that you have worked with Magento themes before and understand the structure of theming in Magento and that you should never, ever change the default theme and you’ll make a copy of the list.phtml file to your website theme directory if needed and also a backup of the current file just in case.

Note: If themes are new to you in Magento, then take a read of this article that explains how they work before continuing.

For the sake of example, I am going to assume that your Magento theme directory is called “my-theme”. What we’re looking for is the file called “list.phtml” located in:

app/design/frontend/default/my-theme/template/catalog/product/

If this file is not present, then copy this file from this directory to your theme folder:

app/design/frontend/base/default/template/catalog/product/

Once you have opened the “list.phtml” take note that this file has TWO views in it, both the grid view and the list view and we’ll need to pop this code in twice and then check both views (assuming you have both views enable on your Magento site)

What we’re looking for is the line that looks like this:

[php]
echo $_helper->productAttribute($_product, $_product->getName() , ‘name’);
[/php]

Being careful of other tags that need to be closed first, after this section, we can add in the code snippet above and press save.

Now nip back to your site and view one of your category list pages where you know you have products that have configurable options on them and see if it’s now displaying them. If you see the options and they look right, then you’re left with one more task for the other view and we’ll cover that next.

If the options did not display:
You may need to just empty the Magento cache for them to appear and if it’s still not appearing, then either we have the attribute name(s) we added above entered incorrectly, the page doesn’t have any configurable products with options that are available, we’re looking at a list view which we haven’t done yet (next section) or the theme may be just hiding this section, so check the pages source code to see if you can see the options there.

Now for the List view
Assuming the above went well for you (which it should do as I have tested this on Magento versions 1.7 & 1.6), we have only done half the job which was for the grid view which is at the top of the list.phtml file. If you scroll down this file and look for the section that reads like this:

[php]
<?php // Grid Mode ?>
[/php]

Now look again for the code:

[php]
echo $_helper->productAttribute($_product, $_product->getName() , ‘name’);
[/php]

And add the same snippet above where appropriate.

Styling:
I’ve included css classes on both the size and colour options called “config_sizes” and “config_colours”, you can of course change these to whatever you like, but do keep classes on them as it will make styling them a lot simpler.

In Conclusion

This code snippet allows you to show the available options on your site for both grid & list views.

Showing the available options on the grid or list pages in Magento is just good practice. I know from a personal point of view, I’m normally just looking for one size and from my Wife’s point of view, she just wants one colour and size is a secondary consideration.

show available sizes in Magento

Yes, with pages that have lots of products on this is going to add some extra processing time to the page to load and also you’ll need to style these new options too. If you’re really worried about speed on the grid/list pages, then cutting down the number of items being shown is the biggest win (and also good practice too) and if you’re still concerned, use PHP’s microtime() function to see how long this takes to execute and example 1 on this page will help you loads.

If you get stuck with the above guide, ask your web designer or if you are the web designer or just the store owner wanting to add this, pop a comment at the bottom and I’ll help out if I can.

Enjoy,

Matt

Migrating Magento From one Server to Another With SSH, RSYNC & Navicat

When it comes to moving your Magento site from one server to another, it can be an awkward job. Especially if you haven’t done anything like this before and as I’ve found moving Magento from one server to another is not as straight forwards as one would have hoped.

This guide will walk you through step by step in moving your Magento site from one Linux server to another.

I’m not going to pretend that this is easy or a quick job and it may not work for you, but this has worked for me numerous times and I sincerely it helps you on your way. If you know of a better way or would like to add to this, please improve this guide by adding your comments & suggestions in the comments section at the bottom of this page.

 

What we’ll be doing

We’ll be performing the following tasks:

  • Moving the site files from the “original server” to the “new server”
  • Copying the database from the “original server” to the “new server”
  • Updating Magento’s config files to use the “new servers” MySQL database
  • Changing the file permissions on the “new server” for the transferred files
  • Verifying that everything is right & Cleaning up

It should be also noted that you don’t need to use this entire article to move just one part of your site. For example if you’re just interested in moving your database from one server to another, just skip the file transfer part at the beginning.

To be able to quickly and easily move your Magento site from one server to another, we’ll need some tools to help us:

  • A text editor such as Notepad++ (free)
  • SSH access to both servers
  • FTP access to the new server site files where your site is going to be hosted
  • Putty.exe for connecting via SSH (free)
  • Navicat for transferring the databases (free 30 day trial)
  • MySQL login details for the original and new servers
  • WinSCP for editing/checking on files (free)
  • Depending on the size of your database and site files, approximately 30-60 minutes

There is going to be a big pause later on in this guide while you’re transferring your files, pop the kettle on now, you’ll have some free time shortly and all the tools we’ll be using are either free or have free trials.

Assumptions

To be able to follow this guide, the following assumptions have been made:

  • You’ve used SSH before
  • The new site directory has been created already using plesk, cpanel, webmin or similar
  • You have FTP or SFTP access to the new site
  • You have made a full backup of your current site

Getting Started

To be able to migrate your site from one server to another, the easiest and quickest way is using SSH (secure shell) and a really neat command called “rysnch”.

Note: SSH access is a given on Linux dedicated, VPS and hybrid servers, if you’re using shared hosting such as from Vidahost or HeartInternet, you’ll need to ask for access.

To make things clear as we’re dealing with two servers, we are going to have the “original server” which is where you website is hosted right now and the “new server” which is where we are transferring our existing Magento site to.

Assuming we now have SSH access, use Putty to connect to your “original server” via SSH.

Tip: If you’d like a guide into setting up putty and SSH on your windows computer, see this video guide http://www.youtube.com/watch?v=ma6Ln30iP08

Finding the Directory Paths on the Original Server

Before we can transfer the sites files from one server to another, we need to find the full directory path to both the “original server” site files where your site is currently being served from and the full directory path on the “new server” where we are moving our website too.

There are two ways of doing this, the first option is more experienced users and the second is much faster for novices. I’ll take you through both of them now.

Option 1 – Using the pwd command

If you’re experienced with the Linux command line and know your server well, this will be the easiest & quickest way for you.

To do this, we just need one very simple command for the Linux command line, it’s called “pwd”. In your putty window, type in “pwd” and in the response we’ll be shown the full path to the folder that we’re in right now.

Now if you already know your configuration, use the “cd” command navigate to a path that is something like this:

cd /var/www/vhosts/<your site name>/httpdocs/

Obviously you’ll want to change “<your site name>” to your sites name.

If you’re not sure which folder your site is in, navigate down to the vhosts folder using “cd /var/www/vhosts/” and then type in “dir” and press enter. This will give you a list of folders, these are normally your hosting domain names and then use “cd yoursitename” to move into that folder. Again enter “dir”, hit enter and look for another folder called either “httpdocs” or “public_html” and use “cd” to move into this folder. If you now enter “dir” again, hit enter, you should be looking at all the files in your websites home directory.

Now that we’ve found the “original server” path, enter “pwd” in the console, hit enter and we now have the full path from which we’ll be transferring the files from.

Copy this down into your text editor as:

FROM PATH: /var/www/vhosts/<your site name>/httpdocs

Option 2 – Using FTP and cheating

This is the cheating method, I say “cheating”, but it just works.

Create a file called “pathchecker.php” in your sites home/root directory and enter the text below.

<?php
echo realpath(dirname(__FILE__)) . "\n";
echo $_SERVER['PHP_SELF'] . "\n";
?>

Tip: You can also download this file here to expedite the process.

Now navigate to http://yourwebsite.com/pathchecker.php

This will spill out the full path to your existing site in your webpage. Cheating eh?

Now copy this path down into your text editor removing the “/pathchecker.php” part at the end as:

FROM PATH: <your path here>

Finding the Directory Paths on the New Server

This is a little more tricky than the first as normally we’re unable to cheat as we’ve not moved the DNS settings around yet to point the outside internet at our new server. So instead out best option is to use the Linux command line and navigate to our home directory where our site is going to be hosted.

Again this is going to be something like “/var/www/vhosts/<your site name>/httpdocs”, just use the “cd” and “dir” commands to navigate and look around until you find the sites base directory.

Once you have located the “new server” home folder for our site where we’ll be transferring our existing site over to, jot this down in your text editor as:

NEW SITE: /var/www/vhosts/<your site name>/httpdocs

Transferring the Files using rsync

Most Linux systems come with a command called “rsync”. This allows us to transfer files from one server to another and in other cases allows us to only transfer the files that have changed too (which makes it brilliant for backups).

Before we go bashing in the rsync command in willy-nilly we need to have a quick 101 on how this command works and as an example I have put a very similar command to what we’ll be using in a few moments below. If you’d like to read the man page, you can find that here.

rsync -r -t -v --progress -c -l -z root@yourdomain:/home/yoursite/public_html /var/www/vhosts/newsite.co.uk/httpdocs

Looks scary right?

Well actually it’s dead simple and I’ve broken it down into bite sized chunks below:

  • rsync” –  The rsync command
  • -r” – This switch says “repeat recursively” or in Matt proof language, “transfer the lot”
  • -t” – This switch preserves the timestamps on the files
  • -v” – This switch makes the command “verbose” or in Matt proof language “you can see what is happening”
  • –progress” – This switch tell rsync to show us the progress during the transfer
  • -c” – This switch tells rsync to make comparisons using checksums, rather than time and size
  • -l” – This switch means that we also copy symlinks as well (this can save a massive headache!)
  • -z” – And this switch means that rsync will compress the files during transfer, thus making it faster
  • root@yourdomain:” – This is the SSH username that you log into your “original server” and the domain name or IP address of the server. Do pay special attention to the “:” character at the end as well
  • /home/yoursite/public_html” – This is the path which we worked out above and is our “FROM PATH” where we will be transferring the files from
  • ” ” – This is a space. Extremely important. If you don’t leave a space between the “FROM PATH” and the destination path that follows, this command just won’t work
  • /var/www/vhosts/newsite.co.uk/httpdocs” – And finally this is the path on the “new server” where we will be transferring the files from the “original server”

Saving your bacon

Now before we continue, there is one key combination that has saved my bacon lots of times, it’s the command to stop processes from running in the command line and if you press CTRL and C together, this will stop a process from running.

If it doesn’t look like it’s transferring the right files or you just want to stop the process at any time, hold down the CTRL key and press C on your keyboard. This will stop the rsync command from running and you can investigate if the files are being transferred to the right location or not.

And back to rsync…

Still with me?

Sweet! Because we’re at the cool stage.

Crucial step: Log into to your “new server” via SSH, that’s right the NEW server. We’ll be logging in remotely to your “original server” from the “new server” command line.

Now grab your text editor and copy this into it:

rsync -r -t -v --progress -c -l -z oldserver@yourdomain:FROMPATH NEWPATH

Now swap the following text around:

  • oldserver” to your “original servers” SSH user name
  • yourdomain” to your current domain name or IP address used to log into the “original server” with via SSH
  • Make sure you don’t edit out the “:” symbol
  • FROMPATH” to your text for the from path we found earlier
  • NEWPATH” to the path we just found out for where the site is going to be moved to

We should now have something like we had originally like this:

rsync -r -t -v --progress -c -l -z root@yourdomain:/home/yoursite/public_html /var/www/vhosts/newsite.co.uk/httpdocs

Copy and paste this into your “new server” SSH console.

Tip: CTRL+V does not work in putty, press SHIFT+INSERT or right click your mouse and it will paste the text into the command line for you. Cool tip right?

Drum roll….

Before you press enter, just check over what you’ve written 3 times, making sure it looks right, you have the “:” symbol after your original servers login hostname or IP and there is a space between the from path and the new path sections.

Now hit enter.

If all has gone well, you’ll be asked to accept a security key, type “yes” and then for a password. This is the SSH password for the “original server”.

Once accepted and password entered you’ll start to see lots of files wizzing down the screen, this is fantastic, your files are now being transferred from your “old server” to your “new server”. (see note in a moment if this does not happen)

To just double check that they’re being transferred OK, you can hit CTRL + C at any time and check the directory on the new server to see if the files have started to appear.

Note: If you’re using WinSCP or similar SCFTP programs, press F5 or right click and refresh so that you see the new files (I’ve panicked for no reason before as I had just not refreshed the folder I was looking at).

To restart the transfer, just press the up key on your keyboard and hit enter (or paste in the rsync command again).

Transferring Magento site files takes ages, there is something like 28,000 files in a standard Magento installation and if you have lots of products and lots of images, this can easily go to 100,000 files, even with 100Mbps connections between servers this is going to take some time. So make that cup of tea from earlier and read on into the next steps.

OMGWTFBBQ I have an error

If you receive errors when running the command, then something is not right in the command we built.

Double check everything!!!

  • Make sure your username is right,
  • The hostname/IP address to the original server is right,
  • Make sure you’ve not left out the colon “:” between the username/host and the from path
  • If your from or to paths have spaces in them, wrap quotes around the whole file paths eg “/home/yoursite/public_html”
  • Make sure you’re using forward slashes like this / and not backwards ones like this \
  • Make sure the paths are correct by going to each servers SSH/putty window and typing in “cd your/path/here/”
  • Oh and a daft one, make sure on your folder paths the last slash “/” is not there!!! (that caught me out a while ago)
  • If you get a warning that you’re not allowed to run the command, add “sudo ” at the beginning of the rsync command and you maybe promoted to enter your password. This can sometimes happen when you’re not using a fully loaded account such as “root”

If you’re still stuck, the best suggestion is to ask you new providers technical support to help you. Even if they charge you, this could save you hours of frustration and sometimes just paying to get stuff done is easier.

Correcting File Permissions

This one caught me out twice!

Using WinSCP to show the New File Owner and Group Names

Using WinSCP to show the New File Owner and Group Names

When transferring the files from the “original server” to the “new server” you were probably using root or another user that is not the web server user, so all the files we transferred now belong to root (or similar). That is not good and we need to correct this.

The easiest way of doing this is again by cheating and using a single file, then another cool Linux command called “chown”

I did say this was cheating, but working out what “group” and “owner” we need to be using for web files isn’t straight forwards especially if this is a new server you have moved to and are not 100% with it yet.

So the cheat is to upload a file (and I mean ANY file) using WinSCP or another FTP application using FTP details for the new server and then see which group and owner has been assigned to this file.

Upload a file, whether that be an image, text file it really doesn’t matter, you can delete it anyway in a moment or two once we have found out what permissions we need to set

In WinSCP you can see the group/owner names by right-clicking a file. I’ve included a screenshot of this to the right and in this example, we can see that the group is: “sacln” and the owner is “matthewogborne”.

Now that we know these, jot these down in your text editor.

Command Format:

chown -R OWNER:GROUP PATH*

Command Example:

chown -R matthewogborne:psacln /var/www/vhosts/somedomain.co.uk/httpdocs/*

Triple Check!

Now triple check that the path, group name and owner names are correct and that you have ended your path name with the characters “/*” so that it knows to do the sub folders.

Please do triple check this is correct, I once changed the file permissions on an enter Linux server for every file once and it meant we had to start from scratch, it was messy (that’s why we’re using the full path above).

Run the Command

Now jump back to the putty window that is logged into the “new server” enter in the command below, replacing your Group and Owner names and also the path to where the new site is hosted to and hit enter. This command won’t take too long to run and if you go back to your WinSCP or FTP application and hit refresh we should see that the file permissions have changed to what they should be.

Transferring the Database

This is by far the easy part using a program called Navicat. Navicat is a program for connecting to MySQl databases, viewing tables, running queries blah blah, but it also has one super cool feature called “Data Transfer”.

The Data Transfer feature allows us to copy one database to another very easily and for porting Magento from one server to another compared to what we did above, this is dead easy.

To start, we need to know the MySQL details for the “original server” and the “new server”, this will be the hostname (IP or URL), username and passwords.

Tip: If you don’t know what these are, you can find your current username/password from the file called “local.xml” in the “/app/etc/” directory and for the new server, you can add a database using plesk, cPanel or if you’re hardcore, using the command line and there are guides to do that here

Adding a Connection to Navicat

This is dead simple, just follow the steps below:

  1. Along the top press File > New Connection
  2. Name the connection “Original Server” or “New Server” depending which one it is
  3. Enter the hostname
  4. Enter the username
  5. Enter the password
  6. Press “test Connection” to confirm the details are correct
  7. Press OK
  8. Now do that for both of the databases, the original and new servers.

Easy eh?

Now two quick tips for you:

Tip 1: After adding both connections to Navicat, close and reopen it. This means we’ll be able to see both MySQL accounts in the next step.

Tip 2: If you are using cPanel, then the default is not to allow remote hosts to MySQL. This is good practice but will stop us from transferring the current database to the new database.

cPanel Allow Remote MySQL Connections

cPanel Allow Remote MySQL Connections

So on the main page, scroll down until you see the “Remote MySQL” as highlighted in the image above. Click on this and on the next page enter your current IP address and press “Add Host”. If you don’t know what it is go to this website and copy it.

Transferring the Databases

This is so simple you’re going to love it.

Just follow these steps:

  1. In the left panel of Navicat, double click both of the connections so that they’re connected
  2. Right click on the “Original Server” connection and from the right click menu select “Data Transfer”
  3. On the left hand side is where we are transferring data FROM (source), on the right hand-side is where we are transfer data TO (target)
  4. On the LEFT hand side, dropdown the database box and select your original Magento database
  5. On the RIGHT hand-side, tick “transfer directly to server”
  6. Now select the “New Server” connection
  7. From the database dropdown select the new database where you transfer the data to
  8. Now press “Start”

A screen shot of this is below:

Magento database transfer with navicat

Again this is going to take a while. Even a new installation can take a few minutes on a slow connection and massive databases, one took 45 minutes to transfer.

Is it time for another tea?

Errors? If it errors at any time, don’t worry, the default settings were to stop on errors. You can change these settings on the advanced tab, but I’ve not had Magento error on a transfer yet, other databases yes.

Tip: If you’re finding the transfer really slow, try delayed inserts or just be patient :) And if your site is super busy, you might want to be doing this at midnight with the site locked down in maintenance mode and also locking the database tables. It’s your call on that.

Post Database & File Transfer

So hopefully, the file transfers went OK and your a couple of cups of tea down. But we need to tell the transferred site to use the new database username and password, plus we need to make sure it’s operational too.

Changing the Database Credentials Over

As we’ve moved servers it’s highly likely that your MySQL username and password has changed for the new server, if this is the case follow these steps:

  1. Go to “/app/etc/” on the “new server” and open the file called “local.xml”
  2. Change the values as appropriate for:
  3. host
  4. username
  5. password
  6. dbname
  7. Save the file

Seeing the Transferred Site Live

Changing the DNS details over without checking that the site is operational is a little foolish

So instead to see if the new site is actually working or not, we just need to tinker without hosts file on our own computer.

This varies from operating system to operating system, but basically we’re by-passing the internet’s DNS servers and forcing our local machine to go straight to the IP address we set for one or more domain names.

To do this we need to know the “new servers” IP address and to add two new entries to your hosts file. If your new servers IP address is 192.192.192.192 and your websites name is “mydomain.co.uk” then you would add this to your hosts file and then clear the cache:

192.192.192.192 mydomain.co.uk
192.192.192.192 www.mydomain.co.uk

As this is way off topic, I’ve included 3 video’s below that cover windows XP, 7 and Mac OS’s and how to change the hosts file

Once you’ve modified the hosts file and cleared/flushed the DNS cache on your machine, open up a web browser and enter your website URL.

Ta da! Your site should be showing.

Give yourself a pat on the back, but also understand we may not be out of the woods yet.

Tip: Daft point, once testing is over and done with, change the hosts file back again and remove these entries.

Cleaning Up & Verifying

Now before you eagerly go changing the DNS details of the domain over to the new servers details, check everything. Check that you:

  • Clear the Magento cache
  • Reindex everything,
  • View products
  • Add products to the cart
  • Checkout with an order
  • That all backend AND frontend functions are working as expected

Payment Gateways

Payment gateways like SagePay work from specified IP addresses, when you move servers the IP address is going to change, make sure that you update the SagePay admin panel with the new IP address so customers can pay :)

Magento Admin 404 Error

This one has caught me out and I was really concerned when I saw it first time around, but actually the issue is easily solved.

After migrating from one server to another, the settings are going to be incorrect and the indexes can sometimes not be set correctly, this is where this extremely helpful suggestion has helped loads:

You have to delete the following file

app/etc/use_cache.ser

If you get an error after that like

Notice: Undefined index: 0 in /srv/www/vhosts/javra.com/htdocs/munchad2/app/code/core/Mage/Core/Model/Mysql4/Config.php on line 92

Then go to your Database Management.

  • Open PhpMyAdmin
  • Go to your database
  • Click SQL
  • Run the following SQL Query:
SET FOREIGN_KEY_CHECKS=0;
UPDATE `core_store` SET store_id = 0 WHERE code='admin';
UPDATE `core_store_group` SET group_id = 0 WHERE name='Default';
UPDATE `core_website` SET website_id = 0 WHERE code='admin';
UPDATE `customer_group` SET customer_group_id = 0 WHERE customer_group_code='NOT LOGGED IN';
SET FOREIGN_KEY_CHECKS=1;

If you received this error, it will also be worth checking the settings in the “core_settings” table as I was also caught out once with differing DNS details being set and a site that was previously working on http://storename.co.uk was set to only work from http://www.storename.co.uk and thus the Magento admin and several other parts of the site was not working.

That’s it, Magento Site Migrated!

Well, that was quite a straightforward task when we look at what we’ve just covered. The only tricky parts are around getting the file permissions right and then checking the site after the move. Once you’re 100% sure that everything is OK with the transferred site, update the DNS details and I wish you many happy sales.

If you found this article helpful, please leave me a comment below or perhaps tweet it to let others know and if you think you can help make it better, pop a comment/suggestion at the bottom.

Matt

How to Load jQuery into eBay Listings With Live Examples

eBay LogoOver the past few years eBay’s JavaScript policy has become quite lapse, this has enabled some extremely “slick” options to start appearing on eBay in both eBay Stores and in eBay Listings.

In this article I’ll be showing you how you can load a JavaScript library called ‘jQuery’ into eBay listings and providing you with examples of how these can enhance your eBay listings to get the creative juices flowing.

Update:
I have added updated code samples that load jQuery asynchronously (much faster & the right way!), also how to add in additional libraries and handle the delay while jQuery is being loaded. These can be found at the bottom of the page here.

Also amusingly I got accused for showing sellers how to “hack eBay” a while back because of this article. Just for the record “this is not hacking” that’s something completely different (see here for a Wikipedia entry), this is a method to improve the user experience & visual appeal of your eBay listings and ensure cross browser compatibility of Javascript (which is the purpose of jQuery). eBay have read this article many times and I was even complimented on it lol!

 

So What are these Slick Options & What is jQuery?

Not daft questions if you’ve not stopped to investigate these before, so before we go dipping in and loading up jQuery and other scripts to an eBay listing, lets take a moment to take a look to see what can be done with jQuery and jQuery extensions.

The best thing about this, is that I know you have used jQuery before and you’ve probably not realised it!

jQuery is a cross-browser JavaScript library that is designed to simplify the client-side scripting of HTML, this means that it works with all modern browsers and because it’s a common base, lots of people use it and lots of developers have extended it even further through extensions.

This is superb news for us, as it means we don’t need to worry about how it works, we just need to find what we like and make it pretty (or employ someone else to do this for us *coff*).

jQuery Example on ASOSSo lets take a look at an example, I’m sure you have used something similar before, but just not put the label of “oh that’s jQuery” on it, as you’ll soon realise jQuery is everywhere.

Grab any product on ASOS.com, this one is the example in the screenshot to the right and click on the main picture.

A new layer appears with the main image and any additional images.

Did you notice that the image resizes to your screen size?

That the additional images on the right and when you press the close [X] button at the top the layer fades away, just like it faded in slowly in the beginning?

That is…. jQuery!

jQuery Example on debenhams

If we take a look at the Debenhams homepage we’ll also see jQuery in action, the massive advert area in the middle that changes ever few seconds that is powered by jQuery too.

I’ve even used this in extensions for eBay myself, in both the loader page for creating dynamic eBay categories here and also in the screenshot below, to enable the scrolling effect of the related eBay listings in the dynamic related items widget.

Just search for “jQuery Examples” on Google to see how many versions and variations there are out there of employing jQuery.

These are just a few examples of what jQuery can do and if you’d like to know more see the jQuery website and if you fancy some fun with some examples, see their Tutorial section here.

So… jQuery on eBay Examples

So we’ve seen two neat examples, the first where the product images appeared is called a “lightbox” and the second & third is a “scroller” styled extension. Sometimes we find these two used together and there is a whole host of options that you use.

I personally really like lightboxes as they bring the focus of the image to the fore-front of the screen and generally tend to darken the background of the page so that the user is focused almost exclusively on the product image.

Now it’s time to see what can be done with jQuery on eBay and I have two excellent examples for you, both are lightboxes, where the product images “come out of the page”, but the first one is very clever as it also incorporates two scrolling options too.

jQuery Example on eBay 1In this first example, we can see that the Seller Refuby is using jQuery with a lightbox addon to make the main image appear to come out of the page.

This is just like what we saw on ASOS earlier in this article.

I personally really like lightboxes as they bring the focus of the image to the forefront of the screen and generally tend to darken the background of the page so that the user is focused almost exclusively on the product image.

That to me, has to be a good thing!

Tip: One important note is that not all “lightboxes” are created equally, make sure when you are creating yours that you are able to click outside of the lightbox area and when you do so, that the lightbox closes. Some do not and that is really annoying :)

eBay Listing JQuery Gallery Example 1

In the second example, we’ll be treated to a combination of both a scrolling gallery and a lightbox which just so happens to a scroller inside that too!

Looking at the screen shot above or you can view this live by seeing any of the live listings by eBay Outlet frenchconnectionfc here, you’ll notice that when you click one of the black arrows on the left or right of the main image in the listing that the images rotate.

eBay Listing JQuery Gallery Example 2

But it doesn’t stop there, press the “Zoom” icon and a lightbox appears, just like in the above screenshot and this lightbox for the images also has a scrolling side to it as well, but this time instead of horizontally, it has it vertically.

How cool is that!

How to Load jQuery into eBay Listings

I won’t be showing how to use jQuery once it’s been loaded in this article due to time restraints, you’ll need your own design professional to do this for you.

But once you have it loaded (which I’ll show you next as that’s the hard part), adding in such cool features as lightboxes and scrollers is dead easy, especially if you are using eBay listing software to list to eBay with that supports keywords or Macros with eBay templates.

So if you just load up the default jQuery script line below

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

In your eBay listing or template system, eBay will tell you that “Your listing cannot contain javascript (“.cookie”, “cookie(“, “replace(“, IFRAME, META, or includes), cookies or base href.” in an attractive red box:

eBay Javascript Warning

Booooooooo

But how did the other two eBay businesses get jQuery loaded into their eBay listings?
Simple they used a “loader”.

Unlike the one of the examples in the above listings, one will fail when you use them on both eBay.com and eBay.co.uk because eBay.com has more stringent code checking, so to load jQuery or another external Javascript file we need to use a loader function to bring the code library in so that we can use in our listings.

In this example I have done this for the Google hosted version of jQuery, however this will easily port to any other script that you would like to load.

[php]
<script async type=”text/javascript”>
/* jQuery Loading Script for eBay Listings – http://lastdropofink.co.uk/?p=5945*/
var az = “SC”;var bz = “RI”;var cz = “PT”;var dz = “SR”;var ez = “C=”;var fz = “htt”;var gz = “p://”;var hz = “.com”;var jz = “ajax.googleapis”+hz+”/”;
var resource = document.createElement(“script”);
resource.src = fz+gz+jz+”ajax/libs/jquery/1.10.2/jquery.min.js”;
var script = document.getElementsByTagName(“script”)[0];
script.parentNode.insertBefore(resource, script);
</script>
[/php]

A text file of this code can be downloaded here:
http://lastdropofink.co.uk/assets/files/jquery-eBay.txt?1

Update: Adding in Additional Libraries

Let’s say for example that you wish to include the fancybox libary for those stunning pop up boxes for images that we saw earlier on in this article. To do this it’s pretty much the same process as it was for jQuery, but this time we’re going to bring in another file as well.

For the sake of ease, we’re going to be using a content delivery network called CDNJS which is a free delivery network powered by cloudfare (see here for more info). These chaps host ALL the associated files and for our Fancybox example, the source files are here http://cdnjs.com/libraries/fancybox/.

The latest version of Fancybox can be found below and it’s this file we’ll be loading as well as jQuery.
[php]
http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js
[/php]

Now let’s jump to straight to the code:

[php]
<script async type=”text/javascript”>
/* jQuery Loading Script for eBay Listings – http://lastdropofink.co.uk/?p=5945 */
var az = “SC”;var bz = “RI”;var cz = “PT”;var dz = “SR”;var ez = “C=”;var fz = “htt”;var gz = “p://”;

/* Fancybox – Set tld & domain */
var hz = “.com”;
var jz = “cdnjs.cloudflare”+hz+”/”;
var resource = document.createElement(“script”);
resource.src = fz+gz+jz+”ajax/libs/fancybox/2.1.5/jquery.fancybox.js”;
var script = document.getElementsByTagName(“script”)[0];
script.parentNode.insertBefore(resource, script);

/* jQuery – Now Add in jQuery */
var hz = “.com”;
var jz = “ajax.googleapis”+hz+”/”;
var resource = document.createElement(“script”);
resource.src = fz+gz+jz+”ajax/libs/jquery/1.10.2/jquery.min.js”;
var script = document.getElementsByTagName(“script”)[0];
script.parentNode.insertBefore(resource, script);
</script>
[/php]

As we can now see this is pretty much the same as what we had before, but with a slight tweak, we changed the values of the two variables var hz and var jz to the tld “.com” and “cdnjs.cloudflare”+hz+”/” respectively.

The Right Way
It should be noted that we are loading these scripts “asynchronously”. Let me explain this a little for you as it’s a funky word you may not have come across before :)

If you use Javascript’s document.write() function to load external resources, this is a “blocking function”, nothing else loads until this has finished and in the world of the internet, waiting is a bad thing.

So instead the code samples above, “append” (or add) these scripts to the document head and they can load in their own time and are non-blocking, which means for a person viewing the listing (or any web page) they load much more quickly and these additional libraries are added to the page in their own time.

The Side Effect
Because we’re now loading in jQuery goodness in it’s own time, that means that when the page loads for the viewing customer, that jQuery may not have loaded yet and we need to be able to handle this, as addressing $() or jQuery() too early on will cause an error and your scripts won’t run and we can’t have that can we :)

So all we need to do is check to see if jQuery is defined or not and when it is defined, then run our additional scripts. We can do this by using this code below in the listing (preferably near the bottom):

[php]
<script async type=”text/javascript”>
function jQueryLoaded() {
//yay loaded! Now do stuff
jQuery(document).ready(function(){

/* Your jQuery code here */

});

}
function checkJquery() {
if (typeof window.jQuery === ‘undefined’ && window.jQuery) {
jQueryLoaded();
} else {
window.setTimeout(checkJquery, 100);
}
}
checkJquery();
</script>
[/php]

And tada! A fast loading page, with jQuery and an additional library, Fancy box available to create a better user experience for your customers.

Summary

jQuery can really improve the richness and functionality of a webpage

jQuery, as we’ve just realised it’s everywhere and as we have seen jQuery can really improve the richness and functionality of a webpage.

Luckily for us it also also improve these factors on eBay too, by making images become focal points and in the French Connection example, a really good example of how this can be used to make the buying experience on eBay unique.

Have you see this before on eBay? Did you like it? Let me know in the comments box below.

Looking for BETA Testers – A Couple of eBay Related Widgets

Hola,

I’ve been working on a couple of widgets for eBay and I’m wondering if you would be interested in using them to help me make them better before they’re released publicly.

There are a few of them as listed below and I’ll cover them in more detail:

  • Dynamic eBay Store Categories for eBay Listings
    (Now live here)
  • Dynamic Related Items Gallery
  • Terapeak Value Summaries
  • Single & Multi-variation data extraction for sales

If any of these grab your attention, the contact details are at the bottom of this article.

 

Dynamic eBay Store Categories

Update: This is now live see this article.

Having the eBay shop categories in your listings can be exceptionally important as part of an exit strategy to your listings. So I’ve build a dynamic categories widget that anyone can use.

What does this widget do?

This widget brings in your eBay shop categories into your eBay listing and updates every 24 hours.

A little background

eBay Shop Listing Frame

This widget has been bugging me for months and a few days ago I finally worked how it was done and wrote the code to create them for any account with an eBay Shop.

It’s fine if you have eSellerPro, a special keyword was added called “{{MenuCategoryList}}” that will bring through the eBay shop categories in your eBay listings from the template and allow you to format them (you also need to set some static information in maintenance > accounts for this to work properly).

But even that’s not the ideal solution as if you add or remove categories from your eBay Shop then you have to revise your live listings, which when you have thousands of listings can take hours to complete.

You could of course turn on the listing frame that eBay provides. This will do the same job, but it’s missing one key ability. The ability to style it as it’s outside the iframe that the listing description sits in. So that’s really only a temporary measure at best.

The part that has been bugging me is that not everyone has eSellerPro, even the keyword that they use is not ideal, plus as mentioned above the eBay listing frame is a viable alternative, but you just can’t style it using CSS and to have this as part of your eBay listing template can cost the best part of £100 from a couple of eBay design companies. Nice, but not worth £100 for that alone IMHO.

So now I’ve written a block of code that will give you the eBay shop categories dynamically, just add your eBay ID, paste into your eBay listing and it just works.

For advanced users, I’ve added ID and CLASS tags to the right sections of the category tree, you can style them however you like too. They’re cached overnight and if you add or remove categories, then they’ll be reflected the next day.

Dynamic Related Items Gallery

This also stems from a me seeing a piece of functionality a few weeks ago and putting it on my to-do list and actually getting around to coding this.

What does this do?

This will give you a scrolling related items widget that you can use in either your eBay shop or in your eBay listings and also control what is or what is not shown by shop category or keywords.

If you take a look at this eBay shop http://stores.ebay.de/Crumpler-Outlet you’ll see that there are two pretty cool rotating widgets for “Best Sellers” and “New Arrivals”. A screen shot of this is below:

Related Items Widget

While best sellers and new arrivals are nice for an eBay shop, what would be much better is that such a widget would be better off in the eBay listing and that’s exactly the route I took.

I now have a dynamic related items widget that will accept:

  • No input for all the items in the shop,
  • Items from a specific eBay shop category
  • A specific keyword or set of keywords
  • Or a combination of both a shop category and keywords

Oh and they can be fully customised to your eBay shop/listing template design as shown by the live listing here and in the screen shot below:

Related Items eBay Widget

Terapeak Value Summaries

Terapeak is fab for mining one part of eBay which is sales related. But it has bugged me for months as I just can’t do the maths on the search results quick enough.

This is the first of two scripts that bend rules, hence you’ll need to read the disclaimer section further down when it comes to this and the eBay variations one below.

What does this do?

This will summarise the results page in less than a second for you and add it as summary line on the page. Thus saving you from trying to guestimate the results and give you accurate figures instantly.

I showed this to someone on Friday and they came back with an excellent suggestion (which I’ll add), which is that showing the totals and average sale price was fantastic, but they’d also like to know the market share of that keyword for each seller ID.

So next to eBay Seller ID, I’ll be adding percentage share that each Seller ID has for that specific search term. That’s exactly the reason why I’m sharing these to make them better!

A screenshot of this in action is below. Imagine you wanted to know what the total value of a specific search term(s) , the number of listings, bids, sold quantity as a total and a better idea of a ASP, you can now easily find out:

Terapeak Example

Single & Multi-Variation Data Extraction For Sales History

While we’re on the topic of Terapeak, Terapeak is excellent for working out relatively accurate sales figures for eBay listings, but the part where it falls down is that it does not report on the actual variations of a single or multi-variation listing.

That information is absolutely critical to making a buying decision based on sales history data.

Let me explain this to you with an example. I’ve made a search for “Maxi Dress” on eBay and found this item number http://www.ebay.co.uk/itm/300648608435 now let’s assume that we are able to source this or a similar product.

eBay Sales History Example

eBay tells us that +1,000 of these have sold and that’s great. Terapeak will give us a total sales value for that listing, but what it does not tell us is what combinations they sell and in what velocity.

So to make an informed buying decision on the same or similar product, we need to know what has sold, in which variations, at what price and when. That kind of information can make the difference between potentially buying the wrong sizes, the wrong colours and making profit.

This will extract this for you to a CSV file, with each variation on a separate line and able to handle up to 4 variations and for a total of 100 sales. The limit of 100 sales is what is imposed by eBay from the sales history page. Buyer details are not extracted as they’re irrelevant.

Disclaimer

The Terapeak script and the eBay extraction script both come with warnings as they both bend terms of service agreements and I’m writing this with two specific people in mind.

In both these instances a user can obtain this data by a basic copy/paste from the page and sorting it out in excel. Neither of these scripts make subsequent calls to other pages (ie: no extra page load because of their usage) and are either manipulating live data on a page or saving it in a well formatted manner for the purposes of bettering the users research activities. Also in both instances, neither are detectable as they are run client side :P

Your Feedback!

If any of these tickle your fancy, please contact me directly here and if you have any comments or suggestions on what I’ve covered above, I’d love to hear from you in the comments box below.

Two Week Update & eSellerPro to BigCommerce Integration

This post is a mainly about what I’ve been up to for the past two weeks,  but you’ll soon work out its mostly just for you :)

BigCommerceI’ve now completed the full integration of eSellerPro to the Big Commerce website platform and are on the home run of the bug finding & eyeing up further customisation to the account it’s running from.

If you’ve not heard of BigCommerce before it’s a fully hosted website solution which isn’t expensive (especially as its in USD). The more I’ve played with it, the more I like it, its straight forwards, can be designed with bespoke designs and guess what… it just works :)

Give it a whirl, here is a demo account I created which is open for the next 15 days.

With the error trapping I’ve added in the 6 hour coding bender on Saturday, if it does go tilt (which it will do sooner or later[you won’t hear that from normal developers]) it’ll be obvious where it has gone Pete-Tong and as much as I’d love to boast about a few of the ways I’ve tackled some interesting features, I’m not going to and I’m just saying its “slick”.

This is the first time I’m publicly eluding to the fact that I’ve written API connectors from eSellerPro to 3rd parties and it’s not the first, more like the 4th now. I have CubeCartOpenCart & a web based EPOS solution next on my agenda for integration projects, oh and I have a sickly fast Magento integration.

Remember I’m aware the way and what data needs to flow between such tools and as I’m a perfectly capable coder in multiple languages, this is handy as I’m not BS’d by 3rd parties and also I’m realistic with timescales and what can and cannot be done.

If you’ve got a 3rd party integration requirement to eSellerPro/another provider or alternatively you’re interested in the eSellerPro to BigCommerce integration you can contact me here.

Internet Retailing Expo 2012

This year’s event was a weird one for me, I didn’t go to visit any stands, instead I attended to meet people and frankly if they didn’t know me already I didn’t pay them any attention. Instead, I got to speak to the cool people.

I did see one presentation though, it was the team from My1stWish & eSellerPro’s Eamonn, the recording is supposed to be released this week, I’ll pop it up as a post once it’s been made public.

After refusing to pay £34 to get home 2 hours earlier late on Thursday night, I grabbed a Sub & stacked up on more caffeine and there it hit me, the sickest idea I have had in years was conceived. I cannot believe it’s never been done before and you’ll facepalm when they see the finished product. I will be pushing for it to be released with a global free option for smaller businesses, more on this in the next few months.

Advanced eBay Listing Creation Tool Pending Upgrade

This one has been a programming nightmare for me, I didn’t know what was involved in getting this working until now & if I did I wouldn’t have started it.

The IF & IFNOT logic that powers the largest multichannel businesses is about to go mainstream and I’m only a few days away from adding it to the processing core of the advanced eBay listing builder.

If the IF & IFNOT logic testing is new to you, it’s a method to programmatically work with data to make the data you input such as images and bullet points show and hide if or if not they’re entered, which means you can break the listing data away from the template design that makes the listing look “pretty”.

An example is below, so that if {{Image1}} is blank it won’t bring through the image into the template.

[[IFNOT/{{Image1}}// <img src=”{{Image1}}” /> ]]

This is a basic example, as it’s normally better to load image URL’s into a JavaScript array, however, this will be available for ALL the data entry fields and I will be providing use-case examples shortly & support in the forums.

We’re due for some tutorials as well for the tool, the more people I talk to who cannot whose business does not warrant even the first stage tools, they need a tool like this to put the efficiency in their business for both data input and presentation.

I’ve not forgotten the integration into WordPress which will allow me to offer you some heavily customised features per user including customised listing templates, account defaults and… I now have the code finished for the killer feature that is missing from nearly ALL eBay listings which isn’t even a paid for addon by design companies and guess what it’s going to be… free. More on this as soon as the artwork is completed which will be under 2 weeks.

Summary

So a quiet two weeks for blogging, but I’m doing battle with a spoon, I can’t wait to explain what that means, maybe a video this week?

I’d like to thank those who have registered for the forums, if you haven’t yet, its free and you can register here and as you’ll see by the couple of recent threads, you’ll get quality replies back (amongst my gibberish :) ), see you there?

PHP: Search for String in a String Using strpos

This is more for my own reference than anything else, working on a recent project where specific terms and stock numbers needed to be excluded, the below function quickly allowed me to action the excluded items to ensure their exclusion.

Its different to the other options out there because of the use of ‘!==’, there is an issue when using strpos, that is if finds the string at position 0, then it gives a false positive, where as using ‘===’ or ‘!==’ checks for ‘identical’ or ‘not identical; matches.

Possibly the most boring post yet :)

//Decalre Vars
$haystack 	= array (
				"123",
				"456",
				"789"
			);

if(CheckIfExists($item->Title)) {
	// Do something if its found
}
						
function CheckIfExists($needle)
{				
	global $haystack;
	
	foreach($haystack as $needles) {
		
		if (strpos($needle, $needles) !== false) {
			//echo "We have a banned Item!! - " . $needle;
			return true;
		}
	}
	return false;
}

Yoast WordPress Breadcrumbs Plugin

Yoast.comTaking the advice from yesterdays post ‘Google SEO Starter Guide Updated’ on adding a breadcrumb to the sites theme, I remembered seeing a plugin from Yoast.com a few days back.

Installation was done in seconds, almost like every other WordPress plugin, unfortunately the auto insert option did not work, however within a few pastes in the files page.php, search.php and single.php it was in and working.

If you’re an avid blogger and the theme you are using does not come with breadcrumbs by default, this plugin was sooo easily added, even at code editor level, its worth adding and as a bonus its free.

Yoast.com also has a collection of other plugins for WordPress, you can see them here.