Add badge image next to product title in category view and details view

[johnyDev]

Hello,

I want to add a badge next to the title of the product in the category view (list of products) and details view (single product)

My store is for selling Joomla extensions, so I need to display the nature of the extensions using a badge to display whether it's a "plugin", "module" or a "component"
also I need a badge for compatibility "J2.5" , "J3"

My be custom field is the way to go, but any help on how to proceed ? Note that I am already overriding the category view, just for design and I don't want to hard code the badges.

Thank you for your help.

Joomla! 3.3.6
VirtueMart 3.0.9

[johnyDev]

Ok I found a solution:


1) Create a custom field of type " Image" and in "Layout position" put a custom name for example "myNewPosition"
2) In you product add the custom field and add the image
3) Override the file  "com_virtuemart\sublayouts\products.php" (product in category view) or/and  "com_virtuemart\views\productdetails\tmpl\default.php" (products details view )
4) add this code to the overridden files in the place that you want to display the image:


Case  : "com_virtuemart\sublayouts\products.php"

Code Select Expand



<?php 
         if (!empty($product->customfieldsSorted['myNewPosition'])) 
        {
            echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$product,'position'=>'myNewPosition'));
        } 
 ?>




Case: "com_virtuemart\views\productdetails\tmpl\default.php"

Code Select Expand


  <?php 
           echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'myNewPosition'));
   ?>


[shenlong2210]

CSS
.bonusbadge {
      background: rgba(0,0,255,1);
      border-radius: 10px;
       color:white;
      width: 200px;
      height: 50px;
      position: absolute;
      top: 0px; 
      right:0px;   
      z-index:9999;
   }

CODE
   <!-- shenlong2210 CHÈN BADGE VÀO FEATURE PRODUCTS -->
               <?php
         if (!empty($product->product_special))
        {
            ?>
            <span class="bonusbadge">GIẢM THÊM 300k</span>
            <?php
        } ?>
<!-- shenlong2210 CHÈN BADGE VÀO FEATURE PRODUCTS -->