GoogleChromeを利用した金額パラメータの取得方法 - HTMLの構造が動的に変化する場合 – ecコンシェルサポートサイト

HTMLの構造が動的に変化する場合にカートページ、コンバージョンページの金額を取得する方法です。

【XPATHが変化することを確認する】

ショッピングカートにひとつ商品を入れ、こちらの手順1～8を行い、XPATHを取得し、メモ帳等に貼り付けます。
下の例のショッピングカートページでは「 //*[@id="cartFlow"]/div[3]/form/div[2]/p/strong/text() 」というXPATHを取得しました。
ショッピングカートに別の商品を追加し、同様にXPATHを取得し、メモ帳等に貼り付けます。
今回は「 //*[@id="cartFlow"]/div[3]/form/div[3]/p/strong/text() 」を取得しました。
また、トップページから直接ショッピングカートページに遷移した場合や、一度ショッピングカートに入れた商品を削除した場合等、動的変化が予想できる場合のXPATHを取得します。
以下は、トップページから直接ショッピングカートに遷移した場合で、「 //*[@id="cartFlow"]/div[2]/form/div[3]/p/strong/text() 」を取得しました。

取得したそれぞれのXPATHを比較します。この例の場合、div[ ]内の数字が変化していることが分かります。

・ショッピングカートに商品をひとつ入れた時
 //*[@id="cartFlow"]/div[3]/form/div[2]/p/strong/text()

・ショッピングカートに別の商品を追加した時
 //*[@id="cartFlow"]/div[3]/form/div[2]/p/strong/text()

・トップページから直接ショッピングカートに遷移した時
 //*[@id="cartFlow"]/div[2]/form/div[3]/p/strong/text()

【XPATHを修正する】

カート内の合計金額が、同じ属性で選択されることを確認します。
この例の場合、カート内の合計金額は <p class="total"> 内にあることが分かります。

XPATHが変化する部分を統一化します。
この例場合、div[*]をdivへと修正します。

＜取得したXPATH＞
 //*[@id="cartFlow"]/div[3]/form/div[2]/p/strong/text()
 //*[@id="cartFlow"]/div[3]/form/div[2]/p/strong/text()
 //*[@id="cartFlow"]/div[2]/form/div[3]/p/strong/text()

＜統一する＞ 
 //*[@id="cartFlow"]/div/form/div/p/strong/text()

手順1で確認した属性を追加します。
この例の場合、 <p class="total"> 内にカート内合計金額があるため、p を p[@class="total"] と修正します。

＜統一化したXPATH＞
 //*[@id="cartFlow"]/div/form/div/p/strong/text()

＜属性を追加する＞
 //*[@id="cartFlow"]/div/form/div/p[@class="total"]/strong/text()

手順3で修正したXPATHを金額取得パラメータ内に埋め込み、実際にカート内合計金額が取得できるか確認して下さい。

{[{category.name}]}