Possible to display long description on right of product image??

[shakir]

Hi.
I've been trying to display the long product description on the right of the product image.
I think having the info under the image looks terrible and no online stores look that way.
There must be a way to put the text on the right.
Has anyone got any ideas or know how?
Thanks

[shakir]

Have moved this code to just under the main product image

<?php /** @todo Test if content plugins modify the product description */ ?>

      <span class="title"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></span>

      <?php echo $this->product->product_desc; ?>

in file components/com_virtuemart/views/productdetails/tmpl/default.php
But cant seem to get it to display on right of image.. looks better than before but ideally on right would be perfect.
Anyone ?

File attached.

[attachment cleanup by admin]

[brentonking]

Firstly I would move the whole part up and add "width50 floatright" to the div class (see below for what I mean, I have just highlighted the added part in red)

<?php // Product Description
   if (!empty($this->product->product_desc)) { ?>
   <div class="product-description width50 floatright">
      <?php /** @todo Test if content plugins modify the product description */ ?>
      <span class="title"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></span>
      <?php echo $this->product->product_desc; ?>
   </div>
   <?php } // Product Description END

Note: you want to keep the div class around it - this is what you will use to control it sliding up beside the image.

This looks like it will set the width of the "image" div to 50% width and float left and the "description" div to 50% width and float right.

If you want to make one wider and the other less wide just change image div to width40 and description to width60 and so on. VM team has given all the options here (/component/com_virtuemart/assets/css/vmsite-ltr.css) just do a search for width50 and you will see all the options listed:
.width1{width:1%;}.width2{width:2%;}.width3{width:3%;}.width4{width:4%;}.width5{width:5%;}.width6{width:6%;}.width7{width:7%;}.width8{width:8%;}.width9{width:9%;}.width10{width:10%;}.width11{width:11%;}.width12{width:12%;}.width13{width:13%;}.width14{width:14%;}.width15{width:15%;}.width16{width:16%;}.width17{width:17%;}.width18{width:18%;}.width19{width:19%;}.width20{width:20%;}.width21{width:21%;}.width22{width:22%;}.width23{width:23%;}.width24{width:24%;}.width25{width:25%;} ... and so on

I notice that VM haven't put a distinct div class around the images it just has:
      <div class="width50 floatleft">
Which sits just above - <?php // Product Main Image

I would change that to: <div class="product-images-box width50 floatleft">
That way you can find it easier and apply specific css styles to it ie; .product-images-box {border:2px solid #000;}

[shakir]

Hi. Thanks for the help!!
Im trying to insert the code but so far its just putting the description above the image rather than to the right of it.

Where exactly in the file should I insert the code?

[brentonking]

Do you have a URL I can look at?

Try changing the width50 in the product-description div class to width40. There may be some padding around those divs that adds on top of the 50%+50% widths - making it wider than 100% and forcing it to the next line.

[shakir]

Thats a good point!

http://sarani.com.au/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=2&virtuemart_category_id=4&Itemid=17

[shakir]

tried with both a 40 but same problem.
I think it could be just that Im dropping the code into the wrong place slightly...

[brentonking]

Firstly change "width50 floatright" to "width30 floatright" then you will see your add to cart buttons move up to the right.

Also, you have the description field sitting in the same div as the image. so it will never float right. You need to take the description fields out of the div class="width50 floatleft" and put it back in the div class="width30 floatright" a few lines below - inside the same div as the add to cart button etc.

[shakir]

Yes, I changed the code for the site at the moment to display under, the way it is.
But when testing the modified versions with the floatright at 30 etc, its still under.

Here is the custom file. it may be something really obvious that I have done wrong and cant see?


[attachment cleanup by admin]

[brentonking]

I'm having trouble viewing your attachment. Send me your components/com_virtuemart/views/productdetails/tmpl/default.php

[shakir]

It is the default.php  just renamed as it has a few customisations. its the one Im currently using in VM2

Its zipped
The forum wont let me send a .php file without zipping it prob for security reasons.

[brentonking]

Yeah it looks corrupt at my end, I can't view it properly. Maybe just paste what ever is in <div class="productdetails-view"> in here.

[shakir]

Ill add a bit more.
line 95-167

<div class="productdetails-view">



   



   <?php // Product Title ?>

   <h1><?php echo $this->product->product_name ?></h1>

   <?php // Product Title END ?>



   <?php // Product Edit Link

   echo $this->edit_link;

   // Product Edit Link END ?>



   



   <?php // Product Short Description

   if (!empty($this->product->product_s_desc)) { ?>

   <div class="product-short-description">

      <?php /** @todo Test if content plugins modify the product description */

      echo $this->product->product_s_desc; ?>

   </div>

   <?php } // Product Short Description END ?>



   <div>

      <div class="width50 floatleft">



      <?php // Product Main Image

      if (!empty($this->product->images[0])) { ?>

         <div class="main-image">

         <?php echo $this->product->images[0]->displayMediaFull('class="product-image"',false,"class='modal'",true); ?>

         </div>
           
      <?php } // Product Main Image END ?>
        <?php // Product Description
   if (!empty($this->product->product_desc)) { ?>
   <div class="product-description width30 floatright">
      <?php /** @todo Test if content plugins modify the product description */ ?>
      <span class="title"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></span>
      <?php echo $this->product->product_desc; ?>
   </div>
   <?php } // Product Description END ?>



      <?php // Showing The Additional Images

[brentonking]

Try replacing that with this:

<div class="productdetails-view">

   <div>
      <div class="width50 floatleft">
      <?php // Product Main Image
      if (!empty($this->product->images[0])) { ?>
         <div class="main-image">
         <?php echo $this->product->images[0]->displayMediaFull('class="product-image"',false,"class='modal'",true); ?>
         </div>
      <?php } // Product Main Image END ?>
        <?php // Product Description
   if (!empty($this->product->product_desc)) { ?>
   
   <div class="product-description width30 floatright">
         <?php // Product Title ?>
         <h1><?php echo $this->product->product_name ?></h1>
         <?php // Product Title END ?>

        <?php // Product Edit Link
         echo $this->edit_link;
         // Product Edit Link END ?>

         <?php // Product Short Description
         if (!empty($this->product->product_s_desc)) { ?>
        <div class="product-short-description">
            <?php /** @todo Test if content plugins modify the product description */
            echo $this->product->product_s_desc; ?>
         </div>
         <?php } // Product Short Description END ?>
     
      <?php /** @todo Test if content plugins modify the product description */ ?>
      <span class="title"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></span>
      <?php echo $this->product->product_desc; ?>
   </div>
   <?php } // Product Description END ?>




Note: I left the last line off:       <?php // Showing The Additional Images - make sure you keep that. after

[shakir]

still not working
experimented with a few diferent div sizes and managed to bring the "+" "-" quantity and price to top right but description still under.. even with really large or small div sizes.