News:

Support the VirtueMart project and become a member

Main Menu

Custom field images display

Started by cas, November 04, 2011, 05:17:25 AM

Previous topic - Next topic

cas

How can I make custom field images display properly on the website?  Take a look at my site to see the problem:  https://www.hairextensionsfair.com/shop/full-head-clip-in/pp-straight-16-in-detail

The custom fields are displaying in a single vertical column and the radio buttons, price adjustment, and descriptions are not in the proper location in relation to the images.  In my humble opinion the radio buttons should be above the image and the description & price adjustment should be below the image.  Currently the radio button and price adjustment is along the side of the image, which makes it difficult to know which image it relates to.  Also, the images should flow across the page and not in one vertical column.  See the attached image for an idea of how I'm trying to get the custom field images to look.   Also, when there is no price adjustment, it is still displaying the : (colon) even when I removed the word "free" from the language file.  The attached image also shows a clean way to display price adjustments below the description if an adjustment exists, otherwise there is no display.   I tried to copy & modify the default.php in the productdetails view and the vmsite-ltr.css to achieve the desired result, but there doesn't seem to be a way to control the location of the radio button and price adjustment within these two files.  Please let me know what files need to be modified to make it look like the attached image?       

The custom fields images when clicked should open in a modal lightbox to see the full size image. 

Also, additional product images with descriptions display in a singe vertical column and not across the page.  See my site to see the problem:  https://www.hairextensionsfair.com/shop/full-head-clip-in/pp-straight-16-in-detail

UPDATE: See Reply #34 in this topic to download the attached file that makes your product page look much better if you have extra images, custom field images, and related products.  The links above are using the new file, so all looks good now.

Thanks,
Chuck

[attachment cleanup by admin]

cas

Please, can someone help me?   This is the last major problem that is holding back my customer from going live.  I tried to copy and modify the default.php in the productdetails view and the vmsite-ltr.css to achieve the desired result, but it seems to me the problem is deeper in the VM code, so that's why I am asking for help from the VM team. 

Please help!
Thanks,
Chuck

PRO

this is in your template.css AND wrong

a, img {
    border: medium none;
    margin: 0;
    outline: medium none;
    padding: 0;
}

img a:link

cas

Thanks Banguet Tables Pro,

What should it be to get the results shown in my attachment?   I tried removing the 'a, img' section completely and nothing changed.  I tried changing 'a, img' to 'img a:link' and nothing changed.  What exactly should it be?   I'm not an expert at this, so please explain in detail what to do. 

Thanks,
Chuck

PRO

do this
css

.product-field{width:49%;float:left;}

cas

#5
Thanks.  I made the change, so now you can see it just moved the 'Add to Cart' button to the top right, but it didn't fix the image display problem.  The images are still not aligned across the page and the radio button and price adjustment is still along the side of the image, which is difficult for customers to understand the alignment when done this way  The radio button should be above the image and the description and price adjustment should be below the image.     

Thanks,
Chuck

PRO

views/productdetails/tpl/default.php

REMOVE THIS at the top
JHTML::_('behavior.tooltip');

IF you dont want tooltips. (you can put it back later) Tooltip is the blue circle box

THEN: here
<?php if ($field->custom_title != $custom_title) { ?>
         <span class="product-fields-title" ><?php echo JText::_($field->custom_title); ?></span>

add <br /> after it


then here
   $custom_title = $field->custom_title;
   } ?>
   </div>

ADD <div class"clear"></div>

THEN here
<div class="product-field product-field-type-<?php echo $field->field_type ?>">

change to
<div style="width:49%;float:left;" class="product-field product-field-type-<?php echo $field->field_type ?>">

PRO


PRO

<div class="addtocart-bar">

right above this add

<div class"clear"></div>

cas

I made all the changes... but still no luck.  Question:  Should <div class"clear"></div>   really be   <div class="clear"></div>

PRO


PRO

#11
EDIT: no dont do that, hold on brb

cas

ok, I'll wait ... thanks for all your help!

PRO

CHANGE:::
.product-field {
    float: left;
    width: 100%;
}


EDIT:::: change the above, brb

cas

#14
I made the change.