Thay đổi ảnh nền opencart từ admin panel

Thay đổi ảnh nền trong admin Opencart

Mìnht thường thay đổi ảnh nền cho website theo các sự kiện lớn. Việc thay đổi ảnh nền vừa làm cho website “mới” hơn khi khách hàng ghé thăm vừa thể hiện được nội dung các khuyến mãi. Đối với những bạn biết code thì việc này cũng đơn giản chỉ là upload ảnh nền và sửa CSS. Tuy nhiên mỗi lần như vậy cũng khá mất công. Còn đối với những người không biết code thì chức năng thay đổi ảnh nền thì không thể thiếu được. Thủ thuật này sẽ giúp các bạn thêm chức năng thay đổi ảnh nền vào trong setting của cửa hàng trong admin panel.
Các bạn thực hiện các bước sau:
+ Sửa file …\admin\view\template\setting\setting.tpl
Tìm đoạn code:

            <tr>
              <td><?php echo $entry_logo; ?></td>
              <td><div class="image"><img src="<?php echo $logo; ?>" alt="" id="thumb-logo" />
                  <input type="hidden" name="config_logo" value="<?php echo $config_logo; ?>" id="logo" />
                  <br />
                  <a onclick="image_upload('logo', 'thumb-logo');"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('#thumb-logo').attr('src', '<?php echo $no_image; ?>'); $('#logo').attr('value', '');"><?php echo $text_clear; ?></a></div></td>
            </tr>

Thêm đoạn code này vào ngay bên dưới nó:

            <tr>
              <td><?php echo $entry_background; ?></td>
              <td><div class="image"><img src="<?php echo $background; ?>" alt="" id="thumb-background" />
                  <input type="hidden" name="config_background" value="<?php echo $config_background; ?>" id="background" />
                  <br />
                  <a onclick="image_upload('background', 'thumb-background');"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('#thumb-background').attr('src', '<?php echo $no_image; ?>'); $('#logo').attr('value', '');"><?php echo $text_clear; ?></a></div></td>
            </tr>

+ Sửa file …\admin\language\vietnamese\setting\setting.php
Thêm dòng code này vào:

$_['entry_background']        = 'Background:';

+ Sửa file …\admin\controller\setting\setting.php
– Tìm dòng code

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

Thay thế:

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

– Tìm đoạn code sau:

if ($this->config->get('config_logo') && file_exists(DIR_IMAGE . $this->config->get('config_logo')) && is_file(DIR_IMAGE . $this->config->get('config_logo'))) {
            $this->data['logo'] = $this->model_tool_image->resize($this->config->get('config_logo'), 100, 100);      
        } else {
            $this->data['logo'] = $this->model_tool_image->resize('no_image.jpg', 100, 100);
        }

Thêm sau nó đoạn code:

if (isset($this->request->post['config_background'])) {
            $this->data['config_background'] = $this->request->post['config_background'];
        } else {
            $this->data['config_background'] = $this->config->get('config_background');          
        }

        if ($this->config->get('config_background') && file_exists(DIR_IMAGE . $this->config->get('config_background')) && is_file(DIR_IMAGE . $this->config->get('config_background'))) {
            $this->data['background'] = $this->model_tool_image->resize($this->config->get('config_background'), 100, 100);      
        } else {
            $this->data['background'] = $this->model_tool_image->resize('no_image.jpg', 100, 100);
        }

OK. Đến đây thì trong admin bạn có thể upload ảnh nền và lưu vào setting được rồi

Thay đổi ảnh nền trong admin Opencart
Thay đổi ảnh nền trong admin Opencart

Muốn hiển thị ảnh nền thì chúng ta phải chỉnh sửa một chút nữa ngoài fontend
+ Sửa file ..\catalog\view\theme\default\template\common\header.tpl
Thay đổi thẻ body như sau:

<body<?php if ($background) { ?> style="background-image: url(<?php echo $background; ?>)"<?php } ?>>

+ Sửa file ..\catalog\controller\common\ header.php
Tìm đoạn code sau

		if ($this->config->get('config_logo') && file_exists(DIR_IMAGE . $this->config->get('config_logo'))) {
			$this->data['logo'] = $server . 'image/' . $this->config->get('config_logo');
		} else {
			$this->data['logo'] = '';
		}	

Thêm vào bên dưới nó:

		if ($this->config->get('config_background') && file_exists(DIR_IMAGE . $this->config->get('config_background'))) {
			$this->data['background'] = $server . 'image/' . $this->config->get('config_background');
		} else {
			$this->data['background'] = '';
		}

Như vậy là cơ bản đã xong 99% rồi việc còn lại bạn chỉnh css cho phù hợp với website của bạn là ok.

Tác giả: admin

Đơn giản là mình là người đam mê công nghệ, thích học hỏi và chia sẻ. Mình mong muốn nhận được phản hồi của các bạn khi xem bất kỳ bài viết nào trên blog của mình. Mỗi ý kiến đóng góp, mỗi sự sẻ chia và góp ý của các bạn là điều mình cần nhất để blog hoàn thiện hơn. Điều đó thật sự quan trọng đối với mình. Xin chân thành cảm ơn!