Discussions

Styling a product display node

Hi!

I have installed the commerce quickstart stuff and created product types and product display content types. Now I would like to change the looks of my product display nodes, more specifically I want exact control over the positioning of the different elements like add to cart button, image, price etc.

I'm new to drupal and web programming so a little help would be great! I don't think that CSS only will suffice if I for example would like to place the price and the add to cart button on the same line, to the right of the product image. I suspect that I need to write a .tpl.php file which picks out the elements and places them in divs with suitable css. Is that correct? I'm really wandering into the unknown here, can somebody point me inte the right direction?

Thanks!

CaptainZoom
Posted: Jun 12, 2011

Comments

CaptainZoom on June 12, 2011

Ok, now I have made a copy of node.tpl.php, renamed it node--productdisplay.tpl.php and put it in the same folder.

I looks to me as if these lines

<?php
      print render($content);
   
?>

generates some kind of html, and content must be an array of objects. The question is, what html is generated? And where? And how can I change it?

I'd like to have the node divided in a left and a right column. The left coulmn should contain the image, and the other fields should be listed in the right column. The add to cart button and the price should be on the same line in the right column. Any html/css to help me here?

JohnDoranNY on June 13, 2011

I copied my 'page.tpl.php' to 'node--product-display.tpl.php'. I then edited the new 'node--product-display.tpl.php' and was able to them the product_display pages (teaser format and full content format).

Then you can do things like

if (isset($content['product:field_image'])){
... do some stuff here
print render($content['product:field_image']);
}

and

if (!$teaser) {
// Process Misc. Information
print '';
render($content['product:commerce_price']);
print '';
}

You can access the information directly and print it (render it) where you want on the page... like I wanted the product description/body to wrap around the product image, so I render the image and body with str_replace 's to (or you can declare each in css for image or body to be display: inline)... but it did give me much better display capabilities this way.

I hope this brief information helps.

latulipeblanche on June 14, 2011

Thanks for your information, I think that it's very interesting, but ...

First:
You wrote :
" I copied my 'page.tpl.php' to 'node--product-display.tpl.php'. I then edited the new 'node--product-display.tpl.php' and was able to #### them the product_display pages (teaser format and full content format)."

I think that you missed some words on #### :)

Second:

if (isset($content['product:field_image'])){
... do some stuff here
print render($content['product:field_image']);
}
What kind of stuff do you mean ?

Maybe you can attach your new 'node--product-display.tpl.php' to help even more ?

Tnx

Paul

sghinescu on July 31, 2011

Paul, did you find the solution? I would like the same, to have full control over how my stuff is displayed.

maxchock on August 1, 2011

Welcome to Commerce. I'm new to commerce too but I think i'm digging deeper than you.

To theme the product display page, you can use the module Panels. Panels provide UI for you to insert product field such as price, photo, ATC button by drag and drop.
See my work in progress product page (http://www.trekker.my/node/2)

To theme the product display teaser, I'm not sure whether there is a easier way but I'm using custom node.tpl.php.
See my work in progress product teaser (http://www.trekker.my)

I created a "node--product_display.tpl.php" in the template folder (e.g site/all/themes/bartik/template/) and drupal will replace the product display teaser using "node--product_display.tpl.php". Please note that product_display in "node--product_display.tpl.php" can be any name that you create for your Product display. For e.g if your Product display content type machine name is "tshirt_display" then your custom node.tpl.php should name it to "node--tshirt_display.tbl.php" (plz correct me if i'm wrong :) )

sghinescu on August 1, 2011

Thanks, indeed, using the view format as unordered list with 'show panel fields' did the job for me. But I haven't yet tried creating a node--product_display.tpl.php, thanks for that suggestion too, seems an interesting solution too.