Tùy chỉnh giao diện điện thoại cho hệ thống Ecshop

Ngày cập nhật: 19/10/2016 | Số lần xem: 12247 | Danh mục: Ecshop
Tìm kiếm

Thực ra, cộng đồng người dùng Ecshop khá hỗn loạn. Những thông tin tìm được trên mạng hầu như không đáng tin cậy, vì vậy mình đành phải tự mày mò từng chút một.

Tệp index.php trong thư mục gốc:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
$uachar = "/(nokia|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|mobile|android|iphone)/i";
if(($ua == '' || preg_match($uachar, $ua)) && !strpos(strtolower($_SERVER['REQUEST_URI']), 'wap'))
{
  $Loaction = 'mobile/';
  if (!empty($Loaction))
  {
    ecs_header("Location: $Loaction\n");
    exit;
  }
}

Mình không rõ đoạn mã này xuất hiện từ khi nào. Các thiết bị Android và iPhone ban đầu không được liệt kê nên mình đã thêm vào thủ công.

Nên sửa code ở đâu?

Nhìn vào cơ chế kích hoạt giao diện di động là biết ngay phần code liên quan nằm trong thư mục mobile của gốc dự án. Mình đã tải về một mẫu giao diện di động theo phong cách JD (tương tự như trang chủ) dành cho Ecshop, sau khi giải nén chỉ có một thư mục tên là mobile, điều này càng khẳng định rằng đó chính là nơi cần thao tác.

Một điểm bất tiện là giao diện mobile không thể thay đổi dễ dàng qua giao diện quản trị như các theme PC. Bạn phải sửa trực tiếp code hoặc ghi đè lên file, rất phiền toái. Nếu muốn lưu trữ nhiều giao diện mobile khác nhau, bạn có thể sử dụng kỹ thuật tạo symbolic link – đây là một giải pháp tạm thời nhưng khả thi.

Thư mục WAP và mobile trong gốc có gì khác nhau?

Thư mục mobile có thể coi là phiên bản nâng cấp của WAP. Nó bổ sung thêm quy trình mua hàng hoàn chỉnh. Có thể hiểu rằng WAP gần như đã lỗi thời và mobile mới là chuẩn hiện tại.

Lỗi: Warning: Invalid argument supplied for foreach() in ../mobile/index.php on line 81

Để khắc phục lỗi này, mình đã thay thế hàm get_categories_tree() bằng một phiên bản mới gọi là get_categories_tree_home():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

function get_categories_tree_home($cat_id = 0)
{
  if ($cat_id > 0)
  {
    $sql = 'SELECT parent_id FROM ' . $GLOBALS['ecs']->table('category') . " WHERE cat_id = '$cat_id'";
    $parent_id = $GLOBALS['db']->getOne($sql);
  }
  else
  {
    $parent_id = 0;
  }

  /* 
   Kiểm tra xem danh mục hiện tại có toàn là danh mục con cuối cùng hay không.
   Nếu có, lấy danh sách cha của chúng.
   Nếu không, lấy danh sách hiện tại và các danh mục con.
  */
  $sql = 'SELECT count(*) FROM ' . $GLOBALS['ecs']->table('category') . " WHERE parent_id = '$parent_id' AND is_show = 1 ";
  if ($GLOBALS['db']->getOne($sql) || $parent_id == 0)
  {
    /* Lấy danh sách danh mục hiện tại và các danh mục con */
    $sql = 'SELECT cat_id,cat_name ,parent_id,is_show ' .
        'FROM ' . $GLOBALS['ecs']->table('category') .
        "WHERE parent_id = '$parent_id' AND is_show = 1 ORDER BY sort_order ASC, cat_id ASC";
    $res = $GLOBALS['db']->getAll($sql);
    foreach ($res AS $row)
    {
      if ($row['is_show'])
      {
        $cat_arr[$row['cat_id']]['id']  = $row['cat_id'];
        $cat_arr[$row['cat_id']]['name'] = $row['cat_name'];
        $cat_arr[$row['cat_id']]['url'] = build_uri('category', array('cid' => $row['cat_id']), $row['cat_name']);
        if (isset($row['cat_id']) != NULL)
        {
          $cat_arr[$row['cat_id']]['cat_id'] = get_child_tree($row['cat_id']);
        }
      }
    }
  }
  if(isset($cat_arr))
  {
    return $cat_arr;
  }
}

Banner trượt trên trang chủ không hiển thị

Lỗi JavaScript:

(index):48 Uncaught SyntaxError: missing ) after argument list

Tác giả template này hơi lơ mơ, mình quyết định viết lại toàn bộ hiệu ứng banner do nó cố định chỉ với hai ảnh trượt. Dưới đây là hình minh họa hiệu ứng banner của template JD dành cho Ecshop.

Lỗi: Warning: Invalid argument supplied for foreach() in ../mobile/category.php on line 24

Lỗi này cũng giống như trước. Giải pháp vẫn là thay thế get_categories_tree() bằng get_categories_tree_home().

Lỗi: common.js:34 Uncaught TypeError: goods.toJSONString is not a function(…)

// TODO – Vấn đề này sẽ được xử lý sau.