New X-Cart.com home page

X-Cart is downloadable PHP shopping cart software.
The solution is template-based and open source, has tons of features out of box, even more can be added by means of modules (offered by both X-Cart team and large developers community), yet it's easy to customize. The e-commerce platform is currently used in 25,000+ online businesses from more than 100 countries, and is being actively developed.

The site is used to promote and sell this platform, so the attractiveness of the site, convenient navigation for visitors, user-friendly interface are of great importance.

Why Drupal was chosen: 

Why redesign?

Our product, X-Cart appeared on the market back in 2001, at the same time the very first version of the site was launched. It looked cool at that time. And despite we did update it, the site was getting out of date more and more, it lacked that ‘modern spirit’, you know, which was absolutely unacceptable for the company which wants to be competitive as a web-application provider. The question about the necessity to redesign the existing site raised again and again.

Our previous site was mostly a static one (with little to none use of database) built using PHP + Smarty templates, all the changes being introduced by webmaster only, so the system was rather awkward.

And once we realized it’s high time we switched the engine, the choice of platform for X-Cart.com was in some degree predetermined, let me explain why.

Drupal experience

The back history is such that Qualiteam (the vendor of LiteCommerce and X-Cart e-commerce solutions) was preparing to release a new product, Litecommerce3 (now known as X-Cart Next) which was planned not as purely an e-commerce engine but as ‘e-commerce CMS’: LC3 + Drupal. Another site of ours, Litecommerce.com had already used Drupal by that moment, and demo within its structure was powered by LC3.

The new X-Cart.com was intended to become a showcase of a new platform we developed. However in the course of time LC3 aka X-Cart Next started to distance itself from Drupal. By the way it has not resulted in complete ‘divorce' , we still offer Drupal as a great CMS for X-Cart Next in the form of optional module.

Probably, Joomla?

I should mention the alternative solution we considered. Joomla, of course. There are lots of ‘Holy Wars’ between Drupal and Joomla sympathizers. They were and remain concurrent solutions, each with its pros and cons. Joomla was used for our hosted solution - the X-Shops ( now discontinued), so we were acquainted with it too. Thus we had some experience dealing with both, and based on this experience we concluded that Drupal meets our needs better - it has good API, it’s being actively developed, has huge community, seems more flexible, contains less poorly written code in core and modules. Taxonomy is a strong argument too.

Still Drupal!

Finally the decision was taken to build our new site using Drupal only, without LC3 core at all, as the latter lacked CMS functionality, be it either default ‘out-of-box’ or expanded by modules package.
Switch to Drupal which is not only one of the best existing CMS, but also a framework could give us flexibility and expand-ability we badly needed, and 20 000+ modules played the role too.

Describe the project (goals, requirements and outcome): 

We had the following goals set:

  • Re-design our site completely making it more up to date.
  • Preserve the benefits that our home-made system provided yet employ a new CMS with much better back-end abilities
  • Implement multiple users with configurable rights to access the back-end functions
  • Integrate with our existing ordering and CRM system
  • Maintain SEO-friendliness of our web-site; at least preserve ranking, or, better, improve SEO.
  • Reduce web-site bounce rate; increase conversions.

Having examined the list above, the webmaster suggested the following technical realization:

We also intended to implement WRT, but had to postpone the realization of this feature due to lack of resources. There were the other challenging tasks of higher importance.

Workflow

We needed to transfer all the content. Home page, products descriptions, news, descriptions of services etc.

Blog

Before redisign there was no blog at all. There was a ‘news’ section without opportunity to comment the updates somehow. The new site has a blog, and the existing news announcements were manually transferred without any scripts at all.

The blog publications are also delivered to our users via RSS feed.

For comments we used Disqus because of its convenience (UI, tree-like commentaries structure, Ajax, authorization via popular social networks, ability to grab the comments into internal system).

‘Graphic prototypes’ page

Much more interesting from technical point of view was the transfer of ‘graphic prototypes’ as they’re integrated with our in home CRM, the latter being able to automatically update pricing, descriptions, number of licenses sold etc.

Outcome

Generally we are very satisfied and happy with the results. Our customers definitely love the new site. They find it very usable with much better navigation. Bounce rate decreased by 30%.

Our back-end staff loves it, too. They can change everything they need and no longer have to wait for webmaster to come, look and do a content change for them.

Still, there’s much to do. We monitor the customers activity via Google Analitics, track the customers flow and keep on improving the site.

Modules/Themes/Distributions
Key modules/theme/distribution used: 
Why these modules/theme/distribution were chosen: 

This is rather a standard package.
Just like many other site owners, we needed a blog with RSS feed, and Google Analytics is a must-have nowadays for every site. Breadcrumbs are good for SEO and also make navigation more convenient for customers.

Community contributions: 

lc3_clean theme was contributed within the work. This theme may be used as a base to build your own theme for e-commerce site with using "X-Cart Next" e-commerce solution (ex-LiteCommerce 3) or regular Drupal 7 installations:
http://drupal.org/project/lc3_clean

Team members: 
Project team: 

Maxim Sokolov
Alexander Mulin
Denis Nikiforov
Maxim Vydrin
X-Cart team aka Creative Technologies LLC

X-Cart plans pricing page
X-Cart Extensions page

Comments

This is niiiiiice. Great job with the design!

Emko

I really like the site design specially the slideshow in the middle of the homepage. which drupal module are you using for that?
I have recently submitted my case study (https://drupal.org/node/2005232) for my quotes website. Please let me know if you have any feedback.

Thank you for your question, Lorenzo.

We didn't use any ready-made module ( not to depend on 3rd party developers), the webmaster has created the functionality in question manually, it was done as follows:

1. Create content type "Success stories" :
- Add necessary fields ( image, descriptions, URL,etc)
- Add"Success stories" themselves.

2. create 'View'
- admin menu, Structure -> Views ->create new or select existing
- we selected existing ( Story List view) and added a block with new parameters.
Filter criteria:
Content: Published (Yes)
Content: Type (= Story)
Content: Show on front page (= Y)

Pager
Use pager: Display a specified number of items | 10 items (we just do not need more than 10)

Machine Name: front_page_stories

3. download jquery.cycle.all.js from http://jquery.malsup.com/cycle/ and upload to your server.
)

4)Add php code to the page you need (home page in our case):

<?php
<?php print views_embed_view('story_list', 'front_page_stories');
?>

?>

5)Add js code to the same page:

<script  type="text/javascript">
if (jQuery(".stories-block .stories-block-inner .view-content").length) {
          jQuery(".stories-block .stories-block-inner .view-content").cycle({
              fx: "scrollHorz",
              timeout: 0,
              prev: "#story-next",
              next: "#story-prev",
              speed: 1000,
              pause: true,
              before: function(curr, next, opts) {opts.animOut.opacity = 0;}
            });
            }
        });
</script>

6. Add CSS and images for navigation ( listing).

* * *

We do not state that this the the best solution, nor do we promise that it will work as is for any other store. We're just sharing our experience and still hope that it can be helpful for other drupal users.