/    Sign up×
Community /Pin to ProfileBookmark

Faceted Navigation. Need Help.

Copy linkTweet thisAlerts:
Nov 28.2015

Hi, Please see my php file below. I want to add faceted navigation in it. Somebody please help.

[code=php]
<html>
<head>
<title>November</title>
<link rel=”stylesheet” href=”style.css”>
<link rel=”stylesheet” href=”sidebar.css”>
<script src=”jquery.js”></script>
<script src=”filter.js”></script>
<script>
$(document).ready(function(){

$(‘.toggle’).click(function(){
$(‘.effect’).slideToggle();
});

$(‘.toggle1’).click(function(){
$(‘.effect1’).slideToggle();
});

$(‘.toggle2’).click(function(){
$(‘.effect2’).slideToggle();
});

$(‘.toggle3’).click(function(){
$(‘.effect3’).slideToggle();
});

$(‘.toggle4’).click(function(){
$(‘.effect4’).slideToggle();
});

$(‘.toggle5’).click(function(){
$(‘.effect5’).slideToggle();
});

$(‘.toggle6’).click(function(){
$(‘.effect6’).slideToggle();
});
});
</script>

</head>

<body>
<!–header–>
<div><?php include(“includes/header.php”); ?></div>
<!–navigation bar–>
<div><?php include(“includes/nav.php”); ?></div>
<!–body–>
<div class=”post_body”>
<div class=”content_wrapper”>
<div id=”left_sidebar” style=”padding-left: 10px;”>
<h2>Filter your search</h2>
<ul style=”padding-left: 0px;”>
<div class=”categories” style=”list-style:none”>
<li><input type=”checkbox” name=”available_on_google” value=”available_on_google”>Available on Google</li>
<li><input type=”checkbox” name=”short_artist” value=”short_artist”>Short Artist</li>
<li><input type=”checkbox” name=”fat_artist” value=”fat_artist”>Fat Artist</li>
<li><input type=”checkbox” name=”foreigner” value=”foreigner”>Foreigner Artist</li>
</div>
<br>
<button class=”toggle” type=”button” style=”background:#786; color:#fff”>Gender<span class=”caret”></span></button>
<div class=”effect” style=”list-style:none; display:none”>
<li><p style=”margin-bottom: 0px;”><input name=”male” type=”checkbox” value=”male”>&nbsp; <strong>Male</strong></p></li>
<li><p style=”margin-bottom: 0px;”><input name=”female” type=”checkbox” value=”female”>&nbsp; <strong>Female</strong></p></li>

</div>
<br>
<br>
<button class=”toggle1″ type=”button” style=”background:#786; color:#fff”>Age<span class=”caret”></span></button>
<div class=”effect1″ style=”list-style:none; display:none”>
<li><p style=”margin-bottom: 0px;”><input name=”age0_5yrs” type=”checkbox” value=”age0_5yrs”>&nbsp; <strong>Age</strong>&nbsp;(0-5 yrs)&nbsp;</p></li>
<li><p style=”margin-bottom: 0px;”><input name=”age6_10yrs” type=”checkbox” value=”age6_10yrs”>&nbsp; <strong>Age</strong>&nbsp;(6-10 yrs)&nbsp;</p></li>
<li><p style=”margin-bottom: 0px;”><input name=”age11_15yrs” type=”checkbox” value=”age11_15yrs”>&nbsp; <strong>Age</strong>&nbsp;(11-15 yrs)&nbsp;</p></li>
<li><p style=”margin-bottom: 0px;”><input name=”age16_20yrs” type=”checkbox” value=”age16_20yrs”>&nbsp; <strong>Age</strong>&nbsp;(16-20 yrs)&nbsp;</p></li>
<br>
<button class=”toggle2″ type=”button” style=”background:#786; color:#fff”>Height<span class=”caret”></span></button>
<div class=”effect2″ style=”list-style:none; display:none”>
<li><p style=”margin-bottom: 0px;”><input name=”ht1″ type=”checkbox” value=”ht1″>&nbsp; <strong>Height</strong>&nbsp;(1′ 0″-1′ 6″)&nbsp;</p></li>
<li><p style=”margin-bottom: 0px;”><input name=”ht2″ type=”checkbox” value=”ht2″>&nbsp; <strong>Height</strong>&nbsp;(1′ 7″-2′ 0″)&nbsp;</p></li>
<li><p style=”margin-bottom: 0px;”><input name=”ht3″ type=”checkbox” value=”ht3″>&nbsp; <strong>Height</strong>&nbsp;(2′ 1″-2′ 6″)&nbsp;</p></li>
<li><p style=”margin-bottom: 0px;”><input name=”ht4″ type=”checkbox” value=”ht4″>&nbsp; <strong>Height</strong>&nbsp;(2′ 7″-3′ 0″)&nbsp;</p></li>
<br>
<button class=”toggle3″ type=”button” style=”background:#786; color:#fff”>Weight<span class=”caret”></span></button>
<div class=”effect3″ style=”list-style:none; display:none”>
<li><p style=”margin-bottom: 0px;”><input name=”wt1″ type=”checkbox” value=”wt1″>&nbsp; <strong>Weight</strong>&nbsp;(1-10 kgs)&nbsp;</p></li>
<li><p style=”margin-bottom: 0px;”><input name=”wt2″ type=”checkbox” value=”wt2″>&nbsp; <strong>Weight</strong>&nbsp;(11-20 kgs)&nbsp;</p></li>
<li><p style=”margin-bottom: 0px;”><input name=”wt3″ type=”checkbox” value=”wt3″>&nbsp; <strong>Weight</strong>&nbsp;(21-30 kgs)&nbsp;</p></li>
<li><p style=”margin-bottom: 0px;”><input name=”wt4″ type=”checkbox” value=”wt4″>&nbsp; <strong>Weight</strong>&nbsp;(31-40 kgs)&nbsp;</p></li>
<br>
<button class=”toggle4″ type=”button” style=”background:#786; color:#fff”>Talent/s:<span class=”caret”></span></button>
<div class=”effect4″ style=”list-style:none; display:none”>
<li><p style=”margin-bottom: 0px;”><input name=”actor_actress” type=”checkbox” value=”actor_actress”>&nbsp; <strong>Actor/Actress</strong></p></li>
<li><p style=”margin-bottom: 0px;”><input name=”anchor_host” type=”checkbox” value=”anchor_host”>&nbsp; <strong>Anchor/Host</strong></p></li>
<li><p style=”margin-bottom: 0px;”><input name=”assistant_choreographer” type=”checkbox” value=”assistant_choreographer”>&nbsp; <strong>Assistant Choreographer</strong></p></li>
<li><p style=”margin-bottom: 0px;”><input name=”assistant_director” type=”checkbox” value=”assistant_director”>&nbsp; <strong>Assistant Director</strong></p></li>
<br>
<button class=”toggle5″ type=”button” style=”background:#786; color:#fff”>Experience:<span class=”caret”></span></button>
<div class=”effect5″ style=”list-style:none; display:none”>
<li><p style=”margin-bottom: 0px;”><input name=”fresher” type=”checkbox” value=”fresher”>&nbsp; <strong>Fresher</strong></p></li>
<li><p style=”margin-bottom: 0px;”><input name=”movies” type=”checkbox” value=”movies”>&nbsp; <strong>Movies</strong></p></li>
<li><p style=”margin-bottom: 0px;”><input name=”printshoot” type=”checkbox” value=”printshoot”>&nbsp; <strong>Printshoot</strong></p></li>
<li><p style=”margin-bottom: 0px;”><input name=”rampwalk” type=”checkbox” value=”rampwalk”>&nbsp; <strong>Ramp walk</strong></p></li>
<br>
<button class=”toggle6″ type=”button” style=”background:#786; color:#fff”>Language:<span class=”caret”></span></button>
<div class=”effect6″ style=”list-style:none; display:none”>
<li><p style=”margin-bottom: 0px;”><input name=”english” type=”checkbox” value=”english”>&nbsp; <strong>English</strong></p></li>
<li><p style=”margin-bottom: 0px;”><input name=”hindi” type=”checkbox” value=”hindi”>&nbsp; <strong>Hindi</strong></p></li>
<li><p style=”margin-bottom: 0px;”><input name=”marathi” type=”checkbox” value=”marathi”>&nbsp; <strong>Marathi</strong></p></li>
<li><p style=”margin-bottom: 0px;”><input name=”gujrati” type=”checkbox” value=”gujrati”>&nbsp; <strong>Gujrati</strong></p></li>
</div>
<br>
<br>
</ul>
</div>
<div id=”right_content” style=”list-style:none;”>
<div id=”headline”>
<div id=”headline_content”>
<b style=”color:#000″>Welcome <strong>Client</strong></b>
<b style=”color:red”>Your Selected Artists:</b>
<span>:-&nbsp;</span>
<button class=”button” type=”button” style=”background:#786; color:#fff” name=”submit” value=”submit”><a href=”client_&_project_details.php”>Done</a></button>
</div>
</div>

<div id=”products_box”>
<?php
$con=mysql_connect(“localhost”,”root”,””);
$db=mysql_select_db(‘november’,$con);

$query = “select * from products”;

$run_products = mysql_query($query);

while ($row_products=mysql_fetch_array($run_products)){

$pro_id = $row_products[‘id’];
$pro_name = $row_products[‘name’];
$pro_desc = $row_products[‘description’];
$pro_img = $row_products[‘image’];
$pro_model_id = $row_products[‘model_id’];

echo ”
<div id=’single_product’>
<h3>$pro_name</h3>
<img src=’product_images/$pro_img’ width=’180′ height=’180′ /><br>
<p>$pro_desc</p><br>
<p><a href=model.php?model_id=’$pro_model_id'</a>profile</p>
</div>”;
}

?>
</div>
</div>
</div>
</div>

<!–footer–>
<div><?php include(“includes/footer.php”); ?></div>

</body>
</html>

<?php

function populate_product_facts($mysql_connection) {
//empty product_facts table
$query = “select * from products”;
mysql_query($mysql_connection, “TRUNCATE product_facts”);
//fetch all product data
$result = mysql_query($mysql_connection, “SELECT * FROM products”);
//loop through resultset rows
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$facet_id = 1;
//loop through table columns
foreach ($row as $key => $value) {
//create facts for all product fields except ‘id’ and ‘name’
if ($key != “id” && $key != “name”) {
$sql = “INSERT INTO product_facts VALUES (” . $row[‘id’] . “,$facet_id,’$key’,’$value’);”;
mysql_query($mysql_connection, $sql);
$facet_id++;
echo “Added fact: (“.$row[‘id’].”, $facet_id, $key, $value) <br/>”;
}
}
}
}

?>[/code]

to post a comment
PHP

0Be the first to comment 😎

×

Success!

Help @sheiqhzain spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...