Video học lập trình mỗi ngày

Bạn có biết trong những trang TMĐT lớn như tiki, lazada hay shopee thì breadcrum đóng vai trò quan trọng như thế nào không? Hôm nay tôi mới tìm hiểu về breadcrumbs js để dùng seo website và tôi cũng đã tìm được những gì mình cần, chính vì thế hôm nay tôi sẽ hướng dẫn các bạn sử dụng một thư viện dùng trong jquery breadcrumb. 

Breadcrumb là gì? Và Breadcrumb đóng vai trò gì trong SEO website?

Để trả lời cho câu hỏi hay tôi nghĩ các bạn nên đọc thêm ở đây Breadcrumb là gì? Cách sử dụng breadcrumb?. Ở đó tôi nghĩ các bạn sẽ hiểu hơn nhiều về thuật ngữ "breadcrum". Ở đây tôi chỉ trích đoạn cho các bạn hiểu nhanh. Theo: Breadcrumb là 1 tập hợp những liên kết giúp người dùng xác định vị trí hiện tại của mình trong cấu trúc site. Thuật ngữ này gắn với câu chuyện cổ Grimm: Hansel và Gretel, trong đó 2 đứa trẻ đã rải những mẩu bánh mỳ vụn (breadcrumb) dọc đường để tìm về nhà. Đây cũng chính là nhiệm vụ của breadcrumb trong User Experience của website và SEO. Trong một website có cấu tạo phức tạp hoặc chứa nhiều nội dung, breadcrumb navigation là một cách hiệu quả để giúp người dùng định vị vị trí trong website và giúp việc di chuyển giữa các trang thuận tiện hơn.

Tại sao lại sử dụng Breadcrumb trong seo website?

Thực sự mà nói, tôi chỉ là dân chuyên code về Backend, JS và Database. Cho nên ở bài viết này tôi chỉ hướng dẫn các bạn cách sử dụng Breadcrumbs jQuery Plugins mà thôi. Vì tôi có làm một số backend cho các web application nên thường xuyên insert data với breadcrumbs. Còn hiểu tại sao lại sử dụng Breadcrumb thì theo tôi thế này. 

Trang web của chúng ta nó không phải là như cái nhà, cái nhà chúng ta chỉ có một cổng, khách ra và vào chỉ có một cổng. Nhưng đối với website thì khác, luôn luôn xây dựng nhiều hướng để cho khách truy cập vào, chính vì lẽ đó breadcrumbs ra đời.

Xây dựng Breadcrumb js

Trước tiên đi vào xây dựng một Breadcrumb js cho phép user insert một sản phẩm và chọn Breadcrumb phù hợp thì hãy xem hình ảnh dưới đây, hình ảnh này chính là của backend trong shopee. 

Qua hình ảnh đó các bạn đã hình dung ra rồi, và việc của chúng ta làm sao tìm một Breadcrumbs jQuery Plugins để sử dụng mà thôi. 

Rất may tôi đã tìm thấy và nó free nhé các bạn. Path selector – Breadcrumbs jQuery Plugins  

Hoặc các bạn có thể xem demo tại đây.  DEMO BREADCRUMBS JS

or các bạn có thể tham khảo code dưới đây: 

#HTML 

Add 2 file này zô:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.0.0.js"></script>

<form action="" id="formLocation">
    <label for="location">Select your location</label>
    <input name="location">
    <input name="currentLocation">
</form>

# JS add file js zô:

http://victorherrera.atspace.com/jquery-pathselector-plugin/jquery.pathSelector-all.js

$(function(){
                /* Receive notifications when the value of path selector changes.*/
                $("input[name='location']").bind("valueChanged", {}, function(event, newVal){
                    $("input[name='currentLocation']").val(newVal);
                });
                $("input[name='location']").pathSelector(getOptions, {initValue: [{value: 'Am', label:'Americas'}, 'South America']});
            });
            
            /* function for options*/
            function getOptions(value, parts){
                switch (parts.length) {
                    case 0:
                        return [{
                                value: "Am",
                                label: "Americas"
                            }, {
                                value: "Eu",
                                label: "Europe"
                            }, {
                                value: "Af",
                                label: "Africa"
                            }, {
                                value: "As",
                                label: "Asia"
                            }, {
                                value: "Aus",
                                label: "Australia"
                            }];
                        
                    case 1:
                        switch (parts[0]) {
                            case "Am":
                                return ["North America", "South America"];
                            case "Eu":
                                return ["Spain", "United Kingdom", "Italia", "France"];
                            case "Af":
                                return ["Mzantsi Afrika", "Egypt", "Libia"];
                            case "As":
                                return ["Nihon", "Chungkuo", "Rossiya", "Western Asia"];
                            case "Aus":
                                return ["Australia", "New Zealand"];
                        }
                    case 2:
                        switch (parts[1]) {
                            case "North America":
                                return ["United States of America", "Canada"];
                            case "South America":
                                return ["Colombia", "Brazil", "Chile", "Argentina"];
                            case "Western Asia":
                                return ["Saudi Arabia", "Israel", "Syria", "Turkey"];
                            default:
                                return null;
                        }
                    default:
                        return null;
                }
            }

Và đây là hình ảnh sau khi setting xong, chúng ta bây giờ có thể biến hoá theo những gì chúng ta cảm thấy thích hợp trong dự án của mình. Thanks for reading!