Customizing the Display of the eCommerce Add-On

Note:  Where this guide says "edit" it is advised to try and override these files.  Merely editing them will cause your changes to be lost during an upgrade, as the files will get replaced.  Read this how-to about overrides if you have any questions.

Skinning the Detail Product View

If you want to change how the detail product appears on a product detail page, in the individual product block or in the product list, edit the following file:

packages/core_commerce/elements/product/display.php.

 

Skinning the Product List Block

To skin the product list block, copy packages/core_commerce/blocks/product_list/view.php into blocks/product_list/view.php, in your local directory.  

 

Skinning the Product Detail Page

If you'd like to customize the product detail page type, simply copy packages/core_commerce/page_types/product_detail.php into your local theme directory, and make customizations there.

 

Skinning the Cart and Checkout Process

To customize the cart and checkout process pages, copy the page in question from packages/core_commerce/single_pages/ into your local single_pages/ directory, and make changes there.

 It is also possible to modify the display of the popup by overriding js/ccm.core.commerce.cart.js and adding "wrapperClass:'someclass'" as an option to the call to jQuery.fn.dialog.open.

Modifying the Cart and General Product Stylesheet

eCommerce stylesheets can be found in packages/core_commerce/css/. To override them, copy them into your theme's current directory (e.g. "themes/mytheme/ccm.core.commerce.cart.css"). The stylesheet must be copied into the theme's directory - it won't work if you copy it into the root css/ directory.

Additional Product Images

It is possible to create a 'micro-gallery' using the additional product images.  Within the elements/product/display.php there is code that creates the lightbox.  If you want to override that code to create a different kind of gallery, here are the basics:

$product->getAdditionalImages :  This function will give you all the additional images from the product.

$ih->getThumbnail($imageFile, $width, $height) : This function will take an image file, and then return a resized image file.  Even though it is called "getThumbnail", you can get any size image back from it.

So with those two pieces, you are able to do something like this:

$images = $product->getAdditionalImages(); 
foreach($images as $img) {
  $bigImg[] = $ih->getThumbnail($img, $bigW, $bigH);
  $thumbImg[] = $ih->getThumbnail($img, $lilW, $lilH);
}?>

  img title="<?= $images[0]->getTitle()?>" src="<?= $bigImg[0]->src ?>" alt="" />
<?
$i = 0; 
foreach($images as $img) { ?>
  <div class="productGallery minor"> </div>
  <img title="<?= $img->getTitle() ?>" src="<?= $lilimg[$i]->src ?>" alt="" /><!--? /*have a span or some other thing here of the $bigImg[$i}--->src to grab with jquery */
  
  <? $i++; ?>
}?>


Now you should be able to add jquery to swap out the smaller images.  Or you can also use the same technique to create any other kind of gallery.