Umstrukturierung des Templates

vi-doc · 24. Juli 2013

Joomla 2.5.11
VM 2.0.22a

Moin,
ich benutze den VM als Katalog ohne Preise. Aus diesem Grund ist der Platz rechts neben dem Produktbild leer. Ich würde gerne die Produktbeschreibung dorthin verlegen.

(siehe Anlage)

Kann mir jemand einen Tip geben, wie das zu machen ist?

Vielen Dank schon mal im Voraus

Vi-Doc

StefanSTS · 25. Juli 2013

Link zur Seite?

Das kann man auf unterschiedliche Weise realisieren.
Ein div-Container mit fester Breite, darin dann ein div mit float:left für das Bild, dann ein weiteres float:left-div für die Beschreibung.

Einen override für die "product view" erstellen, in der diese divs dann entsprechend eingesetzt werden.

Eine eigene CSS-Datei, die in der index.php des templates nach allen anderen css-Dateien aufgerufen wird, könnte das Design bestimmen.

So auf die Schnelle eine Möglichkeit
Stefan

vi-doc · 25. Juli 2013

Zitat von StefanSTS

Link zur Seite?

Das kann man auf unterschiedliche Weise realisieren.
Ein div-Container mit fester Breite, darin dann ein div mit float:left für das Bild, dann ein weiteres float:left-div für die Beschreibung.

Einen override für die "product view" erstellen, in der diese divs dann entsprechend eingesetzt werden.

Eine eigene CSS-Datei, die in der index.php des templates nach allen anderen css-Dateien aufgerufen wird, könnte das Design bestimmen.

So auf die Schnelle eine Möglichkeit
Stefan

Alles anzeigen

Hallo Stefan,
Hallo Virtuemart-Gemeinde,

wer würde das für mich gegen Rechnung ausführen?

Gruß
Vi-Doc und Achim

StefanSTS · 25. Juli 2013

Wenn das nur die Umstellung der Beschreibung ist, dann kann das auch fix gehen, vielleicht braucht's da keine Rechnung.

Hast Du schon irgendwelche Overrides erstellt? (Wenn Du nicht weißt, was das ist, hast Du noch keine erstellt.)

Wenn nicht, dann muss die Datei default.php im Ordner ../components/com_virtuemart/views/productdetails/ in den Order:
Joomla_Installation/templates/Dein_Template_Name/html/com_virtuemart/productdetails/ kopiert werden und dort angepasst werden.

Das ist eigentlich alles, wenn es einfach bleiben soll, könnte nachher einmal in die Datei schauen.

Stefan

vi-doc · 25. Juli 2013

Hallo Stefan,
Overrides erstellt habe ich noch nicht.

...was muss ich jetzt tun?

Achim

StefanSTS · 25. Juli 2013

Im Joomla-Verzeichnis findest Du einen Ordner Templates, eines dieser Templates hast Du ausgewählt. Falls das zum Beispiel atomic ist, legst Du die Datei, die ich oben beschrieben habe, in den Ordner /templates/atomic/html/com_virtuemart/productdetails/. Nur der html-Ordner wird dort sein, die beiden anderen erstellst Du vorher.
Jetzt hast Du einen Override! Nur der macht noch nichts, weil die Datei die gleiche ist wie die Originale.
Du findest übrigens einige Threads hier über Override. Die Datei in dem neuen Ordner kannst Du jetzt in einem Editor bearbeiten, bevorzugt ein HTML-Editor, der UTF-8 kann. Zum Beispiel Notepad++, ich benutze HTML-Kit Tools, aber das kostet und ist nicht nötig.

Ich schau jetzt mal eben in den Quellcode, ob das einfach umzubauen ist.

PS. Einfach gelöst ist, dass Du die eben kopierten Dateien einfach wieder herauslöschen kannst, und alles ist beim Alten. Nur trotzdem immer wieder einmal eine Sicherung von allem machen.

PS 2: Ich hab da gerade noch etwas gepostet, das sollte als Post 7 kommen, aber das muss scheinbar erst von einem Moderator gelesen werden. Schau mer mal, wann es kommt.

StefanSTS · 25. Juli 2013

Ich hab nur die Beschreibung unter die Schaltfläche "Stellen Sie eine Frage ..." gesetzt. Du kannst den ganzen Quelltext in die Override-Datei einfügen, alles andere löschen. Leider habe ich gerade keine Testumgebung hier. Wenn es nicht klappt, muss ich Dich aus Zeitgründen aufs Wochenende vertrösten.

Falls es nicht den gewünschten Effekt hat, einfach den kompletten Override-Ordner löschen und alles ist wieder wie vorher.

PHP

<?php
/**
*
* Show the product details page
*
* @package VirtueMart
* @subpackage
* @author Max Milbers, Eugen Stranz
* @author RolandD,
* @todo handle child products
* @link http://www.virtuemart.net
* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* VirtueMart is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* @version $Id: default.php 6530 2012-10-12 09:40:36Z alatak $
*/
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');
// addon for joomla modal Box
JHTML::_('behavior.modal');
// JHTML::_('behavior.tooltip');
$document = JFactory::getDocument();
$document->addScriptDeclaration("
//<![CDATA[
jQuery(document).ready(function($) {
$('a.ask-a-question').click( function(){
$.facebox({
iframe: '' . $this->askquestion_url . '',
rev: 'iframe|550|550'
});
return false ;
});
/* $('.additional-images a').mouseover(function() {
var himg = this.href ;
var extension=himg.substring(himg.lastIndexOf('.')+1);
if (extension =='png' || extension =='jpg' || extension =='gif') {
$('.main-image img').attr('src',himg );
}
console.log(extension)
});*/
});
//]]>
");
/* Let's see if we found the product */
if (empty($this->product)) {
echo JText::_('COM_VIRTUEMART_PRODUCT_NOT_FOUND');
echo '<br /><br /> ' . $this->continue_link_html;
return;
}
?>
<div class="productdetails-view productdetails">
<?php
// Product Navigation
if (VmConfig::get('product_navigation', 1)) {
?>
<div class="product-neighbours">
<?php
if (!empty($this->product->neighbours ['previous'][0])) {
$prev_link = JRoute::_('index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $this->product->neighbours ['previous'][0] ['virtuemart_product_id'] . '&virtuemart_category_id=' . $this->product->virtuemart_category_id);
echo JHTML::_('link', $prev_link, $this->product->neighbours ['previous'][0]
['product_name'], array('class' => 'previous-page'));
}
if (!empty($this->product->neighbours ['next'][0])) {
$next_link = JRoute::_('index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $this->product->neighbours ['next'][0] ['virtuemart_product_id'] . '&virtuemart_category_id=' . $this->product->virtuemart_category_id);
echo JHTML::_('link', $next_link, $this->product->neighbours ['next'][0] ['product_name'], array('class' => 'next-page'));
}
?>
<div class="clear"></div>
</div>
<?php } // Product Navigation END
?>
<?php // Back To Category Button
if ($this->product->virtuemart_category_id) {
$catURL = JRoute::_('index.php?option=com_virtuemart&view=category&virtuemart_category_id='.$this->product->virtuemart_category_id);
$categoryName = $this->product->category_name ;
} else {
$catURL = JRoute::_('index.php?option=com_virtuemart');
$categoryName = jText::_('COM_VIRTUEMART_SHOP_HOME') ;
}
?>
<div class="back-to-category">
<a href="<?php echo $catURL ?>" class="product-details" title="<?php echo $categoryName ?>"><?php echo JText::sprintf('COM_VIRTUEMART_CATEGORY_BACK_TO',$categoryName) ?></a>
</div>
<?php // Product Title ?>
<h1><?php echo $this->product->product_name ?></h1>
<?php // Product Title END ?>
<?php // afterDisplayTitle Event
echo $this->product->event->afterDisplayTitle ?>
<?php
// Product Edit Link
echo $this->edit_link;
// Product Edit Link END
?>
<?php
// PDF - Print - Email Icon
if (VmConfig::get('show_emailfriend') || VmConfig::get('show_printicon') || VmConfig::get('pdf_button_enable')) {
?>
<div class="icons">
<?php
//$link = (JVM_VERSION===1) ? 'index2.php' : 'index.php';
$link = 'index.php?tmpl=component&option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $this->product->virtuemart_product_id;
$MailLink = 'index.php?option=com_virtuemart&view=productdetails&task=recommend&virtuemart_product_id=' . $this->product->virtuemart_product_id . '&virtuemart_category_id=' . $this->product->virtuemart_category_id . '&tmpl=component';
if (VmConfig::get('pdf_icon', 1) == '1') {
echo $this->linkIcon($link . '&format=pdf', 'COM_VIRTUEMART_PDF', 'pdf_button', 'pdf_button_enable', false);
}
echo $this->linkIcon($link . '&print=1', 'COM_VIRTUEMART_PRINT', 'printButton', 'show_printicon');
echo $this->linkIcon($MailLink, 'COM_VIRTUEMART_EMAIL', 'emailButton', 'show_emailfriend');
?>
<div class="clear"></div>
</div>
<?php } // PDF - Print - Email Icon END
?>
<?php
// Product Short Description
if (!empty($this->product->product_s_desc)) {
?>
<div class="product-short-description">
<?php
/** @todo Test if content plugins modify the product description */
echo nl2br($this->product->product_s_desc);
?>
</div>
<?php
} // Product Short Description END
if (!empty($this->product->customfieldsSorted['ontop'])) {
$this->position = 'ontop';
echo $this->loadTemplate('customfields');
} // Product Custom ontop end
?>
<div>
<div class="width60 floatleft">
<?php
echo $this->loadTemplate('images');
?>
</div>
<div class="width40 floatright">
<div class="spacer-buy-area">
<?php
// TODO in Multi-Vendor not needed at the moment and just would lead to confusion
/* $link = JRoute::_('index2.php?option=com_virtuemart&view=virtuemart&task=vendorinfo&virtuemart_vendor_id='.$this->product->virtuemart_vendor_id);
$text = JText::_('COM_VIRTUEMART_VENDOR_FORM_INFO_LBL');
echo '<span class="bold">'. JText::_('COM_VIRTUEMART_PRODUCT_DETAILS_VENDOR_LBL'). '</span>'; ?><a class="modal" href="<?php echo $link ?>"><?php echo $text ?></a><br />
*/
?>
<?php
if ($this->showRating) {
$maxrating = VmConfig::get('vm_maximum_rating_scale', 5);
if (empty($this->rating)) {
?>
<span class="vote"><?php echo JText::_('COM_VIRTUEMART_RATING') . ' ' . JText::_('COM_VIRTUEMART_UNRATED') ?></span>
<?php
} else {
$ratingwidth = $this->rating->rating * 24; //I don't use round as percetntage with works perfect, as for me
?>
<span class="vote">
<?php echo JText::_('COM_VIRTUEMART_RATING') . ' ' . round($this->rating->rating) . '/' . $maxrating; ?><br/>
<span title=" <?php echo (JText::_("COM_VIRTUEMART_RATING_TITLE") . round($this->rating->rating) . '/' . $maxrating) ?>" class="ratingbox" style="display:inline-block;">
<span class="stars-orange" style="width:<?php echo $ratingwidth.'px'; ?>">
</span>
</span>
</span>
<?php
}
}
if (is_array($this->productDisplayShipments)) {
foreach ($this->productDisplayShipments as $productDisplayShipment) {
echo $productDisplayShipment . '<br />';
}
}
if (is_array($this->productDisplayPayments)) {
foreach ($this->productDisplayPayments as $productDisplayPayment) {
echo $productDisplayPayment . '<br />';
}
}
// Product Price
// the test is done in show_prices
//if ($this->show_prices and (empty($this->product->images[0]) or $this->product->images[0]->file_is_downloadable == 0)) {
echo $this->loadTemplate('showprices');
//}
?>
<?php
// Add To Cart Button
// if (!empty($this->product->prices) and !empty($this->product->images[0]) and $this->product->images[0]->file_is_downloadable==0 ) {
// if (!VmConfig::get('use_as_catalog', 0) and !empty($this->product->prices['salesPrice'])) {
echo $this->loadTemplate('addtocart');
// } // Add To Cart Button END
?>
<?php
// Availability Image
$stockhandle = VmConfig::get('stockhandle', 'none');
if (($this->product->product_in_stock - $this->product->product_ordered) < 1) {
if ($stockhandle == 'risetime' and VmConfig::get('rised_availability') and empty($this->product->product_availability)) {
?> <div class="availability">
<?php echo (file_exists(JPATH_BASE . DS . VmConfig::get('assets_general_path') . 'images/availability/' . VmConfig::get('rised_availability'))) ? JHTML::image(JURI::root() . VmConfig::get('assets_general_path') . 'images/availability/' . VmConfig::get('rised_availability', '7d.gif'), VmConfig::get('rised_availability', '7d.gif'), array('class' => 'availability')) : VmConfig::get('rised_availability'); ?>
</div>
<?php
} else if (!empty($this->product->product_availability)) {
?>
<div class="availability">
<?php echo (file_exists(JPATH_BASE . DS . VmConfig::get('assets_general_path') . 'images/availability/' . $this->product->product_availability)) ? JHTML::image(JURI::root() . VmConfig::get('assets_general_path') . 'images/availability/' . $this->product->product_availability, $this->product->product_availability, array('class' => 'availability')) : $this->product->product_availability; ?>
</div>
<?php
}
}
?>
<?php
// Ask a question about this product
if (VmConfig::get('ask_question', 1) == 1) {
?>
<div class="ask-a-question">
<a class="ask-a-question" href="<?php echo $this->askquestion_url ?>" ><?php echo JText::_('COM_VIRTUEMART_PRODUCT_ENQUIRY_LBL') ?></a>
</div>
<?php }
?>
<?php
// Product Description - Position verändert STS
if (!empty($this->product->product_desc)) {
?>
<div class="product-description">
<?php /** @todo Test if content plugins modify the product description */ ?>
<span class="title"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></span>
<?php echo $this->product->product_desc; ?>
</div>
<?php
} // Product Description END - Position verändert STS
?>
<?php
// Manufacturer of the Product
if (VmConfig::get('show_manufacturers', 1) && !empty($this->product->virtuemart_manufacturer_id)) {
echo $this->loadTemplate('manufacturer');
}
?>
</div>
</div>
<div class="clear"></div>
</div>
<?php // event onContentBeforeDisplay
echo $this->product->event->beforeDisplayContent; ?>
<?php
if (!empty($this->product->customfieldsSorted['normal'])) {
$this->position = 'normal';
echo $this->loadTemplate('customfields');
} // Product custom_fields END
// Product Packaging
$product_packaging = '';
if ($this->product->product_box) {
?>
<div class="product-box">
<?php
echo JText::_('COM_VIRTUEMART_PRODUCT_UNITS_IN_BOX') .$this->product->product_box;
?>
</div>
<?php } // Product Packaging END
?>
<?php
// Product Files
// foreach ($this->product->images as $fkey => $file) {
// Todo add downloadable files again
// if( $file->filesize > 0.5) $filesize_display = ' ('. number_format($file->filesize, 2,',','.')." MB)";
// else $filesize_display = ' ('. number_format($file->filesize*1024, 2,',','.')." KB)";
/* Show pdf in a new Window, other file types will be offered as download */
// $target = stristr($file->file_mimetype, "pdf") ? "_blank" : "_self";
// $link = JRoute::_('index.php?view=productdetails&task=getfile&virtuemart_media_id='.$file->virtuemart_media_id.'&virtuemart_product_id='.$this->product->virtuemart_product_id);
// echo JHTMl::_('link', $link, $file->file_title.$filesize_display, array('target' => $target));
// }
if (!empty($this->product->customfieldsRelatedProducts)) {
echo $this->loadTemplate('relatedproducts');
} // Product customfieldsRelatedProducts END
if (!empty($this->product->customfieldsRelatedCategories)) {
echo $this->loadTemplate('relatedcategories');
} // Product customfieldsRelatedCategories END
// Show child categories
if (VmConfig::get('showCategory', 1)) {
echo $this->loadTemplate('showcategory');
}
if (!empty($this->product->customfieldsSorted['onbot'])) {
$this->position='onbot';
echo $this->loadTemplate('customfields');
} // Product Custom ontop end
?>
<?php // onContentAfterDisplay event
echo $this->product->event->afterDisplayContent; ?>
<?php
echo $this->loadTemplate('reviews');
?>
</div>

Alles anzeigen

vi-doc · 26. Juli 2013

Hallo Stefan,

PERFEKT!

Wie kann ich dir danken?

Achim

StefanSTS · 26. Juli 2013

Wenn Du irgendwo eine Person siehst, die alleine nicht über die Straße kommt ..., mir ist mit PERFEKT schon gedankt.

f.letsch · 27. November 2013

Hallo werte FK,

ich möchte auf unsere Firmen-Website eine Produktübersicht einfügen, also keinen Shop im klassischen Sinn.

Auf der Produkt-Detail-Seite soll links ein Bild angezeigt werden, rechts neben dem Bild die technischen Daten.
Unterhalb des Bildes soll dann die ausführliche Produktbeschreibung stehen.

Burner : vapour burner

Ich hatte erst die Produktkurzbeschreibung mittels PHP-overide an die von Stefan vorgeschlagene Position verschoben.
Leider kann man in der Kurzbeschreibung den Text nicht vernünftig formatieren, und der Text steht immer noch zu weit rechts.

Am liebsten wäre mir ein separates Textfeld was ich frei bearbeiten kann.

Bin für jeden Tipp Dankbar.

Gruss Frank

StefanSTS · 27. November 2013

Die Produktbeschreibung ist schon genau das Textfeld, das Du brauchst.
Wenn Du da bestimmte Formatierungsmöglichkeiten brauchst, gibst Du in der Beschreibung einfach ein umschließendes div-Element mit class="meinSuperStyle" an und dann kannst Du z.B. einen Override für die vmsite-ltr.css anlegen und dort die Formatierungen bearbeiten.

Firefox mit Firebug helfen beim Aufspüren von Formatierungseinstellungen in den CSS-Dateien.

Override und Firebug findet die Forumssuche und auch Google. CSS, da gibt es etliche Tutorials.

Mit etwas Einarbeitung geht das relativ zügig, wenn man schon etwas Grundwissen mitbringt.

So long
Stefan

StefanSTS · 27. November 2013

Die Kurzbeschreibung wird an einigen Stellen auf 40 Wörter begrenzt. Hier kann man dann mehr angeben, oder die Begrenzung herausnehmen.
In der oben angegeben PHP-Datei wird die Kurzbeschreibung mit echo nl2br($this->product->product_s_desc); aufgerufen. An anderen Stellen findet man die Beschränkung, da wird es etwas anders aufgerufen. Nur product_s_desc hilft bei der Suche.

So short, good night
Stefan

f.letsch · 28. November 2013

Danke Stefan,

Ich werde mich dann mal etwas intensiver mit der Materie beschäftigen.
Eine kurze Frage habe ich noch.
An welcher Stelle muss ich was ändern damit die category- und produktübersicht centriert auf der Seite erscheinen.
Zur Zeit sind die Category- und Produktbilder zu weit links.

Burner
Willkommen bei GEVA

Gruss Frank

StefanSTS · 28. November 2013

Burner

http://geva-pt.com/templates/i…ches_pro/css/template.css
Zeile 4702
.row {margin-left: -20px} ändern auf
.row {margin: auto;}
Keine Ahnung, warum das div da -20px hat. Das Problem ist, dass eventuell bei einer globalen Angabe wie .row auch andere Sachen plötzlich anders aussehen.
Diese Änderung bringt den ersten Teil der Lösung, ist aber immer noch nicht ganz mittig.

Dann sind im div class="row" noch die vier divs mit den Bildern, da sind die Bilder nicht mittig ausgerichtet.

Da müsste man im Kategorie-Override noch etwas anpassen, z.Bsp. die Klasse width100 statt width90 angeben, dann sieht das alles etwas geordneter aus.
Einfach einmal Firebug ausprobieren so wie in dem Screenshot. Firebug ist ziemlich einfach zu bedienen, da kann man einfach alle CSS-Angaben ändern, schauen was passiert, und nichts geht kaputt.

StefanSTS · 28. November 2013

Unten rechts sieht man, dass die Bootstrap-CSS-Dateien alle die Klasse row angeben, ich hab überall margin-left herausgenommen, nun ist alles zentriert.

Das Template der Seite scheint nicht ganz so gut mit Bootstrap zu funken. Die Klasse row sollte in der Datei template.css einmal definiert werden, damit die Bootstrap-Einstellungen, die vorher angegeben wurden, durch die template.css überschrieben werden.

f.letsch · 28. November 2013

Danke hat funktioniert,

habe in der template.css die Zeile 4702 editiert, und in Zeile 161 margin-left auf -0px geändert.
un dann sieht es schon viel besser aus.

Glück Auf
Frank

Jamel · 28. November 2013

Wenn du dir ein ein selbsterstelltes Textbereich Feld ohne Warenkorb Attribute machst und das dort hin positionierst wo du es brauchst

Weiss nur nicht ob sich das besser formatieren lässt

Gruss Jamel

StefanSTS · 28. November 2013

Auf diesen ganzen Sortierkram über den Kategorien kannst Du vielleicht verzichten.

http://geva-pt.com/components/…assets/css/vmsite-ltr.css

Zeile 61, noch ein display: none;, dann verschwindet das alles ohne wirklich viel zu verändern.

Code

.orderby-displaynumber {
border-bottom: 1px solid #E9E8E8;
border-top: 1px solid #E9E8E8;
margin: 10px 0;
padding: 10px 0;
display: none;}

f.letsch · 29. November 2013

Danke für die umfangreiche Hilfe, habe alle Änderungen in die Override-Dateien übernommen.
Jetzt sieht es schon so aus wie ich es mir vorgestellt habe.

Ich würde noch gerne die Sortierzeile in der Produktübesicht ausblenden, da wir nicht so viel Produkte in einer Kategorie haben.
Habe aber leider die stelle in der CSS datei nicht gefunden.

Gruss Frank

Jamel · 30. November 2013

Ca Zeile 60

.orderlistcontainer div.activeOrder

components/com_virtuemart/assets/css/vmsite-ltr.css

Wenn dann dein Problem gelöst ist bitte auch oben als GELÖST markieren

Gruss Jamel