Need help with filtering! Options

[Mlb1992]

Hi Guys! I need a little help with my filtering system.

Basically, we have a new theme but the filtering system defaults as "show all" when I want it to default to showing only our available inventory (since there is way too much in "show all" and some people get confused as to what is available and what is sold. Plus it takes FOREVER).

I have tried moving the "class=selected" coding to the available cars tab, but even though it selects the button it still shows all the items.

The web designer who put the theme up for me is not answering any of my messages, so I resigned to fix it myself. I've searched online for some answers, but I've come up short. Sooo.. here I am! I'm grateful for any help or insight. Thank you in advance!

If you want to see the actual site to see whats going on, its vintageracecarsales.com/inventory.

<?php get_header();
/*
Template name: Cars 4-col Template
*/
?>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php
$skt_port_filter_hide = sketch_get_option($invert_shortname.'_hide_pro_filter');
$pagetitle = get_post_meta($post->ID, "_skt_pagetitle_metabox", true);
$pagetitle = ((isset($pagetitle) && $pagetitle !="") ? $pagetitle : '1' );
?>
<?php if($pagetitle == 1) { ?>
<div class="bread-title-holder">
<div class="bread-title-bg-image full-bg-breadimage-fixed"></div>
<div class="container">
<div class="row-fluid">
<div class="container_inner clearfix">
<h1 class="title">
<?php the_title(); ?>
</h1>
<?php if(sketch_get_option($invert_shortname."_hide_bread") == 'true') {
if ((class_exists('invert_breadcrumb_class'))) {$invert_breadcumb->custom_breadcrumb();}
}
?>
</div>
</div>
</div>
</div>
<?php } ?>
<!-- #Container Area -->
<div id="container" class="clearfix">
<div class="container post-wrap">
<div class="row-fluid">
<!-- Content -->
<div id="content" class="span12">
<div class="post project-temp4" id="post-<?php the_ID(); ?>" >
<!-- Project Wrap -->
<div class="project_wrap clearfix">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; ?>
<?php $args=array('post_type' => 'portfolio','posts_per_page' => '-1','paged' => $paged);
query_posts($args);
$args = array( 'taxonomy' => 'portfolio_category' );
$data_type = null; //For display data-type class
$data_id = 0; //For display data-id class
?>
<div id="wrap" class="clearfix">
<?php if($skt_port_filter_hide == "true") { ?>
<div class="style-filter">
<!-- Category Filter -->
<dl class="group maingroup">
<dt></dt>
<dd>
<ul class="filter group" id="isofilters">



<li><a href="java script:void(0);" data-filter="available">Available Cars[/url]</li>
<li><a href="java script:void(0);" data-filter="parts">Parts & Other [/url]</li>

<li><a href="java script:void(0);" data-filter="sold-cars">Sold[/url]</li>

<li><a href="java script:void(0);" data-filter="*" class="selected">show all[/url]</li>



</ul>
</dd>
</dl>
<!-- Category Filter -->
</div><!-- style-filter -->
<?php } ?>
<div id="container-isotop" class="portfolio group four-col">
<?php
// The Loop
while ( have_posts() ) : the_post();
$terms = get_the_terms( $post->ID, 'portfolio_category' );
$cat_links = array();
foreach ( $terms as $term ) {
$cat_links[] = $term->slug;
}
foreach($cat_links as $itm){
$data_type .= $itm.' ';
}
$data_id++;
?>
<!-- Project Box -->
<div class="item project_box span3 <?php echo $data_type;$data_type =null; ?>" data-type="<?php echo $data_type;$data_type =null; ?>" data-id="id-<?php echo $data_id; ?>">
<!-- standard -->
<div class="project-item" id="post-<?php the_ID(); ?>">
<?php if(has_post_thumbnail()) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'invert_portfolio_image' );
$pretty_thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full'); ?>
<div class="feature_image" style="position: relative;">
<img class="skin-border" src="<?php echo $image[0]; ?>" alt="Thumbnail" />
</div>


<div class="title">
<a href="<?php the_permalink();?>" title="<?php the_title();?>"> <?php the_title();?> [/url]
</div>




<?php } ?>



</div>
<!-- standard -->
</div>
<!-- Project Box -->
<?php
endwhile;
// Reset Query
?>
</div>
<div class="clearfix"></div>
<?php wp_reset_query(); ?>
</div>
</div>
<!-- Project Wrap -->
</div>
<?php endwhile; ?>
<?php else : ?>
<div class="post"><h2><?php _e('Not Found','invert'); ?></h2></div>
<?php endif; ?>
</div>
<!-- Content -->
</div>
</div>
</div>
<!-- #Container Area -->
<?php get_footer(); ?>

[Christian J]

Not sure, but I don't think PHP has anything to do with this. Rather it seems the inventory is just filtered by a javascript library, so even if you stop the filter from showing the whole inventory by default, the page may still download all the HTML and images(?) in the background.

The filtering library seems to be customized here: http://vintageracecarsales.com/wp-content/...stom.js?ver=1.0 --more specifically in this section:

CODE

// initialize isotope
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});

I suppose you could try changing filter: '*' to filter: 'available' and see if it affects download time. See also the manual: http://isotope.metafizzy.co/v1/docs/options.html#filter

As for page loading time, I recommend using less of all those libraries. If you "must" use them, perhaps parts of the inventory could be loaded with Ajax instead of everything at once, but that would complicate things even more.

[pandy]

If I fix this for you can I have the red Alfa Romeo -63?

Just joking. I know I'm not worthy.

[Mlb1992]

Christian:Thank you for the response! I guess my next question is how do I access the JS script? I'm on Wordpress so it's not easy to find (and i'm pretty new to this).

Pandy: Haha! That Red Alfa is sold, but I'm sure we can arrange a heist.

[Christian J]

how do I access the JS script? I'm on Wordpress so it's not easy to find (and i'm pretty new to this).

I have no experience with Wordpress, can't you simply use FTP?

[Mlb1992]

I'm unsure what FTP is. My lack of knowledge is showing, I know.

[pandy]

File Transfer Protocol. The way files are normally transfered between a local computer and a server. Modern FTP clients look much like Windows Exlorer. When connected you see files on your computer in one of two windows and files on the server in the other. Then you can transfer them back and forth by dragging, clicking or using menu commands.

FileZilla is good and free. They have some screen caps you can look at.
https://filezilla-project.org/

But how did you get the WP installation files up there if you didn't use FTP?

[Mlb1992]

The web designer we hired most likely used that, but I haven't personally though.(I wish he'd answer the damn phone!)

I'll take a look at that service, thanks!

[Frederiek]

Maybe have a look here: https://codex.wordpress.org/Using_Javascript or http://aarontgrogg.com/blog/2012/01/31/why...s-theme-editor/ (found by searching for "access js file in wordpress").