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
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]
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;}
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?
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.
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
tried with both a 40 but same problem.
I think it could be just that Im dropping the code into the wrong place slightly...
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.
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]
I'm having trouble viewing your attachment. Send me your components/com_virtuemart/views/productdetails/tmpl/default.php
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.
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.
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
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
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.
I'm looking at the link you sent me and nothing has changed. I can make it do what you want real quickly using firebug, just by changing those things quickly. So I'm not sure what you are missing. If you could update it on the link you sent me I might be able to help further.
Cool!! :)
http://sarani.com.au/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=2&virtuemart_category_id=1&Itemid=4
have set vm2 to use the updated default.php now.
Good luck and Ill owe you a beeer for this hehe
See if this attached screenshot makes sense. Beer would be nice right now haha.
[attachment cleanup by admin]
Ah! I see what you did. I think you may have misunderstood me.
What I want is the main image on the left where it was and the name , price, ad to cart and description on the right
Yep, that is exactly what I was trying to do. Didn't work?
:( just cant seem to get it there.
Just so others know. I sent Shakir a new product details override file that I had tweaked and it did the trick. If anyone else needs it, see attached.
Just have to drop it in to your /components/com_virtuemart/views/productdetails/tmpl folder
Then go to Virtuemart in Joomla backend and go to "Configuration" click on the "Templates" tab and change "Product Layout" to "productdetailsoverride"
[attachment cleanup by admin]
Im using VM 2.6.14 with joomla 2.5.8 I know this is an old post and ive tried everything here to get Long description to line up on the right side of image and still cant figure it out. its been 4 days now can someone please help me.
Heres a link of how it looks now. http://ernzmoneybeats.com/index.php/2011-08-29-08-17-58/pop/i-cant-wait-14-27-detail
The site is incredibly slow to load, but that URL gives a 404. It looks like you are using a Gavick template so will have to edit whatever override files it uses. http://forum.virtuemart.net/index.php?topic=108212.0
Your Joomla version is insecure. http://forum.virtuemart.net/index.php?topic=118683.0
Thanks Jenkinhill, Ok i had a problem with Godaddy for it being slow, But i fixed that. But going back to Description, if you can or anyone please help me figure how to set long description right of image. I tried using firebug and i still couldn't figure out what code to edit or where to add. even though its 3rd party its still very similar. not that far off from being different.
I have a link to page here. http://ernzmoneybeats.com/index.php/2011-08-29-08-17-58/pop/i-cant-wait-14-27-detail