product layout like on hikashop.com

dado023
Topic Author
Offline

12 years 8 months ago - 12 years 8 months ago #141400 by dado023

product layout like on hikashop.com was created by dado023

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: 12 years 8 months ago by dado023.

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

Mohamed Thelji
Offline

12 years 8 months ago #141409 by Mohamed Thelji

Replied by Mohamed Thelji on topic product layout like on hikashop.com

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.

dado023
Topic Author
Offline

12 years 8 months ago #141480 by dado023

Replied by dado023 on topic product layout like on hikashop.com

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.

nicolas
Offline

12 years 8 months ago #141506 by nicolas

Replied by nicolas on topic product layout like on hikashop.com

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:

Code:

<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>{tab Features}</p>
<div class="docinfo"><strong>HikaShop Business</strong> includes all the features from <strong>HikaShop Starter</strong> and <strong>HikaShop Essential</strong></div>
<p> </p>
<div class="row-fluid">
<div class="span4">
<div style="background-color: #f8f8f8; margin-top: 10px;"><img style="padding-right: 10px;" src="images/productpage/icon_sales.png" alt="products and sales" /><strong>PRODUCTS AND SALES</strong></div>
<br />
<ul>
<li>Access levels on products, variants, categories, prices, discounts and coupons</li>
<li>Currency rates auto update</li>
<li>Default currency selection using geolocation</li>
<li>White listing or black listing of zones using geolocation</li>
<li>Geolocation information for users and orders</li>
<li>Custom fields for orders, items and entries as well as custom file type</li>
<li>Import of files as products using template products</li>
<li>Easy copy of products</li>
<li>Out of stock notifications</li>
<li>Comparison system for products</li>
</ul>
</div>
<div class="span4">
<div style="background-color: #f8f8f8; margin-top: 10px;"><img style="padding-right: 10px;" src="images/productpage/icon_layout.png" alt="layout" /><strong>LAYOUT</strong></div>
<br />
<ul>
<li>Dashboard with map widget and CSV data download</li>
<li>Images watermarking</li>
<li>Email customization</li>
<li>Effects on products listing - carrousel with transition effects</li>
<li>Customizable filters for products listings</li>
</ul>
</div>
<div class="span4">
<div style="background-color: #f8f8f8; margin-top: 10px;"><img style="padding-right: 10px;" src="images/productpage/icon_marketing.png" alt="marketing tools" /><strong>MARKETING TOOLS</strong></div>
<br />
<ul>
<li>Tracking of affiliates clicks/leads/sales</li>
<li>Affiliation program</li>
<li>Google Analytics integration for e-commerce statistics</li>
</ul>
</div>
</div>
<p> </p>
<div style="border-top: 1px solid #ddd; padding: 15px 0px;">* You can <a href="index.php/extensions/compare-versions">compare all our versions here</a>.<br /> * You can <a href="index.php/extensions/upgrade-my-version.html">upgrade your version here</a>.</div>
<p>{tab Usage}</p>
<ul>
<li>HikaShop is compatible with every versions of Joomla from 1.5 to 3.x. <img style="margin: 0px 2px 5px 2px;" src="images/productpage/joomla1.5_icon.png" alt="" /><img style="margin: 0px 2px 5px 2px;" src="images/productpage/joomla2.5_icon.png" alt="" /><img style="margin: 0px 2px 5px 2px;" src="images/productpage/joomla3.0_icon.png" alt="" /></li>
<li>GPL v3</li>
<li>No limit of time</li>
<li>1 year free updates</li>
<li>1 year free HikaShop support for one website</li>
<li>1 year web cron service for one website</li>
<li>HikaShop only supports MySQL (no postGreSQL or Oracle or MSSQL support)</li>
<li>Installation guaranteed! <small>If you have any problems installing HikaShop, we'll do it for you.</small></li>
<li>30-day money-back guarantee</li>
</ul>
<p>{/tabs}</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 )

Code:

/*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:

Code:

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