How to display custom taxonomy grid in MarketPress

I am using CustomPress to set up a few custom taxonomies for MarketPress products (occasions, brands, etc.). I want to be able to display all products within one of these taxonomies -- for example, all products for the "Christmas" occasion -- in a grid format like my category pages.

I haven't been able to get this to work. I'm using the Taxonomy Widget plugin to display lists of these taxonomies in the sidebar. When one of the taxonomy terms, such as "Christmas," is clicked, a page is displayed that correctly lists only the products that have that term applied to them. But the products are displayed in a list, like a list of posts with full content. I haven't been able to come up with a way to change the display format.

I'm attaching screenshots of a category page and a custom taxonomy page to illustrate the problem. The "Gift Baskets" page is a product category page and the "Gifts for Christmas" page is a custom taxonomy page. (The site is in development so there are only a few test products that I'm using to set things up.)

This is the same issue that was raised some time ago in the thread "MarketPress: Displaying custom taxonomy products," but it wasn't resolved there.

I would really like to include this feature in my MarketPress store. Any ideas about how to do it?

Brian

  • Brian

    Hi Jack, thanks for your response.

    I am using the Catalyst Theme framework with the Dynamik child theme.

    I've made a little progress since posting my original question. I've discovered that I can get the taxonomy sorts to display using a custom template named taxonomy-[taxonomy-name].php (for example, taxonomy-occasions.php will display the "Christmas" products). I'm basing this template on a template called category.php that Catalyst provides specifically for customizing.

    Now my challenge, I guess, is to modify the new templates to display the MarketPress info in a grid format. Since I'm not a PHP guy, it's a pretty big challenge! Any chance you could point me in the right direction?

    Best regards,

    Brian

  • Jack Kitterhing

    Hi there Brian (@xlawdog)

    Sorry for the delay, I believe this would be more CSS, than PHP, but you may need to add some custom DIV's and classes with the code your using to display the product, within marketpress includes > themes > classic.css

    This is the code for the grid view

    /* products grid view */
    /*
    	.mp_grid .mp_one_tile{
    	position:relative;
    	float:left;
    	width:240px;
    	margin:10px;
    	}
    	.mp_one_tile{
    	height:94px;
    	}
    	.mp_one_tile.mp_excerpt{
    	height:143px;
    	}
    	.mp_one_tile.mp_thumbnail{
    	height:183px;
    	}
    	.mp_one_tile.mp_thumbnail.mp_excerpt{
    	height:246px;
    	}
    	#mp_product_list .mp_one_tile{
    	height:155px;
    	}
    
    	.mp_grid .mp_one_product{
    	width:220px;
    	}
    
    	.mp_grid .mp_one_tile:hover{
    	outline:none;
    	}
    
    	.mp_grid .mp_one_product{
    	position:absolute;
    	padding:10px;
    	background:white;
    	border:1px solid transparent;
    
    	transition: all 0.25s linear;
    	-moz-transition: all 0.25s linear;
    	-webkit-transition: all 0.25s linear;
    	-o-transition: all 0.25s linear;
    	}
    
    	.mp_grid .mp_one_product:hover{
    	border:1px solid #cccccc;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border-radius: 3px;
    
    	-webkit-box-shadow: 0 .0625em .25em rgba(51, 65, 80, .35);
    	-moz-box-shadow: 0 .0625em .25em rgba(51,65,80,.35);
    	box-shadow: 0 .0625em .25em rgba(51, 65, 80, .35);
    
    	z-index:3;
    	}
    
    	.mp_grid .mp_img_link img{
    	display:block;
    	float:none;
    
    	max-width:100%;
    	width: auto;
    	max-height: 100%;
    	height: 100%;
    
    	margin:auto;
    
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    	box-shadow: none;
    	border: none;
    	}
    
    	#mp_product_list.mp_grid .mp_img_link img{
    	padding: 1px;
    	border: 1px solid #CCC;
    	-webkit-border-radius: 2px;
    	-moz-border-radius: 2px;
    	border-radius: 2px;
    	}
    
    	.mp_grid a.mp_img_link{
    	display:block;
    
    	height:100px;
    	min-height:100px;
    	margin:0px;
    
    	background-size:100% auto;
    	background-repeat:no-repeat;
    	background-position:center;
    
    	-webkit-border-radius: 2px;
    	-moz-border-radius: 2px;
    	border-radius: 2px;
    	}
    	.mp_grid .mp_one_product:hover a.mp_img_link{
    	height:auto;
    	}
    
    	.mp_grid h3.mp_product_name{
    	width:100%;
    	min-height:25px;
    	margin-top:5px;
    
    	}
    	.mp_grid h3.mp_product_name{
    	white-space:nowrap;
    	text-align: center;
    	}
    
    	.mp_grid h3.mp_product_name,
    	.mp_grid p.mp_excerpt{
    	overflow:hidden;
    	text-overflow:ellipsis;
    	}
    
    	.mp_grid .mp_one_product:hover h3.mp_product_name,
    	.mp_grid .mp_one_product:hover p.mp_excerpt{
    	height:auto;
    	white-space:normal;
    	overflow:auto;
    	text-align: left;
    	}
    
    	.mp_grid p.mp_excerpt{
    	height:50px;
    	min-height: 50px;
    	margin-bottom:0px;
    	}
    
    	.mp_grid .mp_price_buy{
    	position:relative;
    	width:100%;
    	height:40px;
    	}
    	.mp_grid .mp_price_buy .mp_product_price{
    	position:absolute;
    	left:0px;
    	top:0px;
    	}
    	.mp_grid .mp_price_buy .mp_buy_form{
    	position:absolute;
    	right:0px;
    	top:0px;
    	}
    	.mp_grid .mp_price_buy .mp_buy_form input[type="submit"]{
    	cursor:pointer;
    	}
    */
    /* end products grid view */
    
    /* New Grid stylesheet */
    
    .mp_grid .mp_one_tile { vertical-align: top; clear: both; margin:30px 30px 0 0; *display: inline; *zoom: 1; }
    .mp_grid .mp_product_name,
    .mp_grid .mp_excerpt {  word-wrap: break-word; }
    .mp_grid .mp_img_link { display: block; }
    .mp_grid .mp_img_link img { margin: 0 auto; float: none; display: block; }
    
    .mp_grid #mp_product_list,
    .mp_grid .mp_product_detail,
    .mp_grid .mp_price_buy { display: inline-block; }
    
    .mp_grid .mp_one_tile,
    .mp_grid .mp_one_product { display: inline; }
    
    .mp_grid .mp_product_detail { vertical-align: top; margin-bottom: 60px; margin-top: 30px; }
    .mp_grid .mp_price_buy { vertical-align: bottom; }
    
    .mp_grid .mp_buy_form { float:none; text-align: center; }
    .mp_grid .mp_product_price { display: inline-block; background: none; padding: 0; margin: 0 0 0 16px; }
    .mp_grid .mp_product_price:before {
    	content: ' ';
    	width: 16px;
    	height: 16px;
    	background: url('modern-images/money.png') no-repeat 0 0;
    	position: relative;
    	top: 28px;
    	left: -20px;
    	display: block;
    }
    .mp_grid .mp_old_price { opacity: 0.5; }

    Thank you!

    Kind Regards
    Jack.

  • Brian

    Hi Jack,

    Actually, the CSS is not the problem. I've already done custom CSS for the grid view (see the attached screenshot showing one product as it displays in my other grid views).

    My problem is getting the MarketPress elements on the page. Currently, the page is showing the title, the content, and the category meta information.

    What I need instead are the following five elements:
    Featured image
    Title
    Excerpt (if possible)
    Price
    Buy Now button

    I'm trying to figure out the PHP code that will generate those five elements of the product in this template, so that they will be displayed on my custom taxonomy pages. Then, once they are there, I can take care of the CSS (or maybe I already have, if the classes used on the elements are the same as the ones I've used to style my other grid views).

    Brian

  • Brian

    I've managed to solve this problem.

    As I mentioned earlier, I created custom templates for each of my custom taxonomies (based on the category.php template that's available in the Catalyst framework that I'm using).

    The Catalyst framework permits easy customizing of templates with custom hook boxes that accept shortcodes as well as PHP, HTML, etc. I created a custom hook box using MarketPress shortcodes to display the product elements that I wanted and substituted that content for the standard post content.

    From there, it was easy to apply the CSS styles that I had written for the product category grid pages. So now the custom taxonomy pages look the same as the built-in product category pages.

    Thank you, Jack, for working on this issue with me.

    Regards,

    Brian