Rich-text Reply

Element Change selector and Link URL change

An24 04-18-18
Accepted Solution

Element Change selector and Link URL change

[ Edited ]

I am trying to change the HTML of a dynamic element.

 

javascript:setCurrentId('WC_OrderItemDetailsf_links_2_1'); CheckoutHelperJS.deleteFromCart('8866388');

 

Where numbers change in  'WC_OrderItemDetailsf_links_2_1' and CheckoutHelperJS.deleteFromCart

 

Is there any way to target the selectors regardless the value numbers?

 

At the moment I have just targeted the CSS selectors .cartItemRight .removeItem but the element is linked to those selectors.

 

Thanks,

Ana
Level 2

JasonDahlin 04-18-18
 

Re: Element Change selector and Link URL change

Do you have a page that shows this in action?
Writing JS that dynamically determines values requires a decent understanding of the DOM structure.
Are you trying to write code that performs the deleteFromCart action but need to be able to dynamically determine the SKU of the item to remove? If so, what is the event that triggers this action, etc.
--Jason Dahlin
Analytics and Testing Guru Smiley Happy


Experimentation Hero
An24 04-18-18
 

Re: Element Change selector and Link URL change

Jason,

 

The code is after a login cart experience. The script for the order where I see the conditional created is:

 

<script type="text/javascript"> dojo.addOnLoad( function(){ CommonControllersDeclarationJS.setControllerURL('ShopCartPaginationDisplayController','https://www.cengagebrain.com/shop/ShopCartPageView?catalogId=10057&amp;langId=-1&amp;storeId=10151')... numberOfOrderItems = "0"; if ("3" != "") { numberOfOrderItems = "3"; } var numberOfOrderItemsDisplayedInMSC = "0"; if (document.getElementById("minishopcart_total") != null) { numberOfOrderItemsDisplayedInMSC = document.getElementById("minishopcart_total").innerHTML.trim(); }   // check if number of order items and matches the number showed on mini-shop cart, if not match, refresh mini-shop cart if ((numberOfOrderItems != numberOfOrderItemsDisplayedInMSC) || (3 > 20)) { //var param = []; //param.deleteCartCookie = true; if (dijit.byId("MiniShoppingCart") != null) { //dijit.byId("MiniShoppingCart").refresh(param); setDeleteCartCookie(); loadMiniCart("USD","-1") } } // Dynamically changing the logo URL for LMS cart flow   } ); </script>

 

The code is behind a login after you added items to your cart in cengagebrain.com.

 

 

Ana
Level 2
JasonDahlin 04-18-18
 

Re: Element Change selector and Link URL change

It looks like accounts require specific codes to activate.  Do you have an ISBN that I could use to create an account? Anyone trying to help really needs to see the items on the page.

 

Once the account is created, what are the steps to recreate the scenario you want to affect and what is it that you want to do?  it sounds like maybe you are adding one or more buttons/links each of which will remove a specific item from the cart and you need this button to be contextually aware of which item it is going to remove.

 

The more information you can share about what you are trying to do, the more likely someone can figure out how to help.

 

If you are not able to provide access or steps to create the scenario, perhaps it helps to think about what you need and leave you to figure out how to do it:

Supposing you want to create a button that uses the attributes of items in the cart to create a "remove from cart" button, you could write a function that loops through each item, gathering the data points it needs guessing, it needs the SKU or some other Product ID).  Once the function has the data points it needs, you insert the button/link at the appropriate location with the necessary information to make it do whatever it is that it needs to do.

--Jason Dahlin
Analytics and Testing Guru Smiley Happy


Experimentation Hero
An24 04-18-18
 

Re: Element Change selector and Link URL change

[ Edited ]

I just created this fake account:

Username: mail
PW: Lala

If you go to:
https://www.cengagebrain.com/shop/AjaxOrderItemDisplayView?catalogId=10057&langId=-1&storeId=10151&k...

You should be able to see the "Remove" I'm referring to on each product in the cart.
please first login in cengagebrain.com and then use the link.

Thanks!

Ana
Level 2
JasonDahlin 04-18-18
 

Re: Element Change selector and Link URL change

Hi @An24,

I would use the CSS selectors like you originally mentioned you are doing.

To modify the HTML of each of those elements, you can do like this:

$.each($('.cartItemRight .removeItem'),function(i,e) {
  $(e).html('blah blah blah');
});

If you want to do it based on IDs, you'll need to get a list of the IDs that are on the page and then can use those IDs as your selectors.  The setup would be similar:

var itemsArr = []
$.each($('.cartItemRight .removeItem'),function(i,e) {
  itemsArr.push($(e).attr('id'));
});
for (i=0;i<itemsArr.length;i++) {
  console.log('do something with the element with id ' + itemsArr[i]);
}

 

--Jason Dahlin
Analytics and Testing Guru Smiley Happy


Experimentation Hero