- Posts: 30
- Thank you received: 0
Changing the look of product page
13 years 2 months ago #114577
by pfotsu
Changing the look of product page was created by pfotsu
Hi, Im looking to modify the look of my product page. I would like the description, detail pictures, and cart info all to the right of the main picture. Is there a easy way to do this or is the only way in the php view files? Also is there a setting that would bring the text out from behind the picture.
Thanks again for your help.
Thanks again for your help.
Please Log in or Create an account to join the conversation.
13 years 2 months ago #114578
by pfotsu
Replied by pfotsu on topic Changing the look of product page
Page I'm talking about is at
shopredlodge.com/index.php/beartooth-pas...the-fighting-marmots
Please Log in or Create an account to join the conversation.
13 years 2 months ago #114630
by Eliot
Replied by Eliot on topic Changing the look of product page
Hi there,
You have to edit the view show_default (in Display>Views) and move what's in the div block hikashop_product_bottom_part (this code):
Inside the hikashop_product_right_part block.
You have to edit the view show_default (in Display>Views) and move what's in the div block hikashop_product_bottom_part (this code):
Code:
<?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
//DISPLAY the product description
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)) {
//DISPLAY the manufacturer
echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');
}
?>
</span>
<?php
//LAYOUT show_product_product_files
$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);
?>
Inside the hikashop_product_right_part block.
Please Log in or Create an account to join the conversation.
13 years 2 months ago #115318
by pfotsu
Replied by pfotsu on topic Changing the look of product page
Thanks,
I did move the code to the right part div, but it just stacked up everything below the images. Could you take a look at the code and see where I went wrong? Thanks, your help on this is much appreciated.
<?php
/**
* @package HikaShop for Joomla!
* @version 2.2.0
* @author hikashop.com
* @copyright (C) 2010-2013 HIKARI SOFTWARE. All rights reserved.
* @license GNU/GPLv3 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
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);
?>
<?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->row->product_id.$url_itemid), 'window.location=\'' . hikashop_completeLink('product&task=contact&cid=' . $this->row->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">
</div>
I did move the code to the right part div, but it just stacked up everything below the images. Could you take a look at the code and see where I went wrong? Thanks, your help on this is much appreciated.
<?php
/**
* @package HikaShop for Joomla!
* @version 2.2.0
* @author hikashop.com
* @copyright (C) 2010-2013 HIKARI SOFTWARE. All rights reserved.
* @license GNU/GPLv3 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
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);
?>
<?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->row->product_id.$url_itemid), 'window.location=\'' . hikashop_completeLink('product&task=contact&cid=' . $this->row->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">
</div>
Please Log in or Create an account to join the conversation.
13 years 2 months ago #115322
by pfotsu
Replied by pfotsu on topic Changing the look of product page
Also, looks fine on this page
www.shopredlodge.com/index.php/all-shirt...the-fighting-marmots
but not on this page
www.shopredlodge.com/index.php/vive-la-r...-paris-and-red-lodge
is it a title length issue?
www.shopredlodge.com/index.php/all-shirt...the-fighting-marmots
but not on this page
www.shopredlodge.com/index.php/vive-la-r...-paris-and-red-lodge
is it a title length issue?
Please Log in or Create an account to join the conversation.
13 years 2 months ago #115395
by Xavier
Replied by Xavier on topic Changing the look of product page
Hi,
You have to set a width to the right part of the product page.
Thanks to use the following css property:
.hikashop_product_right_part{ width: 48% !important;}
www.hikashop.com/fr/support/documentatio...the-display.html#css
You have to set a width to the right part of the product page.
Thanks to use the following css property:
.hikashop_product_right_part{ width: 48% !important;}
www.hikashop.com/fr/support/documentatio...the-display.html#css
Please Log in or Create an account to join the conversation.
Time to create page: 0.236 seconds