Video next to product image

bw92116
Topic Author
Offline

12 years 4 months ago - 12 years 4 months ago #161062 by bw92116

Video next to product image was created by bw92116

-- url of the page with the problem -- : fireworksland.com/hikashop-menu-for-cate...ia-show-of-shows-dvd
-- HikaShop version -- : HikaShop Essential 2.3.1
-- Joomla version -- : 3.3.1
-- PHP version -- : 5.3.28
-- Browser(s) name and version -- : Safari 7.0.4
-- Error-message(debug-mod must be tuned on) -- : Error_message

Is there a way I can put a video next to the product image? See the screen shot attached. The red box is where I would like the video to show. I am using the Videobox plugin and the video file is hosted on my site.

I have created a custom field called "Preview Video" and I put the code into that field. For example, for one producxt the field contains
{videobox} fireworksland.com/images/videos/PyroVide...ricks.mp4||width=350 , height=262{/videobox}

The video plays correctly, but it is below the price and Add to cart button. There is a label called Specifications, then the video field. What I want is for the video to appear in the area of the red box on the screen shot, next to the product image.

Is this possible and if so, how would I create this? I assume this means editing a Views file.
Thank you for your help.

Last edit: 12 years 4 months ago by bw92116.

Please Log in or Create an account to join the conversation.

Xavier
Offline

12 years 4 months ago #161067 by Xavier

Replied by Xavier on topic Video next to product image

Hi,

Yes it's possible, you have to edit the view "product / show_default" and add the tag at the desired place.
This tutorial should help you:
www.hikashop.com/support/support/documen...ize-the-display.html

Please Log in or Create an account to join the conversation.

bw92116
Topic Author
Offline

12 years 4 months ago #161182 by bw92116

Replied by bw92116 on topic Video next to product image

Thank you for your reply. I found the place in the show_default.php file.
However, I am struggling with the proper code to insert there.
I tried several versions of code, and all resulted in a blank white page.
Can you give me a general format to show a custom text field into a view?
Thank you

Please Log in or Create an account to join the conversation.

nicolas
Offline

12 years 4 months ago #161226 by nicolas

Replied by nicolas on topic Video next to product image

Hi,

Displaying then content of a custom product field on the product page is easy. You can do like that:

Code:

echo $this->element->FIELD;

where FIELD is the column name of the custom field.
Note that if you add the code in the HTML, you'll need to add the tags <?php and ?> around the code so that the code gets interpreted by PHP.

The following user(s) said Thank You: bw92116

Please Log in or Create an account to join the conversation.

bw92116
Topic Author
Offline

12 years 4 months ago - 12 years 4 months ago #161239 by bw92116

Replied by bw92116 on topic Video next to product image

Thank you for your help nicolas.
I put this code: <?php echo $this->element->video; ?>
into the file "show_default.php", as the first thing in the div "hikashop_product_right_part"

....
<div id="hikashop_product_right_part" class="hikashop_product_right_part span6">
<?php echo $this->element->video; ?>
<?php
if(!empty($this->element->extraData->rightBegin))
....

The video appears, but it is below the product image, and this creates a lot of extra white space on the page. (See the attached screen shot.)

I want the video to appear to the right of the product image. Is there an extra piece of code I can add, or add something to the CSS file? Sorry, I am pretty new at coding.
Thank you for your help.

Last edit: 12 years 4 months ago by bw92116.

Please Log in or Create an account to join the conversation.

nicolas
Offline

12 years 4 months ago #161252 by nicolas

Replied by nicolas on topic Video next to product image

Hi,

It's just a matter of CSS.
If you add that CSS on your website you will get the video on the right area:
.hikashop_product_left_part{ width: 50% !important; }

Please Log in or Create an account to join the conversation.

bw92116
Topic Author
Offline

12 years 4 months ago #161301 by bw92116

Replied by bw92116 on topic Video next to product image

Thank you for your help nicolas. I added this line:
.hikashop_product_left_part{ width: 50% !important; }
to 2 places: the HikaShop front-end CSS file, and also to my CSS overrides in my template.
I cleared all caches, and the video is still showing below the product image, not to the right.
See example at fireworksland.com/stores/product/89-pyrotopia-show-of-shows-dvd
Maybe I have the code to display the video in the wrong place?
In the file show_default.php, at line 54 I added
<?php echo $this->element->video; ?>
Is that the right place in show_default to place that code?

Code:

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	2.3.1
 * @author	hikashop.com
 * @copyright	(C) 2010-2014 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?><div id="hikashop_product_top_part" class="hikashop_product_top_part">
<?php if(!empty($this->element->extraData->topBegin)) { echo implode("\r\n",$this->element->extraData->topBegin); } ?>
	<h1>
		<span id="hikashop_product_name_main" class="hikashop_product_name_main">
			<?php
			if (hikashop_getCID('product_id')!=$this->element->product_id && isset ($this->element->main->product_name))
				echo $this->element->main->product_name;
			else
				echo $this->element->product_name;
			?>
		</span>
		<?php if ($this->config->get('show_code')) { ?>
		<span id="hikashop_product_code_main" class="hikashop_product_code_main">
			<?php
			echo $this->element->product_code;
			?>
		</span>
		<?php } ?>
	</h1>
<?php if(!empty($this->element->extraData->topEnd)) { echo implode("\r\n",$this->element->extraData->topEnd); } ?>
<?php
	$pluginsClass = hikashop_get('class.plugins');
	$plugin = $pluginsClass->getByName('content', 'hikashopsocial');
	if(!empty($plugin) && (@$plugin->published || @ $plugin->enabled)) {
		echo '{hikashop_social}';
	}
?>
</div>
<?php if(HIKASHOP_RESPONSIVE){ ?>
	<div class="row-fluid">
<?php } ?>
<div id="hikashop_product_left_part" class="hikashop_product_left_part span6">
	<?php
	if(!empty($this->element->extraData->leftBegin)) { echo implode("\r\n",$this->element->extraData->leftBegin); }

	$this->row = & $this->element;
	$this->setLayout('show_block_img');
	echo $this->loadTemplate();

	if(!empty($this->element->extraData->leftEnd)) { echo implode("\r\n",$this->element->extraData->leftEnd); }
	?>
</div>

<div id="hikashop_product_right_part" class="hikashop_product_right_part span6">
<?php echo $this->element->video; ?>
	<?php
	if(!empty($this->element->extraData->rightBegin))
		echo implode("\r\n",$this->element->extraData->rightBegin);
	?>
	<div id="hikashop_product_vote_mini" class="hikashop_product_vote_mini">
		<?php
		$config =& hikashop_config();
		if($this->params->get('show_vote_product') == '-1'){
			$this->params->set('show_vote_product',$config->get('show_vote_product'));
		}
		if($this->params->get('show_vote_product')){
			$js = '';
			$this->params->set('vote_type','product');
			if(isset($this->element->main)){
				$product_id = $this->element->main->product_id;
			}else{
				$product_id = $this->element->product_id;
			}
			$this->params->set('vote_ref_id',$product_id);
			echo hikashop_getLayout('vote', 'mini', $this->params, $js);
		}
		?>
	</div>
	<span id="hikashop_product_price_main" class="hikashop_product_price_main">
		<?php
		if ($this->params->get('show_price')) {
			$this->row = & $this->element;
			$this->setLayout('listing_price');
			echo $this->loadTemplate();
		}
		?>
	</span>
	<?php
	if(!empty($this->element->extraData->rightMiddle))
		echo implode("\r\n",$this->element->extraData->rightMiddle);
	?>
	<?php
		$this->setLayout('show_block_dimensions');
		echo $this->loadTemplate();
	?><br />
	<?php
	if($this->params->get('characteristic_display')!='list'){
		$this->setLayout('show_block_characteristic');
		echo $this->loadTemplate();
		?>
		<br />
	<?php
	}

	$form = ',0';
	if (!$this->config->get('ajax_add_to_cart', 1)) {
		$form = ',\'hikashop_product_form\'';
	}
	if (hikashop_level(1) && !empty ($this->element->options)) {
	?>
		<div id="hikashop_product_options" class="hikashop_product_options">
			<?php
			$this->setLayout('option');
			echo $this->loadTemplate();
			?>
		</div>
		<br />
		<?php
		$form = ',\'hikashop_product_form\'';
		if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') {
		?>
			<input type="hidden" name="popup" value="1"/>
		<?php
		}
	}
	if (!$this->params->get('catalogue') && ($this->config->get('display_add_to_cart_for_free_products') || !empty ($this->element->prices))) {
		if (!empty ($this->itemFields)) {
			$form = ',\'hikashop_product_form\'';
			if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') {
			?>
				<input type="hidden" name="popup" value="1"/>
			<?php
			}
			$this->setLayout('show_block_custom_item');
			echo $this->loadTemplate();
		}
	}
	$this->formName = $form;
	if($this->params->get('show_price')){ ?>
		<span id="hikashop_product_price_with_options_main" class="hikashop_product_price_with_options_main">
		</span>
	<?php }
	if(empty ($this->element->characteristics) || $this->params->get('characteristic_display')!='list'){ ?>
		<div id="hikashop_product_quantity_main" class="hikashop_product_quantity_main">
			<?php
			$this->row = & $this->element;
			$this->ajax = 'if(hikashopCheckChangeForm(\'item\',\'hikashop_product_form\')){ return hikashopModifyQuantity(\'' . $this->row->product_id . '\',field,1' . $form . ',\'cart\'); } else { return false; }';
			$this->setLayout('quantity');
			echo $this->loadTemplate();
			?>
		</div>
	<?php } ?>
	<div id="hikashop_product_contact_main" class="hikashop_product_contact_main">
		<?php
		$contact = $this->config->get('product_contact',0);
		if (hikashop_level(1) && ($contact == 2 || ($contact == 1 && !empty ($this->element->product_contact)))) {
			$empty = '';
			$params = new HikaParameter($empty);
			global $Itemid;
			$url_itemid='';
			if(!empty($Itemid)){
				$url_itemid='&Itemid='.$Itemid;
			}
			echo $this->cart->displayButton(JText :: _('CONTACT_US_FOR_INFO'), 'contact_us', $params, hikashop_completeLink('product&task=contact&cid=' . $this->element->product_id.$url_itemid), 'window.location=\'' . hikashop_completeLink('product&task=contact&cid=' . $this->element->product_id.$url_itemid) . '\';return false;');
		}
		?>
	</div>
	<?php
	if(!empty($this->fields)){
		$this->setLayout('show_block_custom_main');
		echo $this->loadTemplate();
	}
	?>
	<span id="hikashop_product_id_main" class="hikashop_product_id_main">
		<input type="hidden" name="product_id" value="<?php echo $this->element->product_id; ?>" />
	</span>
	<?php
	if(!empty($this->element->extraData->rightEnd))
		echo implode("\r\n",$this->element->extraData->rightEnd);
	?>
</div>
<?php if(HIKASHOP_RESPONSIVE){ ?>
	</div>
<?php } ?>
<div id="hikashop_product_bottom_part" class="hikashop_product_bottom_part">
	<?php
	if(!empty($this->element->extraData->bottomBegin))
		echo implode("\r\n",$this->element->extraData->bottomBegin);
	?>
	<div id="hikashop_product_description_main" class="hikashop_product_description_main">
		<?php
		echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
		?>
	</div>
	<span id="hikashop_product_url_main" class="hikashop_product_url_main">
		<?php
		if (!empty ($this->element->product_url)) {
			echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');
		}
		?>
	</span>
	<?php
	$this->setLayout('show_block_product_files');
	echo $this->loadTemplate();
	?>
	<?php
	if(!empty($this->element->extraData->bottomMiddle))
		echo implode("\r\n",$this->element->extraData->bottomMiddle);
	?>
	<?php
	if(!empty($this->element->extraData->bottomEnd))
		echo implode("\r\n",$this->element->extraData->bottomEnd);
	?>
</div>

Please Log in or Create an account to join the conversation.

nicolas
Offline

12 years 4 months ago #161311 by nicolas

Replied by nicolas on topic Video next to product image

Strange it was enough with firebug to adapt the page.

Use that CSS then:
.hikashop_product_left_part{ width: 40% !important; }
.hikashop_product_right_part{ width: 40% !important; }

No need to change your PHP code, it's fine. It's just a matter of CSS.

The following user(s) said Thank You: bw92116

Please Log in or Create an account to join the conversation.

bw92116
Topic Author
Offline

12 years 4 months ago #161450 by bw92116

Replied by bw92116 on topic [SOLVED] Video next to product image

Thank worked, thank you!

Please Log in or Create an account to join the conversation.

francota
Offline

9 years 4 months ago #273471 by francota

Replied by francota on topic [SOLVED] Video next to product image

hello bw92116
Can you link a page with the video in the product page please??
Just to see how it works

Thanks
Frank

Please Log in or Create an account to join the conversation.

bw92116
Topic Author
Offline

9 years 4 months ago - 9 years 4 months ago #273479 by bw92116

Replied by bw92116 on topic [SOLVED] Video next to product image

goldfieldfireworks.com/index.php/our-pro...ct/647-diablo-shells

I created a new custom field for the video link. It does not show the video on the same page as the product. It opens a new window for the video. On my phone, though, it does not open a new window, it simply downloads the video file to the phone. So it is not satisfactory to me. But at least the customer can watch the video somehow.

I wish that HikaShop did have a standard field for the product video, and that you could place the video where you want on the product page, and the customer could watch it on the product page, with the video next to the product photo.

Last edit: 9 years 4 months ago by bw92116.

Please Log in or Create an account to join the conversation.

francota
Offline

9 years 4 months ago #273498 by francota

Replied by francota on topic [SOLVED] Video next to product image

Thank you but the link of the video doesn't work

Please Log in or Create an account to join the conversation.

bw92116
Topic Author
Offline

9 years 4 months ago #273527 by bw92116

Replied by bw92116 on topic [SOLVED] Video next to product image

What happens when you click on it?
On my iPad, when I tap on "Play video," the browser opens another window, and the video is in that window.

Please Log in or Create an account to join the conversation.

Time to create page: 0.085 seconds