VirtueMart Forum

VirtueMart 2 + 3 + 4 => General Questions => Topic started by: kostianev on July 28, 2018, 06:02:38 AM

Title: How to add Video after the product Images in thumbnails row?
Post by: kostianev on July 28, 2018, 06:02:38 AM
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 (https://www.amazon.com/gp/product/B06Y4GZS9C/ref=s9_acss_bw_cg_PCLTMC_2e1_w?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=merchandised-search-2&pf_rd_r=ESHWRHZFSQBW8CH9Q5W2&pf_rd_t=101&pf_rd_p=fe7e18d4-7329-4666-9da2-bc8b84c302d0&pf_rd_i=565108)  ::)
Title: Re: How to add Video after the product Images in thumbnails row?
Post by: GJC Web Design on July 28, 2018, 16:14:54 PM
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
}
Title: Re: How to add Video after the product Images in thumbnails row?
Post by: rage76 on July 30, 2018, 19:18:41 PM
I would like to try this too. Could you please elaborate what you have suggested GJC? Thanks !!
Title: Re: How to add Video after the product Images in thumbnails row?
Post by: Studio 42 on July 30, 2018, 20:30:38 PM
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') {

}

Title: Re: How to add Video after the product Images in thumbnails row?
Post by: GJC Web Design on July 31, 2018, 09:57:14 AM
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

}
Title: Re: How to add Video after the product Images in thumbnails row?
Post by: PRO on August 02, 2018, 22:20:38 PM
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.