jQuery extraction of data in Shopping Cart

1
votes

Here is a screenshot of a shopping cart I'm trying to pull data from.

enter image description here

The main class of the whole cart is called div.phable_row so I can easily enough count how many elements are in the in cart with $(".phable__row").length and because phable__row[0] is the heading I just subtract 1 and I know how many line items will be in the cart.

But moving on to a more apparent headache is pulling out the Site, Item, Price, Qty and Total values in variables in GTM. 

<div class="phable__row ">
  <div class="phable__cell phable__cell--2-12">
    <figure class="phable__item-logo">
      <img src="/img_responsive/icon/icon-sportscene.png" class="phable__item-logo-img">
    </figure>
  </div>
  <div class="phable__cell phable__cell--6-16">
    <div class="phable__item">
      <figure class="phable__item-figure">
        <a class="phable__item-link" href="http://www.sportscene.co.za/pdp/nike-men-s-air-force-1-mid-07/_/A-061017AAAC7">
          <img alt="" src="http://tfgsrv.wigroup.co/06/Thumbnail/31335596.jpg"></a>
      </figure>
      <div class="phable__item-inner">
        <h3 class="phable__item-title">
          <a href="http://www.sportscene.co.za/pdp/nike-men-s-air-force-1-mid-07/_/A-061017AAAC7?commItemId=ci261019227"> NIKE MEN'S AIR FORCE 1 MID '07</a>
        </h3>
        <div class="phable__item-sub-title"></div>
        <div class="phable__item-sku">
          31335602</div>
        <div class="phable__item-variants">
          <div class="phable__item-variant">
            <div class="phable__item-variant-label">
              Size:</div>
            <div class="phable__item-variant-content">
              11</div>
          </div>
          <div class="phable__item-variant">
            <div class="phable__item-variant-label">
              Colour: </div>
            <div class="phable__item-variant-content">
              White</div>
          </div>
        </div>
        <form id="remove_ci261019227" name="remove_ci261019227" action="/basket/basket.jsp?_DARGS=/basket/gadgets/lineItem.jsp.removeFromCart" class="js-tfg-view js-tfg-view-form checkout__list-btns phable__cta" method="post" novalidate="novalidate"><input name="_dyncharset" value="UTF-8" type="hidden" tabindex="15"><input name="_dynSessConf" value="5073853044731203519" type="hidden" tabindex="16"><input id="removelformIds" name="/atg/commerce/order/purchase/CartModifierFormHandler.removalCommerceIds"
            value="ci261019227" type="hidden" tabindex="17"><input name="_D:/atg/commerce/order/purchase/CartModifierFormHandler.removalCommerceIds" value=" " type="hidden" tabindex="18"><input name="/atg/commerce/order/purchase/CartModifierFormHandler.removeItemFromOrder"
            value="REMOVE" class="btn-link" type="submit" tabindex="19"><input name="_D:/atg/commerce/order/purchase/CartModifierFormHandler.removeItemFromOrder" value=" " type="hidden" tabindex="20"><input name="_DARGS" value="/basket/gadgets/lineItem.jsp.removeFromCart"
            type="hidden" tabindex="21"></form><a href="/myaccount/register.jsp?productId=061017AAAC7&amp;skuId=31335602_06&amp;addFromCart=true&amp;redirectURL=/basket/basket.jsp" class="btn-link">ADD TO WISHLIST</a>
      </div>
    </div>
  </div>
  <div class="phable__cell phable__cell--aligned phable__cell--2-12">
    <div class="phable__item-price">
      R 1,399.00</div>
  </div>
  <div class="phable__cell phable__cell--aligned phable__cell--2-16">
    <form name="update_ci261019227" action="/basket/basket.jsp?_DARGS=/basket/gadgets/updateItem.jsp" class="js-tfg-view js-tfg-view-form updateQty_form" method="post" novalidate="novalidate" data-use-generic-msg="false"><input name="_dyncharset" value="UTF-8" type="hidden" tabindex="22"><input name="_dynSessConf" value="5073853044731203519" type="hidden" tabindex="23"><input min="1" maxlength="3" name="quantity" value="1" class="product-detail__qty-input js-tfg-view js-tfg-view-quantity-input"
        type="number" tabindex="24"><input name="_D:quantity" value=" " type="hidden" tabindex="25">
      <div class="form__qty-container">
        <input name="/atg/commerce/order/purchase/CartModifierFormHandler.commerceIds" value="ci261019227" type="hidden" tabindex="26"><input name="_D:/atg/commerce/order/purchase/CartModifierFormHandler.commerceIds" value=" " type="hidden" tabindex="27">
        <input
          name="/atg/commerce/order/purchase/CartModifierFormHandler.setOrderByCommerceId" value="UPDATE" class="btn-link" type="submit" tabindex="28"><input name="_D:/atg/commerce/order/purchase/CartModifierFormHandler.setOrderByCommerceId" value=" " type="hidden" tabindex="29"></div>
      <input name="_DARGS" value="/basket/gadgets/updateItem.jsp" type="hidden" tabindex="30"></form>
  </div>
  <div class="phable__cell phable__cell--alt phable__cell--2-12">
    <div class="phable__item-price">
      R 1,399.00</div>
  </div>`enter code here`
</div>

Which as you can see isn't the neatest bit of code to try and work through. Step one for me will be pulling the text from href in phable__item-title And I just can't seem to nail this one. And hitting a little wall.

Thanks in advance for the help with this newbie :)

1
jquery

1 Answers

1
votes

The simplest way to retrieve the text from all the .phable__item-title a elements would be to create an array of them using map(), like this:

var items = $('.phable__row').map(function() {
  var title = $(this).find('.phable__item-title a').text().trim();
  var price = $(this).find('.phable__item-price:first').text().trim();
  var qty = parseInt($(this).find('.product-detail__qty-input').val(), 10);
  
  return {
    title: title,
    price: price,
    quantity: qty
  };
}).get();

console.log(items);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="phable__row ">
  <div class="phable__cell phable__cell--2-12">
    <figure class="phable__item-logo">
      <img src="/img_responsive/icon/icon-sportscene.png" class="phable__item-logo-img">
    </figure>
  </div>
  <div class="phable__cell phable__cell--6-16">
    <div class="phable__item">
      <figure class="phable__item-figure">
        <a class="phable__item-link" href="http://www.sportscene.co.za/pdp/nike-men-s-air-force-1-mid-07/_/A-061017AAAC7">
          <img alt="" src="http://tfgsrv.wigroup.co/06/Thumbnail/31335596.jpg"></a>
      </figure>
      <div class="phable__item-inner">
        <h3 class="phable__item-title">
          <a href="http://www.sportscene.co.za/pdp/nike-men-s-air-force-1-mid-07/_/A-061017AAAC7?commItemId=ci261019227"> NIKE MEN'S AIR FORCE 1 MID '07</a>
        </h3>
        <div class="phable__item-sub-title"></div>
        <div class="phable__item-sku">
          31335602</div>
        <div class="phable__item-variants">
          <div class="phable__item-variant">
            <div class="phable__item-variant-label">
              Size:</div>
            <div class="phable__item-variant-content">
              11</div>
          </div>
          <div class="phable__item-variant">
            <div class="phable__item-variant-label">
              Colour: </div>
            <div class="phable__item-variant-content">
              White</div>
          </div>
        </div>
        <form id="remove_ci261019227" name="remove_ci261019227" action="/basket/basket.jsp?_DARGS=/basket/gadgets/lineItem.jsp.removeFromCart" class="js-tfg-view js-tfg-view-form checkout__list-btns phable__cta" method="post" novalidate="novalidate"><input name="_dyncharset" value="UTF-8" type="hidden" tabindex="15"><input name="_dynSessConf" value="5073853044731203519" type="hidden" tabindex="16"><input id="removelformIds" name="/atg/commerce/order/purchase/CartModifierFormHandler.removalCommerceIds"
            value="ci261019227" type="hidden" tabindex="17"><input name="_D:/atg/commerce/order/purchase/CartModifierFormHandler.removalCommerceIds" value=" " type="hidden" tabindex="18"><input name="/atg/commerce/order/purchase/CartModifierFormHandler.removeItemFromOrder"
            value="REMOVE" class="btn-link" type="submit" tabindex="19"><input name="_D:/atg/commerce/order/purchase/CartModifierFormHandler.removeItemFromOrder" value=" " type="hidden" tabindex="20"><input name="_DARGS" value="/basket/gadgets/lineItem.jsp.removeFromCart"
            type="hidden" tabindex="21"></form><a href="/myaccount/register.jsp?productId=061017AAAC7&amp;skuId=31335602_06&amp;addFromCart=true&amp;redirectURL=/basket/basket.jsp" class="btn-link">ADD TO WISHLIST</a>
      </div>
    </div>
  </div>
  <div class="phable__cell phable__cell--aligned phable__cell--2-12">
    <div class="phable__item-price">
      R 1,399.00</div>
  </div>
  <div class="phable__cell phable__cell--aligned phable__cell--2-16">
    <form name="update_ci261019227" action="/basket/basket.jsp?_DARGS=/basket/gadgets/updateItem.jsp" class="js-tfg-view js-tfg-view-form updateQty_form" method="post" novalidate="novalidate" data-use-generic-msg="false"><input name="_dyncharset" value="UTF-8" type="hidden" tabindex="22"><input name="_dynSessConf" value="5073853044731203519" type="hidden" tabindex="23"><input min="1" maxlength="3" name="quantity" value="1" class="product-detail__qty-input js-tfg-view js-tfg-view-quantity-input"
        type="number" tabindex="24"><input name="_D:quantity" value=" " type="hidden" tabindex="25">
      <div class="form__qty-container">
        <input name="/atg/commerce/order/purchase/CartModifierFormHandler.commerceIds" value="ci261019227" type="hidden" tabindex="26"><input name="_D:/atg/commerce/order/purchase/CartModifierFormHandler.commerceIds" value=" " type="hidden" tabindex="27">
        <input name="/atg/commerce/order/purchase/CartModifierFormHandler.setOrderByCommerceId" value="UPDATE" class="btn-link" type="submit" tabindex="28"><input name="_D:/atg/commerce/order/purchase/CartModifierFormHandler.setOrderByCommerceId" value=" "
          type="hidden" tabindex="29"></div>
      <input name="_DARGS" value="/basket/gadgets/updateItem.jsp" type="hidden" tabindex="30"></form>
  </div>
  <div class="phable__cell phable__cell--alt phable__cell--2-12">
    <div class="phable__item-price">
      R 1,399.00</div>
  </div>
</div>