Checkout Manager Upgrade
May 15, 2008 Yahoo! Store & Merchant Solutions® No CommentsAs many of you already know, Yahoo! is phasing out the older versions of checkout and now requiring everyone to switch over to Checkout Manager. If you are using an older version of checkout, you will see a message like the one below:
“Your store is using an older version of checkout, which we will be retiring later this year, on August 15, 2008. Until June 30, 2008, you will be able to test your checkout using Checkout Manager, with the option to rollback if you encounter any problems. After June 30, you will no longer be able to rollback to older versions of checkout once Checkout Manager is enabled. Please consult our migration help for more information.”
So if you’re like many store owners who haven’t upgraded you’re wondering what’s involved, what has to be done, and how do I make sure not to break my store in the process. Yahoo has information on their site but hopefully some of the information in this blog post will help. There may be a follow up entry at some point when I also figure out all the points that people are wondering about that I haven’t mentioned.
Now on to the meat of the information.
First, you need to know that checkout manager in regards to the basics of branding boil down to three primary areas. These are your header, side navigation and footer. There are also items such as colors, fonts and buttons which also can be changed. But unlike the previous checkouts which had a cart page that was directly connected to the store editor because the RTML generated the framework around your cart page, checkout manager doesn’t have any direct connection to the store editor. So as a general rule the html on your pages will be static.
Now I’m not going to go into all the particulars quite yet on every setting in checkout manager as that’s a bit overwhelming, but at least I can give you some of the basics of what’s involved on moving your branding over. Obviously we have a Checkout Manager Implementation Service as do many other store designers, but I want to give some information for those of you that want to give it a crack on your own.
Most importantly remember that you can always test before going live the first time so this gives you the flexibility to try it all out on your own. To test go to Checkout Manager in the store manager, and click on the link for “Test your Checkout Manager Settings”. After you set the cookie by following the steps you’ll have to publish your checkout settings (and possibly your store) but then when you checkout from that computer it will go through checkout manager while everyone else still gets the old checkout.
So now other than the basic settings of how many pages, what pages to show, etc. What things do I need to transfer in, and how do I do it?
Well to start with the major sections first, you’re going to need to get the html from your site’s header, side nav and footer. Obviously if you don’t care to move some of these things into the checkout process you don’t have to get that html. Each of these different blocks of html are going to need to have some reworking done (more about that later) and each will then be placed in the appropriate area in Checkout Manager - Global Settings - Checkout Wrapper and in the Checkout Regions section you’ll see boxes for each.
Now it would be great if I could simply view the source of my live page, copy the html for each area, and paste it in. Unfortunately it’s not quite that simple. The main issues are going to be link URLs, source URLs for files such as images, and CSS you may need.
For the link urls you’re going to want to review every A (link) tag in your html. All links should be hard coded full links such as http://www.yourstorewizards.com/accordion-nav.html so it has the full url. Relative links such as /accordion-nav.html won’t work since the checkout process and cart are at a different domain than your own. So make sure to catch them all.
For the files that are referenced, primarily images, you want to look for any src attributes on the tags. For each file the simplest answer is to get every image, save it on your computer, and upload it to the FILES section in the store editor (and make sure to publish the staged files when you’re done). Some of the files will already be there and so for those you can skip this step, but for those that aren’t you want to get them there. Once they’re all up, go through your html and make sure any src references are RELATIVE. Yes, the exact opposite of the links. So you want the src to look like something like “/lib/XXXXXXX/abc.gif” (where XXXXXX is your store account id). The main reason for this is so the images will get served AND they can be pulled correctly either from a secure or non-secure page without getting any warnings.
Now depending on your layout you may have CSS that’s required to stylize your header, nav, or footers. Unfortunately this isn’t something that is quite as cut and dried. Depending on your store version and how it’s coded it can be in an external file (or files) or inline in your html. So for now I’m going to have to assume you can at least find any css you need. Once you have it you have a couple of choices (after you make sure any image references in the css are also RELATIVE).
1. You can place it inline in the header in your checkout wrapper area (just wrap it with the needed <style> </style> tags).
2. You can put a link tag to pull a file (which you’ve put in your files section if you’ve been paying attention), such as:
<LINK rel=“stylesheet” type=“text/css” name=“mystyles” href=“/lib/XXXXXXXXXXX/styles.css”>
3. You could get really adventurous and go to Checkout Manager - Visual Customization and go to a completely custom style sheet. This is NOT for the faint of heart and in most cases it’s overkill.
Now I’ve already rambled a lot and there’s much more that you can do in checkout manager, but at least getting these 3 key sections over will get your look much more like your site. But f you find that the look isn’t coming out right for any of your sections, make sure to check out your html. Issues with open/closing tags, improper html, html that shouldn’t be included, etc. can all cause various issues. There can be other things like CSS problems, html that isn’t xhtml compliant, etc. but at least this gets you started.
One thing you will want to make sure to copy over before going live is the text and possibly scripts from your current checkout. So make sure to go to the old checkout settings and copy over what you need, but just be forewarned that if you have scripts that report sales amounts or information or floating cart coding, those will need to be updated for the new checkout. Obviously that’s beyond this post but just so you know in advance before you start having affiliates complaining that sales aren’t getting reported.
That’s it for now and let me know the various questions or things you’d like to see if/when I come back for round two on upgrading to Checkout Manager and other things you should look at.
