Simple Shopping Search

以前作った、Tiny Shopping Browserというパンくずリスト + ナビゲーションメニューというUIのデモを更新して、Amazon.com のデータも取得できるようにし、見た目も少し変えた。そして、名前をSimple Shopping Searchに変更した。

AmazonのAPIからのレスポンスが遅い時など、ちょっと変な動きをする時があるが、その場合はやり直せば上手く行くと思う。自分で使ってみて大きな問題はなさそうだった。

Advertisements
Simple Shopping Search

Continuous Pagination with YUI

Last month, I implemented continuous pagination to Simple Shopping Search that is described in Breadcrumb + Navigation. I refered to the article on Switch On The Code to create this.

What the script should do is

  1. Checking position when scroll event occurs
  2. If it’s scrolled at a certain point of the page, it gets next page contents/data and then append it at the end of the page

The timing when it should get next contents (or data) depends on page length, window or frame size. For example, if you want to load next page when you scroll down to the bottom of the page, it should load contents when

position of the page > page length – window height – offset

Yahoo! UI Library has a method to get the above values in Dom Collection module, the example code would be

var dom = YAHOO.util.Dom;

var continuousPaginator = function(){
    var offset    = 10;
    var scrtop    = dom.getDocumentScrollTop();
    var docheight = dom.getDocumentHeight();
    var winheight = dom.getViewportHeight();

    if ( scrtop < docheight - winheight - offset) {
        // get next page content and append it at the bottom of the page
    }
};

YAHOO.util.Event.addListener(window, "scroll", continuousPaginator);

By the way, Simple Shopping Search now supports Amazon US data. You can also check the behavior of breadcrumb navigation with Amazon US category.

Continuous Pagination with YUI