Choisir et activer les bons contrôles sur un site piloté par AJAX

Donc, je suis en train de faire, où à chaque fois que je visite une nike.com sneaker de la page (sans le lien HTML), il sélectionne automatiquement ma taille de chaussure, l'ajoute au panier, et vérifie pour moi.

Je suis en train d'essayer d'utiliser ce script (ci-dessous), mais à chaque fois que je vais à la sneaker page, il n'est pas correctement ajouter de la pointure je veux, mais va directement à la caisse avec rien dans mon panier.

Je me dit que j'ai besoin de faire correspondre le code de la page HTML, mais je ne sais pas comment faire. S'il vous plaît aider.

//==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);
}

Lien vers la "page de destination"
Instantané de la cible HTML (dans le cas où la page a été supprimée ou modifiée par Nike)

source d'informationauteur Nite

Plutôt que de simplement modifier le script à partir de la question, j'espère donner un rapide aperçu de la façon d'écrire le script de ces sortes de pages et d'actions avec Greasemonkey/Tampermonkey.

Les étapes sont les suivantes:

Prendre bonne note de ce que vous faites manuellement. Prendre note des éléments ajoutés/modifiés par la page du javascript, et l'ordre nécessaire des mesures, le cas échéant.
À l'aide de Firebuget/ou de Firefox inspecteuret/ou de Chrome outils de développementdéterminer CSS/jQuery sélecteur pour tous les éléments vous permettra de lire ou de le manipuler. C'est particulièrement facile de le faire à l'aide de Firebug.
Utiliser jQuery pour manipuler des fichiers HTML statiques. Utilisation waitForKeyElements pour gérer les nœuds ajoutés ou modifiés par javascript (AJAX). Utilisation le Greasemonkey API - qui est également pris en charge par Tampermonkey et partiellement pris en charge par Chrome userscripts, pour faire tout cross-domain page des appels, ou pour stocker toutes les valeurs entre le chargement de la page pour le cross-domaine des ensembles de pages.

Exemple précis:

Pour l'OP pages ciblesl'OP veut: (a) sélectionner automatiquement la taille de la chaussure, (b) ajouter les chaussures dans le panier, et (c) cliquez sur le bouton "paiement".

Cela il faut attendre, et/ou en cliquant sur, cinq (5) éléments de la page comme ceci:

À l'aide de Firebug (ou un outil similaire), nous obtenons la structure HTML pour la clé de nœuds. Par exemple, le TAILLE déroulante HTML, comme ceci:

<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>

Où le lien effectivement déclenche une mousedown événement, pas un clic.

Firebug nous donne un CSS chemin de:

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

Qui on peut rogner:

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

pour un raisonnable sélecteur de chances de survivre trivial changement de page, et peu de chances de se déclencher sur des pages non désirées/produits.

~~~~~~~~~~~~~

Notez que Firebug nous permet également de voir quels sont les événements attachés à ce, qui est crucial lors de la détermination de ce que nous avons besoin de détente. Par exemple, pour le nœud, je vois:

Choisir et activer les bons contrôles sur un site piloté par AJAX

Que le lien n'a pas de hrefni ne l'écoute pour click événements. Dans ce cas, nous devons déclencher une mousedown (ou keydown).

~~~~~~~~~~~~~

À l'aide d'un processus similaire pour les 4 autres nœuds principaux, nous obtenons CSS/jQuery sélecteurs de:

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

Enfin, nous utilisons waitForKeyElements pour envoyer les événements requis à la clé des nœuds et de la séquence par le biais de l'ordre des opérations.

Le travail terminé, le script est:

//==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);
}

Vous devez vous connecter pour publier un commentaire.