VirtueMart Forum

VirtueMart 2 + 3 => Product creation => Topic started by: johnyDev on June 27, 2015, 12:29:30 pm

Title: Add badge image next to product title in category view and details view
Post by: johnyDev on June 27, 2015, 12:29:30 pm
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
Title: Re: Add badge image next to product title in category view and details view
Post by: johnyDev on June 27, 2015, 14:40:20 pm
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]

 <?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]
  <?php 
           
echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'myNewPosition'));
   
?>




 
Title: Re: Add badge image next to product title in category view and details view
Post by: shenlong2210 on August 11, 2021, 04:29:40 am
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 -->