Forums

Styling the ecommerce addon, grrrrrr.....

Permalink 1 user found helpful
Hi

Maybe i'm being thick but the ecommerce addon seems really hard to style. Could somebody please give me some pointers on styling the product_list block as i'm not sure if I should be editing the view & css in the template folder, the product_list.css in the CSS folder or the display.php in the elements folder!!!! I want to have the price on the same line as the title but just can't seem to work out how to do this.

Thanks in advance.
 
oakleafg replied on at Permalink Reply 2 Attachments
My frustrations continue, i'm still trying to get the product list styled but the code just seems to be in such a mess. I'm surprised it still uses tables and doing just the simplest of things is a pain. I have attached two images one of how I want the product list to look and the other is of how it actually looks which is really messed up. Maybe its me but I just can't get my head around it. The code it generates looks like this...
<div class="ccm-core-commerce-product-list-container"> 
<div class="ccm-core-commerce-summary"><div class="ccm-paging-top">Viewing <b>1</b> to <b><span id="pagingPageResults">1</span></b> (<b><span id="pagingTotalResults">1</span></b> Total)</div></div>            
<div style="clear: both"></div> 
<div class="ccm-core-commerce-product-list-results"> 
 <div> 
<div class="ccm-core-commerce-add-to-cart"> 
<form method="post" id="ccm-core-commerce-add-to-cart-form-8-214" action="/index.php/cart/update/"> 
<input type="hidden" name="rcID" value="128" /> 
<table border="0" cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
<td valign="top" align="left" class="ccm-core-commerce-add-to-cart-thumbnail-left"> 
<div class="ccm-core-commerce-add-to-cart-image" style="width:145px"><img src="/files/cache/fd31e34541b76fba0e869579cc6b2fb3.jpg" width="145" height="172"  /></div> 
</td> 
<td valign="top" align="left" width="100%"> 
                                                                        <div class="ccm-core-commerce-product-property-list">
Viewing 15 lines of 33 lines. View entire code block.


Does anybody know how to easily style this or has anybody gone through stripping out all the tables and added easy to change styles?

The ecommerce addon could be really good but it just takes to much time to get it to look nice!!!

Thanks in advance.
oakleafg replied on at Permalink Reply 1 Attachment
Finally its clicked...
After messing around with the code for hours I finally figured it out and its actually really simple to style once you work out what controls the classes.

If anybody is struggling here is what I did to style the product-list to look like the image I have attached...
Make sure you select the plain template in the block edit mode. I couldn't work out where the plain template was getting its styling as it wasn't in the associated view.css. I noticed this code in the view.php
print '<div class="ccm-core-commerce-product-list-product">';
Loader::packageElement('../blocks/product/templates/plain/view', 'core_commerce', $args);
print '</div>';

and realised it was taking it's styling from the product block's plain template, I personally don't think that this is particularly a good idea as the product list would more often than not need to look different to the product detail page, I guess it should be pretty easy to change by altering some of the css class names though.

I then added these classes to my themes main.css

.ccm-core-commerce-add-to-cart-container {
  width: 100%;
   border: 2px solid #f0f0f0;
   float: left;
   padding: 5px;
}
.ccm-core-commerce-add-to-cart-product-info-container {
   float: left;
   padding-top: 10px;
}
.ccm-core-commerce-add-to-cart-image {
   float: left;
   margin-right: 12px;
}
.ccm-core-commerce-add-to-cart-product-name{
Viewing 15 lines of 36 lines. View entire code block.


and it works:-)
jordanlev replied on at Permalink Reply
jordanlev
The ecommerce templates are incredibly complicated (they encompass a lot of functionality, and most people using it are not designers themselves who would ever touch the underlying code). The most recent version of the addon (2.something) includes a cleaner template that uses divs instead of tables, I think it's called the "plain" template. I've used that to create my own styled product list, but note that even that one is hard to change the code for -- instead what you want to do is use CSS as much as possible to apply different styles to the existing markup.

If you get really stuck, note that there is a support area for every addon -- if you go to the eCommerce marketplace page and click the "Support" link in the sidebar, you might get a better response from the actual developers.
JohntheFish replied on at Permalink Reply
JohntheFish
I have been styling some ecommerce and resorted to leaving much of the output alone, then tweaking it with a bit of jQuery in the page footer.
jedininja replied on at Permalink Reply
jedininja
Thanks for posting this discussion.
Could you tell me what directory and files you were working with to get your products cells styled like you did?
Thanks!


EDIT: I've tried doing the same thing you did, maybe we now have different versions; the closest thing that I found was this:

Found in core_commerce > blocks > product_list > view.php
print '<td valign="' . $valign . '" width="' . $modwidth . '%" style="border:' . (int) $layout['table_border_width'] . 'px ' . $layout['table_border_style'] . ' ' . $table_border_color . ';">';
         Loader::packageElement('product/display', 'core_commerce', $args);
         print '</td>';

But trying what was posted here did not help.

I'm now only altering CSS instead of php pages and will hopefully find something leading me in the right direction.