15

そのため、nike.comのスニーカーページ（HTMLリンクなし）にアクセスするたびに、靴のサイズが自動的に選択されてカートに追加され、チェックアウトされるようにしようとしています。

現在、このスクリプト（下記）を使用しようとしていますが、スニーカーのページに移動するたびに、希望する靴のサイズが適切に追加されず、カートに何も入っていない状態でチェックアウトに直行します。

コードを実際のページのHTMLに一致させる必要があると言われましたが、その方法がわかりません。助けてください。

// ==UserScript==
// @name     _Nike auto-buy(!!!) script
// @include  http://*/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var okayToClickAddtoCart = false;

//-- Assumes that size is a standard <option> tag or similar...
waitForKeyElements (".selectBox-label[value='10']", selectShoeSize);

function selectShoeSize (jNode) {
    jNode.prop ('selected', true);

    okayToClickAddtoCart = true;
}


waitForKeyElements (".add-to-cart.nike-button", clickAddToCart);

function clickAddToCart (jNode) {
    if ( ! okayToClickAddtoCart) {
        return true;    //-- Don't click yet.
    }

    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}


waitForKeyElements (".checkout-button", clickCheckoutButton);

function clickCheckoutButton (jNode) {
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}


「ターゲットページ」へのリンク
ターゲットHTMLのスナップショット（ターゲットページがNikeによって削除または変更された場合）

4

1 に答える 1

31

質問からスクリプトを変更するだけでなく、Greasemonkey/Tampermonkeyを使用してこれらの種類のページとアクションをスクリプト化する方法の概要を簡単に説明したいと思います。

手順は次のとおりです。

  1. 手動で行うことに注意してください。ページのJavaScriptによって追加/変更された要素、および必要な手順のシーケンス（ある場合）に特に注意してください。

  2. Firebug、Firefoxのインスペクター、Chromeの開発者ツールを使用して、読み取りまたは操作するすべての要素のCSS/jQueryセレクターを決定します。これは、Firebugを使用して行うのが特に簡単です。

  3. jQueryを使用して静的HTMLを操作します。waitForKeyElementsを使用して、javascript（AJAX）によって追加または変更されたノードを処理します。Greasemonkey API（Tampermonkeyでもサポートされ、Chromeユーザースクリプトでも部分的にサポートされています）を使用して、クロスドメインページ呼び出しを実行したり、クロスドメインページセットのページ読み込み間に値を保存したりします。

具体例：

  1. OPのターゲットページの場合、OPは次のことを行います。（a）靴のサイズを自動的に選択し、（b）靴をショッピングカートに追加し、（c）チェックアウトボタンをクリックします。

    これには、次のような5つのページ要素を待つかクリックする必要があります。

    サイズを設定する

    チェックアウト


  2. Firebug（または同様のツール）を使用して、キーノードのHTML構造を取得します。たとえば、[サイズ]ドロップダウンには次のようなHTMLがあります。

    <div class="size-quantity">
    <span class="sizeDropdown selectBox-open">
        ...
        <label class="dropdown-label selectBox-label-showing">SIZE</label>
        ...
        <a class="selectBox size-dropdown mediumSelect footwear selectBox-dropdown" ...>
            ...
        </a>
    </span>
</div>

    リンクが実際にmousedownイベントを発生させる場所であり、クリックではありません。

    Firebugは、次のCSSパスを提供します。

    html.js body div#body div#body-wrapper.fullheight div#body-liner.clear div#content div#pdp.footwear div#product-container.clear div.pdp-buying-tools-container div.pdp-box div.buying-tools-container div#PDPBuyingTools.buying-tools-gadget form.add-to-cart-form div.product-selections div.size-quantity span.sizeDropdown a.selectBox

    これを削減することができます：

    div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown

    些細なページ変更に耐える可能性が高く、不要なページ/製品でトリガーされる可能性が低い合理的なセレクターの場合。

    ~~~~~~~~~~~~~
    Firebugは、どのイベントが何に関連付けられているかを確認するのにも役立ちます。これは、トリガーする必要があるものを決定するときに重要です。たとえば、そのノードの場合、次のように表示されます。

    キーファーストノードのイベント

    そのリンクにはイベントがなくhref、イベントをリッスンしませんclick。この場合、mousedown（またはkeydown）をトリガーする必要があります。

    ~~~~~~~~~~~~~
    他の4つのキーノードに対して同様のプロセスを使用して、次のCSS/jQueryセレクターを取得します。

    Node 1:     div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown

Node 2:     ul.selectBox-dropdown-menu li a:contains('10')
            (But this will need an additional check)

Node 3:     div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox span.selectBox-label:contains('(10)')

Node 4:     div.footwear form.add-to-cart-form div.product-selections div.add-to-cart

Node 5:     div.mini-cart div.cart-item-data a.checkout-button:visible


  3. 最後にwaitForKeyElements、必要なイベントをキーノードに送信し、操作の適切な順序を順番に並べるために使用します。

結果として得られる、完全で機能するスクリプトは次のとおりです。

// ==UserScript==
// @name     _Nike auto-buy shoes(!!!) script
// @include  http://store.nike.com/*
// @include  https://store.nike.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var targetShoeSize  = "10";

//-- STEP 1:    Activate size drop-down.
waitForKeyElements (
    "div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown",
    activateSizeDropdown
);
function activateSizeDropdown (jNode) {
    triggerMouseEvent (jNode[0], "mousedown");

    //-- Setup step 2.
    waitForKeyElements (
        "ul.selectBox-dropdown-menu li a:contains('" + targetShoeSize + "'):visible",
        selectDesiredShoeSize
    );
}

//-- STEP 2:    Select desired shoe size.
function selectDesiredShoeSize (jNode) {
    /*-- Because the selector for this node is vulnerable to false positives,
        we need an additional check here.
    */
    if ($.trim (jNode.text () ) === targetShoeSize) {
        //-- This node needs a triplex event
        triggerMouseEvent (jNode[0], "mouseover");
        triggerMouseEvent (jNode[0], "mousedown");
        triggerMouseEvent (jNode[0], "mouseup");

        //-- Setup steps 3 and 4.
        waitForKeyElements (
            "div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox "
            + "span.selectBox-label:contains('(" + targetShoeSize + ")')",
            waitForShoeSizeDisplayAndAddToCart
        );
    }
}

//-- STEPS 3 and 4: Wait for shoe size display and add to cart.
function waitForShoeSizeDisplayAndAddToCart (jNode) {
    var addToCartButton = $(
        "div.footwear form.add-to-cart-form div.product-selections div.add-to-cart"
    );
    triggerMouseEvent (addToCartButton[0], "click");

    //-- Setup step 5.
    waitForKeyElements (
        "div.mini-cart div.cart-item-data a.checkout-button:visible",
        clickTheCheckoutButton
    );
}

//-- STEP 5:    Click the checkout button.
function clickTheCheckoutButton (jNode) {
    triggerMouseEvent (jNode[0], "click");

    //-- All done.  The checkout page should load.
}

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}
于 2013-02-24T14:02:33.877 に答える