Adding CSS Stylesheet to Pages Based on Route in Opencart

Adding CSS stylesheet to pages based on route in OpenCart

Open catalog/controller/common/header.php

Right after the line protected function index() { on a new line put

    $route = empty($this->request->get['route']) ? 'common/home' : $this->request->get['route'];
    $css_file = str_replace('/', '_', $route) . '.css';

    if(file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/stylesheet/' . $css_file)) {
        $this->document->addStyle('catalog/view/theme/' . $this->config->get('config_template'). '/stylesheet/' . $css_file);
    }

Then go to your current theme, and create a file in catalog/view/your-theme/stylesheet/ folder called product_category.css and put your styles in that. The stylesheets work off your route name except you replace the forward slash to an underscore followed by .css, ie common/home becomes common_home.css

Note that is is going to use the override method rather than replacing your default stylesheet

my question is about how can i add my new css_style file to the theme in opencart?

so there are several ways you can add a stylesheet in OpenCart themes

the simple way

in file catalog/view/theme/YOUR_THEME/template/common/header.twig add the link to your stylesheet in< head >` right after your last css file.

remember that your custom stylesheet has to go after your default stylesheet for the styles to override them.

<link href="catalog/view/theme/YOUR_THEME/stylesheet/CUSTOM_STYLESHEET.css" rel="stylesheet">

the more sophisticated way

OpenCart allows you to set the stylesheet from the contorller. this is often used by modules to add their styles to the head tag and also allow site optimization modules to compress the stylesheet file.

you can test it by editing a controller file for homepage (as an example)

in file catalog/controller/common/home.php on line 7 add this code

$this->document->addStyle('catalog/view/theme/YOUR_THEME/stylesheet/CUSTOM_STYLESHEET.css');

I hope this helps

Opencart: CSS (based on route maintenance)

I've fixed the hideous formatting, and added the call to the ->addStyle($css). If the code does not work yet, please check if I got the path to the CSS right (where it says $css = 'blahblah' );

<?php
class ControllerCommonMaintenance extends Controller {
    public function index() {
        if ($this->config->get('config_maintenance')) {
            $route = '';
            if (isset($this->request->get['route'])) {
                $part = explode('/', $this->request->get['route']);
                if (isset($part[0])) {
                    $route .= $part[0];
                }
            }

            // Show site if logged in as admin
            // $this->load->library('user');
            $this->user = new User($this->registry);
            if (($route != 'payment') && !$this->user->isLogged()) {
                return $this->forward('common/maintenance/info');
            }
        }
    }

    public function info() {
        $this->load->language('common/maintenance');

        $this->document->setTitle($this->language->get('heading_title'));
        $css = 'catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/common_maintenance.css';
        $this->document->addStyle($css);
        $this->data['heading_title'] = $this->language->get('heading_title');

        $this->document->breadcrumbs = array();

        $this->document->breadcrumbs[] = array(
            'text'      => $this->language->get('text_maintenance'),
            'href'      => $this->url->link('common/maintenance'),
            'separator' => false
        );

        $this->data['message'] = $this->language->get('text_message');

        $maintenance = $this->config->get('config_template') . '/template/common/maintenance.tpl';

        if (file_exists(DIR_TEMPLATE . $maintenance ) ) {
            $this->template = $maintenance;
        }

        else {
            $this->template = 'default/template/common/maintenance.tpl';         }
            $this->children = array(
                'common/footer',
                'common/header'
            );

            $this->response->setOutput($this->render());
        }
     }
}

I want to change the css of a div on home page only but it should remain unchanged on other routes in opencart. Can anyone have an idea?

Well I found the answer and it was quite simpler than i thought. Doing some CSS work as needed and preparing the required class,I used the php $_SERVER function to get over with the url problem.

<?php if($_SERVER['REQUEST_URI']=='/')?>
   {
     echo $class ="the_class_needed_to_align_div";
   }
   else{
       echo $clasas = "default_class";
   }

And then called $class variable in the div which needed to be realigned.

OpenCart Split category on more pages

I got it working with a workaround.

I combined this answer:

Adding CSS stylesheet to pages based on route in OpenCart

with this:
OpenCart module on product page based on route

Then I added a new layout so I could split up the categorys on different pages,
and added display:none for the modules based on path to the product.

Works but not the best sollution.

How to load the content of each page in OpenCart 3 after full page load (javascript)?

SOLUTION

To fix the issue I removed all window.onload = function()s from header, footer, etc. Instead, I added it to common/home, product/search, etc, and it works fine.

window.onload = function() {

var productClass = 'product-layout product-full col-lg-3 col-md-4 col-sm-6 col-xs-12';

$('#moreHolder').css("display", "block");

$.post('index.php?route=product/productx', { class: productClass },
function(data) {
     if(data.length>10){
        $(data).insertBefore($('#moreHolder'));
     }
})
.always(function() {
    $('#moreHolder').css("display", "none");
});

I also added swiper related style and javascript on each page's first load, checking it by the number of products/limit = page to not have duplicates:

{% if products %} 
{% if page <= 1 %} 
<link href="catalog/view/javascript/jquery/swiper/css/swiper.min.css" rel="stylesheet" type="text/css">
<link href="catalog/view/javascript/jquery/swiper/css/opencart.css" rel="stylesheet" type="text/css">
<script src="catalog/view/javascript/jquery/swiper/js/swiper.jquery.js" type="text/javascript"></script>
{% endif %} 
{% for product in products %}
....

How do I create a template for OpenCart?

Balan, you can start by copying the folder catalog\view\theme\default and all of it's subfolders files etc.

So the copy will be your new theme. So let's say you now have these folders

catalog\view\theme\default
catalog\view\theme\my-new-theme

1. Go to the Admin site and select System > Settings

2. On the "Store" tab you should see the options "default" and "my-new-theme" as options for the field named "Template". Select "my-new-theme" and save.

3. Start making changes to the files under catalog\view\theme\my-new-theme and they'll appear straight away

---

Related Topics