Adding to main.js - How can I target multiple pages in the Sage init?

The base project has:

var Sage = {
    // All pages
    'common': {
        init: function() {
            // JavaScript to be fired on all pages
        },
        finalize: function() {
            // JavaScript to be fired on all pages, after page specific JS is fired
        }
    }
};

I want to be able to call the same code on many pages, but not on all pages and not just one page like home, about etc.

How can this be accomplished?

Thanks.

Create a new instance of the conditionalTagCheck class (it’s what we use to display the sidebar) and use it to add a body class to all the pages/posts etc you need the JS to run on.

Then use that body class in the dom router.

Ahh, so if this was for all ‘product’ pages then just use this to add a product class to the body and then in main.js add a route for ‘product.’

Thanks.

You can also filter the ‘body_class’ filter and add another class how you wish.

We’ve created a template page for each of our products ( because we may have varying layouts at some point ). The templates are like: page-product1_v1.php, page-product2_v1.php etc. Each of these pages share some JS so I just wanted to stick that in main.js Sage router. What is the best way to accomplish that?

Thanks.

I’m pretty new to Roots/Sage so I really don’t know where the best place to put a new isntance of conditionalTagCheck or where I’d filter the body_class. Much appreciated so far.

It’s tied to the theme so I would add the code to lib/extras.php.

Filtering the body classes is detailed on the codex: https://codex.wordpress.org/Function_Reference/body_class#Add_Classes_By_Filters

Thanks, lib/extras.php is what I was looking for… pretty familiar with WP, just not sure where stuff should go in this Sage theme yet.

Is there something wrong with doing this:

$isProductPage = new ConditionalTagCheck(
    [
        'is_page', [
            'product-1',
            'product-2'
        ]
    ]
);

if ( $isProductPage->result ) {
    $classes[] = 'product-page';
}

Because it’s not working. I put this in the body_class function in lib/extras.php

Thanks.

P.S. Yes, I included the class at the top of lib/extras.php ( use Roots\Sage\ConditionalTagCheck; )

If I use:

if( is_page( array('product-1', 'product-2') ) ) {
    $classes[] = 'product-page';
}

It works just fine. Not sure why the other doesn’t work.

Try reversing the logic. I think the documentation may need an update.

if ( !$isProductPage->result ) {
    $classes[] = 'product-page';
}