product layout like on hikashop.com

  • Posts: 116
  • Thank you received: 1
11 years 7 months ago #141400

hi guys..

Hikashop definitely needs some better user friendly controls for product page layout.

I own business edition og hikaShop
How can i make my product page look great like this?:

Last edit: 11 years 7 months ago by dado023.

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

  • Posts: 12953
  • Thank you received: 1778
11 years 7 months ago #141409

Hello,
The solution will be to use some CSS code customization and probably to edit the files of the "product" view of your front-end template through the page "Hikashop->DIsplay->Views".

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

  • Posts: 116
  • Thank you received: 1
11 years 7 months ago #141480

can you be more specific?, ...i mean, it seems very easy when you say it :) , but actually for the most of joomla users that looks like a some sort of wizardry :\

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

  • Posts: 84243
  • Thank you received: 13686
  • MODERATOR
11 years 7 months ago #141506

If you don't know CSS/HTML, it's not easy. But then, customizing a product layout without knowing CSS/HTML is not really possible. It's the basis of the webmaster/designer job, not some kind of wizardry :)
It's not possible for us to provide controls to personalize the CSS of the product page. There are just too many possibilities and every one wants to do something different.

Having the product layout page looking like that required our designer several hours of work and she knows CSS as much as I know PHP (that is quite well).

But there is actually few things to configure in HikaShop to have that product page. Everything below the main image and the add to cart area is in the product description:

<ul class="thumbnails">
<li class="span2">
<div class="thumbnail"><a href="images/productpage/lightbox_business/stat.png" title="Powerful statistics" rel="shadowbox[hikashop]"><img src="images/productpage/lightbox_business/thumb_stat.png" alt="Powerful statistics" /></a></div>
</li>
<li class="span2">
<div class="thumbnail"><a href="images/productpage/lightbox_business/effects.png" title="Many effects" rel="shadowbox[hikashop]"><img src="images/productpage/lightbox_business/thumb_effects.png" alt="Many effects" /></a></div>
</li>
<li class="span2">
<div class="thumbnail"><a href="images/productpage/lightbox_business/filter.png" title="Filters" rel="shadowbox[hikashop]"><img src="images/productpage/lightbox_business/thumb_filter.png" alt="Filters" /></a></div>
</li>
<li class="span2">
<div class="thumbnail"><a href="images/productpage/lightbox_business/affiliate.png" title="Affiliate system" rel="shadowbox[hikashop]"><img src="images/productpage/lightbox_business/thumb_affiliate.png" alt="Affiliate system" /></a></div>
</li>
<li class="span2">
<div class="thumbnail"><a href="images/productpage/lightbox_business/checkout.png" title="Checkout workflow" rel="shadowbox[hikashop]"><img src="images/productpage/lightbox_business/thumb_checkout.png" alt="Checkout workflow" /></a></div>
</li>
<li class="span2">
<div class="thumbnail"><a href="images/productpage/lightbox_business/acl.png" title="Access control level" rel="shadowbox[hikashop]"><img src="images/productpage/lightbox_business/thumb_acl.png" alt="Access control level" /></a></div>
</li>
</ul>
<p>


</p>
<div id="testimonials" style="height: 50px; margin: 20px 0px;"><img style="float: left; margin-right: 15px;" src="images/productpage/bulle.png" alt="testimonial" />{loadposition feedback}</div>
and in the CSS of the template (which you can actually see yourself here: www.hikashop.com/templates/hikashop/css/template.css?v3 )
/*product page*/
.nn_tabs > .nav > li > a:hover{
  background-color:#555555}
.nn_tabs > ul.nav-tabs > li > a{color:#555555; font-weight:bold;}
.nn_tabs > ul.nav-tabs > li > a:hover{
  color:#f5f5f5}
.nn_tabs .nav-tabs > li.active > a, .nn_tabs .nav-tabs > li.active > a:hover{color:#1f7e8c}

.thumbnail img:hover{
  filter : alpha(opacity=10);
    opacity : 0.6;}

.hikashop_right_begin, .hikashop_right_end{background:url(../images/product/separator.png) no-repeat; height:7px; background-position:50%}
.hikashop_right_begin{margin-top:10px; margin-bottom:20px}
.hikashop_right_end{margin-top:20px; margin-bottom:20px}

#hikashop_product_right_part .span8{line-height:22px; font-size:14px}

#hikashop_product_right_part .hikashop_cart_input_button{color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #379bb3;
  background-image: -moz-linear-gradient(top,#15ADD3, #2C8296);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#15ADD3),to(#2C8296));
  background-image: -webkit-linear-gradient(top,#15ADD3, #2C8296);
  background-image: -o-linear-gradient(top,#15ADD3, #2C8296);
  background-image: linear-gradient(to bottom, #15ADD3, #2C8296);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0043cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  *background-color: #379bb3;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  font-size: 14px;
  font-weight: bold;
  padding: 8px 10px;
  display:block; margin:auto}

#hikashop_product_right_part .hikashop_cart_input_button:hover{color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #16B0D6;
  background-image: -moz-linear-gradient(top,#15ADD3, #2C8296);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#15ADD3),to(#2C8296));
  background-image: -webkit-linear-gradient(top,#15ADD3, #2C8296);
  background-image: -o-linear-gradient(top,#15ADD3, #2C8296);
  background-image: linear-gradient(to bottom, #18c1eb, #14a1c4);
  background-repeat: repeat-x;
  background-position:0px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0043cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  *background-color: #16B0D6;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}
  
#hikashop_product_right_part span.hikashop_product_price{color:#1F7E8C; font-size:22px; font-family:'Averia Sans Libre',cursive; font-weight:normal;}
#hikashop_product_right_part span.hikashop_product_price_full{margin-bottom:12px}
and it uses the plugin called tabber for the tabs.
Then there are a few html modifications in the file "show_default" of the view "product" via the menu Display>views:
<?php
/**
 * @package  HikaShop for Joomla!
 * @version  2.1.1
 * @author  hikashop.com
 * @copyright  (C) 2010-2012 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 span4">
  <?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 span8">
  <?php
  if(!empty($this->element->extraData->rightBegin))
    echo implode("\r\n",$this->element->extraData->rightBegin);
  ?>
  <div class="hikashop_right_begin"></div>
  <div class="row-fluid">
  <div class="span4">
  <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
  $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 } ?>
  <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>
  <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>
  </div>
  <div class="span8">
  <?php
  /*
  if(!empty($this->fields)){
    $this->setLayout('show_block_custom_main');
    echo $this->loadTemplate();
  }
  */
    $fieldName = 'outline';
    if(empty($this->element->$fieldName) && !empty($this->element->main->$fieldName))$this->element->$fieldName = $this->element->main->$fieldName;
    if(isset($this->element->$fieldName))
      $value = trim($this->element->$fieldName);
    if(!empty($value))
      echo $this->fieldsClass->show($this->fields[$fieldName],$value);
    
  if($this->params->get('characteristic_display')!='list'){
    //LAYOUT show_block_charasteristic
    $this->setLayout('show_block_characteristic');
    echo $this->loadTemplate();
  }
  ?>
  </div>
  </div>
  <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>
  <div class="hikashop_right_end"></div>
  <?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
    $product_description = $this->element->product_description;
    if(strpos($product_description, '{CONTACT_BTN}') !== false) {
        $popup = hikashop_get('helper.popup');
        global $Itemid;
        $url_itemid='';
        if(!empty($Itemid)){
            $url_itemid='&Itemid='.$Itemid;
        }
        $contact_btn = $popup->display(
            JText::_('CONTACT_US_FOR_INFO'),
            JText::_('CONTACT_US_FOR_INFO'),
            hikashop_completeLink('product&task=contact&cid=' . $this->element->product_id.$url_itemid, true),
            'hikashop_product_contact_popup',
            760, 480, 'class="btn btn-primary"', '', 'link'
        );
        $product_description = str_replace('{CONTACT_BTN}', $contact_btn, $product_description);
    }
    echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$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.

Time to create page: 0.058 seconds
Powered by Kunena Forum