How To Convert An MMUI Store To A CSSUI Miva Merchant Store

We get asked fairly often by store owners how they can convert their store from MMUI to CSSUI. To help clarify the process, we’ve decided to outline the steps of the conversion process in this blog post.

Before I get into the specifics, let’s first understand exactly what were talking about here with the different UI’s (user interfaces). Miva Merchant 5.5 shipped with a default interface called MMUI or Miva Merchant 5.5 User Interface.  Many of you are familiar with its default look and feel:

In its default form, it was nothing special to look at, but it did provide the foundation for all the page templates and functionality that made up the Miva Merchant 5.5 store.

When PR7 was released, we decided that the default UI needed a more robust foundation and updated page templates to reflect more modern HTML coding standards. For any new Miva Merchant 5.5 installation, the default UI is now called CSSUI.

CSSUI is a ground-up rewrite of all of the default Miva Merchant 5.5 page templates that rely heavily on CSS for all of their styling. CSSUI also contains many updates of a lot of the times that power the page templates behind the scenes.

CSSUI Vs. MMUI—Should I Convert My Store?

Now that you have a little background on why there are two different UI’s, let’s answer the question of : “should I convert my store?” One misconception that commonly comes up is that you need to be on CSSUI to get the new functionality that we are releasing, such as inventory at the attribute level (released in PR7) or multiple images with zoom (coming in PR8). This is not the case. All new functionality is not UI specific. You will get the new functionality on both MMUI and CSSUI.

So you should you convert? The answer for most people is going to be no. Switching UI’s is not like upgrading your store. You have to completely start over. It is a BIG project. If your store is currently working OK and you are not already planning a redesign then most likely the cost to convert and change to CSSUI will out weight any benefits on being on the new CSSUI foundation.

There are two conditions under which I would suggest converting to CSSUI from an existing MMUI store:

1. Your MMUI store is very small without a lot of customization and modules and you want to use one of our CSSUI templates to redesign your store.

2. You are already planning a complete redesign of your Miva Merchant 5.5 store. If you are already planning to redo your store then it does make sense to convert your store over to CSSUI since you will be rebuilding most of the store anyway and it won’t take much more effort to start on the CSSUI foundation.

The Conversion Process

Now that you have decided you want to convert your existing MMUI store to CSSUI lets get into the details. Here at Miva Merchant we actually went through this exact scenario when we redesigned our website

We had an existing MMUI store that we converted to CSSUI during the redesign. I can tell you first hand that it is not simple and requires manually copying tables from the database but hopefully this tutorial will guide you in the right direction.

Converting to CSSUI requires starting over and building your store from scratch. The first step in this whole process is to get a development store setup with a blank install of Miva Merchant 5.5 on CSSUI. You would then modify the page templates to fit your new look and feel.

Once your dev store has your new design its time to start thinking about the data.

There are four main areas to think about

• Product Data/Category Data
• Modules And Module Data
• Order History Data
• Customer Data
• Product/Category Data

The product and category data is very similar to the customer data. You will want to copy over these tables via the database so keep all the same product ID’s.

Here are the tables you will need:

• S01_Products
• S01_ProductKits
• S01_ProductVariantParts
• S01_ProductVariantPricing
• S01_ProductVariants
• S01_RelatedProducts
• S01_Options
• S01_Attributes
• S01_AttributeTemplateAttrs
• S01_AttributeTemlateOptions
• S01_AttributeTemplates
• S01_Categories
• S01_CategoriesXProduct

Customer Data

Most of the time when doing a MM5.5 (MMUI)  to an MM5.5 (CSSUI) store conversion, you can just export the customer data using the standard export and re-import it into the new store. However, if you have modules that rely on the customer’s table such as wish lists or multiple addresses, these usually store a reference to the Customer ID. If you just did a standard import / export of the customer data then all the Customer ID’s in the Miva Merchant 5.5 database would change. Instead, we need to copy the customers table over via the database.

In PhpMyAdmin look for the s01_Customers table on your current store and export it to a sql file. Then, in your new CSSUI store import this file, making sure to drop what is currently in the table if you created test customer accounts during testing. This will import the customers table and keep the same Customer ID’s so that any module that references these ID’s will still work correctly.

Modules And Module Data

Now it’s time to re-install all your modules. For each module, follow the installation instructions and add any items to your page templates as required by the module. Test and verify that the module works before you start moving over the data.

If your store code changed from your old store to the new store, you probably are going to run into licensing issues with the modules. You will need to contact each module developer and get this sorted out before you can install your modules in your development environment.

Once you have the modules working as they should, you can now work on the module data transfer. Since the module database tables will be the same from your MMUI store to your CSSUI store, you should be able to copy over the tables for each module exactly without any issues.

You may run into issues with some modules that store their data in the database and some may write the data to text files on the server. An example of this is Addendum Module. It stores all the module data in a text file on the server. If you are using this module, you will need to copy the file from your current server to your dev server in the same path in order to get your data to transfer over.

Another issue you may run into is trying to determine which database table belong to which module. If it is not clear by the names of the tables, then I would suggest contacting the module developer directly and asking them directly. Most module developers create table names that are close to their module names but if you are unsure, it is always better to ask then to guess.

Order History

Now we have the customers, products, categories and all module data the last thing we need to transfer over is all the past orders. This one gets tricky because the order tables contain references to payment module id and shipping module ids. These ids have changed in your CSSUI store because things were installed in a different order. This is not a huge issue but it will require you to update these module ID’s to the new ones in order for everything to work correctly.

Steps

1. Make sure that both stores are completely up-to-date so that we know that the database structure will match across both stores.

2. Copy over the following order tables from live into dev:

• s01_Batches
• s01_Order Charges
• s01_Order Items
• s01_Order Options
• s01_Order Payments
• s01_Order Returns
• s01_Orders

*Note that if you have multiple stores to make sure that you are working with the correct store database (s01, s02,s03, etc.)

Once you copy over these tables, you will need to update a few columns to the new module ID’s.

3. For each shipping method and each payment method, you will need to get rid of the old ID and assign the new ID. The module ID’s are located in the Modules table. This contains a list of all installed modules and their ID’s. You will want to make a list of all the shipping and payment modules you currently use in the live store and pull their ids from the live store database.

If you used to use to use a different gateway or shipping module in the past than what you currently use and you want to access these old orders via the admin then you will need to activate this gateway or shipping method on the dev store so you can swap out the ids in the orders table. This will keep all the module references intact.

Now that you have a list of all the old payment and shipping module ID’s and a list of their corresponding ID in the new store we need to run some updated commands to updated our dev store database.

In the s01_Orders table we need to update the ship_id column. This column contains the ID of the shipping module used on the order. Here is an example:

Update s01_Orders SET ship_id=85 WHERE ship_id=111;

In the example above, you would change 85 and 111 to be your real old ID with the new ID. If your store uses multiple shipping modules then you will to do this for each shipping module you have ever used.

Next, in the s01_Order Payments table we need to update the pay_id column. It would look something like this:

Update s01_Order Payments SET pay_id=85 WHERE pay_id=111;

The last table we need to update is the Order Charges table. Here there is a column called module_id which contains the module ID for the charge. Some of these will be shipping module ids some will be a sales tax module id and some could be other module ids like discount modules or coupons. All of these ids will need to be updated as well.

Update s01_Order Charges SET module_id=85 WHERE module_id=111;

4. The last step in this process is to updated the s01_Store Keys table to avoid conflicts with new orders. You can probably get away with copying the whole table from the live store tho the dev store, but you will want to be careful to avoid ID conflicts while doing so.  For example, if you have 100 categories in your live store but 200 categories in your dev store, you will want to make this the higher number.

These values are what Miva Merchant 5.5 uses for the next unique ID. When you create a new category, it will take the value of 200 and add one to the ID for this category. If you don’t have a high enough number in this field it will be a duplicate of an existing Category ID and you will get lots of errors when you try to add a new category.

A general of thumb is to make sure that you use the higher number for the two tables for each column. This should help to prevent duplicate ID’s.

Some important ones that you will want to be concerned with are:

• Orders
• Batches
• Categories
• Products
• Attributes
• Options
• Basket
• Basket Items
• Basket Charges
• Customers
• Order Shipments
• Order Payments
• Order Returns

You should now be able to log into the Admin and view all old order data without any errors. If you are seeing errors in the Admin at this point, that means that one of the module references was not updated correctly.

At this point you should have your new CSSUI store with your new design and all your previous orders, product, customer and module data from your old MMUI store. Like I said at the beginning of this post, a MMUI to CSSUI conversion can get very complicated and may not be worth the effort involved.

However, as long as you are very thorough with your data transfer, all your old information should port over your new CSSUI store just fine.