Creating a selector for the number of products in a shopping cart

Creating this selector is necessary for the "abandoned cart" scenario to work properly.

Step 1. go to your store page and add the item to your cart.

Step 2. Right click on the cart icon with the number of products and select "Inspect".

Step 3. DevTools will open on the Elements tab with the selected code snippet responsible for the counter of products added to the cart

Step 4. Create a selector for the element containing the number of products in the cart.

• It is best to make a selector based on an "id" element (which is a unique element) or a "class" element. A selector based on "id" must begin with a # and a selector based on "class" must begin with a period, for example: .element_name_class

For the above example, the selector would look like .counter-number , since we are referring to the "class" of this element's "counter-number" name, which contains information about the number of products in the cart.

You can find more about building selectors here: https://www.w3schools.com/cssref/css_selectors.asp

Step 5. This selector should be checked on the page (as it must point to exactly one element on the page) => in the "Elements" tab, click Ctrl+F and type our selector there. If it points "1 of 1" it means that it was made correctly.

Step 6. check in the "Console" tab if the created selector returns the desired value. Enter document.querySelector('').innerText command and between '' characters insert your selector. Below you should see the number of products you had in your basket.

Step 7: This selector can be pasted into the application into a template there.