Cart

Key: cart

Tracking cart details means we have to loop over products to get their details too. We do that as follows:

{
  "cart": {
    "gross": SET_TO_VALUE,
    ...
    "waitForChange": GET_A_VALUE, // optional
    "loop": LOOP_VALUE,
    "loop-item": {
      "product": {
        "id": SET_TO_VALUE,
        "name": SET_TO_VALUE,
        ...
      }
    }
  }
}

The LOOP_VALUE needs to get an array, either from a page variable or a jQuery selector. As an example let's look at the following:

<ul id="cart">
  <li data-id="312">
    <div class="product-name">Dish-cloth</div>
    <div class="price">$5.43</div>
    <input type="text" class="qty" value="2" />  
  </li>
  <li data-id="675">
    <div class="product-name">Glasses (White)</div>
    <div class="price">$1.24</div>
    <input type="text" class="qty" value="1" />
  </li>
</ul>

We would loop over the values like this:

"cart": {
  "loop": {
    "type": "selector",
    "value": "#cart li.cart-item"
  }
}

And get the data for each item in the loop (loop-item) like this:

"cart": {
  "loop-item": {
    "product": {
      "id": {
        "to": {
          "type": "selector",
          "value": "$self",
          "filters": [
            {
              "type": "attr",
              "params" : {
                "attr": "data-id"
              }
            }
          ]
        }
      },
      "name": {
        "to": {
          "type": "selector",
          "value": ".product-name",
          "filters": "text,trim"
        }
      },
      "price": {
        "to": {
          "type": "selector",
          "value": ".price",
          "filters": "text,number"
        }
      },
      "quantity": {
        "to": {
          "type": "selector",
          "value": "input.qty",
          "filters": "value,number"
        }
      }
    }
  }
}

$self

By default any selector that runs inside this loop takes the element that is being looped over as a context. To get the element itself we use $self, as above in the "id" example.

waitForChange

This should get a JS value from the page, or using jQuery. When the scraper first runs it saves this value and will redo the scraping if it changes. See Lookups.

The example here gets the current cart value (using a jQuery selector) and if the value changes assumes that a quick cart is visible.

This is optional for the default cart scraping.

"cart.waitForChange": {
  "type": "selector",
  "value": "#cart-value span",
  "filters": "text,number"
}

watchDiscountCodeInput

If we do not have access to the discount code after one has been applied we can save the discount code while it is being entered. The lookup here must return a JQuery object as events will be attached to it to watch changes and key presses. It also should be an INPUT Element.

"cart.watchDiscountCodeInput": {
  "type": "selector",
  "value": "input#couponCode"
}

When the value in this input changes it will be set on cart.discountCode and automatically trimmed.

If you are using this you should not define 'discountCode'. If you do define 'discountCode' this will be scraped first, then if it did not get a code, the saved information from this lookup will be used.

Note: this may end up tracking a coupon that was not successfully applied to the cart.

results matching ""

    No results matching ""