Blog CNTT Hà Nam

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:
[html]
<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>
[/html]
Thêm đoạn code này vào ngay bên dưới nó:
[html]
<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>
[/html]
+ Sửa file …\admin\language\vietnamese\setting\setting.php
Thêm dòng code này vào:
[php]$_[‘entry_background’] = ‘Background:’;[/php]
+ Sửa file …\admin\controller\setting\setting.php
– Tìm dòng code
[php]$this->data[‘entry_logo’] = $this->language->get(‘entry_logo’);[/php]
Thay thế:
[php]$this->data[‘entry_background’] = $this->language->get(‘entry_background’);[/php]
– Tìm đoạn code sau:
[php]
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);
}
[/php]
Thêm sau nó đoạn code:
[php]
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);
}
[/php]

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

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:
[html]<body<?php if ($background) { ?> style="background-image: url(<?php echo $background; ?>)"<?php } ?>>[/html]
+ Sửa file ..\catalog\controller\common\ header.php
Tìm đoạn code sau
[php]
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’] = ”;
}
[/php]
Thêm vào bên dưới nó:
[php]
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’] = ”;
}
[/php]
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.

Có lẽ thẻ meta keywords từ lâu không còn được đánh giá cao trong SEO tuy nhiên nó vẫn là các chuẩn trong html vì thế tuy nó không cần thiết nhưng cũng không thể thiếu. Opencart không phải không hỗ trợ thẻ meta keywords nó hỗ trợ ở các danh mục, sản phẩm, thông tin tuy nhiên lại thiếu chỗ quan trọng nhất là trang chủ của các gian hàng. Hôm nay mình hướng dẫn các bạn thêm thiết lập meta keywords trong admin panel và hiển thị nó ra trang chủ.

Các bạn thực hiện các bước sau
– Sửa file admin/controller/setting/setting.php
+ Tìm dòng
[php]$this->data[‘entry_meta_description’] = $this->language->get(‘entry_meta_description’);[/php]
Thêm bên dưới nó dòng code sau:
[php]$this->data[‘entry_meta_keyword’] = $this->language->get(‘entry_meta_keyword’);[/php]
+ Tìm đoạn code sau:
[php]
if (isset($this->request->post[‘config_meta_description’])) {
$this->data[‘config_meta_description’] = $this->request->post[‘config_meta_description’];
} else {
$this->data[‘config_meta_description’] = $this->config->get(‘config_meta_description’);
}
[/php]
Thêm trước nó các dòng code sau:
[php]
if (isset($this->request->post[‘config_meta_keyword’])) {
$this->data[‘config_meta_keyword’] = $this->request->post[‘config_meta_keyword’];
} else {
$this->data[‘config_meta_keyword’] = $this->config->get(‘config_meta_keyword’);
}
[/php]
– Sửa file admin/view/template/setting/setting.tpl
Tìm đoạn code sau:
[html]
<tr>
<td><?php echo $entry_meta_description; ?></td>
<td><textarea name="config_meta_description" cols="40" rows="5"><?php echo $config_meta_description; ?></textarea></td>
</tr>
[/html]
Thêm trước nó dòng code sau:
[html]
<tr>
<td><?php echo $entry_meta_keyword; ?></td>
<td><textarea name="config_meta_keyword" cols="40" rows="5"><?php echo $config_meta_keyword; ?></textarea></td>
</tr>
[/html]
– Sửa file admin/language/english/setting/setting.php hoặc tùy theo ngôn ngữ của bạn đang sử dụng
Tìm dòng
[php]$_[‘entry_meta_description’] = ‘Meta Tag Description:’;[/php]
Thêm sau nó dòng
[php]$_[‘entry_meta_keyword’] = ‘Meta Keywords:’;[/php]
– Sửa file catalog/controller/common/home.php
Tìm dòng:
[php]$this->document->setDescription($this->config->get(‘config_meta_description’));[/php]
Thêm sau nó dòng:
$this->document->setKeywords($this->config->get(‘config_meta_keyword’));

OK thế là xong rồi đó. Nếu bạn làm đúng các bước trên thì khi vào Admin/System/Settings để cấu hình store của bạn trong tab Store sẽ hiện ra như sau:

Để chắc chắn view source trang chủ cửa hàng thấy thẻ meta keywords tức là đã thành công

Opencart hỗ trợ SEO link thân thiện và cho phép tùy chỉnh seo keyword khi nhập sản phẩm, danh mục sản phẩm, các thông tin khác (Category, Product, Information). Điều này rất có lợi cho SEO tuy nhiên cũng khá hạn chế đối với những người ngại gõ nhiều (như mình) nhất là khi nhập lên đến hàng trăm sản phẩm. Vì vậy chúng ta nên tùy chỉnh để OC tự điền rồi chúng ta sửa như vậy sẽ tiện hơn.

Để làm được như vậy các bạn cần thực hiện các bước sau:
– Tìm file admin/view/template/common/header.tpl
– Thêm đoạn code trước thẻ

[html]</head>[/html]

[html]
<!–Auto Fill SEO URL–>
<script type="text/javascript">
$(document).ready(function(){
var keyword = $("input[name=keyword]");
if(!keyword.val()){
$("input[name^=’product_description’],input[name^=’category_description’],input[name=’name’],input[name^=’information_description’]").keyup(function(){
var SEOlink = $(this).val();
SEOlink = SEOlink.replace(/^\s+|\s+$/g, ”); // trim
SEOlink = SEOlink.toLowerCase();
// remove accents, swap, etc
var from = "ọẹạịụớđàáäâèéëêìíïîòóöôùúüûñcçčlľštžýnrrd·ạảãầấậẩẫăắằẳẵặ_ịỉĩ/ọỏõôồốộổỗơờởợởỡ;ẹẻẽềếệểễ:ụủũưừứựửữ,ỵỷỹỳ";

var to = "oeaiuodaaaaeeeeiiiioooouuuuncccllstzynrrd–aaaaaaaaaaaaaa-iii-ooooooooooooooo-eeeeeeee-uuuuuuuu-yyyy";
for (var i=0, l=from.length ; i<l ; i++) {
SEOlink = SEOlink.replace(new RegExp(from.charAt(i), ‘g’), to.charAt(i));
}
SEOlink = SEOlink.replace(/[^a-z0-9 -]/g, ”) // remove invalid chars
.replace(/\s+/g, ‘-‘) // collapse whitespace and replace by –
.replace(/-+/g, ‘-‘); // collapse dashes
// return SEOlink;
keyword.val(SEOlink + ‘.html’);
});
}
});
</script>
<!–End–>
[/html]
Ok như vậy là xong rồi đó. Thật đơn giản mà không phải bỏ 10$ để mua Extensions SEO Keywords Autocomplete, hay Autofill SEO Keywords. Chúc các bạn thành công

Trình soạn thảo mặc định của Opencart để rất ít chức năng khiến bạn khó khăn khi soạn thảo nội dung bài viết hay các mô tả khác. Việc soạn thảo không tốt ảnh hưởng đến thẩm mỹ của bài viết và khó khăn trong SEO. Hôm nay mình hướng dẫn các bạn thêm các tính năng vào bộ soạn thảo này. Thực chất là tùy chỉnh cấu hình của CKEditor thôi.
Các bạn tìm file config của CKEditor trong admin: admin/view/javascript/ckeditor/config.js. Nội dung file này như sau:
[js]
/**
* @license Copyright (c) 2003-2012, CKSource – Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.filebrowserWindowWidth = ‘800’;
config.filebrowserWindowHeight = ‘500’;
config.resize_enabled = false;
config.htmlEncodeOutput = false;
config.entities = false;
config.extraPlugins = ‘codemirror’;
config.codemirror_theme = ‘rubyblue’;
config.toolbar = ‘Custom’;

config.toolbar_Custom = [
[‘Source’],
[‘Maximize’],
[‘Bold’,’Italic’,’Underline’,’Strike’,’-‘,’Subscript’,’Superscript’],
[‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’],
[‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
[‘SpecialChar’],
‘/’,
[‘Undo’,’Redo’],
[‘Font’,’FontSize’],
[‘TextColor’,’BGColor’],
[‘Link’,’Unlink’,’Anchor’],
[‘Image’,’Table’,’HorizontalRule’]
];
};
[/js]
Muốn thêm button nào vào bạn chỉ cần thêm vào trong config.toolbar_Custom. Ví dụ mình muốn thêm chức năng PasteText,PasteFromWord mình thêm [‘PasteText’,’PasteFromWord’] vào sau dòng:
[js]
config.toolbar_Custom = [
[‘Source’],
[/js]
Thành:
[js]
config.toolbar_Custom = [
[‘Source’],
[‘PasteText’,’PasteFromWord’],
[/js]
Muốn thêm định dạng h1, h2, h3,…,h6 các bạn thêm [‘Styles’,’Format’], vào
[js]
config.toolbar_Custom = [
[‘Source’],
[‘PasteText’,’PasteFromWord’],
[‘Styles’,’Format’],
[/js]

Dưới đây là config full của toolbar (không có các plugins cài thêm nhé) các bạn có thể thêm chức năng nào vào tùy bạn chọn
[js]
config.toolbar_Full =
[
{ name: ‘document’, items : [ ‘Source’,’-‘,’Save’,’NewPage’,’DocProps’,’Preview’,’Print’,’-‘,’Templates’ ] },
{ name: ‘clipboard’, items : [ ‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteFromWord’,’-‘,’Undo’,’Redo’ ] },
{ name: ‘editing’, items : [ ‘Find’,’Replace’,’-‘,’SelectAll’,’-‘,’SpellChecker’, ‘Scayt’ ] },
{ name: ‘forms’, items : [ ‘Form’, ‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’, ‘Select’, ‘Button’, ‘ImageButton’,
‘HiddenField’ ] },
‘/’,
{ name: ‘basicstyles’, items : [ ‘Bold’,’Italic’,’Underline’,’Strike’,’Subscript’,’Superscript’,’-‘,’RemoveFormat’ ] },
{ name: ‘paragraph’, items : [ ‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’,’-‘,’Blockquote’,’CreateDiv’,
‘-‘,’JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyBlock’,’-‘,’BidiLtr’,’BidiRtl’ ] },
{ name: ‘links’, items : [ ‘Link’,’Unlink’,’Anchor’ ] },
{ name: ‘insert’, items : [ ‘Image’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’,’PageBreak’,’Iframe’ ] },
‘/’,
{ name: ‘styles’, items : [ ‘Styles’,’Format’,’Font’,’FontSize’ ] },
{ name: ‘colors’, items : [ ‘TextColor’,’BGColor’ ] },
{ name: ‘tools’, items : [ ‘Maximize’, ‘ShowBlocks’,’-‘,’About’ ] }
];
[/js]
File config sau khi tùy chỉnh của mình
[js]
/**
* @license Copyright (c) 2003-2012, CKSource – Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.filebrowserWindowWidth = ‘800’;
config.filebrowserWindowHeight = ‘500’;
config.resize_enabled = false;
config.htmlEncodeOutput = false;
config.entities = false;
config.extraPlugins = ‘codemirror’;
config.codemirror_theme = ‘rubyblue’;
config.toolbar = ‘Custom’;

config.toolbar_Custom = [
[‘Source’],
[‘Maximize’],
[‘PasteText’,’PasteFromWord’],
[‘Styles’,’Format’],
[‘Bold’,’Italic’,’Underline’,’Strike’,’-‘,’Subscript’,’Superscript’],
[‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’],
[‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
[‘SpecialChar’],
‘/’,
[‘Undo’,’Redo’],
[‘Font’,’FontSize’],
[‘TextColor’,’BGColor’],
[‘Link’,’Unlink’,’Anchor’],
[‘Image’,’Table’,’HorizontalRule’]
];
};
[/js]

Khi nhập sản phẩm trong Opencart trong tab Data chúng ta nhập tích thước, trọng lượng tuy nhiên nhiều bạn thắc mắc rằng không thấy thông tin này hiện ra ngoài trang chi tiết sản phẩm vì vậy chúng ta phải mất công nhập lại 2 thông tin này vào phần mô tả sản phẩm hoặc thuộc tính sản phẩm -> thừa thông tin và tốn thời gian.

2 thông tin về kích thước và trọng lượng sản phẩm được sử dụng trong module tính phí vận chuyển. Chúng ta có thể hiển thị thông tin này ra trang chi tiết sản phẩm.

B1: Sửa file /catalog/controller/product/product.php như sau:
– Tìm dòng:
[php]$this->data[‘text_tags’] = $this->language->get(‘text_tags’);[/php]
– Thêm vào dưới nó 2 dòng sau:
[php]
$this->data[‘text_weight’] = $this->language->get(‘text_weight’);
$this->data[‘text_size’] = $this->language->get(‘text_size’);
[/php]
-Tìm dòng:
[php]$this->data[‘points’] = $product_info[‘points’];[/php]
– Thêm vào bên dưới nó các dòng sau:
[php]
/*them kich thuoc va trong luong*/
$weight_class_id = $product_info[‘weight_class_id’];
$this->load->model(‘localisation/weight_class’);
$weight_classes = $this->model_localisation_weight_class->getWeightClass($weight_class_id);
$this->data[‘weight_class_title’] = $weight_classes[‘title’];
$length_class_id = $product_info[‘length_class_id’];
$this->load->model(‘localisation/length_class’);
$length_class = $this->model_localisation_length_class->getLengthClass($length_class_id);
$this->data[‘length_class_title’] = $length_class[‘title’];
$this->data[‘weight’] = number_format($product_info[‘weight’],2);
$this->data[‘length’] = number_format($product_info[‘length’],2);
$this->data[‘width’] = number_format($product_info[‘width’],2);
$this->data[‘height’] = number_format($product_info[‘height’],2);
/*end*/
[/php]
B2:Sửa file /catalog/view/theme/default/template/product/product.tpl
– Tìm đoạn code sau:
[html]
<?php foreach ($attribute_group[‘attribute’] as $attribute) { ?>
<tr>
<td><?php echo $attribute[‘name’]; ?></td>
<td><?php echo $attribute[‘text’]; ?></td>
</tr>
<?php } ?>
[/html]
– Thêm vào bên dưới nó đoạn code sau:
[html]
<!–hien thi kich thuoc va trong luong–>
<?php if ($weight) { ?>
<tr>
<td><?php echo $text_weight; ?></td>
<td><?php echo $weight; ?> <?php echo $weight_class_title; ?></td>
</tr>
<?php } ?>
<?php if ($length || $width || $height) { ?>
<tr>
<td><?php echo $text_size; ?></td>
<td><?php echo $width; ?> x <?php echo $height; ?> x <?php echo $length; ?> <?php echo $length_class_title; ?></td>
</tr>
<?php } ?>
<!–end–>
[/html]
B3: Sửa file ngôn ngữ /catalog/language/english/product/product.php hoặc bạn dùng ngôn ngữ khác thì thêm vào file ngôn ngữ tương ứng nhé
– Thêm vào đầu file 2 dòng sau
[php]
$_[‘text_search’] = ‘Search’;
$_[‘text_weight’] = ‘Weight’;
[/php]
Và đây là thành quả:

OK vậy là xong rồi. Code của mình chèn trọng lượng và kích thước theo đơn vị mà bạn chọn vào trong phần thuộc tính sản phẩm chứ không đơn thuần là chèn nguyên trọng lượng và kích thước mà không biết đơn vị tính của chúng.
Chúc các bạn thành công!