Only showing once if variable is duplicate

[SpecTech]

Please see last reply, have now solved this issue and have provided my code for adding your own filtering system for products, it is not as advanced as the actinic one and quite an easy JQuery hack around. However it does allow you to keep a standard product layout and custom variables.

[peblaco]

Perhaps use of the producttype variable? That can define products as 0, duplicates as 1 and fragments as 2.

Pointers:
Deleting duplicate product pages in the Site Map
Search by Brands
Test for Fragment at Section Level

[SpecTech]

Perhaps use of the producttype variable? That can define products as 0, duplicates as 1 and fragments as 2.

Pointers:
Deleting duplicate product pages in the Site Map
Search by Brands
Test for Fragment at Section Level

Hi Peblaco, thankyou for the reply.

I'm not to sure if the producttype variable could work, how do you recommend using it to filter out all duplicates from the variables?

[SpecTech]

Okay managed to solve it with a JQuery hack, just set brand for the name of the select and then added some JQuery:

<script type="text/javascript">
var usedNames = {};
$("select[name='brand'] > option").each(function () {
    if(usedNames[this.text]) {
        $(this).remove();
    } else {
        usedNames[this.text] = this.value;
    }
});
</script>

[SpecTech]

If anyone would like to replicate this custom product filtering here is how I have done it (now working with brand and prices)

You will need JQuery to do this

1. Firstly make sure all your products are floating and not in a fixed table (so when it hides certain products they do not leave white space) then add some div's into your product layout similar to:

<div class="brand" style="display: none;"><actinic:variable name="Product Brand" /></div>
<div class="price" style="display: none;"><actinic:variable name="PriceListRetail" /></div>

2. Next add filters to your site layout similar to:

				<select class="selectpicker" id="brand-filter" name="brand" title="Brand" data-width="150px" style="position:relative">
					<option class="brand">Manufacturer</option>
					
				<actinic:block type="ProductList" >

					<option><actinic:variable name="Product Brand" /></option>
				</actinic:block>
				</select>

3. Change the Product Brand variable to whatever variable you are wanting to use. I have also added in by price range which is here:

				<select class="selectpicker" id="price-filter" title="Price Range" data-width="150px" data-size="5" style="position:relative">
					<option>Price Range</option>
					<option>&pound;0.01 - &pound;59.99</option>
					<option>&pound;60.00 - &pound;149.99</option>
					<option>&pound;150.00 - &pound;299.99</option>
					<option>&pound;300.00 - &pound;499.99</option>
					<option>&pound;500.00 - &pound;999.99</option>
					<option>&pound;1000.00 - &pound;5000.00</option>
				</select>

4. Now add some JQuery to remove all duplicates from the dropdown's (substitute brand for your select name)

<script type="text/javascript">
var usedNames = {};
$("select[name='brand'] > option").each(function () {
    if(usedNames[this.text]) {
        $(this).remove();
    } else {
        usedNames[this.text] = this.value;
    }
});
</script>

5. Now add your JQuery functions, it is going to take the string you are passing into it (from the dropdown select's value) and only show the product layouts which a child element for brand or price that match's or is in the price range:

function brand(string){
    var brand = string;
    $('.section-link').hide();
    
    $('.section-link').each(function() {
    	  var child = $(this).children('.brand')
    	if(child.text() == brand){
    		$(this).show();
    	}
	})
   
    	
    	
    if (brand == "Manufacturer"){
    	$('.section-link').show();
    }
}

function price(string){ // passing in the strings as £0.01 - £59.99 and £60.00 - £159.99 etc
	
	    if (string == "Price Range"){
    	$('.section-link').show();
    } else {
    
	$('.section-link').hide(); // hide all section-link div's'
	var range = string.replace(/\u00A3/g, ''); // strip pound sign's from range
	var rangearray = range.split("-"); // split into 2 value arrays
    lowarray = rangearray[0].toString(); // get low value as string
    higharray = rangearray[1].toString(); // get high value as string
    lowvalue = lowarray.replace(/ /g,''); // strip spaces
    highvalue = higharray.replace(/ /g,''); // strip spaces
	lowvalue2 = parseFloat(lowvalue);
	highvalue2 = parseFloat(highvalue);



	$(".price").filter(function(){ //do a filter for all div's with the class of price
		var divprice = $(this).text().replace(/\u00A3/g, ''); // strip pound sign from price value
		var maindivprice = divprice.replace(/ /g,''); // strip spaces from price value
		var maindivprice2 = parseFloat(maindivprice);
    	if (maindivprice2 >= lowvalue2 && maindivprice2 <= highvalue2) {
    		$(this).parent().show(); // show this parents div
    	} // filter to see if this price is in the price range
	}); 
	
}
}

Now all you need to do is write some JQuery (I am using bootstrap-select so mine is quite advanced for what it needs to be, its easy to write your own) to call the functions.

Call it like this maybe (not going to write the actual code)
$(youroption).click(function(){
var string = $(this).value;
brand(string);
}

you can the price one in the same way and it will filter the price range.

Also for product sorting use this function (sortby is the div all product's are in, price is the class of the element with a price in, section-link is the class of the div the product layout is inside):

function lowtohigh(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
    	
    	var vAAAAA = $(keySelector, a).text();
        var vAAAA = vAAAAA.replace(/\u00A3/g, '');
        var vAAA = vAAAA.replace(/ /g,''); 
        var vAA = parseFloat(vAAA);
        var vA = Math.round(vAA);
    	var vBBBBB = $(keySelector, b).text();
        var vBBBB = vBBBBB.replace(/\u00A3/g, '');
        var vBBB = vBBBB.replace(/ /g,''); 
        var vBB = parseFloat(vBBB);
        var vB = Math.round(vBB);
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

function hightolow(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
    	
    	var vAAAAA = $(keySelector, a).text();
        var vAAAA = vAAAAA.replace(/\u00A3/g, '');
        var vAAA = vAAAA.replace(/ /g,''); 
        var vAA = parseFloat(vAAA);
        var vA = Math.round(vAA);
    	var vBBBBB = $(keySelector, b).text();
        var vBBBB = vBBBBB.replace(/\u00A3/g, '');
        var vBBB = vBBBB.replace(/ /g,''); 
        var vBB = parseFloat(vBBB);
        var vB = Math.round(vBB);
        return (vA > vB) ? -1 : (vA < vB) ? 1 : 0;
    });
    parent.append(items);
}

function sortprice(string){
	if(string == "High to Low"){
		hightolow($('.sortby'), ".section-link", ".price");
	} else {
		lowtohigh($('.sortby'), ".section-link", ".price");
	}
}