Capturing a quantity value after click

[#1]

Hello,

We have a feature on our website where visitors can add our products to their cart, with a specified quantity for each part.  What I'm trying to do is capture the value entered after a visitor clicks the Add to BOM button.  Here is a link to one of our product pages.  

I'm fairly new with Launch, and have been struggling on how to set up a rule.  Any feedback/suggestions would be appreciated.

Thank you!

[robertw54618073 · Accepted solution]

@robertw54618073 

At a high level, you'd need to create a rule that fires when either the"click" event occurs on the button, or "submit" event occurs on the form where the button is found. The selectors for these elements are, from what I found, "a.btn.add-btn" and "form.ng-valid.ng-dirty.ng-valid-parse", respectively.

To pick up the quantity value, you'll want to use a data element to grab the value. I'd start with the following config:

• Extension: Core
• Data Element Type: DOM Attribute
• Storage Duration: None
• CSS Selector: input[ng-model='quantity']
• Use the value of: Value

In your rule, reference the data element to get hold of the quantity. From there, do whatever you need with it.

Note: The selectors I've suggested are based on limited knowledge of the site, so it's possible (likely?) you'll need to come up with more reliable options. If a suitable ID can be added to the button and text box elements, that would make this much easier for you going forward.

[robertw54618073 · Accepted solution]

@evolytics_brian

Thank you for your response!  I tried a few options but cannot get the eVar to collect the appropriate quantity values once the submit button (Add to BOM) is clicked.  One thing I noticed is after a visitor clicks Add to BOM, the product quantity entered does not appear in the code in the quantity field box.  (first image below)  However, there is a notification near the top of the page that says quantity entered, along with the product number.  (second image below) 

Could the CSS Selector you mentioned be changed to:  div.product-name_ng-binding ?

[evolytics_brian · Accepted solution]

@robertw54618073 - How are you configuring your "quantity" data element? You should find the value in the ".value" property for the input element (though, I don't expect you'll see it in the HTML view).

[robertw54618073 · Accepted solution]

@evolytics_brian

Using your original suggestion, however I changed the CSS Selector to:  <div class="product-name ng-binding">

Extension:  Core

CSS Selector:  <div class="product-name ng-binding">

Use the value of:  Value

Data Element Type:  DOM Attribute

[evolytics_brian · Accepted solution]

If you want to try pulling the information from that notification div, you'll have to change your selector to div.product-name.ng-binding, leaving out the HTML characters and spacing between the two class values. Taking that approach, though, means you'll probably have to scrape the quantity out of the element's innerText property.

How do your rule and your data element compare against what I have below? I've tested both of these in my sandbox and it reliably picks up the quantity when clicking the button:

Data Element

Rule

In the rule, I'm just referencing the data element as I would any other data element; nothing special there.