Video next to product image

  • Posts: 97
  • Thank you received: 1
  • Hikashop Essential
10 years 10 months ago #161062

-- 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.

Attachments:
Last edit: 10 years 10 months ago by bw92116.

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

  • Posts: 13201
  • Thank you received: 2322
10 years 10 months ago #161067

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.

  • Posts: 97
  • Thank you received: 1
  • Hikashop Essential
10 years 10 months ago #161182

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.

  • Posts: 83799
  • Thank you received: 13571
  • MODERATOR
10 years 10 months ago #161226

Hi,

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

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.

  • Posts: 97
  • Thank you received: 1
  • Hikashop Essential
10 years 10 months ago #161239

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.

Attachments:
Last edit: 10 years 10 months ago by bw92116.

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

  • Posts: 83799
  • Thank you received: 13571
  • MODERATOR
10 years 10 months ago #161252

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.

  • Posts: 97
  • Thank you received: 1
  • Hikashop Essential
10 years 10 months ago #161301

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?

<?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.

  • Posts: 83799
  • Thank you received: 13571
  • MODERATOR
10 years 10 months ago #161311

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.

  • Posts: 97
  • Thank you received: 1
  • Hikashop Essential
10 years 10 months ago #161450

Thank worked, thank you!

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

  • Posts: 281
  • Thank you received: 3
7 years 10 months ago #273471

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.

  • Posts: 97
  • Thank you received: 1
  • Hikashop Essential
7 years 10 months ago #273479

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: 7 years 10 months ago by bw92116.

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

  • Posts: 281
  • Thank you received: 3
7 years 10 months ago #273498

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

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

  • Posts: 97
  • Thank you received: 1
  • Hikashop Essential
7 years 10 months ago #273527

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.092 seconds
Powered by Kunena Forum