Move Product Description to the bottom of Image

  • Posts: 89
  • Thank you received: 2
5 years 9 months ago #307087

-- HikaShop version -- : HikaShop Starter 4.0.3
-- Joomla version -- : 3.9.6

Good Day Hikashop! How are you doing today?

My needs are very simple, but I have searched old posts and can't find a specific Solution in the Forum and Help Docs.

I have to insert Tables with specifications on each Product in the Description.
This pushes the layout, out to the right and not all info is visible, within the table.

I think the solution is to move the Product Description from Right hand side ----> to underneath the Product Image.

If I am correct, How would I be able to do this please?

Attachments:

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

  • Posts: 89
  • Thank you received: 2
5 years 9 months ago #307097

This is the Code I found in the show_default File:

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	4.0.3
 * @author	hikashop.com
 * @copyright	(C) 2010-2019 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" itemprop="name"><?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" itemprop="sku"><?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
	$this->setLayout('show_block_social');
	echo $this->loadTemplate();
?>
</div>

<div class="hk-row-fluid">

	<div id="hikashop_product_left_part" class="hikashop_product_left_part hkc-md-6">
<?php if(!empty($this->element->extraData->leftBegin)) { echo implode("\r\n",$this->element->extraData->leftBegin); } ?>
<?php
	$this->row =& $this->element;
	$this->setLayout('show_block_img');
	echo $this->loadTemplate();
?>
<?php 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 hkc-md-6">
<?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
	if($this->params->get('show_vote_product')) {
		$js = '';
		$this->params->set('vote_type', 'product');
		$this->params->set('vote_ref_id', isset($this->element->main) ? (int)$this->element->main->product_id : (int)$this->element->product_id );
		echo hikashop_getLayout('vote', 'mini', $this->params, $js);
	}
		?></div>
		<span id="hikashop_product_price_main" class="hikashop_product_price_main" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<?php
	$main =& $this->element;
	if(!empty($this->element->main))
		$main =& $this->element->main;
	if(!empty($main->product_condition)){
?>
			<meta itemprop="itemCondition" itemtype="https://schema.org/OfferItemCondition" content="https://schema.org/<?php echo $main->product_condition; ?>" />
<?php
	}
	if($this->params->get('show_price') && (empty($this->displayVariants['prices']) || $this->params->get('characteristic_display') != 'list')) {
		$this->row =& $this->element;
		$this->setLayout('listing_price');
		echo $this->loadTemplate();
?>
			<meta itemprop="availability" content="https://schema.org/<?php echo ($this->row->product_quantity != 0) ? 'InStock' : 'OutOfstock' ;?>" />
			<meta itemprop="priceCurrency" content="<?php echo $this->currency->currency_code; ?>" />
<?php
	}
?>
		</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 } ?>

<?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') || ($this->config->get('display_add_to_wishlist_for_free_products', 1) && hikashop_level(1) && $this->params->get('add_to_wishlist') && $this->config->get('enable_wishlist', 1)) || !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(\'' . (int)$this->element->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 = (int)$this->config->get('product_contact', 0);
	if(hikashop_level(1) && ($contact == 2 || ($contact == 1 && !empty($this->element->product_contact)))) {
		$css_button = $this->config->get('css_button', 'hikabtn');
?>
			<a href="<?php echo hikashop_completeLink('product&task=contact&cid=' . (int)$this->element->product_id . $this->url_itemid); ?>" class="<?php echo $css_button; ?>"><?php
				echo JText::_('CONTACT_US_FOR_INFO');
			?></a>
<?php
	}
?>
		</div>

<?php
	if(!empty($this->fields)) {
		$this->setLayout('show_block_custom_main');
		echo $this->loadTemplate();
	}

	if(HIKASHOP_J30) {
		$this->setLayout('show_block_tags');
		echo $this->loadTemplate();
	}
?>
	<span id="hikashop_product_id_main" class="hikashop_product_id_main">
		<input type="hidden" name="product_id" value="<?php echo (int)$this->element->product_id; ?>" />
	</span>

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

</div>
</div>

<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" itemprop="description"><?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>

But I am not sure what to edit?

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

  • Posts: 83480
  • Thank you received: 13505
  • MODERATOR
5 years 9 months ago #307089

Hi,

If you have the "layout on product page" setting of the HikaShop configuration set to "default" and you don't have a view override to move the description from the bottom to the right side, then the description should already be where you want it.
In fact, looking at the HTML / CSS on your link, the description is were you want it.
The issue comes from your template having custom CSS to move it on the right side. If I disable/remove that custom CSS from the file templates/at_autospik/css/default.css it displays properly:
monosnap.com/file/hJGql0BPYHsXCgwnw0ZycRiocVqU2h
So that's what you want to do.

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

  • Posts: 63
  • Thank you received: 2
5 years 8 months ago #308295

Hi Nicolas
In the display of all products, product name and price show under the picture, but in the wrong order. I would like to modify the order to have the Following:

Picture
Product name
Price

See picture in attachment, which I want to interchange price and production name. Didn't found where I can do that.

How can I do that?

Thank for your help,

Attachments:

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

  • Posts: 83480
  • Thank you received: 13505
  • MODERATOR
5 years 8 months ago #308296

Hi,

You can edit the file "listing_img_title" of the view "product" via the menu Display>Views and swap the areas to get the order you want.
I would also recommend you to read this page which explains how to find which view file to edit and where to edit them:
www.hikashop.com/support/documentation/1...-display.html#layout

The following user(s) said Thank You: Uriel, Rouanda72

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

  • Posts: 63
  • Thank you received: 2
5 years 8 months ago #308339

Bonjour Nicolas,

Cela fonctionne dans le bon ordre maintenant, merci.

François
letoilee.com

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

Time to create page: 0.077 seconds
Powered by Kunena Forum