Product tax layout adjustment

Hi,
Norman Uk helped me to modificate the product page details some time ago but now I see I need some little adjustment:
the product tax info has moved: it is located next to the manufacturer image and I need it to be next to the price, see: http://tiendanueva.negre.es/iluminacion ... rada-.html

I tried to modify it into default.php (html/com_virtuemart/productdetails/) with no luck.
Hope you can help me with this little mod,

thank you in advance,
Kind Regards.

Hi

Please send me an access to ftp so I'll move it to the right place.

Send it, thank you.

Kind regards.

Hi

Done. I've used this code to display the text in /html/com_virtuemart/productdetails/default.php:

Code: Select all

<?php echo '<div class="PricetaxAmount">'.$this->product->prices['VatTax'][1][0].'</div>'; ?>


and this code to make it look better and hide the old text in override.css:

Code: Select all

.product-pricetitle .PricetaxAmount {
    margin-bottom: 15px;
}

div.PricesalesPrice {
    padding: 12px 0 0;
}

.product-price .PricetaxAmount {
    display: none !important;
}


Hi Teitbite,
awesome, thanks a lot!
After the change the "cantidad" text (to select product quantity) has moved next to the manufacturer image, see http://tiendanueva.negre.es/iluminacion ... rada-.html it has to be on the left side of the number 1 if you can solve this?

Thank you in advance,
Kind regards,

Hi

Looks like there is a validation error on Your site. http://validator.w3.org/check?uri=http% ... ne&group=0

Error says that paragraph closing tag is missing. I see it's close to the MODULE EVERYWHERE text. Can You please check that ?

Hi Teitbite,
didn't understand you, please explain what happens.
It is possible to change in the page http://tiendanueva.negre.es/sofas-y-but ... club-.html (product page) the text "cantidad" next to the manufacturer image to be down next to the quantity selection? Also the manufacturer image turned into not clickable.
If you can take a look at this, thanks.

Kind Regards,

Hi

Yes it can be moved, but it's displaying there because of an error in Your site. It's a validation error, most probably unclosed html tag. Please make a simple test try disabling all modules visible on this page and remove product description. After removing each element try to watch the site. If text will appear in a correct place than the last removed element will be to blame and You will need to look closer into its html code looking for an issue.

Hi Teitbite,
Solved!
I searched for the unclosed tag and didn't find anything wrong... I solved with an
<div class="clear"></div> which I think does a clear:both?
Solved, thanks a lot for the awesome support!

Kind regards,

Hi

Wow. That's interesting I'm glad it worked, but I still can see validation errors. So I believe it's only moved the issue to other area of html. Hopefully not one which will not cause any problems

Thanks!
Now the custom image fields "white,black,etc" is floated strange, can you see
http://tiendanueva.negre.es/iluminacion ... -vp1-.html
the image custom fields should be floated left. I can't find the class, can you?

Kind regards,

Hi

Try this code:

Code: Select all

.productdetails-view .spacer-buy-area {
    margin-top: 40px;
}


but it's still a fix for the look not the core issue with broken site html

Awesome!
but when is a description for the image custom field like "blanca" see http://tiendanueva.negre.es/iluminacion ... -vp1-.html the style breaks...
I've found this code in vm.css:
.vm-img-desc {
color: #000;
display: block;
font-size: 10px;
font-weight: 700;
text-align: center;
text-transform: uppercase
}
which controls that class.
The description text should be centered down the little image.
Teitbite, any idea on how to solve it?

Kind regards,

Hi

It's still a product of this validation error we both cannot track down

Try this to fix the look of it:

Code: Select all

label.product-fields-title {
    width: 100%;
}

label.other-customfield {
    color: #5A5A5A !important;
    float: left;
    margin-right: 10px;
    padding: 25px;
    position: relative;
    width: 50px;
}

.product-fields input[type="radio"] {
    position: absolute;
    bottom: 0;
    right: 0;
}

.productdetails-view .addtocart-bar {
    clear: both;
    margin: 20px 0 0;
}


Hi Teitbite,
we are close to get it!
It seems the check buttons are lost theres only one.

http://tiendanueva.negre.es/iluminacion ... -vp1-.html

Hi

Please replace one of the classes I've gave You the last time to:

Code: Select all

.product-fields input[type="radio"] {
    float: left;
    margin-top: 30px !important;
}


Hi Teitbite,
Awesome! I had to edit the margin-top to:
margin-top: 100px !important;
but it worked like a charm! http://tiendanueva.negre.es/iluminacion ... -vp1-.html

Thanks a lot!
Kind regards,

Hi

Finally I hope this validation error will not cause any more problems.

Hi

I hope so! The validation error you are talking about, is it an html tag? Can we solve it?
Thank you very much,

Kind regards.

Hi

I've already tried to locate and failed. I think it's a part of the code delivered within something called "Advanced Module". Any idea what can this be ??

Hi Teitbite,
No ideat at all, because in the product layout page there is not an advanced module...
Afortunatelly it won't cause any problem with the layout, there won't be much changes in this template, so better not to worry so much about it...!

Thanks for the interest,
Kind Regards,

Hi

Yes, I think the same If it's working than better not to touch it

Hi Teitbite,
There's something wrond in the way the image custom fields display on product page, see
http://tiendanueva.negre.es/sofas-y-but ... -aj5-.html
the check button is over the image, perhaps the width of the full element?
Do you know any solution on how to fix this?

another example in the page is http://tiendanueva.negre.es/sofas-y-but ... -jh1-.html

Thanks in advance,
Kind Regards,

Hi

This is because this addon to override.css:

Code: Select all

.product-field-type-M {
    margin-top: -28px !important;
}


do You remember what was it for ? I've checked our code and it was not in my modifications.

Hi teitbite, thank you,
This code was to upload the block because it was too margin from the top...

It seems the ckeck button doesn't adjust to the parent, its floated left and not centered...
How can we solve that?

Kind Regards,

Hi

Ok. We finally got stuck It's not possible to fix that right now. Looks like I need to fix this validation error for You after all, because this is the reason You have so many problems. Please let me know if I have Your permission to experiment with one of this product. Or better prepare me a test product showing the same issue so there will be no worry if I destroy it during the process of looking for the validation fix.

Hi Teitbite,
we will wait, if you don't mind. The main problem are the input in the image attributes. I have changed the margin (top-margin) into the css but don't know how to align the input with the attribute.
In example, the inputs for the page http://tiendanueva.negre.es/sofas-y-but ... -jh1-.html there are some of them "lost" at the right with the rest of content on a new line.
Is there a way to display all (the input + the image attribute) together?

Thanks in advance,
Kind Regards,

Hi

This is the problem. They cannot be aligned becuase they are all just set one after another and not in boxes as it supposed to be, but validation error broke it. We may try to make it done by resizing image to push input to the next line, but this is not the best solution. It will be like a fix for this one view only and not really an automatic alignment.

Hi Teitbite,
what about if we fit the input select into the box with the image and the text into the code?
Is it easy to do? Are you able to try it out?
Please let me know, it looks ugly when the input is apart from the content, it must be fit into the relative box.

Kind Regards,

Hi

Not an easy solution, but it can be done in core VM files. You need to edit: /component/com_virtuemart/models/customfields.php and replace lines 952 - 954 where You will see this code:

Code: Select all

$group->display .= '<input id="' . $productCustom->virtuemart_custom_id .$row. '" ' . $checked . ' type="radio" value="' .
$productCustom->virtuemart_customfield_id . '" name="customPrice[' . $row . '][' . $productCustom->virtuemart_custom_id . ']" /><label for="' . $productCustom->virtuemart_custom_id . '" class="other-customfield">' . $this->displayProductCustomfieldFE ($product, $productCustom, $row) . ' ' . $price . '</label>';


to

Code: Select all

$group->display .= '<div class="single-customfield"><input id="' . $productCustom->virtuemart_custom_id .$row. '" ' . $checked . ' type="radio" value="' .
$productCustom->virtuemart_customfield_id . '" name="customPrice[' . $row . '][' . $productCustom->virtuemart_custom_id . ']" /><label for="' . $productCustom->virtuemart_custom_id . '" class="other-customfield">' . $this->displayProductCustomfieldFE ($product, $productCustom, $row) . ' ' . $price . '</label></div>';


when I see what it produces than me may have a chance. But this will dissapear when You will update VM so not the best option

Hi Teitbite,
Thanks but I'm not able to find the file customfields.php
Is it located into components/com_virtuemart folder?

Kind regards,

Hi

Ups, sorry. I forget to mention this is in /admininistrator part of the com_virtuemart ;/