News:

Support the VirtueMart project and become a member

Main Menu

How to add Video after the product Images in thumbnails row?

Started by kostianev, July 28, 2018, 06:02:38 AM

Previous topic - Next topic

kostianev

Hello, I need to add Video preview of the product in the place of images. Do you know how can I do this guys?
Like there, look this demo at Amazon  ::)

GJC Web Design

use some unused VM product field as the youtube number etc

in the details template image have an if statement

if (*your_field*){
  echo << video embed code[*your_field*];
}else{
continue with the std code
}
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

rage76

I would like to try this too. Could you please elaborate what you have suggested GJC? Thanks !!

Studio 42

If you need as custom fields
https://shop.st42.fr/en/products/shortcodes.htm
A sample to do a youtube gallery http://pro.st42.fr/en/shortcodes/youtube-video-gallery.html
here a sample using most shotcodes http://pro.st42.fr/en/shortcodes/all-shortcodes.html with a youtube standard video.
If you want display a video in the image pos then you need to use an ID for eg. or check for the image URL string, or other image field.
Eg.
if($image->file_class == 'youtube') {

}


GJC Web Design

or e.g. use the mpn field

in the default_images.php over ride

if($this->product->product_mpn){
  // utube embed code using $this->product->product_mpn
}else{

// standard image display code

}
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

PRO

I setup a custom field called "Video" type "string"

Then i style it differently in
sublayouts/customfields.php
http://forum.virtuemart.net/index.php?topic=128936.0


   if ($class=='video' && $product->customfieldsSorted[$position]){
echo '<div class="videoWrapper">';
      $custom_title = null;
      foreach ($product->customfieldsSorted[$position] as $field) {
         ?>
            <?php
            if (!empty($field->display)){
             $field->display  = str_replace( 'youtu.be', 'youtube.com', $field->display);
         $fieldformat='<iframe width="854" height="480" src="'.$field->display.'" frameborder="0" allowfullscreen></iframe>';
               ?>
               <?php echo $fieldformat; ?>
               <?php
            }
            
      
         $custom_title = $field->custom_title;
      }
      echo '</div>';
      echo '<div style="clear:both;height:0px"></div>';
}




then, inside your images template setup the position.

if ($this->product->customfieldsSorted['video']){
echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'video','class'=> 'video','customTitle' => true ));
}


then in the backend product, i add the custom field, and just enter the url string youtube gives me.



If you want a "switch" like hover/click and change from image to video, it will take a little more coding, but doable.