Change layout productlisting

  • Posts: 154
  • Thank you received: 10
11 years 10 months ago #87221

Hi there!

I'm trying without luck to change the layout from the productlisting.

I'm using DIV as the default method to show the products, but I can't seem to change the layout, I would like the following:

- The DIV box hás to be a set height. Now, if the productname gets longer the box resizes and I want continuity in this.
- The name of the product has to be first, then the picture and then add to cart button
- I want to change the text that appears before the price, I added something in the languagefile but that shows everywhere and I only want that on the productpage itselve.

Any help in what file to edit would be great, I'v been searchin in view/product/listing_div, listing and in view/category/listing_div and listing.
Can't find it :(


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

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

  • Posts: 43
  • Thank you received: 3
11 years 10 months ago #87297

You have to modify the php file that creates the product-details page in order to make those changes. There are a few posts already on the forum dealing with this subject.

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

  • Posts: 154
  • Thank you received: 10
11 years 10 months ago #87386

Thanx but Ive tried several search options but I can't seem to find any topics about this.

Would you happen to have a link to one of these topics or a searchphrase to find them?

There's no 'product-details' page in my view section so that's a no-go :(


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

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

  • Posts: 2334
  • Thank you received: 403
11 years 10 months ago #87430

Hi there,

Just go in Display>Views and type "listing" in the filter box. Found either listing_img_title or listing_div (depending on the layout you are using) associated to product and edit it as you want.

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

  • Posts: 12953
  • Thank you received: 1778
11 years 10 months ago #87432

Hi,

Editing the listing_div file of the product views was the thing to do, so you'll just have to editing the code of this file :).

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

  • Posts: 154
  • Thank you received: 10
11 years 10 months ago #87682

Thank you both for responding, I really thought I was getting the hang of it in terms of editing existing code.

I just can't seem to find what to edit :( :( :(

This is the file listing_div for the frontend template I use.

<?php

/** 

 * @package  HikaShop for Joomla!

 * @version  2.0.0

 * @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');

?><?php

$mainDivName=$this->params->get('main_div_name');

$carouselEffect=$this->params->get('carousel_effect');

$enableCarousel=$this->params->get('enable_carousel');



$textCenterd=$this->params->get('text_center');

$this->align="left";

if($textCenterd){

  $this->align="center";

}

$height=$this->params->get('image_height');

$width=$this->params->get('image_width');

$this->borderClass="";



if($this->params->get('border_visible',1) == 1){

  $this->borderClass="hikashop_subcontainer_border";

}

if($this->params->get('border_visible',1) == 2){

  $this->borderClass="thumbnail";

}

if(empty($width) && empty($height)){

  $width=$this->image->main_thumbnail_x;

  $height=$this->image->main_thumbnail_y;

}

$row = reset($this->rows);

$this->image->checkSize($width,$height,$row);

$this->newSizes= new stdClass();

$this->newSizes->height=$height;

$this->newSizes->width=$width;

$this->image->main_thumbnail_y=$height;

$this->image->main_thumbnail_x=$width;



if((!empty($this->rows) || !$this->module || JRequest::getVar('hikashop_front_end_main',0)) && $this->pageInfo->elements->total){

  $pagination = $this->config->get('pagination','bottom');

  if(in_array($pagination,array('top','both')) && $this->params->get('show_limit') && $this->pageInfo->elements->total){

    $this->pagination->form = '_top';

?>

  <form action="<?php echo hikashop_currentURL(); ?>" method="post" name="adminForm_<?php echo $this->params->get('main_div_name').$this->category_selected;?>_top">

    <div class="hikashop_products_pagination hikashop_products_pagination_top">

    <?php echo $this->pagination->getListFooter($this->params->get('limit')); ?>

    <span class="hikashop_results_counter"><?php echo $this->pagination->getResultsCounter(); ?></span>

    </div>

    <input type="hidden" name="filter_order_<?php echo $this->params->get('main_div_name').$this->category_selected;?>" value="<?php echo $this->pageInfo->filter->order->value; ?>" />

    <input type="hidden" name="filter_order_Dir_<?php echo $this->params->get('main_div_name').$this->category_selected;?>" value="<?php echo $this->pageInfo->filter->order->dir; ?>" />

    <?php echo JHTML::_( 'form.token' ); ?>

  </form>

<?php

  }

?>

  <div class="hikashop_products">

<?php



  if(!empty($this->rows)){



    if ($this->config->get('show_quantity_field')>=2) {

?>

    <form action="<?php echo hikashop_completeLink('product&task=updatecart'); ?>" method="post" name="hikashop_product_form_<?php echo $this->params->get('main_div_name'); ?>" enctype="multipart/form-data">

<?php

    }

    if($enableCarousel){

      $this->setLayout('carousel');

      echo $this->loadTemplate();

    }

    else

    {

      $columns = (int)$this->params->get('columns');

      if(empty($columns) || $columns<1) $columns = 1;

      $width = (int)(100/$columns)-1;

      $current_column = 1;

      $current_row = 1;



      if(HIKASHOP_J30) {

        switch($columns) {

          case 12:

          case 6:

          case 4:

          case 3:

          case 2:

          case 1:

            $row_fluid = 12;

            $span = $row_fluid / $columns;

            break;

          case 10:

          case 8:

          case 7:

            $row_fluid = $columns;

            $span = 1;

            break;

          case 5:

            $row_fluid = 10;

            $span = 2;

            break;

          case 9: // special case

            $row_fluid = 10;

            $span = 1;

            break;

        }

        if($row_fluid == 12)

          echo '<div class="row-fluid"><ul class="thumbnails">';

        else

          echo '<div class="row-fluid-'.$row_fluid.'"><ul class="thumbnails">';

      }



      foreach($this->rows as $row){

        if(!HIKASHOP_J30) {

?>

      <div class="hikashop_product hikashop_product_column_<?php echo $current_column; ?> hikashop_product_row_<?php echo $current_row; ?>" style="width:<?php echo $width;?>%;">

        <div class="hikashop_container">

          <div class="hikashop_subcontainer <?php echo $this->borderClass; ?>">

<?php

        } else {

?>

      <li class="span<?php echo $span; ?> hikashop_product hikashop_product_column_<?php echo $current_column; ?> hikashop_product_row_<?php echo $current_row; ?>">

        <div class="hikashop_container">

          <div class="hikashop_subcontainer <?php echo $this->borderClass; ?>">

<?php

        }



        $this->row =& $row;

        $this->setLayout('listing_'.$this->params->get('div_item_layout_type'));

        echo $this->loadTemplate();



        if(!HIKASHOP_J30) {

?>

          </div>

        </div>

      </div>

<?php

        } else {

?>

          </div>

        </div>

      </li>

<?php

        }

        if($current_column>=$columns){

          $current_row++;

          if(!HIKASHOP_J30) {

?>

      <div style="clear:both"></div>

<?php

          }

          $current_column=0;

        }

        $current_column++;

      }



      if(HIKASHOP_J30) {

        echo '</ul></div>';

      }

    }

?>

      <div style="clear:both"></div>

<?php

    if ($this->config->get('show_quantity_field')>=2) {

      $this->ajax = 'if(hikashopCheckChangeForm(\'item\',\'hikashop_product_form_'.$this->params->get('main_div_name').'\')){ return hikashopModifyQuantity(\'\',field,1,\'hikashop_product_form_'.$this->params->get('main_div_name').'\'); } return false;';

      $this->row = new stdClass();

      $this->row->prices = array($this->row);

      $this->row->product_quantity = -1;

      $this->row->product_min_per_order = 0;

      $this->row->product_max_per_order = -1;

      $this->row->product_sale_start = 0;

      $this->row->product_sale_end = 0;

      $this->setLayout('quantity');

      echo $this->loadTemplate();

      if(!empty($this->ajax) && $this->config->get('redirect_url_after_add_cart','stay_if_cart')=='ask_user'){

?>

      <input type="hidden" name="popup" value="1"/>

<?php

      }

?>

      <input type="hidden" name="hikashop_cart_type_0" id="hikashop_cart_type_0" value="cart"/>

      <input type="hidden" name="add" value="1"/>

      <input type="hidden" name="ctrl" value="product"/>

      <input type="hidden" name="task" value="updatecart"/>

      <input type="hidden" name="return_url" value="<?php echo urlencode(base64_encode(urldecode($this->redirect_url)));?>"/>

    </form>

<?php

    }

  }

?>

  </div>

  <?php if(in_array($pagination,array('bottom','both')) && $this->params->get('show_limit') && $this->pageInfo->elements->total){ $this->pagination->form = '_bottom'; ?>

  <form action="<?php echo hikashop_currentURL(); ?>" method="post" name="adminForm_<?php echo $this->params->get('main_div_name').$this->category_selected;?>_bottom">

    <div class="hikashop_products_pagination hikashop_products_pagination_bottom">

    <?php echo $this->pagination->getListFooter($this->params->get('limit')); ?>

    <span class="hikashop_results_counter"><?php echo $this->pagination->getResultsCounter(); ?></span>

    </div>

    <input type="hidden" name="filter_order_<?php echo $this->params->get('main_div_name').$this->category_selected;?>" value="<?php echo $this->pageInfo->filter->order->value; ?>" />

    <input type="hidden" name="filter_order_Dir_<?php echo $this->params->get('main_div_name').$this->category_selected;?>" value="<?php echo $this->pageInfo->filter->order->dir; ?>" />

    <?php echo JHTML::_( 'form.token' ); ?>

  </form>

<?php }

}

?>

Now, I would really like to know how to make example A into example B...


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)
Attachments:

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

  • Posts: 13201
  • Thank you received: 2322
11 years 10 months ago #87778

You have to edit the view "product / listing_img_title" and move the name part before the image part.

The following user(s) said Thank You: anypc, SG

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

  • Posts: 154
  • Thank you received: 10
11 years 1 week ago #136225

Great thanx!!

You have an idea for how to get all the containers thesame height? A longer product_name gives 2 lines that makes the container higher than the rest.
Any way I can set it to be 400px standard height?

Thanx!


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)
Attachments:
Last edit: 11 years 1 week ago by anypc. Reason: added image

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

  • Posts: 13201
  • Thank you received: 2322
11 years 1 week ago #136256

Hi,

You have to set a height on the title part of the divs.
By this way the divs will have the same size.

Here is a link to some documentation:
hikashop.com/support/153.html

The following user(s) said Thank You: anypc

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

  • Posts: 154
  • Thank you received: 10
11 years 6 days ago #137120

Thanx! For me it worked just fine.

I edited the file style_blue.css because I use styles.

Added the code:

height: 265px !important;

to the
.hikashop_subcontainer.


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

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

Time to create page: 0.111 seconds
Powered by Kunena Forum