Hi, i'm modifying the products category for it to look similar to the products module (the one with featured products, top ten, etc). I've already removed the product details button and added the quantity selector and the add to cart button. My problem is that since both, the products module and the products category layouts, share the same coding i cant position the add to cart button and the quantity selector the way i need in the category products without breaking the products module's design.
Any ideas will be very appreciated, i'm desperate now, i've spent ages trying to figure this out.
Thanks a lot.
Hello,
Did you try using some CSS?
Version of Joomla, VM2?
Any live url? Any image how you would like it?
Regards
Yes, i've used CSS. I managed to make it look how i wanted to with Firebug, but when i made the changes live i realised i was changing the layout in the products module too. I'm afraid i'm not able to post a live url, as i need the site to be closed to visitors. I might pm you login details if you need them though.
I'm using Joomla 2.5 and Virtuemart 2.0.12f. I've attached two pictures: the products module is how i need it to look like.
Thanks
[attachment cleanup by admin]
Hello,
I have similar posts for the same template i suppose here: http://forum.virtuemart.net/index.php?topic=110322.0
Regards
Yes, i posted those, but the topic here is different. I am modifying the category products layout.
The first thing i did was to remove the product details button and add the add to cart button and quantity selector.
My problem is that the add to cart button and the quantity selector share the same coding with the product module's add to cart and quantity selector, so i cant' modify them separately: Whatever changes i make in one layout, is made in the other too.
Thanks again for the quick replies and the help.
Hello,
Place your PHP/HTML code for title and class s5_productwrap after the add-to-cart button code. Then place a style for image class that you have made it null and float it left using CSS, then make a little bit more space so all the three products can be added on the same row (fix the width of add to cart button span.addtocart-button and also the width % for per row products)
Regards
Excellent, i'll try it out and get back at you, thank you so much.
Nice,
Use this as a guide on your previous post: http://forum.virtuemart.net/index.php?topic=110322.msg369890#msg369890
Regards
Ok, so i followed your instructions, and the add to cart button and the quantity selector still doesn't look like i need to and can't still be changed without changing the products module layout. This is what it looks like now.
[attachment cleanup by admin]
hi,
Please use firebug and fix your CSS as you wish. Also without i live url i have no clue what exactly to change inside your CSS
Try more ...
The thing is I've no problem getting the layout to look like I want with firebug. The problem comes when I make the changes in the CSS files, I change both the category layout and the products module, when I want to change the category layout alone. This happens because both layouts share the same coding in add to cart and quantity buttons. I can post a pie URL of the site i use for testing, it is similar:
http://tinyurl.com/cytcqfu
A category layout link?
Ahh yes sorry! http://tinyurl.com/bq6jqv6
Hello,
for category view uses the following for your CSS:
.browse-view .addtocart-button {
}
That for example will change only the add to cart button for category view ... you could place hierarchy and other attributes, for example .browse-view .row .addtocart-button ...
Regards
err... i don't know how to do that :-[
ok,
First of all you have a div without class and a <left> that i don't know what it is because i see the html output only using firebug as you understand. Place a class under div after the space container on your loop (you have changed this with your overrides). On the new class place a float left
<div class="pruductImage1">
<left>
<a href="/prb_bdg1/images/stories/virtuemart/product/rioja_muga_crianza.jpg" class="modal" title="rioja_muga_crianza"><img border="0" title="Muga crianza 2007" class="browseProductImage" alt="rioja_muga_crianza" src="/prb_bdg1/images/stories/virtuemart/product/resized/rioja_thumb.jpg"></a> </left>
<!-- The "Average Customer Rating" Part -->
</div>
like:
.pruductImage1 {
float:left;
}
then fix your css and the container ... i can't explained more
Regards
The result is a bit messy : ( how can i fix this?
http://tinyurl.com/bq6jqv6
Sorry about all the bother, and thanks again...you're being great with me,... and very patient!
Hello,
You are changing different styles, please add a float fleft on the attribute pruductImage1 ...
like
.pruductImage1 {
float:left;
}
Also you have inside template.css line 524 the following:
.row > div {
display: table-cell;
float: none !important;
}
why this float:none? May be was for other solution ...
Sorry but with only firebug i cannot help you on your custom template further, you have to edit proper your overrides and create the appropriate styles for your CSS.
Regards
Thanks a lot bytelord. I might have found another way to do this though. I've found this post:
Quote from: lipixx on December 01, 2011, 22:39:16 PM
MY TEMPLATE DESIGN PROBLEMS:
I am having problems with the button colors, aspect, etc. I would like to change the button to a smallest and less abusive button, but only in the Categories page. I tried to change the line in the default.php (the one that I modified some lines ago in this post) that says:
<input type="submit" name="addtocart" class="addtocart-button" value="<?php echo $button_lbl ?>" title="<?php echo $button_lbl ?>" />
Changing the class="addtocart-button" , to "addtocart-button-smaller", and creating a class into the .css file. The button appears as I want, but it does not run.... while I am writing these lines I see the problem. When I click the button the JQuery function that adds the products to the cart does not get executed, because the function is executed only for certain classes. So I see.. I have to modify vmprices.js and I suppose that I have to modify it adding:
addtocart-smaller = cart.find('input.addtocart-button-smaller'),
And adding a function for this:
addtocart-smaller.click(.... identical content of addtocart.click(...) });
Ok!
That's all for me ;)
I've followed these instructions and managed to clone the add to cart button in the category layout and place it exactly where i need without disturbing the products module layout! I still need to do the same with the quantity box and quantity controls, since this solution doesn't work with these.
http://tinyurl.com/bq6jqv6
Any ideas? I'm very happy, i'm almost there!!! : )
Hello,
Change the span.quantity-box2 and the addtocart-button2 widths ... then please fix you css and divs for the row, the div without css class for the images...
I cannot tell you something more ... i have give the right instructions and i am not aware of your overrides, please try and be more patient ...
Regards
I finally got it to look like i need to!!
http://tinyurl.com/bq6jqv6
Now my problem is that i think i messed the quantity box code. I posted it in a separate post, because i think it's not related to templating.
You don't know how much i appreciate your help, you've been great to me, even though i am a real pain. Thanks x 1000
Edit: you've moved it, so i guess it's related to templating after all...sorry for that
Hello,
Nice you did it, was easy after all :) Just need to be more patient ...
On your other question ... http://forum.virtuemart.net/index.php?topic=110986.msg372330#msg372330
Regards