Jak přidat v administraci Opencart klikací náhledy na zboží

Migroval jsem nedávno e-shop OpenCart na nový hosting a při té příležitosti jsem dostal zadání na nějaké drobné úpravy.

Všechny jsou založené na modulu vQmod, což je jednoduchý mechanismus fungující na principu hooku. Monitoruje rutiny pro vkládání souborů (include, require) a v případě, že některý ze souborů splňuje pravidlo definované v uživatelských vzorech, provede v jeho obsahu záměnu. Nahradí originální řetězec tím uživatelským a nově vzniklý soubor podsune místo originálu.

  • Výhody – core soubory nejsou změněny, přesto lze chování shopu dobře upravit, snadno přenosné, univerzální.
  • Nevýhody – je to tupá manipulace textem, nelze pracovat na úrovni jazyka, je nutné najít přesný řetězec k záměně, zejména po aktualizaci softwaru.

Uživatelské soubory XML jsou uloženy v vqmod/xml/ a jejich struktura je jednoduchá. Následující příklady uložte do uvedeného adresáře pod dostatečně popisným jménem a s příponou .xml.

Jak přidat větší náhledy zboží v adminu

<?xml version="1.0" encoding="UTF-8"?>
 <modification>
 <id>Larger product images in admin</id>
 <version>1.0</version>
 <vqmver>2.4.0</vqmver>
 <author>Neocreo Design Solutions</author>
 <file name="admin/controller/catalog/product.php">
 <operation info="find the string with image-size and change it">
 <search position="replace"><![CDATA[
 $this->model_tool_image->resize($result['image'], 40, 40);
 ]]></search>
 <add><![CDATA[
 $image = $this->model_tool_image->resize($result['image'], 228, 228);
 ]]></add>
 </operation>
 </file>
 </modification>

Jak přidat v adminu klikací náhled na zboží

Zákazník chtěl větší náhledy, ale v daném souboru se pracuje se strukturou, kde je odkaz pouze na thumbnail.  Adresu velkých náhledů tedy nebylo odkud brát. Věděl jsem ale, že jsou vygenerované a název souboru se od náhledu liší jen rozměrem  – proto dirty hack se str_replace. Nepěkné, ale funguje (obrázků je tam několik giga, přegenerování náhledů je teprve v plánu).

<?xml version="1.0" encoding="UTF-8"?>
 <modification>
 <id>Klikací náhledy produktů v administraci</id>
 <version>1.0</version>
 <vqmver>2.4.0</vqmver>
 <author>Vlastimil Ott</author>
 <file name="admin/view/template/catalog/product_list.tpl">
 <operation info="Najde místo vložení obrázku a vloží kolem něj klikací náhled">
 <search position="replace"><![CDATA[
 <td><img src="<?php echo $product['image']; ?>" alt="<?php echo $product['name']; ?>" style="padding: 1px; border: 1px solid #DDDDDD;" /></td>
 ]]></search>
 <add><![CDATA[
 <td>
 <div><a href="<?php  $i = str_replace('228', '500', $product['image']); echo $i;  ?>" rel="colorbox" title="Větší náhled obrázku"><img src="<?php echo $product['image']; ?>" id="image" width="40" alt="<?php echo $product['name']; ?>" style="padding: 1px; border: 1px solid #DDDDDD;" /></a></div></td>
 ]]></add>
 </operation>
 </file>
 </modification>

 Jak přidat colorbox do adminu

Asi největší výzva – klikací náhled dostatečné velikosti se otevřel, ale v novém okně. Jak zajistit efekt známý jako lightbox (zde colorbox)? Tj. pozadí potemní a obrázek „vystoupí“ do popředí.

Vcelku jednoduše – přidat do hlavičky skriptu pro administrátorské rozhraní volání knihovny jQuery a CSS colorboxu, přidat patřičný styl obrázkům (viz předchozí příklad a speciálně rel=“colorbox“) a pomocí jQuery spustit efekt. Nejvíce práce mi dalo nezapomenout na inline jQuery a všimnout si parametru rel= u obrázku. Poděkování patří lidem na fóru OpenCart, kde je to popsané.

<?xml version="1.0" encoding="UTF-8"?>
 <modification>
 <id>Klikací náhledy produktů v administraci</id>
 <version>1.0</version>
 <vqmver>2.4.0</vqmver>
 <author>Vlastimil Ott</author>
 <file name="admin/view/template/common/header.tpl">
 <operation info="Načte colorbox v adminu">
 <search position="replace"><![CDATA[
 </head>
 ]]></search>
 <add><![CDATA[
 <script type="text/javascript" src="/catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>
 <link rel="stylesheet" type="text/css" href="/catalog/view/javascript/jquery/colorbox/colorbox.css" media="screen" />
 <script type="text/javascript"><!--
 $(document).ready(function() {
 $('.colorbox').colorbox({
 overlayClose: true,
 opacity: 0.5,
 rel: "colorbox"
 });
 });
 //--></script>
 </head>
 ]]></add>
 </operation>
 </file>
 </modification>