Marketpress: Visitor-selectable product sort

Hello,

I'm trying to figure out the best way to provide a mechanism for the site visitor to select the sort order for the product listing.

Currently you can make a default setting in the MP admin screen, which is fine. But I would like the user to have the option of viewing the list in Alpha, date, price low-to-high and price high-to-low.

One idea I had was to use the [mp_list_products] shortcode to set up various pages with the different sort orders. However that shortcode doesn't make use of the mp_productlist.php child template I've already developed to serve the default view. And I don't see how to easily modify the results of the shortcode for a suitable presentation.

It seems like I have to modify the orderby clause in the WP_query on a conditional basis but I'm not sure where in the templates to attempt that and what the code would look like exactly. Any any advice is greatly appreciated.

Also, as a side note, it seems to me that products need an extra alpha sort field to account for cases when the "title" sort needs to eliminate short words like "A" and "The" from the left.

Any help is greatly appreciated. If this has been covered elsewhere in the forums I apologize in advance, but I did numerous searches on "product list order" and variations of that and did not find an answer.

- Rob

  • pro120

    I realize now I misunderstood your post, maybe this helps maybe it doesn't. This is just a jumpselect for an A to Z list of products and subcategories.
    It's probably not suited exactly to your needs but it could be a good starting place for you.

    I added get_template_part('product-filter'); on a mp_category template. There is a little JS that goes with it if you want to use it too.

    <?php global $wp_query;
    $args = array_merge( $wp_query->query, array( 'orderby' => 'title','order' => 'ASC' ) );
    $query = query_posts( $args );
    $category = $wp_query->query_vars['product_category'];
    $labels = array(
    	'electronics' => array(
    		'name' => 'Devices',
    		'singular' => 'Device'
    	),
    	'corporate' => array (
    		'name' => 'Products',
    		'singular' => 'Product'
    	),
    	'glassware' => array (
    		'name' => 'Glassware',
    		'singular' => 'Glass'
    	)
    );
    $label = $labels[$wp_query->query_vars['product_category']];
    $cat_parent = get_term_by('slug',$wp_query->query_vars['product_category'],'product_category');
    $term_args = array(
    	'parent' => $cat_parent->term_id,
    	'hide_empty' => true,
    	'hierarchical' => true
    );
    $cat_children = get_terms('product_category',$term_args);
    ?>
    <div class="product_filter box <?php echo $category ?>">
    	<div class="f-left">
    		<label><?php echo $label['name']?> A to Z</label>
    		<select class="jump_select">
    			<option value="0" style="text-align:center;">--------</option>
    			<?php foreach($query as $product) : ?>
    				<option value="<?php the_permalink()?>"><?php echo $product->post_title ?></option>
    			<?php endforeach; ?>
    		</select>
    		<?php foreach($cat_children as $child) : ?>
    			<?php $underlings = get_terms('product_category','parent='.$child->term_id); ?>
    			<?php if(!empty($underlings)) : ?>
    			<label><?php echo $child->name; ?></label>
    			<select class="jump_select">
    				<option value="0">--------</option>
    				<?php foreach($underlings as $babytax) : ?>
    					<option value="<?php echo get_term_link($babytax); ?>"><?php echo $babytax->name?></option>
    				<?php endforeach; ?>
    			</select>
    			<?php endif; ?>
    		<?php endforeach; ?>
    	</div>
    	<div class="f-right">
    		<a id="filter_go" class="button gray">GO</a>
    	</div>
    </div>
    <?php wp_reset_query(); ?>
    $(document).ready(function($){
    		var _jump = false;
    		$('select.jump_select').bind('change',function() {
    			_jump = $(this).val();
    		});
    		$('#filter_go').bind('click', function(e) {
    			if(_jump) {
    				window.location.href = _jump;
    			}
    		});
    	});
  • Timothy Bowers

    Hey Rob.

    Currently you can make a default setting in the MP admin screen, which is fine. But I would like the user to have the option of viewing the list in Alpha, date, price low-to-high and price high-to-low.

    As you noticed, there is way for the user to do this yet with the current setings on the actual product page by default. It is something being considered for a future version.

    One idea I had was to use the [mp_list_products] shortcode to set up various pages with the different sort orders.

    This is one way, the order by can take various arguments including by date, price, etc. All the information as you noticed is in the admin there with the shortcode. It would perhaps require creating different pages for different orders and interlinking them. I suppose you could create a custom page template in your theme to better render and style this.

    Also, as a side note, it seems to me that products need an extra alpha sort field to account for cases when the "title" sort needs to eliminate short words like "A" and "The" from the left.

    Thats something we can certainly put forward to the developer of this plugin. :slight_smile:

    Any help is greatly appreciated. If this has been covered elsewhere in the forums I apologize in advance, but I did numerous searches on "product list order" and variations of that and did not find an answer.

    Feel free to post away. :slight_smile:

    How does Pro120s suggestion work for you?

    Take care.

  • robbo

    To Pro120:
    Thanks! I'll take a look and see if I can make use of that.

    To Timothy:

    One idea I had was to use the [mp_list_products] shortcode to set up various pages with the different sort orders.

    This is one way, the order by can take various arguments including by date, price, etc. All the information as you noticed is in the admin there with the shortcode. It would perhaps require creating different pages for different orders and interlinking them. I suppose you could create a custom page template in your theme to better render and style this.

    I'm not sure how I could make a template to make use of this, as we have so little control over what the shortcode outputs. Yes, we can select the order and filter by tags and categories, but we have no control over the fields that are echoed, and the order the fields come in the output stream. It would be nice if these shortcodes honored the mp_productlist.php child template so there can be some consistency to product listings.

    I have to say that the themeing scheme for MarketPress seems very flawed. So much of the what should be accessible for themeing purposes (class and id designators, etc) are outputted by functions with no way for the theme author to override them.

    And the fact that we have this wonderful shortcode that outputs the product list -- but does so in a way that is completely separated (thematically) from the default product list output -- is puzzling.

    It would be nice separation between control/model and view were better thought through in a future version to allow it to be "100% Customizable" (as advertised), and to make the process less headache-prone.

  • robbo

    Thanks, again Pro120.

    I came up with this based on your code example. It is VERY basic and allows the product list to be sorted by Title or Date based on visitor input. The default sort (configured in the store settings) is by Date, Descending (newest products to oldest).

    The following code was placed in my mp_productlist.php child theme file, just below the get_header() call...

    define ("MBO_ORDER_DATE",  0);
    define ("MBO_ORDER_TITLE", 1);
    
    define ("MBO_ORDER_DEFAULT", MBO_ORDER_DATE);
    
      // If the visitor specified an alternate sort order capture it...
      if ( !empty( $_GET["order"] ) )
        $mb_product_order = $_GET["order"];
      else
        $mb_product_order = 0;
    
      // Reset the query based on the specified sort order
      switch ( $mb_product_order ) {
        case MBO_ORDER_TITLE:
          $args = array_merge( $wp_query->query, array( 'orderby' => 'title','order' => 'ASC' ) );
          break;
    
        default:
          $mb_product_order = MBO_ORDER_DEFAULT;
      }
    
      if ( $mb_product_order != MBO_ORDER_DEFAULT ) {
        $query = query_posts( $args );
      }

    And elsewhere in the template, just below the "Shop Our Store" header is a very, very simple link for the visitor to click to alter the sort...

    <div class="sort-control">
      <?php
        // Build the re-sort URL. Start with the base product_list link...
        $re_sort_url = mp_products_link(false, true);
    
        // If we're looking at the default (date) sort, then append the
        // alpha sort argument...
        if ($mb_product_order == MBO_DEFAULT) {
          $re_sort_url .= "?order=" .  MBO_ORDER_TITLE;
          $re_sort_text = "Sort by title";
        } else {
          $re_sort_text = "Sort by newest first";
        }
      ?>
      <a href="<?php echo $re_sort_url ?>" title="<?php echo $re_sort_text ?>" alt="<?php echo $re_sort_text ?>"><?php echo $re_sort_text ?></a>
    </div><!-- sort-control -->

    This could be a lot more sophisticated (and will be) but hopefully serves as a quick reference example to any trying to solve a similar problem.

    A question for WP gurus: If you look at my $re_sort_url assignment above, you can see I am using a very crude method to append the order argument to the URL. The site is configured for human-readable URLs, so it's kinda crap that I append a ?order=1 to the end of it.

    Can anyone point me to a good resource for understanding URL arguments and how to encode things so I can have nice "/store/products/page/2/order/1" instead of "store/products/page/2?order=1"

    I'm totally backwards on permalink manipulation.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.