php begrijpen en aanpassen.in Virtuemart categorie weergave

PHP is echt zo’n geheimtaal die duidelijk maakt dat woorden kracht in zich hebben. PHP taal zet zaken in beweging en daarom zijn webpagina’s die opgemaakt zijn met PHP “dynamische websites”. Een Joomla website dus ook en daarmee ook de Joomla component Virtuemart. Wat we zien binnen Virtuemart wordt bepaald door de PHP code. Vandaag heb ik binnen die code wat moeten aanpassen om gehoor te geven aan de wens van een klant.

De wens: bij de categorieweergave (alle producten binnen 1 categorie), openen de afbeeldingen zich in een lightbox popup. Onder elke afbeelding staat ook een link en daaronder een button en als je daar op klikt opent zich de product details pagina van het betreffende product. Teveel verschillende acties wat betreft de klant. De klant wil het omdraaien: bij klikken op een product afbeelding moet de klant doorverwezen worden naar de bijbehorende product details pagina en die link en button onder de afbeelding wil hij weghalen.

HTML ten opzichte van PHP: Hier wordt het grote verschil in karakter duidelijk wat betreft de taal “HTML” en de taal “PHP”. Binnen een HTML pagina zouden we gewoon een hyperlink plaatsen om de afbeelding heen en die link en button daaronder weghalen. Klaar. Dat lijkt simpel maar dat is niet simpel als je dit voor duizend artikelen handmatig moet doen. Daarvoor bestaat PHP. Je past 1 maal de PHP code aan en elke keer als een product categorie pagina wordt opgevraagd door de bezoeker, wordt die automatisch aangepast.

Maar hoe?
Originele PHP code (snippet) wat betreft het tonen van de miniatuurafbeelding en openen van de afbeelding in een lightbox popup:

<?php /** @todo make image popup */
echo $product->images[0]->displayMediaThumb (‘class=”browseProductImage” border=”0″ title=”‘ . $product->product_name . ‘” ‘, TRUE, ‘class=”modal”‘);
?>

Duidelijk: php is de taal, wordt die aangeroepen dan is de respons (de echo): “laat wat betreft het product ($product) een image zien en van die image alleen de verkleinde afbeelding (displayMediaThumb) en wel op deze manier (class): graag geen “border”, de titel is weggelaten maar kan worden ingevuld, met mogelijkheid het product ppnieuw te tonen maar nu ook de naam van het product en wel op deze manier (class):via een popup (gedefinieerd in css class “modal”). Deze mpgelijkheid kan je aanzetten (TRUE) of uitzetten (FALSE). Dus mijn eerste stap was om deze popup mogelijkheid op FALSE te zetten. Resultaat: nog steeds een overzicht van alle productafbeeldingen binnen een categorie maar achter de afbeelding zit nu geen link en geen popup mogelijkheid meer.

Maar ik wil wel een link achter de afbeeldingen en dat doe ik door de code aan te passen:
Nieuwe PHP code (snippet) wat betreft het tonen van de miniatuurafbeelding waarbij de bezoeker kan klikken op de afbeelding waarna de product details afbeelding van bijbehorend product geopend wordt:

<?php /** show image and link to product details page */
echo JHTML::link ($product->link, $product->images[0]->displayMediaThumb (‘class=”browseProductImage” border=”0″ title=”‘ . $product->product_name . ‘” ‘, FALSE, ‘class=”modal”‘));
?>

In gewoon Nederlands: de taal is php en bij opvragen is de respons (echo): maak een link (JHTML::link) en toon het product als zijnde een link ($product->link) maar ook de afbeeldingen op zo’n manier dat alle product afbeeldingen van een categorie als thumb worden afgebeeld. Belangrijk hierin zijn de “haakjes” (); De snippet moet hier afsluiten met een dubbele )) want het betreft een wens binnen een wens (of eerder een opdracht binnen een opdracht). De link die aangemaakt moet worden betreft alles wat tussen de haakjes staat terwijl de tweede set haakjes betrekking heeft op hoe de afbeelding die deze hyperlink omvat, getoond moet worden.

Afronding:
Vervolgens is het makkelijk om de bestaande link en button te verwijderen. Ik besluit de code tussen <!– en –> te zetten en daarmee te deactiveren. Zo kan die link en button makkelijk weer geactiveerd worden.
Vervolg:
Ik zal een aparte (WordPress) website opmaken waarin in alle “snippets” plaats die genoemd worden op dit blog zodat ze altijd makkelijk zijn terug te vinden. Nieuws volgt als die website online gaat. Groeten en stuur vragen op naar [email protected]
Meindert Jorna

p.s.: Inmiddels is de Snippet website aangemaakt en is te bekijken via www.decmsmeester.nl/snippets

p.s.: Snippets die genoemd worden binnen dit blog kunnen nu ook gevonden worden op www.kladblokje.tk of www.hetkladblok.tk