Supremeの半Bot(自動カートイン)を作ってみる②

2019年12月10日

前回の続きです。
Supremeの半Bot(自動カートイン)を作ってみる
今回は重要なindex.js部分です。
では、早速作っていきましょう。

初期設定

まずは欲しいものの設定を書いていきましょう。

 // 現在のURL判定
$this_url = window.location.href;
//欲しいジャンル
$request_item = "https://www.supremenewyork.com/shop/all/accessories";
//欲しいアイテム位置
$item_position = "11";
//欲しいサイズ
$item_size ="Medium";
//欲しいアイテム画像
$item_img_url ="//assets.supremenewyork.com/180048/vi/C7bCOBLHllQ.jpg";
console.log($this_url);
$('.sold_out_tag').css('display','block');

最初のブロックは
こんな感じでしょうか
$this_url = window.location.href;
で現在の開いてるURLを取得します。
欲しいジャンルのURLを設定することで、スクリプトが動くようにします。
あとは欲しいアイテムの順番やサイズ、アイテムの画像を設定して判定しています。

$name = "山田 太郎";
$email = "taro.yamada@gmail.com";
$phone = "09012345678";
$postal_code = "0010001";
$state = " 北海道";
$address1 = "●●●●●●●●";
$address2 = "●●●●●●●●";

次のブロックでは住所の設定です。
ここはすでにSupreme のオンラインストアで住所を保存してる人には必要ないかもしれません。
一応、載せておきます。
注意するべきは例えば北海道だと北海道の前に半角が必要です。

ここの部分の設定です。
注意するのは名前のところに姓と名の間に半角と入れておくことです。

次にクレジットカードの設定をしましょう。

$card_number = "1234 6789 1234 5678";
$card_year = "2024";
$card_month = "01";
$card_cvv = "001";

このような感じです。
カードナンバー、カード使用期限の設定です。

クレジッドの種類は実際に買うときに自分で選びます。

これで初期設定は完了です。

請求先・発送先情報部分の入力はすぐ呼び出せるように関数でまとめておきましょう。

function user_address(){
//住所セット
$('input#order_billing_name’).val($name); //名前
$('input#order_email’).val($email); //email
$('input#order_tel’).val($phone); //電話番号
$('input#order_billing_zip’).val($postal_code); //郵便番号
$('select#order_billing_state’).val($state); //都道府県
$('input#order_billing_city’).val($address1);
$('input#order_billing_address’).val($address2);
}

inputに変数で設定した値を入力していくのでこんな感じで大丈夫です。

次にリロードの関数とローカルストレージに欲しいアイテムURLの保存処理です。
ローカルストレージはブラウザ側でデータを保存する仕組みです。

var rs = $request_item;
localStorage.setItem("want_item_url",rs);
function doReloadNoCache() {
    // キャッシュを無視してサーバーからリロード
    window.location.reload(true);
}

上記の2行がローカルストレージ部分の保存処理

その下がリロード処理です。

購入したい商品はあるか判定する処理

では次に初期設定で設定した購入したい商品はあるかの判定処理書いていきます。

function cart(){
  if($this_url === $request_item){
    if($item_position === "1"){
      $item_position_css = "article:first-child";
    }else{
      $item_position_css = 'article:nth-child(' + $item_position + ')'; 
    }	
    console.log($item_position_css);
    $array = $($item_position_css + " .sold_out_tag").text();//nth-child(11)  article:first-child
    $($item_position_css).css("border","1px solid #000");
    var geturl = 'Global Scope';
    if($array === "sold out" ){
      // リロード処理呼び出し
      setTimeout(doReloadNoCache, 2000);
    }else if(!$('#container').html()){
      setTimeout(doReloadNoCache, 2000);
    }else{
      var item_name = $($item_position_css).find('img').attr('src');
      console.log(item_name);
      var getItemurl = $item_img_url;
      if(item_name === getItemurl){
        $find_url = $($item_position_css).find('a').attr('href');
        $base_url = "https://www.supremenewyork.com/";
        var geturl = $base_url+$find_url;
        // console.log($result);
        location.href = geturl;
        $this_url = window.location.href;
        localStorage.setItem("datalist", geturl);
      }else{
        setTimeout(doReloadNoCache, 3000);
      }
    }
  }
}
if ($this_url == 'https://www.supremenewyork.com/shop') {
  setTimeout(doReloadNoCache, 1000);
  location.href = $request_item;
  
}
cart();
var value = localStorage.getItem("datalist");

カートに入れる処理ここから

function mySize_set() {
  if($this_url === value){
    var url = location.href;
    // 自分のサイズを入力
    var want_value = $("select[name='size'] option").filter(function(index){
      return $(this).text() === $item_size;
    }).val();
    
    // サイズが入力されたら
    if(want_value){
      $('#size').val(want_value);
      console.log(want_value);
      setTimeout(function(){
        $("input.button").click();
      },100);
      setTimeout(function(){
        clickButton();
      },300);
      
    }
  }	       
}
mySize_set();
function clickButton(){
  $('.button.checkout')[0].click();
}

チェックアウトの処理ここから

if($this_url === "https://www.supremenewyork.com/checkout"){
   user_address();
   setTimeout(function(){
     $('input[name="order[terms]"]').prop("checked",true);
     $('input#cnb').val($card_number);
     $('select#credit_card_month').val($card_month);
     $('select#credit_card_year').val($card_year);
     $('input#vval').val($card_cvv);
   },300);
 }

これで、完全なチェックアウトはできませんが、商品の選択からチェックアウトの途中までの処理を書くことができました。
これをGoogle Chromeの拡張機能で読み込ませて実行させましょう。

最終的にクレジッドの種類と購入ボタンは自分で押します。

完全版のダウンロードはこちらから
ダウンロード