Since this tip might come in handy for many others out there, I decided to write this little tutorial in English. Since I am not a native speaker, I apologize for my poor language. If you have any questions to this tutorial, feel free to add a comment. I’ll reply back!

So you are using VirtueMart on Joomla and you are using the SEF-extension sh404SEF? It is said to be the best SEF-Tool for VirtueMart. I can’t judge that, since I haven’t tried other plugins for this use-case. But this plugin is to some extend a little tricky. Especially, as I found out, when you are using the virtuemart-category-IDs on URLs.

The problem

First of all: What is this all about?

Basically, the SEF-Tool switches nasty url-strings like index.php?option=com_virtuemart&Itemid=7&category_id=205&flypage=flypage.tpl&lang=de&page=shop.product_details&product_id=3024 to nicer ones, which read like: my_shop_category/product_sku/product_name.html Search engines like that kind of URLs better that those unreadable gibberish strings.

If you are using sub-categories on virtuemart, you might think about adding the IDs to the URLs. You would do that, if you had sub-categories with identical name under different parent-categories. Sub-cCategory-URLs including their IDs help search engines to know, that those are different. But: sh404SEF has the little bug (or is it a feature?), that if you activate using IDs in category-URLs, it also adds them to the page title, which is not that useful.

To deactivate the category-IDs from the page title, you’ll have to hack a PHP-File. It sounds hardy, but it isn’t.

Remove the category ID from the page title

  1. Use your familiar FTP-application, connect to your VirtueMart store and go to the folder /components/com_sh404sef/meta_ext
  2. Here you will find a file called “com_virtuemart.php“. Open that file in an editor.
  3. Look for the first function that is declared in this file. It begins with function vm_sef_get_category_title( &$db, &$catDesc, $category_id, $option, $shLangName ){
  4. Later on in this function, around line 81, you’ll find this declaration of the page title:
    $title='';
    do { // all categories and subcategories
    $title .= ( $sefConfig->shInsertCategoryId ?
    $tree[ $category_id ]->category_id.$sefConfig->replacement : '')
    .$tree[ $category_id ]->category_name. ' | ';
    $category_id = $tree [ $category_id ]->category_parent_id;
    } while( $category_id != 0 );
    return rtrim( $title, ' | ');
  5. You will have to change the first set of definition to the page title. Change the lines
    $title .= ( $sefConfig->shInsertCategoryId ?
    $tree[ $category_id ]->category_id.$sefConfig->replacement : '')
    .$tree[ $category_id ]->category_name. ' | ';
    to
    $title .= /* ( $sefConfig->shInsertCategoryId ?
    .$tree[ $category_id ]->category_id.$sefConfig->replacement : '') */
    $tree[ $category_id ]->category_name. ' | ';
    That means that you comment out (“/* comment here */”) using the category id in your page title. You could also delete this, but I prefer leaving such reductions in the original PHP-file for later reference.
  6. Be sure to remove the “.” before the second $tree-variable, otherwise you shop won’t work. an return a PHP-error.
  7. Save that file and re-upload it to its destination folder.

Done! You dont’t even need to purge your SEF-URLs.

, , , , ,

Wie ich ja vor geraumer Zeit schon berichtete, verursachen die beiden Lightbox bzw. Slimbox von Joomla! und VirtueMart untereinander Schwierigkeiten. In Folge dessen hatte ich ja die YOOEffects Lightbox (in Joomla! mitgeliefert) deaktiviert. Nun wollte ich die Lightbox aber ausserhalb von VirtueMart doch nutzen, jedoch nur für eine bestimmte, dritte Extension, nämlich die Freestyle FAQ Lite.

Nachdem ich ein bischen in der Joomla!-Dokumenation gestöbert hatte und versucht hatte, im Forum einen meinem Problem entsprechendem Beitrag zu finden, was jedoch weitestgehend erfolglos blieb. Denn mein Problem ist – anders formuliert und auf den Punkt gebracht:

Wie kann ich ein Stylesheet und ein JavaScript von einer Joomla!-Komponente für eine andere benutzen?

Und um es ein wenig einzugrenzen: Das Stylesheet und das JavaScript sollen nur bei dieser einen Komponente geladen werden.

Denn ich wollte das beides nicht einfach in die index.php-Seite schreiben. Denn dies bedeutet, dass die Slimbox von VirtueMart bei jeder anderen Joomla!-Seite, die dies zum einen nicht unbedingt benötigt und zum anderen dadurch die Ladezeiten und den HTML-Code unnötig vergrößert, mitliefern. Mit den im Forum und in der Dokumentation gewonnenen Informationen kurzentschlossen selbst Hand angelegt.

Der verantwortliche Code

Ein Leichtes war es nämlich herauszufinden, dass folgende drei Zeilen Code mit der Angabe der entsprechenden Konstanten für den Aufruf des Stylesheets und des JavaScriptes sorgen:
$document =& JFactory::getDocument(); // Referenz zum Dokument herstellen
$document->addStyleSheet($url);
$document->addScript($url);

Die Variable $url sollte nicht zwei mal verwendet werden, da Stylesheet und JavaScript an unterschiedlichen Orten liegen. Da ich die Variablen nicht definieren wollte, habe ich hier statt dessen direkt den Pfad eingetragen (siehe unten).

Welche Datei ist für das Laden des Codes verantwortlich?

Das war eigentlich das schwierigste Unterfangen hierbei: herauszufinden, in welcher Datei ich den Code einfügen muss, damit das Stylesheet und das JavaScript geladen werden. Da ich im Forum gelesen hatte, dass dies in der “Hauptdatei” eingefügt werden müsse, habe ich nach einigem Suchen (das ist ja das schlimmste an Joomla!: diese Dateistruktur!) die richtige Datei gefunden.

/components/com_fsf/views/faq/tmpl/default.php

Der Code funktioniert aber genau so gut in der view.html.php unter

/components/com_fsf/views/faq/view.html.php

 

Den PHP-Code einfügen

Das Einfügen des Codes in die default.php ist hierbei nicht ganz trivial. Man muss nämlich darauf achten, es an die richtige Stelle zu bringen. Denn nach einer kurzen PHP-Deklaration folgt jede Menge HTML-Code – und in diesem nützt der PHP Code nicht viel, denn die Links zum Stylesheet und zum JavaScript müssen ja in den -Tag des HTML-Dokuments. Ich habe also die Stelle
<?php
// No direct access
defined('_JEXEC') or die('Restricted access'); ?>
 

<div class="component-header">
<div class="componentheading">
Frequently Asked Questions (FAQ) - Häufig gestellte Fragen
</div>
</div>

ziemlich am Anfang der Datei genommen und es vor dem PHP-beendenden Tag ?> eingefügt. Wichtig: vor dem Fragezeichen muss immer ein Leerzeichen stehen.

Dort habe ich diesen angepassten Code eingefügt:

// adding Virtuemart Lightbox to this module
$document =& JFactory::getDocument();
$document->addScript('/components/com_virtuemart/js/slimbox/js/slimbox.js');
$document->addStyleSheet('/components/com_virtuemart/js/slimbox/css/slimbox.css');

Das Einfügen des Codes in die view.html.php im darüber liegenden Ordner habe ich auch probiert – das funktioniert genau so gut. Ich habe es dann dort gelassen, denn irgendwie erschien mir das Laden des Stylesheets und des JavaScriptes an dieser Stelle sinnvoller.

, , ,

Ich arbeite ja seit einiger Zeit an einem Onlineshop-Projekt, welches VirtueMart unter Joomla! benutzt.
Hier gibt es das tolle Feature, dass Produktbilder in der Vergrößerungsansicht statt in einem Pop-Up in einer so genannten Lightbox geöffnet werden. Das ist im Grunde auch eine Art Pop-Up, jedoch nicht in einem neuen Browserfenster, sondern direkt im gleichen Fenster, wo der Rest der Webseite in den Hintergrund (und meisten abgegraut) rückt. Praxisbeispiel siehe Abbildungen unten ;-)

Nun ist es so, dass unter (scheinbar) normalen Umständen die Produktabbildungen im Shopsystem Virtuemart in zwei Lightboxes, die übereinander liegen, geöffnet werden. Der Grund hierfür ist simpel: zum einen bietet das (Standard-?) Plugin “YOOeffects” eine Lightbox für Bildverknüpfungen an, und das Joomla!-Modul VirtueMart eben auch. Wenn in beiden die Lightbox aktiviert ist, werden eben auch beide geöffnet.

Lightbox von VirtueMart

Die VirtueMart Lightbox heisst eigentlich “Slimbox“. Diese Information is wichtig, wenn ihr danach im Quellcode suchen wollt – ich habe mir einen Wolf nach dem entsprechenden Scriptaufruf gesucht, bevor ich das wusste. Die Slimbox kann man ein-/abschalten in den Einstellungen unter “Administration / Konfiguration” -> “Seite”, dort unter “Layout” im Punkt “Wählen Sie das Thema/Stil für den Shop” diesen kleinen “Konfuguration”-Link klicken.

VirtueMart Slimbox deaktivieren Schritt 1

Hier kann man dann unter “Open Product Images in a LightBox?” eifnach “No” auswählen. Dies hatte bei mir aber zur Folge, dass die Produktabbildungen gar nicht mehr in einer Lightbox, sondern in einem Browser-Pop-Up geöffnet wurden.

VirtueMart Slimbox deaktivieren Schritt 2

Also: Kommando zurück und die andere Lightbox deaktivieren.

Lightbox von Joomla! / YOOeffects

Im Joomla!-Menü unter “Erweiterungen” die “Plugins” aufrufen und dort auf YOOeffects klicken, um in die Einstellungen für das Plugin zu gelangen. Das Plugin kann sich auf der zweiten Seite befinden, das Joomla! standardmässig nur 20 Einträge pro Seite anzeigt, hier also ggf. weiter blättern.

Hier kann man in den Plugin-Einstellungen bei “Lightbox” einfach “Nein” auswählen und schon ist das Problem gelöst! :-)

YOOeffects Lightbox deaktivieren

Die Produktabbildungen werden übrigens nur dann in der Slimbox geöffnet, wenn im jeweiligen Produkt keine URL angeben ist. Denn dies ist die URL, mit der das Bild im Frontend verlinkt werden soll (URL leer bedeutet also, “Großes Bild aufrufen”). Die Lightboxen funktionieren auch normalerweise nur dann, wenn der Link direkt auf eine Bilddatei verläuft und im <a href=”…”>-HTML-Tag der Schnipsel rel=”lightbox” mitgeschleppt wird, was das Plugin aber bei korrekter Installation per JavaScript von selbst erledigt.

VirtueMart Produktdetail-URL entfernen, um Großbildansicht (in Lightbox oder Browser-pop-Up) zu aktivieren.

Button-Grafiken der VirtueMart Slimbox hinzufügen

Jetzt fehlten aber bei der VirtueMart-Slimbox – zumindest bei mir – noch die Buttons (vorheriges Bild, nächstes Bild, Schliessen). Nachdem ich im HTML-Quellcode den Scriptaufruf gefunden hatte, wusste ich auch, in welchem Pfad ich danach suchen sollte: In /components/com_virtuemart/js/slimbox/css findet sich die CSS-Datei, die steuert wie die Slimbox aussehen soll. Hier erfährt man auch, ob die Buttons aufgerufen werden, in welchem Pfad die liegen sollen und wie deren Dateiname ist.

Pfad

Ganz einfach. Ein Blick in das CSS verrät alles.
#lbPrevLink:hover {
background: transparent url(prevlabel.gif) no-repeat 0 15%;
}

Die Dateien liegen also im gleichen Verzeichnis, wie das CSS für die Slimbox.

Dateinamen

Die Dateien heissen

  • blank.gif
  • closelabel.gif
  • loading.gif
  • nextlabel.gif
  • prevlabel.gif

Aufruf der Button-Dateien

Kann man ganz einfach checken. Im Slimbox-CSS sollten folgende Zeilen (an unterschiedlichen Stellen) enthalten sein:
.lbLoading {
background: #fff url(loading.gif) no-repeat center;
}

#lbPrevLink:hover {
background: transparent url(prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink:hover {
background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}

#lbCloseLink {
background: transparent url(closelabel.gif) no-repeat center;
}

Bei dem Close-Link standen bei mir noch mehr Werte, die dessen Erscheinungsbild definieren – aber die sin an dieser Stelle ja nicht so wichtig. Wenn die Dateien von einem anderen Ort abrufen werden sollen, kann das hier in der url()-Variablen angegeben werden.

Ich habe mir die entsprechenden Grafiken besorgt und ins Verzeichnis hochgeladen. Neu einem Chache-bereinigtem Neuladen der Produktdetailseite (Strg+F5 statt nur F5 – denn das CSS muss ja auch neu geladen werden) wurden die Buttons dann auch angezeigt.

, , , ,