Rearranging the Product Listing

[AllegraGatto]

Hello. Any help would be most appreciated. I just added the attributes box. I am new to this and have had to teach myself CSS, which I think I have done pretty well so far.

Here is the page in question: http://awitchshearth.com/zencart/ind...roducts_id=184

I have a bit of OCD so when things don't align as I would like them to I get a little wiggy. This is what I would like:

The product image then the product title, price, and description next to it in the next column with more space between them and the attributes dropdown box in the third column next to the description. I would like all of this to be above the Add to Cart button.

I have managed to figure out all the other CSS programming I needed, but this is escaping me. Any suggestions?

Kat

[dscott1966]

Hello. Any help would be most appreciated. I just added the attributes box. I am new to this and have had to teach myself CSS, which I think I have done pretty well so far.

Here is the page in question: http://awitchshearth.com/zencart/ind...roducts_id=184

I have a bit of OCD so when things don't align as I would like them to I get a little wiggy. This is what I would like:

The product image then the product title, price, and description next to it in the next column with more space between them and the attributes dropdown box in the third column next to the description. I would like all of this to be above the Add to Cart button.

I have managed to figure out all the other CSS programming I needed, but this is escaping me. Any suggestions?

Kat

Do you mean like this

http://dealz-r-us.com/index.php?main...products_id=47

[AllegraGatto]

Yes, I would like my attributes box to be above the add to cart like it is on your page. Can you tell me how you did that? In trying to fix it myself, I seem to have screwed up some of my product listing stuff. Argh...

Kat

[dscott1966]

Yes, I would like my attributes box to be above the add to cart like it is on your page. Can you tell me how you did that? In trying to fix it myself, I seem to have screwed up some of my product listing stuff. Argh...

Kat

You have to edit your includes/templates/your_template/templates/tpl_product_info_display.php file.

What i did was added a div. then added the div properties to my stylesheet.

This are the things you should put into the div. You have to style it yourself but this should get you started and know what your looking for.

<div id="rightFloat">
<!--bof Product Name-->
  <h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
  <!--eof Product Name-->

<!--bof Product description -->
      <?php if ($products_description != '') { ?>
  <div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
  <?php } ?>
  <!--eof Product description -->

  <!--bof Attributes Module -->
  <?php
  if ($pr_attr->fields['total'] > 0) {
?>
  <?php
/**
 * display the product atributes
 */
  require($template->get_template_dir('/tpl_modules_ajax_image_swapper_attr.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_ajax_image_swapper_attr.php'); ?>
  <?php
  }
?>
  <!--eof Attributes Module -->

<!--bof Add to Cart Box -->
  <?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
  <?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
            if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
              // hide the quantity box and default to 1
              $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            } else {
              // show the quantity box
    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="2" />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
    
  ?>  
  <?php if ($display_qty != '' or $display_button != '') { ?>
  <div id="cartAdd">
    <?php
      echo $display_qty;
      echo $display_button;
      
            <?php 
?>
  </div>
  <?php } // display qty and button ?>
  <?php } // CUSTOMERS_APPROVAL == 3 ?>
  <!--eof Add to Cart Box-->
<!-- end of rightFloat -->
 </div>

Then add this to your style sheet and create your style for it.

#detailboxright {
   
    }

Hope this helps you out.

[AllegraGatto]

I figured out how to solve this problem. Thanks for your help.

[dw08gm]

Do you mean like this

http://dealz-r-us.com/index.php?main...products_id=47

Re the above referenced site, can you please tell me how did they did the magnifier ie when the mouse is placed over the main image, a separate magnified image appears to the right of the main image, that also follows the mouse.

TIA

[dscott1966]

Re the above referenced site, can you please tell me how did they did the magnifier ie when the mouse is placed over the main image, a separate magnified image appears to the right of the main image, that also follows the mouse.

TIA

I used a product called magiczoom

http://www.magictoolbox.com/magiczoom/