Canvas Support

pf-filters and URL based filtering

6 replies · opened Aug 28, 2023

TtscustomsuitsAug 28, 2023

Good day Canvas team,

I would like to have links within my webpage that will take the user to my products page with a specific pf filter of products. I am able to do this with URL filtering such as (https://www.newsite.tscustomsuits.com/products.html?category=pf-tuxedos). However, when on the webpage with the link above using the URL filtering, if a user clicks on a different filter, none of those products show up.

How can I link a customer to the product page of a specific pf-filtered product but still give the user the ability to view all products other other product filters when they select them using the filter bar at the top of the products page?

Thank you.

SSemicolon WebSTAFFAug 30, 2023

Hello,

This is already available. Consider checking this example: https://canvastemplate.com/portfolio-hash-filter.html#filter=.pf-icons . You can use the portfolio-hash-filter.html Template and setup the filtering accordingly.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

TtscustomsuitsAug 30, 2023

Is it possible to add the hash filter script to my existing page which was built using portfolio-fullwidth-notitle? I added the javascript I found from the example you gave above, but that did not seem to work.

SSemicolon WebSTAFFSep 1, 2023

Hello,

It appears that you are using the Incorrect Codes. Make sure that you are using the updated codes from the Package:
[ch_pre type="js"]jQuery(window).on( 'pluginIsotopeReady', function(){
var $container = jQuery('#portfolio');

$container.isotope({ transitionDuration: '0.65s' });

function getHashFilter() {
	var hash = location.hash;
	// get filter=filterName
	var matches = location.hash.match( /filter=([^&]+)/i );
	var hashFilter = matches && matches[1];
	return hashFilter && decodeURIComponent( hashFilter );
}

var isIsotopeInit = false;

function onHashchange() {
	var hashFilter = getHashFilter();
	if ( !hashFilter && isIsotopeInit ) {
		return;
	}
	isIsotopeInit = true;
	// filter isotope
	$container.isotope({ filter: hashFilter });
	// set selected class on button
	if ( hashFilter ) {
		jQuery('.grid-filter li').removeClass('activeFilter');
		jQuery('.grid-filter li').find('[data-filter="' + hashFilter + '"]').parent('li').addClass('activeFilter');
	}
}

jQuery(window).on( 'hashchange', onHashchange );
// trigger event handler to init Isotope
onHashchange();

jQuery('.grid-filter a').click(function(){
	jQuery('.grid-filter li').removeClass('activeFilter');
	jQuery(this).parent('li').addClass('activeFilter');
	var selector = jQuery(this).attr('data-filter');
	$container.isotope({ filter: selector });
	var filterAttr = jQuery( this ).attr('data-filter');
	location.hash = 'filter=' + encodeURIComponent( filterAttr );
	return false;
});

});[/ch_pre]

This will work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

TtscustomsuitsSep 6, 2023

Hello, thank you for providing that code. I replaced it on my website and it helped, but the full functionality is still not there.

When I go to a specific link using the .pf-filter, such as
https://www.newsite.tscustomsuits.com/products.html#filter=.pf-sport-coats
or
https://www.newsite.tscustomsuits.com/products.html#filter=.pf-suits
or
https://www.newsite.tscustomsuits.com/products.html#filter=.pf-tuxedos

the filter shows only those relevant products and the grid filter active pf-filter product shows on the correct product. However, when selecting another product from the grid filter, the products do not update, and the URL changes to: https://www.newsite.tscustomsuits.com/products.html#
The filter=.pf-xxxxxx is missing from the end of the URL.

I think we must be missing something small, but I cannot figure it out. Thank you again for your assistance.

TtscustomsuitsSep 6, 2023

I am able to get the pf-filter and the grid filter to work correctly when I specify the links within the grid filter portfolio container section. However, is this the appropriate way to make it work? When I view the code from the demo of the Hash Filter website (https://canvastemplate.com/portfolio-hash-filter.html#filter=.pf-icons) the links just have "#" instead of actual links.

SSemicolon WebSTAFFSep 6, 2023

Hello,

The Demos on the Live Previews: https://canvastemplate.com/portfolio-hash-filter.html changes the Hash on Filter Change as well. Please check the Video attached.

Additionally, you are loading the Functions JS File multiple times. Either the js/functions.js or the js/functions.bundle.js File is required, not both. Make sure you check the Documentations on Javascript: https://docs.semicolonweb.com/docs/getting-started/javascript/ . Additionally, please make sure that Default Codes are followed and used correctly in order to avoid unexpected issues, as the results of your issues are mostly due to Customizations.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard