# simon

Example website: https://inline.app/order/-L2ob2WyNAMrK819_Q7l/-L2ob2aiSjTkofeorUyR?language=en

# Merchant Name

document.querySelector('xxxx')

document 就是指目前的這個網頁
querySelector 加上路徑(selector) 就可以取得畫面上所要的 HTML Element

document.querySelector('xxxx').textContent

textContent 就是該 HTML Element 裡面的文字

document.querySelector('#merchantName').textContent

假裝這行指令會取得 merchant name，也就是 `Baba Kevin BBQ 民生店`

# Remove button
我們要先取得 Remove 這顆按鈕，類似上面，但 Remove 按鈕會很多顆

document.querySelectorAll('button.remove')

改用 querySelectorAll 會取得所有 remove 按鈕的陣列，然後要加入 click 事件

// 先取得 merchant name
var merchantName = document.querySelector('#merchantName').textContent;

// 取得所有的 remove 按鈕
var btnList = document.querySelectorAll('button.remove');

// 每個按鈕跑回圈去加入 click 事件
for (var btn of btnList) {
  // 加入 click 事件監聽
  btn.addEventListener('click', function (event) {
    // 取得刪除按鈕的 parent container (會包含要刪除的整筆資料內容)
    var item = btn.closest('.item');

    // 取得項目名稱
    var itemName = item.querySelector('.item-name').textContent;

    // 取得項目價格
    var itemPrice = item.querySelector('.item-price').textContent;

    // 發送 ga event 夾帶 merchantName, itemName, itemPrice
    ga.send('remove', merchantName, itemName, itemPrice)
  });
}

itemName 和 itemPrice 取得比較麻煩一點
先取得刪除按鈕，再從刪除按鈕取得刪除按鈕的 parent container

var item = btn.closest('.item');

這個 item 就是包含整筆資料的內容，大概如圖片這樣


再從這個 item 去取得 itemName 和 itemPrice