WP ecommerce modification – grid view like with different way viewing product categories

This post is not a tutorial, its just like a documentation of my work. Just for helping me to remember what i have done. This post is write about my modification of WP E-commerce engine. This modification is based on our online store need , especially on viewing product’s category and the product itself. For the sample , you can visit my work ( site )  at http://www.nicefine.net/living.

This is a screen shoot of  product page .

Its not using Gold cart Extension. I code it with a little modification of WP ecommerce engine 3.7.5.2. This is list of file that i have modified.

1. wpsc-includes/category.functions.php
2. products_page.php
3. default.css ( I modified the default themes , so i modified its css file )

category.functions.php

on this file i made several modification. I add 2 function in order to make the view result as what i need.

function is_has_sub($id) {
	global $wpdb;
  	if(get_option('permalink_structure') != '') {
    	$seperator ="?";
  	} else {
    	$seperator ="&";
	}
	$subcategory_sql = "SELECT COUNT(`".WPSC_TABLE_PRODUCT_CATEGORIES."`.`id`) as `count` FROM `".WPSC_TABLE_PRODUCT_CATEGORIES."` WHERE `active`='1' AND `category_parent` = '".absint($id)."'";
  	$subcategories = $wpdb->get_var($subcategory_sql);
  	if ($subcategories > 0) {
  		return true;
  	} else {
  		return false;
  	}
}

This function is made in order to check if related page has sub category or not.

The second function is made to produce subcategory thumbnails. check the cut of code


function display_subcategories_thumbs($id) {
global $wpdb;
if(get_option('permalink_structure') != '') {
$seperator ="?";
} else {
$seperator ="&";
}
$subcategory_sql = "SELECT * FROM `".WPSC_TABLE_PRODUCT_CATEGORIES."` WHERE `active`='1' AND `category_parent` = '".absint($id)."' ORDER BY `nice-name`";
$subcategories = $wpdb->get_results($subcategory_sql,ARRAY_A);
if($subcategories != null) {
$output .= "<ul


::just merge the code ::


class='SubCategories'>";
foreach($subcategories as $subcategory) {
if (get_option('show_category_count') == 1) {
//show product count for each category
$count = $wpdb->get_var("SELECT COUNT(`p`.`id`) FROM `".WPSC_TABLE_ITEM_CATEGORY_ASSOC."` AS `a` JOIN `".WPSC_TABLE_PRODUCT_LIST."` AS `p` ON `a`.`product_id` = `p`.`id` WHERE `a`.`category_id` IN ('{$subcategory['id']}') AND `p`.`active` IN ('1') AND `p`.`publish` IN('1')");
$addCount = " (".$count.")";
} //end get_option
$output .= "<li


::just merge the code ::


class='cat-item'>".stripslashes($subcategory['name'])."$addCount".display_subcategories($subcategory['id'])."

";
}
$output .= "

";
} else {
return '';
}
return $output;
}

Other modification on this file is  on the bottom of  “wpsc_display_category_loop”. On this section i did some additional script on the bottom of this section.


/*additional code*/
if (isset($query['catonly']) && $query['catonly'] != null && $query['catonly'] == true ) {
array_pop($content_to_place);
array_pop($content_to_place);
array_pop($content_to_place);
}
/*end of additional code*/
$output .= str_replace($tags_to_replace, $content_to_place ,$category_html);

}
return $output;
}


Lets see the implementation on products_page.php

products_page.php

After i made some modification on core function. Now I will made some modification on product_page.php.  On this section we made two version of modification, first modification on PHP script (make it compatible with new modified core) and second is CSS and HTML structure so we can get the presentation as we want.

First I made some function inside this file ( not good programming style )




function subcat($showthumb = true) { global $wp_query; ?>

<!--

<?php if (!is_has_sub($wp_query->query_vars['category_id'])) : ?>

<div id="notice_wrap">

<div class="notice_trans"></div>

<div class="notice_text">

<div class="notice_icon"></div>

<div style="float:left;margin-top:10px;"><?php echo TXT_WPSC_NOSUBSINTHISGROUP; ?></div>

</div>

</div>

<?php else : ?>

Sub Category of <?php echo wpsc_category_name(); ?>

<?php endif; ?>

-->

<div class='wpsc_categories wpsc_category_grid' style="width:100%">

<?php wpsc_start_category_query(array('category_group'=>'1','parent_category_id'=> $wp_query->query_vars['category_id'], 'show_thumbnails'=> 1,'catonly'=>true)); ?>

<div class="sub_cat png">

<div class="img_box">

<div class="tit_wrap">

<div class="trans"></div>

<div class="text_box">

<?php wpsc_print_category_name(); ?>

</div>

</div>

<div>

<a href="<?php wpsc_print_category_url();?>" class="category_mod" title='<?php wpsc_print_category_name();?>'>

<?php wpsc_print_category_image(200, 200); ?><br />

</a>

</div>

</div>

</div>

<?php //wpsc_print_subcategory("", ""); ?>

<?php wpsc_end_category_query(); ?>

<div class='clear_category_group'></div>

</div>

<?php }

The next step is replacing the method of viewing product with “subcat()” function.

default.css

Now the last part is modified the css file. Now its up to you to make the css file according to your need.