Custom Product Page

  • Posts: 104
  • Thank you received: 2
  • Hikashop Business
9 years 7 months ago #228533

-- HikaShop version -- : 2.6.0

Hi

I have been tying to customize the product page, with help from other posts on this forum I have managed to get it some what right but I am still struggling a bit.

I have attached an Image to explain What I would like to achieve.
Basically I want the Price, characteristics and buttons under the image on the right.
I also would like to know if it is possible to embed the related products in the listing so that it is directly under the Price data

Here is a copy of the Code it is a slight adaptation of what you are using on your demo site

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	2.3.2
 * @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 span5">
  <?php
	if(!empty($this->element->extraData->leftBegin)) { echo implode("\r\n",$this->element->extraData->leftBegin); }

	$this->row = & $this->element;
	$this->setLayout('show_block_img_custom');
	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 span7">
	<?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 id="hikashop_product_bottom_part" class="hikashop_product_bottom_part">
	<?php
	if(!empty($this->element->extraData->rightBegin))
		echo implode("\r\n",$this->element->extraData->rightBegin);
	?>
    
    <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 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>
  
  
  
  
  
  
</div>
      

<?php if(HIKASHOP_RESPONSIVE){ ?>
	</div>
<?php } ?>
  
  

        
</div>

Thanks

Attachments:

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

  • Posts: 84307
  • Thank you received: 13701
  • MODERATOR
9 years 7 months ago #228570

Hi,

1. It seems to be a problem of CSS. Could you provide a link to the page so that we can see the CSS ?

2. The related products are by defaults under the product page and not on the side.
If you have them on the side, it means that you enabled the module in the module manager of Joomla and disabled it in the "modules under the product page" setting of the HikaShop configuration. Do the opposite and you'll have it where you want.

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

  • Posts: 104
  • Thank you received: 2
  • Hikashop Business
9 years 7 months ago #228972

Hi

I have sent the link via private message

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

  • Posts: 84307
  • Thank you received: 13701
  • MODERATOR
9 years 7 months ago #228996

Hi,

I'm not able to see the page, provably because of the IP filtering you're talking about in your PM.
Please allow our IP address (also note that we're not at the office on the weekend):

Part of the message is hidden for the guests. Please log in or register to see it.

Last edit: 9 years 7 months ago by nicolas.

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

  • Posts: 104
  • Thank you received: 2
  • Hikashop Business
9 years 7 months ago #229264

Hi

I have added your IP

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

  • Posts: 84307
  • Thank you received: 13701
  • MODERATOR
9 years 7 months ago #229267

Hi,

So you have two problems:
1. You swapped the elements from the bottom area to the right area and vice-versa. The problem in doing that is that when the openned tab on the right will be small, it will display the add to cart area where you want, but when the openned tab on the right will be big, it will push down the add to cart area. So moving the elements from the bottom area to the right is a good move, but you should move the add to cart area to the left area, not to the bottom area if you don't want the area to be pushed down.

2. You made a mistake when you moved the elements and bottom area is now inside the right area which is why the add to cart area is on the right instead of being on the left. You're apparently missing a </div>

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

  • Posts: 104
  • Thank you received: 2
  • Hikashop Business
9 years 7 months ago #229344

Hi Nicolas

Thanks for the feedback.
I have managed to get it mostly right, (See attached image), only thing I still need to achieve is moving the "Related products" from the bottom to the Left

Attachments:
Last edit: 9 years 7 months ago by SnoozeULooze.co.za. Reason: Additional information

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

  • Posts: 12953
  • Thank you received: 1778
9 years 7 months ago #229360

Hello,
In your case, you should probably remove your customization and apply Nicolas advices to customize it again without moving or removing the DIVs of the :
- hikashop_product_top_part
- hikashop_product_right_part
- hikashop_product_left_part
- hikashop_product_bottom_part

sides but only moving what is in these DIVs.

I have managed to get it mostly right, (See attached image), only thing I still need to achieve is moving the "Related products" from the bottom to the Left

The "Related products" is a product listing module and is not part of the product page, so you'll have to directly edit your template positions to correctly adapt your "Related products" position.

Last edit: 9 years 7 months ago by Mohamed Thelji.

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

Time to create page: 0.080 seconds
Powered by Kunena Forum