How to alter WP e-commerce product query to change output? WordPress
- SOLVED
I need a WP E-commerce ninja to help me here. :)
I'm using the category_query process to list product categories on the home page within some styled boxes I have set up. I'd like to bring in the subcategories as well under each parent category and I can, except the query gives all the subcategories the same styling as the parents and that's not what want - I want to be able to implement separate styling for the subcats.
Here's the code I'm using:
<ul>
<?php wpsc_start_category_query($category_settings); ?><?php wpsc_start_category_query(array('category_group'=> get_option('wpsc_default_category'), 'show_thumbnails'=> 1)); ?>
<li class='latest_product'>
<a href="<?php wpsc_print_category_url();?>" title='<?php wpsc_print_category_name();?>'>
<?php wpsc_print_category_image(145, 105); ?></a>
<div class="product_info">
<a href="<?php wpsc_print_category_url();?>"><?php wpsc_print_category_name();?></a>
<?php wpsc_print_subcategory("<ul>", "</ul>"); ?>
</div>
</li>
<?php wpsc_end_category_query(); ?>
</ul>
A quick illustration of the output I want would be this:
<"latest_product" li>
<parent category group thumbnail>
<"product_info" div>
<parent category name with link>
<ul, perhaps with a class name so I can style it>
<li>any subcategories for this category</li>
<li>any more subcategories for this category</li>
</ul>
</end "product_info div>
</end "latest_product" li>
Can anyone tell me how to do this? Perhaps what to change in the defined function(s)?
Answers (2)
Oleg Butuzov answers:
are you sure you want to get that?
if yeas just change the code in loop.
Oleg Butuzov comments:
<ul>
<?php wpsc_start_category_query($category_settings); ?><?php wpsc_start_category_query(array('category_group'=> get_option('wpsc_default_category'), 'show_thumbnails'=> 1)); ?>
<strong><li class='latest_product'></strong>
<strong><a href="<?php wpsc_print_category_url();?>" title='<?php wpsc_print_category_name();?>'></strong>
<?php wpsc_print_category_image(145, 105); ?></a>
<strong><div class="product_info"></strong>
<strong> <a href="<?php wpsc_print_category_url();?>"><?php wpsc_print_category_name();?></a></strong>
<?php wpsc_print_subcategory("<ul>", "</ul>"); ?>
<strong></div></strong>
<strong> </li></strong>
<?php wpsc_end_category_query(); ?>
</ul>
Oleg Butuzov comments:
hm bad example...
change </div>
to </end "product_info div>
to get
</end "product_info div>
Oleg Butuzov comments:
but thats code not nice, not validated, not even xml... have no idea why you need it. but just change the code in your loop.
tracyberna comments:
have no idea why you need it.
The reason I want it is because the "product_info" div has a Javascript rollup action associated with it. The "latest_product" li creates a square, 145px x 105px box with a picture in it, and just a tiny bit of "product_info" showing at the bottom with the category name in it. When you roll over it "product_info" rises up over the thumbnail with a semi-sheer background and more information.
The extra information I want to show is the subcategories. However, if they all have "latest_product" and "product_info" around them, they're all 145 x 105 boxes (which I have managed to style out) then they ALL have a rollup associated with them. They're all spaced about 100px below each other and roll up and down confusingly with every twitch of the mouse.
I just want one box to roll up, with the main category and then links to the subs in nice neat li's below, all grouped together.
Does that make sense? If it doesn't, after all that verbage you can just go see it in action if you like: [[LINK href="http://bit.ly/bfMCde"]]http://bit.ly/bfMCde[[/LINK]] Right now the subs aren't styled so that they even show up - they're too far below the main category to be seen, although in some cases you can see a little bit of their "product_info" background jutting out to the right side of the main one - but they're in the code if you look.
change </div>
to </end "product_info div>
to get
</end "product_info div>
Sorry, but that I don't understand that - I can't put </end "product_info div> in literally, and anyway I tried it just for the heck of it and nothing happened. :-/ Hope I'm not being dense. :-/
Oleg Butuzov comments:
<li class='latest_product product<?php post->ID;?>'>
Oleg Butuzov comments:
this ne a bit better. sorry for prevoius
replace this code
<li class='latest_product'>
by this.. (i assume there is exist function wpsc_print_category_id(), if you will get blank screen change it to wpsc_print_category_name())
<li class='latest_product <?php wpsc_print_category_id();?>'>
you will get uniq class for your code. so you will have posibility to design it.
Oleg Butuzov comments:
even better <li class='latest_product category<?php wpsc_print_category_id();?>'>
tracyberna comments:
Okay, I figured out a decent workaround using this suggestion. Thanks for your help. Oleg. :)
Pippin Williamson answers:
Just give a class to the "ul" surrounding your sub category, like this:
<?php wpsc_print_subcategory("<ul class="subcats">", "</ul>"); ?>
Then style it like this:
ul.subcats {
your styles here
}
tracyberna comments:
When I do that, it generally just puts in that ul code <em>along with</em> the "latest_product" and "product_info" code I don't want. As I explained above (and probably should have mentioned initially), "product_info" has a Javascript rollup action associated with it, and if the subcats do too it just kind of creates chaos. I just want one box to roll up with all the info inside.