Productpagina's aanpassen (Übercart 2)
Dit artikel behandelt aanpassingen aan Übercart's productpagina's, productschermen, artikelpagina's, artikelschermen of artikeldetailschermen. De Engelse documentatie spreekt van product page, dus daarom noem ik 't productpagina in het Nederlands.
Themen van een Übercart productscherm
Het sjabloon node-product.tpl.php dient voor het themen van Übercart productpagina's (en niet node-uc_product.tpl.php). Maar let op: Er zit een bug in Drupal, waardoor dit sjabloon enkel gebruikt kan worden als er ook een node.tpl.php-bestand aanwezig is in dezelfde map. Oplossing: Dat bestand kopiëren uit bv. Zen.
Theming-voorbeelden
Originele sjabloon
Übercart gebruikt zelf geen node-product.tpl.php-bestand. Dat kun je verifiëren door een installatie te doorzoeken op deze bestandsnaam [1]. Dit is een ruwe en incomplete benadering. Oa. SKU en afbeeldingen ontbreken:
<!-- start node-product-page.tpl.php -->
<div id="node-<?php print $node->type; ?>" class="node clear-block">
<div class="content">
<?php if($node->content['image']['#printed']): ?>
<?php print $node->content['image']['#value']; ?>
<?php endif; ?>
<div id="content-body">
<h1 class="title"><?php print $title; ?></h1>
<?php print $node->content['body']['#value']; ?>
</div>
</div>
<?php print $node->content['add_to_cart']['#value']; ?>
<div id="product-info">
<h2 class="title">
Product Information
</h2>
<?php
unset($node->content['body']);
unset($node->content['image']);
unset($node->content['display_price']);
unset($node->content['add_to_cart']);
unset($node->content['#children']);
foreach($node->content as $key => $field) {
if($field['#printed']) {
print '<div class="product-field">'. $field['#value'] .'</div>';
}
}
?>
</div>
<?php if ($links): ?>
<div class="links">
<?php print $links; ?>
</div>
<?php endif; ?>
</div>
ubercart.org
Bron: http://www.ubercart.org/forum/development/3868/nifty_products_tutorial_part_1
<?php
// Grabs the firsts image path and sets $imagePath.
$imagePath = $node->field_image_cache['0']['filepath'];
?>
<div id="node">
<?php // product title ?>
<h2><?php print $title ?></h2>
<?php // product description ?>
<?php print $node->content['body']['#value']; ?>
<?php // list price and sell price display ?>
<div id="price">
<p>List Price: <?php print uc_currency_format($node->list_price); ?></p>
<p>Sell Price: <?php print uc_currency_format($node->sell_price); ?></p>
</div>
<?php // default image display ?>
<div id="image"><img src="/files/imagecache/product/<?php print $imagePath; ?>" alt="Title"></div>
<p>Sub Images</p>
<?php // all image display ?>
<ul class="other_imgs">
<?php
// get all images
foreach ($node->field_image_cache as $images) {
?>
<li><a href="/files/imagecache/product/<?php print $images['filepath']; ?>" title="<?php print $images['title']; ?>" rel="pagination"><img src=" /files/imagecache/product/<?php print $images['filename']; ?>" width="95" height="95" alt="<?php print $images['alt']; ?>"></a></li>
<?php
}
?>
</ul>
<div id="cartButtons">
<?php // add to cart buttons ?>
<?php print $node->content['add_to_cart']["#value"]; ?>
</div>
</div>
Code Karata
Bron: http://codekarate.com/content/theming-ubercart-product-page-drupal-6
<?php
// Grabs the firsts image path and sets $imagePath.
//print('<pr e>'.print_r($node,1).'</pr e>');
$imagePath = $node->field_image_cache['0']['filepath'];
global $base_path;
?>
<div id="node">
<div class="productnode">
<div class="product-left-col">
<div class="imagesholder">
<div class="mainimage">
<a href="<?php print $base_path . $imagePath; ?>" class="lightbox" rel="lightbox[product]">
<?php print theme('imagecache', 'product', $imagePath, '', ''); ?>
</a>
</div>
</div>
<div id="product-other-images">
<div class="product-other-images-text">
<a href="<?php print $base_path . $imagePath; ?>" class="lightbox" rel="lightbox[product]"><?php print t("View Image"); ?></a>
</div>
<?php if (isset($node->field_image_cache) && count($node->field_image_cache) > 1) { ?>
<ul class="other_imgs">
<?php
// get all images except the default one that's already shown
foreach ($node->field_image_cache as $images) {
if ($images['filepath'] != $imagePath) {
?>
<li>
<a href="<?php print $base_path . $images['filepath']; ?>" title="<?php print $images['title']; ?>" rel="lightbox"><?php print theme('imagecache', 'uc_thumbnail', $images['filepath'], '', ''); ?></a>
</li>
<?php
}
}
?>
</ul>
<?php } ?>
</div>
</div>
<div class="product-details">
<div class="product-title">
<h2><?php print $node->title; ?></h2>
</div>
<div class="price">
<?php print uc_currency_format($node->sell_price); ?>
</div>
<div class="productdesc"><?php print $node->content['body']['#value']; ?></div>
<div id="cartButtons">
<?php print $node->content['add_to_cart']["#value"]; ?>
</div>
<div id="product-links">
<?php print $links; ?>
</div>
</div>
</div>
</div>
Compleet voorbeeld
De bron van dit sjabloon ben ik even kwijt, maar het is het enige sjabloon dat ik zo snel tegenkwam, dat SKU bevat:
<!--
Doomed's own ubercart product template: this one should look very similar to the 'default look'.
It has only few selected fields and comes with Lightbox support.
Created with the help of many people on the forums of Ubercart.org .
Last update: 21/nov/2008
-->
<?php // Grabs the firsts image path and sets $imagePath.
$imagePath = $node->field_image_cache['0']['filepath'];
?>
<!-- node and node inner -->
<div class="node <?php print $node_classes ?>" id="node-<?php print $node->nid; ?>">
<div class="node-inner">
<!-- show categories, etc. -->
<?php if ($unpublished || $submitted || count($taxonomy)): ?>
<div class="node-top">
<?php if ($unpublished) : ?>
<div class="unpublished"><?php print t('Unpublished'); ?></div>
<?php endif; ?>
<?php if ($submitted): ?>
<div class="submitted">
<?php print $submitted; ?>
</div>
<?php endif; ?>
<?php if (count($taxonomy)): ?>
<div class="taxonomy"><?php print t(' Categorias: ') . $terms; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<!-- /show categories, etc. -->
<!--show default image first, then others-->
<div class="product_image">
<?php $imagePath = $node->field_image_cache['0']['filepath']; ?>
<?php if (!$node->field_image_cache == NULL) { ?>
<a href="<?=base_path()?><?=$imagePath?>" rel="lightbox[prod]">
<img src="<?=base_path()?>files/imagecache/product/<?=$imagePath?>" alt="<?=$title?>" title="<?=$title?>" class="imagecache imagecache-product">
</a>
<?php } ?>
<?php if (count($node->field_image_cache) > 1) { ?>
<ul class="other_imgs" style="list-style-type:none; margin-top:10px; text-align:center;">
<?php foreach ($node->field_image_cache as $images) { if ($images['filepath'] != $imagePath) { ?>
<li style="display:inline; padding:0; margin-left:0;">
<a href="<?=base_path()?><?=$images['filepath']?>" rel="lightbox[prod]" title="<?=$title?>">
<img src="<?=base_path()?>files/imagecache/uc_thumbnail/<?=$images['filename']?>" alt="<?=$title?>" class="imagecache imagecache-uc_thumbnail">
</a>
</li>
<?php } } ?>
</ul>
<?php } ?>
</div>
<!--/show default image first, then others-->
<!--show fields: sku, description, prices-->
<?php //print $title ?>
<div class="model"><?php print $node->model ?></div>
<p><?php print $node->content['body']['#value']; ?></p>
<div class="sell_price">Preço: <?php print uc_currency_format($node->sell_price); ?></div>
<div class="display_price"><?php print uc_currency_format($node->sell_price); ?></div>
<!--/show fields: sku, description, prices-->
<!--show add to cart button-->
<div class="add_to_cart">
<?php print $node->content['add_to_cart']["#value"]; ?>
</div>
<!--/show add to cart button-->
<!--wish i knew-->
<?php if ($links): ?>
<div class="links">
<?php print $links; ?>
</div>
<?php endif; ?>
<!--/wish i knew-->
</div>
</div>
<!-- /node and node inner -->
Mijn eerste eigen sjabloon
<div id="node-<?php print $node->type; ?>" class="node clear-block">
<!-- Afbeeldingen -->
<?php print $node->content['image']['#value']; ?>
<!-- SKU -->
Productcode: <div class="model"> <?php print $node->model ?></div>
<!-- Algemene productgegevens -->
<?php print $node->content['body']['#value']; ?>
<!-- Prijs -->
<?php print $node->content['sell_price']['#value']; ?>
<!-- Aan winkelwagen toevoegen -->
<?php print $node->content['add_to_cart']['#value']; ?>
<!-- Taxonomie -->
<?php if (count($taxonomy)): ?>
<br><br>
<?php print t(' Categorieën: ') . $terms; ?>
<?php endif; ?>
</div>
Bijbehorende CSS-code:
/* Übercart productdetailweergave */
.product-image {
clear: left;
float: left;
margin-left: 0px;
padding-left: 0px;
padding-top: 4px;
text-align: center;
}
Overkoepelende klasse-aanroep
Het lijkt handig te zijn om de rest van het sjabloon binnen de volgende div-aanroep te plaatsen:
<div id="node-<?php print $node->type; ?>" class="node clear-block">
Anders wordt een eventuele achtergrondafbeelding in de war geschopt door een ontbrekend clear-statement.
Afbeelding
De gebruikelijke manier om de standaardafbeelding te tonen:
<?php print $node->content['image']['#value']; ?>
Hierbij verschijnt rechts een afbeelding op postzegelformaat.
De code wordt als volgt geëvalueerd:
<div id="node-product" class="node clear-block">
<div class="product-image">
<div class="main-product-image">
<a class="thickbox initThickbox-processed" rel="uc_image_0" title="" href="http://www.lab13.eu/sites/default/files/imagecache/product_full/2011_11300159.png">
<img class="imagecache imagecache-product" title="" alt="" src="http://www.lab13.eu/sites/default/files/imagecache/product/2011_11300159.png">
</a>
</div>
<div class="more-product-images"></div>
</div>
en dit is de belangrijkste stijlregel:
.product-image {
clear: right;
float: right;
margin-left: 4px;
padding-left: 4px;
padding-top: 4px;
text-align: center;
}
De afbeelding wordt geschaald via de ImageCache-setting product.
Zie verder de afbeeldingen.
Bestand:NodeAfbeelding01.png Dit lege sjabloon is de basis voor experimenten met afbeeldingen |
Bestand:NodeAfbeelding02.png En dit is het bijbehorende resultaat |
Bestand:NodeAfbeelding04.png Via ImageCache de afmetingen aangepast tot 400x400 |
Bestand:NodeAfbeelding05.png Met deze CSS-code de afbeelding naar links verplaatst, en de marge/padding aan de linkerkant opgeheven |
Bestand:NodeAfbeelding06.png Additionele afbeeldingen worden onder de standaardafbeelding geplaatst |
Bestand:NodeAfbeelding07.png Via ImageCache het formaat van de afbeelding verviervoudigd van 35x53 naar 70x70 |
Productinformatie - Body
Bestand:Node-productBody01.png Deze code in node-product.tpl.php zorgt voor de weergave van de algemene productgegevens, oftwel, de inhoud van het veld Body |
Bestand:Node-productBody02.png Het resultaat. De tekst wordt naast de afbeelding getoond. Da's een mazzeltje |
Bestand:Node-productBody03.png Ter verificatie: De inhoud van het body-veld in het beheeraccount van de site |
SKU
SKU Staat voor Stock Keeping Unit, product-ID of product-code.
<div class="model"> Productcode: <?php print $node->model ?></div>
De aangehaalde classe model zorgt er voor dat de productcode dik wordt weergegeven.
Bron: http://www.ubercart.org/forum/theming_and_design/6125/match_ubercart_default_with_nodeproducttplphp
Aan winkelwagen toevoegen
<?php print $node->content['add_to_cart']['#value']; ?>
Prijzen
In Übercart heb je onder andere sell_price, display_price en list_price. Tot op heden hebben we zo'n 6 Übercart-sites gemaakt, en daarbij vullen we altijd alleen sell price in. Als het een consumentensite betreft, zijn dit bedragen inclusief btw, anders ex. btw.
Hier zie je de meest voor de hand liggende manieren om deze prijzen weer te geven:
Prijs: <?php print uc_currency_format($node->sell_price); ?> Prijs: <?php print uc_currency_format($node->display_price); ?> Prijs: <?php print uc_currency_format($node->list_price); ?>
Maar er is een probleem: Prijzen worden ex. btw getoond, ook als dat niet de bedoeling is.
Na inspectie van het node-object, kwamen we een array tegen die wel de prijs incl. btw bevat:
<?php print $node->content['sell_price']['#value']; ?>
Deze bevat trouwens ook het woord 'Prijs:' voorafgaand aan de prijs, maar gelukkig geen verdere formattering.
Overigens: Er zijn nog meer mogelijkheden. Gebruik bv.
<?php print_r($node); ?>
om de inhoud van het $node-object te zien.
Links
Ik weet niet wat links zijn. Het heeft in ieder geval niet te maken met Categorieën.
<?php if ($links): ?>
<div class="links">
<?php print $links; ?>
</div>
<?php endif; ?>
Categorieën
Geïnspireerd op een voorbeeld dat ik tegenkwam:
<!-- Taxonomie -->
<?php if (count($taxonomy)): ?>
<br><br>
<div class="taxonomy"><?php print t(' Categorieën: ') . $terms; ?></div>
<?php endif; ?>
echter, klasse taxonomy bestaat standaard niet. Daarom is dit net zo goed:
<!-- Taxonomie -->
<?php if (count($taxonomy)): ?>
<br><br>
<?php print t(' Categorieën: ') . $terms; ?>
<?php endif; ?>
Node object inspecteren
<?php print_r($node); ?>
Node object: Toon termen uit één taxonomie
Het probleem
Op een Übercart-site gebruik ik twee taxonomieën (Catalog en Tags), maar op productpagina's wil ik dat alleen Tags getoond wordt. Mogelijke oplossing: Eigen sjabloon gebruiken. Maar hoe extraheer ik tags uit het betreffende node object, en niet allebei?
Aantekeningen
- Deze pagina geeft een aardige indruk van de achterliggende techniek. Ik ben daar weinig in thuis. Ik heb de functie overgenomen in een tijdelijk node.tpl.php-bestand, en hij deed het ook, maar ik krijg niet de taxons terug behorende bij een opgegeven vid (vocabulary id)
Bronnen
- https://drupal.org/node/49768 - Node object reference
- https://drupal.org/node/770782 - Creating View of Distinct Active Taxonomy Terms (browse by category)
- https://api.drupal.org/api/drupal/modules!taxonomy!taxonomy.module/function/taxonomy_get_term/6
- http://www.ubercart.org/forum/development/3868/nifty_products_tutorial_part_1
Zie ook
Bronnen
In het Engels: theming of an Übercart product page
- https://www.google.com/search?q=ubercart+theming+product+page
- http://www.ubercart.org/docs/user/10968/theming_product_pages - Legt uit hoe je variabelen uit een node-object extraheert!
- http://drupal.org/node/529442 - Ander voorbeeld van extractie variabelen uit node-object;
- http://www.ubercart.org/forum/development/3868/nifty_products_tutorial_part_1 - Theming-voorbeeld node-product.tpl.php;
- http://codekarate.com/content/theming-ubercart-product-page-drupal-6 - Theming-voorbeeld node-product.tpl.php;
- http://www.ireckon.com/web-dev/cms/drupal/tutorial-how-to-make-a-better-ubercart-product-page/