Is it possible to make our e-commerce store look like the rest of our website?

ROSIE WEAVER 2

We would like to use the e-commerce section of LO more extensively but it looks really clunky. What are options for customizing it? Is there a place to add CSS? How are other people using this feature? If you have a nice example, could you post a link?

Brian Mucha

You can give your ecommerce site it's own pagewrapper, with all the styling than goes with it. So yes, CSS can be used to change quite a bit.

 

A consultant just did this store for us...

 

https://www.luriechildrens.org/HopeList

 

Kaylyn Klatt

Hello!



So we are currently going through a website redesign, and currently our only option for our estores is to have the awful clunky look. I was curious though, how were you able to do this?



https://www.luriechildrens.org/HopeList



Did you use an API key? How did you apply the pagewrapper to it? Is this something that Convio had to do for you custom? Any information is greatly appreciated!!



Thank you,



Kaylyn

Brian Mucha

There is no eCommerce API, or we certainly would have gone that route. The eCom module is really old and poorly done. The code isn't mobile friendly at all, and there is no fullfillment back end. All you get is a few crummy reports. BUT, it does connect directly with Luminate, which is a pretty big plus.



The PageWrapper is done in exactly the same way as it is with donation forms and everything else. There's plenty of documentation (and a webinar I think) about PageWrappers, so I won't go into detail there. (Some clients don't have access to the PageWrapper section, so you may have to contact support if you don't see it in the Setup menu.) Standard intermediate level stuff.



There's quite a bit done with CSS. Basically overriding the stock styles that Convio built...making fixed width blocks more fluid, and changing colors and fonts. That sort of thing. That's something we do on just about everything. Usually the CSS goes in your PageWrapper.



The really cool stuff in the HopeList is pretty much all done with jQuery, which is a javascript framework that is especially great at manipulating the layout (the DOM). That includes stuff like the three blue buttons on the product pages, which turn configuring the product into a sort of three step wizard. These are all script blocks that are put into the Standard Page configurations. You can view source to see them. Just about every page has something being tweaked in this way.



I'm currently finishing up a jquery plugin that completely replaces the table-based layout with a modern, responsive-friendly DIV based one. It's going to be pretty cool. The idea here is to make a generic script that simply rewrites the ecommerce html in the way I wish it was, rather than dealing with what was done 12 years ago. Once I finish coding, testing and fine-tuning, I'll post it here in the community.

 

Jason Brown

In the middle of a similar customization, Brian — would be interested to see your DIV rewrite scripts if you're done with it!

Brian Mucha

I did... and about a month later Blackbaud released a totally
unannounced update to the store that is more mobile friendly
.

Our (now aging) store is still using it: https://secure3.convio.net/cmf/site/Ecommerce/?VIEW_HOMEPAGE=true&FOLDER=0&store_id=4161

Here's the JS:

https://secure3.convio.net/cmf/_wrappers/luriechildrens/store/scripts/jquery.modernizeEcommerce.js

I have the replacement to the above store about 80% done here:
https://secure3.convio.net/cmf/site/Ecommerce?store_id=5941

I'm frequently overriding or ignoring the default responsive
styles, but at least the html is a bit better now.

Regards,

Brian Patrick Mucha
Associate Director, Digital Programs

Ann & Robert H. Lurie Children?s Hospital of Chicago
Foundation