jQuery extraction of data in Shopping Cart -
here screenshot of shopping cart i'm trying pull data from.
the main class of whole cart called div.phable_row can enough count how many elements in in cart $(".phable__row").length , because phable__row[0] heading subtract 1 , know how many line items in cart.
but moving on more apparent headache pulling out site, item, price, qty , 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&skuid=31335602_06&addfromcart=true&redirecturl=/basket/basket.jsp" class="btn-link">add 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 can see isn't neatest bit of code try , work through. step 1 me pulling text href in phable__item-title , can't seem nail one. , hitting little wall.
thanks in advance newbie :)
the simplest way retrieve text .phable__item-title a elements create array of them using map(), 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&skuid=31335602_06&addfromcart=true&redirecturl=/basket/basket.jsp" class="btn-link">add 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>
Comments
Post a Comment