In 2009 Appnovation Technologies was asked to design and develop a Drupal based community and e-commerce website called Cargoh. The driving idea behind the site is to create a “social marketplace” for independent artists from all over the world to be able to showcase and sell their products and services. It features community tools such as forums, an internal messaging system and events section.

Cargoh.com was founded by Paul and Cariann Burger when they noticed the lack of avenues for independent artists, designers and musicians to get their work to the world. They realized that some of the most talented people in the world were making them coffee in the morning at the local coffee shop. They set out to change that by creating a super accessible, highly affordable and unbelievably feature rich venue for artists, designers and musicians to sell the things they create. Above that, they wanted to create the world's best online shopping mall for all the uniquely independent products in the world. So from those two missions, Cargoh.com was born. The world's most exciting social marketplace for independent creatives!

Goals and Challenges

The focus of Cargoh is to be “a single destination where artists, musicians, designers, and creators can be seen, heard, and collected in one community driven marketplace”. Keeping that in mind the design and functionality needed to be able to take into account all genres of art and how best to showcase them. Most types of products featured on the site were sufficient with visual showcasing via image uploads. Multiple images are able to be uploaded per product in order to provide alternate views when needed. For musicians the ability to upload songs through a song player on store fronts was developed.

Coming up with the design for Cargoh.com was an ongoing process that saw the site evolve many times up until site deployment. The layout mirrors other e-commerce sites in being product-centric. Wireframes were created using Omnigraffle for Mac. In the end it was decided that the site themes and colours would be kept minimal in order to let the products for sale by the site’s users be the focus keeping with the philosophy of Cargoh.com’s founders. The base theme layer used for the site was Garland that the designers stripped down and built on top of.

Before launch the client had only a rough idea regarding the amount of traffic. During development, we were periodically monitoring resource usage (such as memory and average response time) which gave us precise metrics of how many concurrent users could interact with the site given a specific hardware and software configuration. For launch we allocated a typical configuration to match the application requirements to the expected load. We since continuously monitor the website to identify bottlenecks, and we invest the required resources (memory, CPU, configuration, caching techniques, DB slaves, code optimization, query optimization, etc) in order to eliminate them in a very competitive way, which means we invest our resources where they have the largest impact.

Why Drupal?

The team decided to use Drupal for Cargoh for the following reasons:

  1. The Ubercart Marketplace module provides the complete framework for building B2B trading sites. This makes the development process much more efficient.
  2. Ubercart integrates with multiple payment gateways which provides portability. If the team would like to change from using PayPal to another payment gateway, not a lot of development work will need to be done.
  3. On top of the E-Commerce features, Drupal has modules that provide social networking capabilities such as forums and blogs. It is one of the few platforms that allow for complete integration of E-Commerce and Social Networking features.
  4. Drupal is scalable and has been proven to be able to serve content to over 500,000 unique visitors per month.

Site Functionalities

The focus of Cargoh is to be “a single destination where artists, musicians, designers, and creators can be seen, heard, and collected in one community driven marketplace”. To promote the community aspect the site incorporates user profiles, discussion forums, an events listing area and an internal messaging system to help buyers, sellers and all around art enthusiasts connect. Users are able to select and show a list of their favourite stores and connect to their Twitter and Facebook accounts. The homepage features a blog titled “cargoh loves” that covers the owners’ favourite stores, events or recent news in the art world.

The e-commerce component of the site is driven by Ubercart and integrates both PayPal and Beanstream. Other pluses afforded to Sellers are the ability to customize their storefronts using image and music uploads, an internal order and stock tracking system and integration of Google Analytics. Products and stores are promoted to the showcase on the homepage as users “bump” or like items for sale. There is also an advanced search that can be narrowed down by subcategories for products, shipping locations and store location.

Module Use

There were 29 modules used for the site including 9 custom modules

Contributed Modules

There were a number of contributed modules used for the project. Most notable are:

  • Fbconnect - allows users to login on a Drupal website through the Facebook Connect API using their Facebook login and password
  • MailChimp - provides integration with the MailChimp email delivery service that provides support for an unlimited number of mailing lists
  • Google Analytics - allows you to add statistics features to your site like selectively tracking certain users, roles and pages
  • Ubercart Marketplace - adds multiple seller support to the Ubercart module
  • Voting - helps developers who want to use a standardized API and schema for storing, retrieving, and tabulating votes for Drupal content

Custom Modules

  • Indie_attribute - Processes information regarding product attributes such as size and color
  • Indie_banner - Provides a manner to supply functionalities to cargoh_banner content type
  • Indie_buyer - Processes information regarding a buyer
  • Indie_feature - Module for the feature section on the homepage
  • Indie_membership - Handles membership signup, upgrade and downgrade
  • Indie_search - Modifies Drupal's advanced search
  • Indie_seller - Processes information regarding a seller
  • Indie_storefront - Module for defining storefront and product page specific items
  • Indie_ubercart - Custom code to modify ubercart

Project Team

The Cargoh website was built by a team of seven people:

  • Two designers: One lead that composed the majority of the site design and an intermediate that concentrated on theming.
  • Four Drupal developers: One lead overseeing and advising, one intermediate that focused on the e-commerce component and two intermediates that worked on the general site.
  • One project manager.

Basecamp was used for most project management tasks and WebEX was used extensively for information sharing.

Drupal Version

The Cargoh site is in Drupal 6.15

Hosting Information

The site is hosted on Rackspace Cloud servers running Apache, MySQL and PHP 5.2.10.

Comments

joehenriod’s picture

I like where you sign up for your own store, that was done well. I wouldn't mind a sample store/demo account that I could play around in though.

Arnold Leung’s picture

We will definitely tell the Cargoh team about this.

Thanks!
Arnold

Kuldip Gohil’s picture

Very nice site. absolutely this should be on front page of d.o.

one suggestion/question : at every block in your front page "View" button has links with node/[nid]" and image has link with alias btw both are opening same page? for eg. http://www.cargoh.com/product/philosophy-lapover-tee view link has http://www.cargoh.com/node/1448
I think l() function is not used for "view" button/link.

Thank you,
Kuldip

scott.bell’s picture

Thanks for the tip...we'll look into it right away. The beauty of beta!

dzieyzone’s picture

why not use the global redirect to only use 1 path.

joecanti’s picture

Great site! Very nice clean design which is easy to navigate. +1 for Drupal front page as it demonstrates what so many people ask about in the forums...

I especially like the forms - how did you get them looking nice - greyed out with rounded edges??

Another quick question - how have you set up your countries on the advanced search page? Is that the postal module with downloaded states/provinces or more of a taxonomy based solution??

Thanks and nice job,

Joe

scott.bell’s picture

Thanks for the kind words.

The forms are purely css! The rounded corners are done with -moz-border-radius and -webkit-border-radius. (sorry IE users!) They form elements also have a slight gradient background on them so that the taller they are (textareas) the the cooler they look.

Anonymous’s picture

For the list of countries in the advanced search page we used the Location module.

joecanti’s picture

Ah thanks for the replies. It's a very nicely styled site - and one thing that strikes me is it has really been taylored to the people who will use it - clearly a lot of thought gone into this one!

And thanks for posting and answering - it's good that you are community orientated,

Joe

Stevo_0’s picture

Wow, absolutely incredible,

signed up as a member to check it out in more detail, alot of effort and thought has gone into this site. I wonder how long this took, 3-6 months minimum I should hope? How many people working on the project?

Loved how you styled the forms to tab up and down, almost everything about the site too be honest, user profile, store registration page and options, even personal google analytics code =). Ive slowly stepped back to a minimilistic approach to web design in regards to colours and layout. A site can be much more powerful with blacks/whites/greys if you want to have a crisp clean design. And like mentioned brings focus to the products.

Not sure why this didnt get front page yet? Maybe because there are no modules contributed back to drupal.org?

Either way absolutely stunning, but you should know that already right? =)

Stevo_0’s picture

even the blog section! purely original.. Like how its broken up into categories like that =)

Also the breadbrumbs.. looking to apply that style the next chance i get =)

Must of had a good designer on your hands.

scott.bell’s picture

Stevo_O,

Really glad you like the site. For the most part it was a team of 2 developers and one designer working on this project, and you're right on the mark about the timeline and the effort that has gone into the site. It just doesn't stop there with a site like this though, as it will always need to evolve. Watch out etsy!

shareumentarian-dupe’s picture

Great site for art and commerce, well thought out, not allot of drupal back end showing through, jsust functionality, which is refreshing, atawaytogo

Teraelectron’s picture

I agree not a lot of extraneous stuff, very easy feel

vkr11’s picture

Excellent site !
Can you tell us what other major modules you used?

Also what did you use for:
1. Creating store page
2. Bump
3. The mega drop down menu for SHOP (love it)

Thanks

scott.bell’s picture

Hi vkr11,

Stores are created as a CCK content type. We connect products to the appropriate user store with the a unqiue storeid, and the logic that there can only be one store per user.

Bumps use the voting api and plus-1 modules.

The dropdown menu for shop is just some custom theming-foo ;)

Regards,

Scott

vkr11’s picture

Great, thanks

BeaPower’s picture

Nice site! How did you get the hover images on the homepage over products?

scott.bell’s picture

Hi BeaPower,

The hover is just some simple jQuery using the hover() event.

$("#myproductID").hover(function() { // hover in stuff }, function() { //hover out stuff });

Something along those lines :) http://api.jquery.com/hover/ for more information.

Scott

BeaPower’s picture

Thanks so much for the reply... how do you implement the code? Through imagecache?

scott.bell’s picture

The product listings are generated with views. Then using the views "row" template I output the variables, including the fistbump in a hidden div. Then using jQuery I fade in and fade out the fistbump div when the user hovers over that product's container.

I think perhaps we'll have to put together a blog/tutorial to better explain this in more detail, so keep an eye on our blog at appnovation.com/blog

Regards,

Scott

JeniferTucker’s picture

Wow... what a site. Love the home page when you hover over the product images. Is this the tutorial you mentioned you'll be adding to your blog? Would be very interested.

scott.bell’s picture

I haven't done the tutorial on the company blog yet but if you scroll down there's some code that explains the process briefly.

StevenMurcer’s picture

Love the site! great work.

ocamp’s picture

Hi thanks for sharing this.

How long has cargoh been around?

The people that were involved with the site, how much experience did they have, like how many years in websites/drupal? What sort of budget did you have for the site?

Can we see a full list of all the modules you used?

You said you have a custom module to modify ubercarts code. Was there problems with ubercart as it is? Why would you need to modify ubercarts code?

Thanks

scott.bell’s picture

Greetings,

Cargoh has been live for only a couple of months. I was the lead designer for the site and I've been working with Drupal for 3.5 years now, and the developers here at Appnovation have more than that. I'm not too sure if I can reveal the details about the budget or not, so I apologize I am not able to answer that question.

Here is the full list of modules!

- abuse
- administration menu
- MP3 Player
- Fbconnect
- CCK
- Content Profile
- Date/Time modules
- Flag
- Hierarchichal Select
- Imagecache
- Location
- Privatemsg
- Mailchimp
- Nodewords
- Nodequeue
- Advanced Forum
- Favorite nodes
- FCKeditor
- FAQ
- LoginToboggan
- Pathauto
- Secure Pages
- SexyBoookmarks
- Token
- TweetMeme
- Twitter
- Signup
- Google Analytics
- Ubercart core and Ubercart Marketplace
- Views
- Plus 1
- Voting API

The custom modules used in conjuction with ubercart allow us to use Beanstream for remote CC processing, membership levels, attributes among other things. Clients always have more specific needs so that is what the custom modules allow us to do.

Hope that answers your questions,

Regards,
Scott

j0rd’s picture

As a Canadian Ubercart Developer, I would like to see the beanstream module released back into the community.

Currently there's only a 1/2 assess version, and since it's a wonderful gateway, it would be nice if we could get our hands on it.

http://www.ubercart.org/project/Beanstream%20gateway

Cheers,
Jordan

Arnold Leung’s picture

Yeh this is something we will be discussing with Paul and Carianne (who owns the site) about.

Arnold
www.appnovation.com

parasox’s picture

Can you explain the rationale for using Beanstream versus say PayPal Pro? I also looked at Amazon's FPS or Google Checkout, but they both require the user to have an account, whereas Paypal doesn't. Paypal would have been much easier for you to setup, so why Beanstream?

jimajamma’s picture

....and Quick Tabs, right?

scott.bell’s picture

Quicktabs yes!

BeaPower’s picture

Hi, what are you using the footer - footermap?

scott.bell’s picture

The footer is custom coded as well. I've embedded a view for the blog listings but the rest of the information is just static and hardcoded into a template file

[edit] Each column in the footer is a block. The middle one being a views block, the other two using custom templates

CardEra’s picture

This has some great touches, really like it, one of the best Drupal sites I've seen. Kudos.

manop’s picture

The site looks really nice. Thank you for sharing.

56rosa’s picture

Congrats!

And I like the concept behind this site.

How long did it take you to fully design and develop it?

Arnold Leung’s picture

Thanks.

The site took about 3.5 months to build.

Arnold
www.appnovation.com

websule’s picture

Hi mates,

Really a very professional work. Congrats to the team working on this project.

While checking http://www.cargoh.com/product/tentacles-barrel-and-child or almost any other products, clicking on BUY ME as anonymous user, displays the following message :
Sorry, you can only add products from a maximum of 5 unique sellers. Please checkout your current cart or try adding more products from the sellers already present.

It seems you tried to disable buy now feature for non logged in members, but the message does not make sense for that case.

Keep up the good work!

jamestombs’s picture

I just found the same, but very nice site design none the less.

James T
Action Medical Research - www.action.org.uk

Haarek’s picture

It seems to have been fixed, at least I get redirected to the shopping cart and can't notice any unexpected behavior.

alexpott’s picture

Like the design...

A quick tip to reduce the number of requests per page view. Enable CSS and JS optimization on the performance settings page (admin/settings/performance) - and this will prevent a terrible IE gotcha when you exceed 31 css and IE chooses to ignore the extra files... which it seems you've already hit and worked around in a different way :)

Alex Pott

scott.bell’s picture

Hey Alex,

We solved the IE stylesheet quota problem by converting all stylesheet links to @import by putting this code inside of phptemplate_preprocess_page() in the template.php file. I found this handy little snippet somewhere in the drupal forums!

  /**
   * Slove 30 CSS files limit in Internet Explorer
   */
  $preprocess_css = variable_get('preprocess_css', 0);
  if (!$preprocess_css) {
    $styles = '';
    foreach ($vars['css'] as $media => $types) {
      $import = '';
      $counter = 0;
      foreach ($types as $files) {
        foreach ($files as $css => $preprocess) {
          $import .= '@import "'. base_path() . $css .'";'."\n";
          $counter++;
          if ($counter == 15) {
            $styles .= "\n".'<style type="text/css" media="'. $media .'">'."\n". $import .'</style>';
            $import = '';
            $counter = 0;
          }
        }
      }
      if ($import) {
        $styles .= "\n".'<style type="text/css" media="'. $media .'">'."\n". $import .'</style>';
      }
    }
    if ($styles) {
      $vars['styles'] = $styles;
    }
  }
beckyjohnson’s picture

Hi there,

I tried using this and got and invalid foreach error on this line

foreach ($vars['css'] as $media => $types) {

Any idea why?

adrianmak’s picture

How did you put sign up form and password forgot form side by side ?

scott.bell’s picture

Hi Adrian,

You can output forms on any page using print drupal_get_form("form_id") ...so I created a page and outputted the two forms.

scott.bell’s picture

I just wanted to add that we're rolling out a new homepage on monday the 23rd...So come back and have another look. Really appreciating all the comments and suggestions. It's great to be part of the Drupal community.

Dave the Brave’s picture

It looks like the site is using Paypal Adaptive Payments for splitting the payments between the sellers and the site. Did you use a community Marketplace module for this or was it custom?

agamesua’s picture

Great site.
It would be cooler, with authorization via google OpenID.

scott.bell’s picture

Thanks for the tip, we'll keep an eye on the demand for such a feature.

darioshox’s picture

Hey guys!!! this is Dario!! I wanted to say congratulations for the Cargoh site and to say hi to everybody from Venezuela, to all the team!! Arnold say hi to Afrazz and Steve!!

Byeee!! I wish the best for you guys!

parasox’s picture

I see you have a user dashboard which is really nice, can you explain a bit how that works?

There is a "Dashboard" module, but it's not listed in your full list of modules, so perhaps you could shed some light on how you did it, if you used Dashboard or tried it, etc.

Great site. I signed up yesterday! Already a few things calling my name...

scott.bell’s picture

Hi parasox,

The dashboard consists of a custom block that provides links to pages generated by other modules, such as ubercart, twitter, facebook connect, and other pages of the like. If you are a seller, the main dashboard page is a cross section of account related data. For that page we created a custom menu callback and then called some handy functions provided by the ubercart modules to output the relevant information.

DerTobi75’s picture

Hi,

wow, really great site!

How did you realise the "Show your Facebook Fanpage on your Store" Feature? Is this a cck field?!

Regards,

Tobi

scott.bell’s picture

Hey DerTobi75, the facebook fanpage requires that the user enter their numerical facebook fanpage ID. This is set up as a CCK field for the store, and then outputted as a variable in the facebook fanpage iframe markup provided by Facebook. Thanks for the inquiry!

Scott

Michelle’s picture

I've been trying to figure out how to do this for some time. I would like to not only have that but also have the page's "wall" show up on my site. Getting info out of Facebook is a royal PITA, though, and I never managed it. I have a few questions that maybe you can answer. :)

1) Is that number the one at the end of the URL when you view the page? In my case, I set up listings on behalf of local businesses and would like to add this feature for them so I'd need to get the number myself.

2) What code are you using that you are adding the number to? Is it just the badge code?

3) Do you know any way to get the stream from the page?

Thanks,

Michelle

Michelle’s picture

Silly me, I just realized the thing on your site has a link to the page with the tools. I think I figured this all out. LOL! Will give it a whirl and see. :)

Michelle

CardEra’s picture

Hey Scotty,

How do you guys deal with images - custom module? do you use imagecache for your thumbnails and resized images, and how do you manage which thumbnails you use in each block/gallery?

thanks.

scott.bell’s picture

Greetings,

It's all imagecache and imagefield...no special tricks or anything! We were toying with using the imagecache crop for awhile, but the out of the box interface for that feature is a bit iffy and wasn't really in scope for this launch. Down the road we'll probably use that so users can crop their own images how they want.

Which thumbnail block/gallery are you referring to? On the homepage?

CardEra’s picture

Hey,

Yes, so the blocks on the homepage, the products gallery, and the 'more from this seller' block use different thumbs, are they all different views of the same content type e.g gallery?

Are there any good tuts on displaying images using views where images are fields rather than nodes?

thanks,

scott.bell’s picture

Greetings! It's a combination of different views, and different displays. For example, the 4 main product blocks on the homepage are 1 view with 4 different displays. Each display filters on a different taxonomy term (ie: art/design, fashion/accessories, etc).

The products page is different view all together that takes a taxonomy ID as an argument and filters the list according to the tid in the url. It also uses a different imagecache preset for the image field.

More from this seller is another view as well that takes an argument much like the product listings, in this case a users uid or the stores nid (can't remember which one).

Displaying images using views is easy. Say I created cck content type called "news article" that has a title, body, and an imagefield. When you are creating a view, in the fields box you can display the imagefield by going into the 'content' group and selecting the image field that applies to your content type. Then you can tell it what imagecache preset to use.

Hope that helps!

CardEra’s picture

Hey,

Excellent stuff, taxonomy is a powerful thing, I'm quite new to Drupal and I'm impressed by its presence, even the mighty SharePoint only had it properly implemented in 2010... anyway...

I've been playing with cck, views, images etc... I think I get the concept now - I'm using views_gallery module and figured out my problem (staring me in the face) - I need multiple teaser views for a single content type (gallery). Looking in the forums this seems like a somewhat complex task so i'll leave it for now.

cheers.

Anonymous’s picture

Pretty cool site! I am curious to know as to how did you get the "Feedback" stuff working?

scott.bell’s picture

nixdrupal, the feedback functionality is provided by getsatisfaction.com. They provide some javascript to stick in your page.tpl file and that's all ya gotta do :) the feedback services they provide are great....they manage all the positive and negative feedback, provide graphs, etc.

Stomper’s picture

So getsatisfaction only deals with the customer-Cargoh feedback? Is there a means for users to provide feedback to their sellers similar to ebay?

Also is the "add store to favorites" powered by the user relationships module?

AlfTheCat’s picture

Hey guys,

Projects like these are what makes me enjoy webdesign. Not only did you deliver a stunning design but the most fundamental part of the website is what appeals to me most. A great idea. Too often the latter is overshadowed by a sole focus on the looks.

I love the result and I wish you all the success your work deserves!

----
"People make mistakes. To really mess something up you need a computer."

scott.bell’s picture

Cargoh is the type of the design that stays out of your way. While the final product is actually quite simple, the process of designing it in such a way is surprisingly meticulous. Sometimes it's difficult to hold back and keep things simple!

Michsk’s picture

There's a bug when you try to 'create a store'. Press the create a store link in the footer shows 404

Anonymous’s picture

Hey thanks for bringing that to our attention! The page it previously linked to was deleted by request of the client. We'll fix that right away.

Michsk’s picture

np

Michsk’s picture

mind sharing how you got /user/[uid] sending users to /profile/name. I understand you use content profile, did you use the patch from the queue? Maybe one of you guys could help developing that patch so it would get committed, patch found here http://drupal.org/node/661572. And last but definitely not least. On the signup page, i would suggest to make the terms link open in a new windows, since most users will fill the reg form in and then click the link (since you think its a label), or click the link for reading the terms. And then all your data is lost.

Michelle’s picture

You can do that with pathauto.

Michelle

Michsk’s picture

Yeh i know, the only problem is that the workflow get's screwed up when you do it that way. When a user is on his or her profile and press the edit tab they only see the tabs view and edit, because they edit a node. But what you expect to see is all the profile tabs which would also show when user changes his or her drupal core profile. The patch posted above does just that. I see that cargoh just dropped the tabs when you view your own profile and that offcourse is also a option.

Michelle’s picture

Hmmm... Weird. When I click on edit, I go to http ://couleeregiononline. com/user/3/profile/uprofile which has all the same tabs. I don't remember doing anything special there but maybe I have something customized that I've forgotten...

Michelle

Michsk’s picture

Ar you actualy using the content_profile module? Because when i set the users path to member/[user-raw] and the content_profile path also to member/[author-raw] i always get send to the users content profile and not the drupal core profile. But then when pressing the edit tab. We edit the node. So it only shows the tabs which you expect on a node/edit page. That's what the whole patch is about...

Michelle’s picture

I just set the content profile option to put the edit tab on the user page. The user never actually goes to the node itself so I don't worry about what path that's at. Since I just did that a few minutes ago on the camera club site and it's working fine, I can say it's not anything I have customized on CRO. It just works straight from CP.

Michelle

Michsk’s picture

Well sure then the tabs show, because you view the drupal core profile of a user. When you go to the content profile of a user and press edit you'll see that you only get the edit tabs of that page. But heck that's what the whole page above is about. So for more info check out the node provided above.

Michelle’s picture

You're missing the point... I never let my users see the actual node. There's no need to. If they somehow got the link to the node and went there they get redirected to the user page. Everything is on the user page. See http://couleeregiononline.com/neighbors/michelle for example. If that were your account, you'd have an edit tab there that lets you edit the node content without actually going to node/XX/edit.

Michelle

held69’s picture

Great site!

Thanks for your post.

Could you tell us how many servers the site is hosted on,
and what speed is used for network through out?

Thanks

Stomper’s picture

Very impressive website.

Always happy to see a real world application of UberCart Marketplace especially an application that was so well executed.

Good job, and good luck.

Will you release the custom modules to the community?

Arnold Leung’s picture

We will be talking to the site owners about modules contribution.

Arnold
www.appnovation.com

Arnold Leung’s picture

We have the site running on 2 servers.

1 for the front end (4GB RAM) and 1 for the database (2GB RAM).

Anonymous’s picture

Hey great site! What kinds of things have you done to ensure performance of the site is good (as an example, are you using caching within drupal or external things like memcache or varnish)? Anything other things you realized in building this site that has contributed to high performance?

momper’s picture

respect ...

mimetic2’s picture

...its a great site, but it's too slow. Put a CDN and aggregate the JS. Maybe some memcache, varnish, or boost. Quicker pages = higher conversions. Also get rid of the cancel button on the checkout page. Don't need to give someone a reason to not place an order :)

mpruitt’s picture

I like the way the text/links are displayed on mouseover on the images on the front page. How did you do it?

scott.bell’s picture

In your views row template, output the 'overlay data' in a hidden (display: none) div which is positioned absolutely inside your relatively positioned views-row. Then using a simple jQuery hover method you fade it in and fade it out! Like so:

views-view-fields--the-goods.tpl.php
=======================


<div class="item">
  <div class="product-image"><?php print $fields['field_image_fid']->content?></div>

  <div class="product-info hidden">
    <h2><?php print $fields['title']->content?></h2>
    <span class="price"><?php print $fields['price']->content?></span>
  </div>

</div>

Then the css would be something like this:

  .item { position: relative;}
  .item .product-info { 
      position: absolute;
      top: 0;
      left: 0;
      background-color: #000;

And the javascript would be something like this:


  $(".item").hover(function() {
      $(".product-info", this).fadeIn("fast");
  }, function() {
      $(".product-info", this).fadeOut("fast");
  });  

That's pretty much it. Not a whole lot to it.

Scott

mpruitt’s picture

I'm going to squirrel that code away for future use!

Saeh’s picture

hi, thanks for this, but does this work as it is, ive copied it all, and got the tpl and the css to work, but not the js.

Thanks for any help

espurnes’s picture

Hi,
I'm trying to understand where to place this code. I've took a look over documentation and I can't understand were to put this code.

I wanna get a display like cargoh.

I'm using acquia prosper theme.

should I create a tpl named views-view-fields--theNameOfMyView.tpl.php in acquia prosper folder? Or do I have to find an existing tpl and modify it?

thanks in advance.

SOLVED: finally I figured out. just create a views-view-fields--name-of-the-view.tpl.php placed in sites/all/themes/mytheme.

joecanti’s picture

Hi,

Where abouts do you put the javascript?

It's an awesome effect - very user friendly.

Many thanks, Joe

joecanti’s picture

Working!

I found a slightly different method to achieve this effect and will put a tutorial up soon and post a link here for anyone who was stuck like me!

Hueij’s picture

Congrats, you made a lovely site!

One minor point though, whenever I navigate to another page the Cargoh favicon is briefly replaced by the Druplicon before it returns. Sublimal message?

jacobmn’s picture

Very nice site. Just wanted to let you know that I still get the error mentioned above when clicking the "Buy me" button.

"Sorry, you can only add products from a maximum of 5 unique sellers. Please checkout your current cart or try adding more products from the sellers already present."

Maybe it's an intermittent issue or a cookies thing? I'm using Firefox 3.6.

fehin’s picture

Great website!
How does your attribute page work? Are your users able to enter their own attributes?

dksdev01’s picture

Great Implementation & Design, Congrats to team!

bobbungee’s picture

Amazing site! I'll be sure to create an account.

One thing I noticed was that the 'rounded-edges' feature doesn't work in Opera, even though there is support for it. The CSS property for Opera is border-radius.

scott.bell’s picture

Thanks for pointing that out, I will take care of it!

Scott

rahuldewan’s picture

Hi,

Wanted a little bit of clarity on the marketplace functionality of this site. I miss an answer to the following questions in your Case Study.

* Can artists/musicians sign-up for this website and upload their own artwork/music?
* Can they define their own price for the product?
* Do they have the responsibility of shipping the product to the buyer?
* Does the site allow the seller, buyer, and site-promoter (the business which built this marketplace) - all separately - to track the status of their order?
* Does a sale of a product, lead to payments directly being made to the artist/musician?
* Is there a commission model designed for the promoter of this website, and on such a sale, does the commission for site-promoter gets deducted from the payments made to the artist/musician?
* Do all the 3 stakeholders - buyer, seller, and site-promoter - have their own interfaces to check order status, billings, commissions, etc.?

We're actually interested in building a marketplace with these features. We have highly acclaimed and successful Case Studies here on drupal.org for sites we've built. See: http://drupal.org/node/629664 as an example.

Regards,
Rahul

mahyar.org’s picture

Hi
Great site! congratulations! :-)
Due to your experience of using ubercart I have a question.
i am asking to make an advertisement site. which user can register for different kind of advertisements.
Do you think ubercart module would help me developing my site?
Thanks a lot.

Arnold Leung’s picture

I think you can use Ubercart to manage the payment for the advertisements. In fact, you may just need to use something like the Lm_Paypal module: http://drupal.org/project/lm_paypal to run the payment. Using the full Ubercart may be an overkill.

Arnold
www.appnovation.com

mahyar.org’s picture

thank you for your guidance.

gateone’s picture

This is an absolutely stunning job and truly shows: Drupal is much more than just a good CMS, it is an application framework that allows you to do almost anything.

Very good design, too, and good work on user guidance (and even custom URLs that reflect the user guidance experience). Great choice of Drupal modules, too and excellent use of ImageCache which makes using the site for the seller an absolutely easy thing.

Great way, too, how products are rendered throughout the entire site, from the thumbnails on the front page, the seller's shop page down to the actual Ubercart item page itself.

This site definitively showcases that with some good developers, some thoughtful thinking and wise choice of modules, Drupal can really outplay any other CMS, shop system & marketplace solution while giving the greatest flexibility in concept, design and workflow at the same time!

nasim_1987’s picture

Hello
thanks for your great site ,that is very different from other sites.
i need your help, i want to know how you change views with Newest - all -Most Popular ?
please answer me in detail because i am new in drupal .

Thanks,
Nasim

scott.bell’s picture

Hi Nasim,

This is done with the Quicktabs module. It's very straightforward to use, just read through the documentation.

http://drupal.org/project/quicktabs

beckyjohnson’s picture

What are you using for the tabs in the store areas? They don't quite look like quicktabs to me.
Also, how did you get that little "loading" graphic to show up in the quicktab area on the front page?

scott.bell’s picture

Hi Becky sorry for the late reply,

The loading graphic in the quicktabs area on the front page is done just by overriding the default loader graphic using just CSS!

adrianmak’s picture

Each registered seller has his/her own page, how to implement it ?

brucepomeroy’s picture

Very nice work.The checkout looks particularly nice. Something I noticed when trying to add an item to my cart:
- I actually didn't see the Buy Me button initially. I was expecting it to be down the bottom with the favorite and add to wishlist buttons and was expecting it to look like a button. Now that I know where it is it seems really obvious though.

- I tried adding an item of clothing to my cart. There were a number of options but only the first one is visible. I selected gender which was the only option I could see then hit "buy me" but the size option had sneaked in there so the form didn't validate. I picked size and clicked "buy me" again but the color option snuck in so again the form didn't validate. I found it a bit confusing as the options take a second or two to appear - often by the time they appeared I'd already clicked "buy now".

- I see you use Beanstream as a payment method. I couldn't find an up to date Beanstream gateway for Drupal 6 / UC2. Just wondering if you were able to find a Beanstrem gateway or if your team built one.

Great work, thanks for sharing!

bobbungee’s picture

Amazing how the site looks in IE.

I found a bug in Internet Explorer 7. The Drupal favicon shows up instead of the Cargoh one.

esfand55’s picture

Hi,

May I know what is the base theme of your site? Is is developed fully from scratch or you have customized an existing theme.

Thanks.

Arnold Leung’s picture

This was developed completely from scratch.

Thanks,
Arnold
www.appnovation.com

Slovak’s picture

Very nicely done!

The Sign Up button title reads "resiter" - I think it's meant to say register.

scott.bell’s picture

fixed, thank you :)

baifsAvadia’s picture

I like where you sign up for your own store, that was done well.

becca08’s picture

First of all -
Awesome site, love it, love it, love it a lot -
did I mention I love it? :)

Just wondering what you are using to get the multiple thumbnail pics that when clicked appear as the main product image
as in here: http://www.cargoh.com/product/dslr-camera-strap-slip-cover-11

Are you using a combination of imagecache and imagefield and a custom node-product.tpl.php ? Is there any other modules involved? or any jquery?

How do you get each image to have a custom id? I noticed they are wrapped in an a tag -

<a id="img-25040" href="#">

Any insights would be greatly appreciated, i've been googling for days :) Who would have thought multiple thumbnails for a product would be such a mystery.

Cheers,
Rebecca

beckyjohnson’s picture

@becca08 -- It could be the views galleriffic module.

becca08’s picture

thanks becky I'll check it out :)

scott.bell’s picture

Greetings,

It actualy isn't gallerific - or any module for that matter. I did this all custom. The images are added to products using regular old imagefields. In the node template I print out the first imagefield using the larger imagecache preset, and then print out the rest using a thumbnail imagecache preset. Then I wrote some custom javascript to replace the main image with the thumbnail image that was clicked on.

maybe I should have checked out gallerific lol.

adrianmak’s picture

How to implement each designer has his/her store page ? organic group or something else.

polmaresma’s picture

Nice idea to allow an Organic group to admin a store, not only a user. Is it possible?
Thank's for your work!

Pol Maresma
PolNetwork.com

Stomper’s picture

Having this kind of functionality is what I am looking for, I too think Organic Groups could be suited for the job.

It would also nice to be able to give members roles in terms of "running" the store, store such as the group leader is the "store manager" etc.

Would it also be possible to give each store a subdomain, such as cargoh.yourstore.com?

Possible?

Arnold Leung’s picture

There is actually a marketplace module in Ubercart that we used for allowing each store to have a store page.

I think you can have subdomains by using rewrite rules..

Stomper’s picture

Do you mean the Ubercart MarketPlace module itself or an additional module?

Arnold Leung’s picture

The Ubercart marketplace module itself..

neezan’s picture

Such a nice website. Never though it was made in Drupal. :)

fehin’s picture

How do you handle your multi national shipping rates for each seller?

beckyjohnson’s picture

On pages like this: http://www.cargoh.com/category/art/painting How are you dynamically changing the url by changing the filter? Any insights?

Becky

scott.bell’s picture

Hi Becky,

These pages are built with views that accept an argument (a taxonomy tid in this case). The "hammer down" menu is basically a list of all children (or siblings if they have no children) terms to the currently selected term. When you select one, I force the page to reload using JavaScript (so you don't have to select one and press a 'submit' button).

Hope this helps.

rgs’s picture

I have a small beta site up using uc marketplace.
Did you have a problem with income reporting being off by one month in the /your-site/user/1/selling/reports/sales report?
Despite multiple clean installs in different environments including webenabled.net, income posted in one month show in the next month in this report -- not in the other ubercart or uc marketplace reports -- just this one.
I've disabled user time zones, it has nothing to do with that.
The module authors seem to be MIA, I've put out a bounty, posted in various forums including Acquia's, and have had just no luck.
I am really at a loss.
Any guidance would be sooo appreciated.

rgs’s picture

Stomper’s picture

I am interested to hear about your experience running a Drupal Ecommerce website on Rackspace Cloud.

I have come across recent mixed reviews about the standard Rackspace service stating that 100% uptime isn't guaranteed, and that other hosting companies offer similar services for much less. It seems Rackspace is charging a premium for their past reputation. This is all from other peoples experiences, I'd like to hear your opinion if you're willing to share.

Are you satisfied with their service, would you recommend it?

Thanks

Arnold Leung’s picture

Yes rackspace cloud has been amazing. Their support is flawless. They charge a premium for their support. You can pick up the phone and expect someone to resolve your issue within mins. At other smaller hosting companies, you either need to wait a long time and not even able to call for support.

As a result, I highly recommend them..

Arnold

Alaa Rihan2’s picture

Great work!

just a question!
How did you filtered prev_next module's nodes in product page by term?
Please help me!

Thanks

Anonymous’s picture

Hello,
Great job ! Congratulations !
I try to find a good multi-sellers solution for Drupal 7 but Marketplace for D7 is not ready yet...

Anyway, I was wondering what happens if the customer orders from multiple sellers ? Are the shipping costs multiplied ? How do you "split" a payment and reward each vendor?

Best,
Matt

Stomper’s picture

I'd also like to know what your plans are with UberCart Marketplace support for Drupal 7? Will you continue to run on D6 until D7 UC Marketplace support comes around or use something else?

mtk’s picture

Hey,
since I won't get approved as a seller in Cargoh.com (and I won't even try to), is there an option to set a Demo user to see the inside stuff of a seller?
actually, a few screenshots will also do the job...

Thanks in advance :)

Stomper’s picture

Agreed, a demo account or screenshots would be appreciated

fatcheeks’s picture

hi! very nice site indeed. i'm trying to create my first drupal site and am learning a lot from how you did yours. just a couple quick questions though:
1. how did you move the avatar upload form from the 'edit account' page to the 'edit profile' page? was it done simply with drupal_get_form()?
2. when i signed up i noticed my profile page was already set up. how did you handle automatic profile creation?

Stomper’s picture

Will any of the custom modules created for Cargoh be contributed to UC Marketplace?

TajinderSingh’s picture

That is a good sample of nice content representation.

I am also working on a marketplace website.
Everything is up except the Shipping concerns as USPS is United States based, so whenever Customer wishes to ship to Canada the shipping rates are shown high.
Such as for USA it is $9.10 but for Canada it is near about $39.

There are just USA and Canada users on site.

Please if we can know which shipping quotes service Cargoh is using or it is using combination of different shipping APIs like USPS for origin USA and Canada Post for origin Canada shippings.

Best Regards,

Tajinder Singh Namdhari
https://TajinderSinghNamdhari.com

Stomper’s picture

Is your marketplace site live? I'd like to have a look at it. I am also working on a marketplace website. What are your plans with D7, as of now, there is only a D6 version of UC Marketplace.

TajinderSingh’s picture

Hi Stomper,

Currently it is not live, but no plans for D7 currently.

Might port UC Marketplace to D7 as per Ubercart 3 release.

Best Regards,

Tajinder Singh Namdhari
https://TajinderSinghNamdhari.com

Stomper’s picture

@tajinder

Port UCMP to D7?! So many people would be ecstatic if you did do that. If and when you do port it, will you be sharing it with the Drupal community?

Look forward to seeing your site live.

TajinderSingh’s picture

Sure it will be shared when ported.

Actually depends on client requirements and work schedule.

Best Regards,

Tajinder Singh Namdhari
https://TajinderSinghNamdhari.com

Stomper’s picture

Perfect.

A port would be a great start. And then we could work on a UC MP V2 later down the line. I think getting a D7 version is the most critical step.

deepakpat’s picture

Team,

You have done a fantabulous job by creating such a nice site. It has many features that I was dreaming for. In fact I was searching for it since a long time, and then stumbled upon your site. Magneto is one such impressive site that I liked a lot, but even it does not have many features that I wanted.

Please forgive me it it sounds stupid, but wanted to ask if the code package of this site is available for free, or by paying some money. Strange as it may sound, but I need a site like this without any payment (e-commerce) functionality, since it is not meant to generate any income via selling. Community based marketplace (or a product features site) is what I am looking for.

Regards

Stomper’s picture

Agreed, the Drupal community would appreciate it.

TTPham’s picture

Great looking site, doesn't look like most Drupal sites. A company I worked for awhile back made a site that looked like it was made in Flash, but the backend was Drupal - very odd.

monil-dupe’s picture

I agree you. The design is different from many Drupal based websites and its something else...

mmahfoudi’s picture

Can you tell me if you guys can restrict shopping only from one store at a time.?
Thanks, and a very great site by the way.

darshan.choudhary’s picture

Hi ,

I really loved your site and saw this one function is your site which i havent seen in much of drupal sites.
On hover of mouse on any products on homepage is shows the product description and price..i would love to know how is this done..
Is there a module through which this can be done or some php also will be welcomed.
Please give your valuable response..

Regards.

zgos’s picture

using javascript, it's a very small task...

darrious101’s picture

Hello! I was looking at this site, among others that have been developed by this company, and they are very cool!!! I'm wanting to develop a site, with drupal and Ubercart, as well as UberCart Multiple Seller Support, for an employer.

I've been reading on your companies blog and am liking how you guys implemented custom and pre-made modules together. I was wondering if either, one, you would be able to share some custom module/code to help with what I want to do, and, secondly, what version of Drupal did you use with Ubercart and Ubercart Marketplace modules? Drupal 6 or 7?

Thank you!
Caleb