X-Cart forums

[Scott Godin]

Wishing to use Nanogallery to add a flickr gallery to a Page created via the Simple CMS module in xcart 5, however unlike the static page creator functionality in xcart-4, this new module eats all the code ( link, script, style) tags I want to paste into the page in addition to the text-based content above the gallery images.

How do I ensure that if I am to go ahead and create a module to add this code to the system, that the resulting markup (all the css, html, script, link tags in header, etc) are only loaded for the one static page, and nowhere else (to cut down on page load times for the rest of the site) ?

[Scott Godin]

http://kb.x-cart.com/display/XDD/Adding+pages+to+your+store is all well and good, but nowhere do I find a tutorial on how to add customized css and js that runs specifically and only on ONE custom page created via Simple CMS

I've been looking high and low for this information and so far have turned up absolutely nothing. I am having a hard time believing no one has ever wanted to do this, so the dearth of info is quite surprising.

[cflsystems]

http://kb.x-cart.com/display/XDD/Adding+CSS+and+JS+files
This will give you an answer in general. If you want to add css to a specific page within the module you should have a condition for the page identifier

[seyfin]

Originally Posted by Scott Godin

Wishing to use Nanogallery to add a flickr gallery to a Page created via the Simple CMS module in xcart 5, however unlike the static page creator functionality in xcart-4, this new module eats all the code ( link, script, style) tags I want to paste into the page in addition to the text-based content above the gallery images.

How do I ensure that if I am to go ahead and create a module to add this code to the system, that the resulting markup (all the css, html, script, link tags in header, etc) are only loaded for the one static page, and nowhere else (to cut down on page load times for the rest of the site) ?

As a quick workaround solution, try to modify etc/config.php file and add the following line of code:

HTML.Trusted = On

right after this line:

[html_purifier]

[Scott Godin]

Originally Posted by cflsystems

http://kb.x-cart.com/display/XDD/Adding+CSS+and+JS+files
This will give you an answer in general. If you want to add css to a specific page within the module you should have a condition for the page identifier

How does one implement a 'condition for the page identifier' or identify the page specifically when it is one generated by Simple CMS ?

[cflsystems]

Every page has an id attribute. You can use it to load specific css file

[Scott Godin]

Originally Posted by cflsystems

Every page has an id attribute. You can use it to load specific css file

In my case, the page id I wish to affect appears to have an ID of 3, from the url (though it states that nowhere else on the admin page itself for editing that page's content) However neither http://kb.x-cart.com/display/XDD/Adding+CSS+and+JS+files, nor http://kb.x-cart.com/display/XDD/Adding+custom+JavaScript+code+to+the+page indicate how one specificially targets a page ID with css and js for that page exclusively, nor is mention made at http://www.x-cart.com/extensions/addons/simple-cms.html of anything related to this.

Since you clearly already know how to do this, please share with us in detail, so we can have it added to the wiki, and save time for everyone in the future.

[cflsystems]

You can do this in your module when extending pages viewer class to use specific css on specific page

PHP Code:

public function getCSSFiles()
{
    // get current page id
    $id = \XLite\Core\Request::getInstance()->id;
    
    $css = parent::getCSSFiles();
    
    // replace XX with the actual id number
    if ('XX' == $id) {
        $css = array_merge(
            $css,
            array(
                'modules/<Developer ID>/<Module ID>/css_file_name.css',
            )
        );
    }
    
    return $css;
} 


In more complicated and ideal example you may want to do an actual search through all pages to find the id you are looking for based on page name (which is something you are more likely to know that the id)

PHP Code:

public function getCSSFiles()
{
    // get current page id
    $current_id = \XLite\Core\Request::getInstance()->id;
    
    // find page id by its name
    // $cnd is the condition for "page name is equal to ..." and if this search
    // condition does not exist in the Repo class you have to create it as well for this to work
    $target_id = \XLite\Core\Database::getRepo('XLite\Module\CDev\SimpleCMS\Model\Page')->search($cnd);
    
    $css = parent::getCSSFiles();
    
    if ($target_id == $current_id) {
        $css = array_merge(
            $css,
            array(
                'modules/<Developer ID>/<Module ID>/css_file_name.css',
            )
        );
    }
    
    return $css;
} 


[Scott Godin]

aha, yes that definitely should be in the Wiki, in the Add CSS and JS files page, and thanks also for the further example, this should be very helpful. I'll go give this a shot and see what's what after that. Cheers!

[Scott Godin]

for reference for anyone else following this at a later date, $cnd information can be found here, for starters: http://kb.x-cart.com/display/XDD/search%28%29+method