We all like examples when trying to do something for the first time. Here’s a code example of the template page for the Simplest Storefront Demo.
Most WordPressers will have bumped into the “while loop” at the heart of every template.
I’m using the twentyfifteen theme, where I got the starting code from page.php, but it should be almost identical for other themes.
Then I added my stuff (italics). It’s where you’d add all your navigation, graphics, branding etc.
You’ll see I added a form for the three dropdowns. You’ll also notice that whenever any of them change, I “updateRequestString”, which also reopens the page with it. There are also hidden form fields to handle the various url parameters not covered by those dropdowns.
And then there’s that “anonymous” function to deal with handling any url parameters and updating the form fields with them if they were.
JQuery is needed to make sure the document is ready before doing some bits and pieces.
Since Zazzle changed things so that a search term must be used when a department id is used, there’s some needed logic around setting the search term to be gift when a department is used and the visitor hasn’t given a search term in the search form.
Here’s the code:
<?php
// Start the loop.
while ( have_posts() ) : the_post();
?>
<form id="configForm" name="userConfig">
<div style="margin-bottom: 5px;">
<div style="float:left; margin-left:3px; margin-right:3px;">
view by: <br>
<select name="userST" onchange="updateRequestString();">
<option value="popularity">Popularity</option>
<option value="date_created">Newest</option>
</select>
</div>
<div style="float:left; margin-left:3px; margin-right:3px;">
department: <br>
<select name="userDP" onchange="updateRequestString();">
<option value="">All</option>
<option value="252819538404952287">Art and Posters</option>
<option value="252290587744666646">Home and Pets</option>
</select>
</div>
<div style="float:left; margin-left:3px; margin-right:3px;">
category: <br>
<select name="userCG" onchange="updateRequestString();">
<option value="">All</option>
<option value="196007871454443931">Outer Space</option>
<option value="196691844710546791">Motivating</option>
<option value="196466803266351700">Just Fun</option>
</select>
</div>
<div style="float:left; margin-left:3px; margin-right:3px;">
<br>good searches: dreamy, plymouth, black and white, steampunk
</div>
<div style="clear:both;"></div>
<input type="hidden" name="userSD" value="desc">
<input type="hidden" name="userBG" value="ffffff">
<input type="hidden" name="userTC" value="ngrdzwp_exstp1">
<input type="hidden" name="userPM" value="BIGOFFMONEY">
<input type="hidden" name="userSC" value="hightonridley">
<input type="hidden" name="smid" id="smid" value="441">
</div>
</form>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var oNavChoices = document.getElementById('configForm');
var requestString = '';
var QueryString = function() {
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString
var query_string = {};
var query = window.location.search.substring(1);
query = query.replace(/\&/g,"&");
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = pair[1];
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [query_string[pair[0]], pair[1]];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(pair[1]);
}
}
if (query_string.pdp) {
oNavChoices.elements.userDP.value = query_string.pdp;
}
if (query_string.pst) {
oNavChoices.elements.userST.value = query_string.pst;
}
if (query_string.pcg) {
oNavChoices.elements.userCG.value = query_string.pcg;
}
if (query_string.psd) {
oNavChoices.elements.userSD.value = query_string.psd;
}
if (query_string.pbg) {
oNavChoices.elements.userBG.value = query_string.pbg;
}
if (query_string.ptc) {
oNavChoices.elements.userTC.value = query_string.ptc;
}
if (query_string.ppm) {
oNavChoices.elements.userPM.value = query_string.ppm;
}
if (query_string.psc) {
oNavChoices.elements.userSC.value = query_string.psc;
}
if (query_string.smid) {
oNavChoices.elements.smid.value = query_string.smid;
}
return query_string;
}();
$(document).ready(onLoadMHR);
function onLoadMHR(){
setTimeout(clearSearchFormIfNeeded, 500);
}
function clearSearchFormIfNeeded () {
if (QueryString.pqs) { // maybe the search term in the search form needs to be cleared
if (QueryString.pqs !== "gift") { // anything but "gift" is ok
document.getElementsByName("pqs")[0].value = QueryString.pqs;
} else { // it was "gift" - but maybe withuot a dept being used
if (QueryString.pdp) { // if a department is being used then don't allow search form to use "gift"
document.getElementsByName("pqs")[0].value = "";
} else { // if a department isn't being used then allow search form to use "gift"
document.getElementsByName("pqs")[0].value = "gift";
}
}
} // there was no search term, so ne need for else clause
}
function updateRequestString () {
requestString = 'https://' + window.location.hostname + window.location.pathname;
if (window.location.search.length === 0) { // when first opened, the search form could contain a search term. If so, use it
QueryString.pqs = document.getElementsByName("pqs")[0].value;
}
if (oNavChoices.elements.userDP.value.length === 0) { // "All" is selected
if (QueryString.pqs) { // if it has a value
if (QueryString.pqs === "gift") {
requestString += '?pqs='; // "gift" is only needed when using a dp
} else {
requestString += '?pqs=' + QueryString.pqs; // it wasn't "gift" so use it
}
} else { // pqs doesn't have a value
requestString += '?pqs=';
}
} else { // it's not "All" so it must be a dp and if pqs doesn't already have a value other than "gift", then "gift" is needed for pqs
if (QueryString.pqs) { // if it has a value
if (QueryString.pqs !== "gift") { // if it's not "gift" use whatever it actually is
requestString += '?pqs=' + QueryString.pqs;
} else { // it was "gift"
requestString += '?pqs=gift'; // so, because it's a dp, continue to use "gift"
}
} else { // pqs doesn't have a value and needs one becasue dp is being used, so give it "gift" as a value
requestString += '?pqs=gift';
}
}
requestString += '&ppg=1';
requestString += '&pst=' + oNavChoices.elements.userST.value;
requestString += '&psd=' + oNavChoices.elements.userSD.value;
requestString += '&pdp=' + oNavChoices.elements.userDP.value;
requestString += '&pcg=' + oNavChoices.elements.userCG.value;
requestString += '&pbg=' + oNavChoices.elements.userBG.value;
requestString += '&ptc=' + oNavChoices.elements.userTC.value;
requestString += '&ppm=' + oNavChoices.elements.userPM.value;
requestString += '&smid=' + oNavChoices.elements.smid.value;
window.open (requestString, '_self');
}
</script>
<?php
// Include the page content template.
get_template_part( 'content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
// End the loop.
endwhile;
?>