Tạo các nút next, prev hiển thị ảnh bài viết của trang kế và trang trước

Các nút next, prev là một chi tiết nhỏ nhưng rất quan trọng với theme blogspot bán hàng. Khi bạn truy cập một trang bài viết bán sản phẩm cho dù trang được xây dựng theo mã nguồn nào thì bố cục bài viết của trang luôn có các nút hiển thị sản phẩm kế tiếp và trước đó.

Trong blogspot bạn hoàn toàn có thể tạo được các nút hiển thị sản phẩm cũ hơn và mới hơn dựa vào thẻ data liên kết cho trang kế và trang cũ hơn áp dụng nếu nó là trang item thì gọi nó là trang bài kế tiếp và bài trước đó căn cứ theo thời gian xuất bản bài đăng.

Hiển thị ảnh sản phẩm của trang trước và trang kế tiếp khi hover vào các nút next, prev

Đọc thêm: Tận dụng tối đa thẻ dữ liệu mặc định của bài viết thay vì lấy dữ liệu trong nguồn cấp

Cách tạo các nút next, prev hiển thị ảnh bài viết của trang kế và trang trước

Đầu tiên bạn sẽ đặt liên kết đến bài cũ hơn và bài mới hơn vào vị trí muốn hiển thị trong bố cục trang bài viết cụ thể chèn trong tiện ích Bài đăng trên Blog, code sẽ có dạng sau:

<div class='next-prev-thumbs'>

  <ul>

    <b:if cond='data:newerPageUrl'>

      <li>

        <a aria-label='Trang kế' expr:href='data:newerPageUrl' rel='prev' role='button' title='Trang kế'/>

        <div class='nav-dropdown'></div>

      </li>

    </b:if>

    <b:if cond='data:olderPageUrl'>

      <li>

        <a aria-label='Trang trước' expr:href='data:olderPageUrl' rel='next' role='button' title='Trang trước'/>

        <div class='nav-dropdown'></div>

      </li>

    </b:if>

  </ul>

</div>

Tiếp theo bạn sẽ viết script cụ thể bằng code jquery từ liên kết get để lấy thông tin tiêu đề và ảnh từ trang mà bạn get link, đặt code trước thẻ đóng </body>

<script>//<![CDATA[

window.addEventListener('load',function(){

  var newer_link=$('.next-prev-thumbs a[rel="prev"]'),

    older_link=$('.next-prev-thumbs a[rel="next"]')

  $('.next-prev-thumbs').one('mouseover',function(){

    $.get(newer_link.attr('href'),function(p){

      var newer_title=$(p).find('meta[property="og:title"]').attr('content'),

        newer_image=$(p).find('meta[property="og:image"]').attr('content')

        newer_link.attr('title',newer_title).parent().find('.nav-dropdown').append('<a href='+newer_link.attr('href')+' title="'+newer_title+'"><img alt="'+newer_title+'" src='+newer_image+'></a>')

    },'html')

    $.get(older_link.attr('href'),function(n){

      var older_title=$(n).find('meta[property="og:title"]').attr('content'),

        older_image=$(n).find('meta[property="og:image"]').attr('content')

      older_link.attr('title',older_title).parent().find('.nav-dropdown').append('<a href='+older_link.attr('href')+' title="'+older_title+'"><img alt="'+older_title+'" src='+older_image+'></a>')

    },'html')

  })

})

//]]></script>

Có nhiều cách để lấy dữ liệu tại trang get link, cách đơn giản nhất là lấy từ thẻ meta đầu trang tại trang đó. Ví dụ, bạn view-source một trang item nào đó, bạn đi tìm các thẻ liên quan có chứa tiêu đề và ảnh liên quan đến bài viết đó sau đó bạn dùng jquery trích xuất ra thôi.

Đọc thêm: Ứng dụng thẻ label bài viết trong theme blogspot bán hàng

Sử dụng hàm one trong jquery cụ thể áp dụng với hover lần đầu vào các nút next, prev mới get URL để lấy và tạo dữ liệu hiển thị ảnh sản phẩm cho nên không ảnh hưởng đến thời gian tải trang sau khi thêm vào.

Cuối cùng, chèn css cho giao diện hiển thị nút chèn trước thẻ đóng </head>

<b:tag name='style'>/* <![CDATA[ */

.next-prev-thumbs ul{margin:0;padding:0;list-style:none}

.next-prev-thumbs li{position:relative;display:inline-block}

.next-prev-thumbs li>a{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;justify-content:center;border:2px solid rgba(12,28,39,.15);border-radius:50%;width:32px;height:32px}

.nav-dropdown{background:#fff;position:absolute;z-index:9;opacity:0;transition:opacity .25s;min-width:80px;width:auto;min-height:110px;box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3)}

.next-prev-thumbs li>a[rel=prev]:before,.next-prev-thumbs li>a[rel=next]:before{background-size:100%;content:"";display:inline-block;vertical-align:middle;width:7px;height:12px}

.next-prev-thumbs li>a[rel=prev]:before{background-image:url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 14 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='1.4' points='12.775,1 1.225,12 12.775,23 '%3E%3C/polyline%3E%3C/svg%3E")}

.next-prev-thumbs li>a[rel=next]:before{background-image:url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 14 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='1.4' points='1.225,23 12.775,12 1.225,1 '%3E%3C/polyline%3E%3C/svg%3E")}

.nav-dropdown:after{visibility:hidden;display:block;content:"";clear:both;height:0}

.next-prev-thumbs>li:hover .nav-dropdown{max-height:inherit;opacity:1;left:auto}

.next-prev-thumbs li:hover:first-child .nav-dropdown{right:-35px}

.next-prev-thumbs li:hover:last-child .nav-dropdown{right:0}

.nav-dropdown>a{display:-webkit-flex;display:-ms-flexbox;display:flex;}

/* ]]> */</b:tag>

Code này chỉ đơn giản hiển thị ảnh sản phầm kèm link sản phẩm khi hover vào nút, nếu bạn muốn sinh động bạn có thể chèn thêm dữ liệu ví dụ, như giá sản phẩm chẳng hạn. Bạn cứ từ từ mà nghiên cứu cứ xem nguồn trang của trang bài kế tiếp và bài cũ hơn từ bài hiện tại tìm dữ liệu cần lấy sau đó ráp vào thôi.

Tham khảo thêm: Sử dụng phương pháp Jquery get url trực tiếp thay thế cho url nguồn cấp trong blogspot