// -------------------------------------------------- // MakeShopからこのjsを読み込んでいます。 // -- // MakeShopのお気に入りは機能が少ない為、自社システムにお気に入り機能を作り、APIで連携させます。 // 試しに運用してみて、実用に耐えない場合は割り切ってMakeShopのお気に入り機能を使うことにします。 // -------------------------------------------------- // https://www.raku-den.net/kanri/rakudentools/tools/makeshop_wishlist/makeshop_wishlist.js // console.log("load makeshop wishlist manager"); // MakeShop用のウィッシュリスト const MakeShopWishListManager = {}; // 短縮名を定義 const MSWLM = MakeShopWishListManager; MSWLM.api_url = 'https://www.raku-den.net/kanri/rakudentools/tools/makeshop_wishlist/api', // MSWLM.shop_front_host = 'http://makeshop-ec.raku-den.net', MSWLM.shop_front_host = 'https://www.monokoti.net', MSWLM.page_keys = {}, MSWLM.page_keys.MYPAGE = "MYPAGE"; MSWLM.page_keys.FREEPAGE_WISHLIST = "FREEPAGE_WISHLIST"; MSWLM.page_keys.VIEW_ITEM = "VIEW_ITEM"; MSWLM.page_keys.OTHER = "OTHER"; MSWLM.wishlist = []; /** * 最速のタイミング */ MSWLM.run_1 = function() { console.log("MakeShopWishListManager - Run - 1"); MSWLM.page_key = MSWLM.pageJudgement(); console.log("page_key: " + MSWLM.page_key); // フリーページのお気に入り if (MSWLM.page_key == MSWLM.page_keys.FREEPAGE_WISHLIST) { // 商品リストを出すために商品情報を読み込み MSWLM.loadProductDict(); } } /** * お客様IDを取得できるタイミング */ MSWLM.run_2 = function() { console.log("MakeShopWishListManager - Run - 2"); // 現在のウィッシュリスト情報を取得 MSWLM.wishlist = MSWLM.getWishList(); console.log("-- お気に入り登録済みの商品 -----"); console.log(MSWLM.wishlist); console.log("-------"); } /** * DOMツリー作成後 */ MSWLM.run_DOMContentLoaded = function() { console.log("MakeShopWishListManager - Run - DOMContentLoaded"); // 基本タグを取得 MSWLM.make_tag.pickupTags(); // 商品ページの場合 if (MSWLM.page_key == MSWLM.page_keys.VIEW_ITEM) { // 商品情報を取得 let group = location.pathname.match(/^\/view\/item\/([^\/]+)/); const sys_item_code = group[1]; let is_wished = MSWLM.checkIsWished(sys_item_code); console.log("お気に入り状態: " + is_wished + " (" + sys_item_code + ")"); // お気に入り状態の切り替え const fav_icon = document.querySelector(".item-name-wrap .favorite a"); if (is_wished) { fav_icon.classList.add("active"); } // クリックアクションを追加 fav_icon.addEventListener("click", function(e) { // const is_wished = MSWLM.checkIsWished(sys_item_code); const is_wished = this.classList.contains("active"); if (is_wished) { MSWLM.changeWishMark(sys_item_code, false, function(resJson) { let resData = JSON.parse(resJson); fav_icon.classList.remove("active"); console.log("to not favorite"); }); } else { MSWLM.changeWishMark(sys_item_code, true, function(resJson) { let resData = JSON.parse(resJson); fav_icon.classList.add("active"); console.log("to favorite"); }); } }); // // タグを追加 // let tag = MSWLM.make_tag.view_item_wish_button(sys_item_code, is_wished); // // let target_tag = document.querySelector(".product-price-block"); // // target_tag.after(tag); // let target_tag = document.querySelector(".favorite"); // while(target_tag.lastChild){ // target_tag.removeChild(target_tag.lastChild); // } // target_tag.appendChild(tag); } // フリーページのお気に入りリストの場合 else if (MSWLM.page_key == MSWLM.page_keys.FREEPAGE_WISHLIST) { console.log("ウィッシュリスト"); // let list_area_tag = document.querySelector("#mswlm-wishlist-area .mswlm-wishlist-flex_container"); let list_area_tag = document.querySelector("ul.product-list.heart__product-list"); for (let sys_item_code of MSWLM.wishlist) { console.log("タグを生成: " + sys_item_code); let item_tag = MSWLM.make_tag.freepage_wishlist_item(sys_item_code); if (item_tag) { list_area_tag.append(item_tag); } } } // マイページ else if (MSWLM.page_key == MSWLM.page_keys.MYPAGE) { let header_menu_items = document.querySelectorAll("#order .headerNav.clearfix > .headerNav-link"); if (header_menu_items && header_menu_items.length == 4) { // https://www.monokoti.net/view/page/wishlist header_menu_items[3].querySelector("a").setAttribute("href", MSWLM.shop_front_host + "/view/page/wishlist"); } } } document.addEventListener('DOMContentLoaded', MSWLM.run_DOMContentLoaded); // /** // * On load // */ // MSWLM.run_onload = function() { // console.log("MakeShopWishListManager - Run - onload"); // } // window.onload = MSWLM.run_onload; /** * 現在表示しているページがどのページかを判定します * @returns page_key */ MSWLM.pageJudgement = function() { // マイページ // https://www.monokoti.net/ssl/ssl_confirm/confirm.html if (location.pathname == "/ssl/ssl_confirm/confirm.html") { return MSWLM.page_keys.MYPAGE; } // https://www.monokoti.net/ssl/ssl_idinfo/ssl_idinfo.html else if (location.pathname == "/ssl/ssl_idinfo/ssl_idinfo.html") { return MSWLM.page_keys.MYPAGE; } // https://www.monokoti.net/ssl/mypage/point.html else if (location.pathname == "/ssl/mypage/point.html") { return MSWLM.page_keys.MYPAGE; } // https://www.monokoti.net/ssl/mypage/favorite.html else if (location.pathname == "/ssl/mypage/favorite.html") { return MSWLM.page_keys.MYPAGE; } // フリーページのお気に入り else if (location.pathname == "/view/page/wishlist") { return MSWLM.page_keys.FREEPAGE_WISHLIST; } else if (location.pathname == "/view/page/wishlist_test") { return MSWLM.page_keys.FREEPAGE_WISHLIST; } // 商品ページ else if (location.pathname.match(/^\/view\/item\/([^\/]+)/g)) { return MSWLM.page_keys.VIEW_ITEM; } // その他 else { return MSWLM.page_keys.OTHER; } } /** * 対象の商品がお気に入り登録済みかどうかを取得します * @param {string} sys_item_code * @returns */ MSWLM.checkIsWished = function(sys_item_code) { return MSWLM.wishlist.includes(sys_item_code); } /** * 対象商品のお気に入り状態を切り替えます * @param {string} sys_item_code * @param {bool} is_to_wish * @param {function} callback */ MSWLM.changeWishMark = function(sys_item_code, is_to_wish, callback) { if (makeshop_member_id == "") { alert("お気に入り機能を使用するにはログインを行ってください。"); return; } let api_url = MSWLM.api_url + "?action=change_wish_mark"; let api_post_params = {}; api_post_params.makeshop_member_id = makeshop_member_id; api_post_params.sys_item_code = sys_item_code; api_post_params.is_to_wish = is_to_wish; let apiRes = MSWLM.apiPost(api_url, api_post_params, callback); }; // /** // * 画面上のお気に入りマークを更新します // * @param {string} sys_item_code // * @param {bool} is_wish // */ // MSWLM.displayUpdateWishMark = function(sys_item_code, is_wish) { // let to_wish_btns = document.querySelectorAll(".mswlm-to_wish[data-sys_item_code='"+sys_item_code+"']"); // let to_not_wish_btns = document.querySelectorAll(".mswlm-to_not_wish[data-sys_item_code='"+sys_item_code+"']"); // for (const n of to_wish_btns) { // if (is_wish) { // n.classList.add("mswlm-hide"); // } else { // n.classList.remove("mswlm-hide"); // } // } // for (const n of to_not_wish_btns) { // if (!is_wish) { // n.classList.add("mswlm-hide"); // } else { // n.classList.remove("mswlm-hide"); // } // } // } MSWLM.getWishList = function(callback) { if (makeshop_member_id == "") { console.log("user unknown."); return []; } let api_url = MSWLM.api_url + "?action=get_wishlist"; let res = MSWLM.ajax(api_url, { 'method': 'GET', 'async': false, 'get_params': { 'makeshop_member_id': makeshop_member_id, }, }); return JSON.parse(res); } /** * 商品情報のデータを取得 */ MSWLM.loadProductDict = function() { // TODO 後々、商品検索で取得するのではなくて、自社システムからAPIで取得するようにしたい。 let data_area_start_key = '========== PRODUCT DATA - START =========='; let data_area_end_key = '========== PRODUCT DATA - END =========='; // すべての商品を取得 // 最大ページ数 let max_page = 50; // 商品情報 MSWLM.product_dict = {}; // 商品を取得できるだけ取得 for (let i = 1; i <= max_page; i++) { let api_url = MSWLM.shop_front_host + "/view/search"; // console.log("product URL: " + api_url); let page_html = MSWLM.ajax(api_url, { 'method': 'GET', 'async': false, 'get_params': { // 'search_keyword': '', // 'search_price_low': '', // 'search_price_high': '', // 'search_category': '', // 'search_original_code': '', page: i, }, }); let data_area_start_key_idx = page_html.indexOf(data_area_start_key) + data_area_start_key.length; let data_area_end_key_idx = page_html.indexOf(data_area_end_key); let json_data = page_html.slice(data_area_start_key_idx, data_area_end_key_idx); let page_product_dict = JSON.parse(json_data); // console.log(page_product_dict); console.log("idx: " + i + " / " + max_page + " : " + Object.keys(page_product_dict).length + "件"); // 商品情報が無くなったら終了 if (Object.keys(page_product_dict).length == 0) { break; } // 商品情報を追加 for (const sys_item_code in page_product_dict) { MSWLM.product_dict[sys_item_code] = page_product_dict[sys_item_code]; } } // MSWLM.product_dict = JSON.parse(json_data); console.log("商品情報"); console.log(Object.keys(MSWLM.product_dict).length); // console.log(MSWLM.product_dict); // console.log(Object.keys(MSWLM.product_dict)); // console.log(Object.keys(MSWLM.product_dict).join(', ')); } /* -------------------------------------------------- * API共通 * -------------------------------------------------- */ MSWLM.ajax = function(url, options) { let method = ('method' in options) ? options.method.toUpperCase() : 'GET'; let async = (('async' in options) && !options.async) ? false : true; let get_params = ('get_params' in options) ? options.get_params : null; let post_params = ('post_params' in options) ? options.post_params : null; let success_callback = ('success_callback' in options) ? options.success_callback : null; let failed_callback = ('failed_callback' in options) ? options.failed_callback : null; // let headers = ('headers' in options) ? options.headers : null; let xhr = new XMLHttpRequest(); // コールバック xhr.onreadystatechange = function() { switch ( xhr.readyState ) { case 0: // 未初期化状態. // console.log( 'uninitialized!' ); break; case 1: // データ送信中. // console.log( 'loading...' ); break; case 2: // 応答待ち. // console.log( 'loaded.' ); break; case 3: // データ受信中. // console.log( 'interactive... '+xhr.responseText.length+' bytes.' ); break; case 4: // データ受信完了. if( xhr.status == 200 || xhr.status == 304 ) { if (success_callback != null) { success_callback(xhr.responseText, xhr); } } else { if (failed_callback != null) { failed_callback(xhr.responseText, xhr); } } break; } }; // GETパラメータがある場合 if (get_params) { // ?が入っていない場合は追加する if (url.indexOf('?') < 0) { url += '?'; } // GETパラメータがすでにある場合は&を追加する if (url.lastIndexOf('?') < (url.length - 1)) { url += '&'; } add_params = []; for (let get_param_key in get_params) { add_params.push(get_param_key + "=" + encodeURI(get_params[get_param_key])); } url += add_params.join('&'); } // open xhr.open(method, url, async); if (method == 'GET') { xhr.send(); } else if (method == 'POST') { xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8'); let post_data_text = ""; for (let param_key in post_params) { if (post_data_text != "") { post_data_text += "&"; } post_data_text += param_key + '=' + encodeURIComponent(post_params[param_key]); } xhr.send(post_data_text); } // 同期処理の場合はレスポンスをそのまま返却する if (!async) { return xhr.responseText; } } /** * POST送信 * @param {string} url APIのURL * @param {Array} params POSTパラメータ * @returns */ MSWLM.apiPost = function(url, params, callback_success=null, options={}) { let is_async = (('is_sync' in options) && options.is_sync) ? false : true; let req = new XMLHttpRequest(); let _callback_success = callback_success; req.onreadystatechange = function() { switch ( req.readyState ) { case 0: // 未初期化状態. // console.log( 'uninitialized!' ); break; case 1: // データ送信中. // console.log( 'loading...' ); break; case 2: // 応答待ち. // console.log( 'loaded.' ); break; case 3: // データ受信中. // console.log( 'interactive... '+req.responseText.length+' bytes.' ); break; case 4: // データ受信完了. if( req.status == 200 || req.status == 304 ) { if (_callback_success != null) { _callback_success(req.responseText); } } else { console.log("API Failed."); console.log(req.statusText); } break; } }; req.open('POST', url, is_async); // req.setRequestHeader("Content-Type", "application/json"); // req.send(JSON.stringify(params)); req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8'); let post_data_text = ""; for (let param_key in params) { if (post_data_text != "") { post_data_text += "&"; } post_data_text += param_key + '=' + encodeURIComponent(params[param_key]); } req.send(post_data_text); return req; } /* -------------------------------------------------- * トリガー * -------------------------------------------------- */ // MSWLM.onClickToWish = function() { // let sys_item_code = this.dataset.sys_item_code; // MSWLM.changeWishMark(sys_item_code, true, function(resJson) { // let resData = JSON.parse(resJson); // MSWLM.displayUpdateWishMark(resData.sys_item_code, resData.is_wish); // }); // }; // MSWLM.onClickToNotWish = function() { // let sys_item_code = this.dataset.sys_item_code; // MSWLM.changeWishMark(sys_item_code, false, function(resJson) { // let resData = JSON.parse(resJson); // MSWLM.displayUpdateWishMark(resData.sys_item_code, resData.is_wish); // }); // }; /* -------------------------------------------------- * タグ作成系 * -------------------------------------------------- */ MSWLM.make_tag = {}; // MSWLM.make_tag.view_item_wish_button_base_tag = null; MSWLM.make_tag.freepage_wishlist_item_base_tag = null; // MSWLM.make_tag.mypage_favorite_item = null; MSWLM.make_tag.pickupTags = function() { // if (document.getElementById("mswlm-parts-view-item-wish-button") != null) { // MSWLM.make_tag.view_item_wish_button_base_tag = document.getElementById("mswlm-parts-view-item-wish-button").cloneNode(true); // MSWLM.make_tag.view_item_wish_button_base_tag.id = undefined; // document.getElementById("mswlm-parts-view-item-wish-button").remove(); // } // if (document.getElementById("mswlm-parts-freepage-wishlist-item") != null) { // MSWLM.make_tag.freepage_wishlist_item_base_tag = document.getElementById("mswlm-parts-freepage-wishlist-item").cloneNode(true); // MSWLM.make_tag.freepage_wishlist_item_base_tag.id = undefined; // document.getElementById("mswlm-parts-freepage-wishlist-item").remove(); // } // if (document.getElementById("mswlm-parts-mypage-favorite-item") != null) { // MSWLM.make_tag.mypage_favorite_item = document.getElementById("mswlm-parts-mypage-favorite-item").cloneNode(true); // MSWLM.make_tag.mypage_favorite_item.id = undefined; // document.getElementById("mswlm-parts-mypage-favorite-item").remove(); // } if (MSWLM.page_key == MSWLM.page_keys.FREEPAGE_WISHLIST) { const parser = new DOMParser(); const dom = parser.parseFromString(MSWLM.make_tag.freepage_wishlist_item_base_tag_text, 'text/html').body.firstChild; MSWLM.make_tag.freepage_wishlist_item_base_tag = dom; } }; MSWLM.make_tag.freepage_wishlist_item_base_tag_text = ' \
  • \
    \ \ \ Soldout \ \
    \ %OFF \
    \ \
    \ \
    \ \ \ \
    \
    \ ¥xxx,xxx,xxx \
    \
    \ \ カートに入れる \ \
    \
  • \ '; // /** // * // * @param {string} sys_item_code // * @param {bool} is_wished // * @returns // */ // MSWLM.make_tag.view_item_wish_button = function(sys_item_code, is_wished) { // let tag = MSWLM.make_tag.view_item_wish_button_base_tag.cloneNode(true); // let to_wish_tag = tag.querySelector(".mswlm-to_wish"); // let to_not_wish_tag = tag.querySelector(".mswlm-to_not_wish"); // // お気に入り済みかの切り替え // if (is_wished) { // to_wish_tag.classList.add("mswlm-hide"); // to_not_wish_tag.classList.remove("mswlm-hide"); // } else { // to_wish_tag.classList.remove("mswlm-hide"); // to_not_wish_tag.classList.add("mswlm-hide"); // } // // データ登録 // to_wish_tag.dataset.sys_item_code = sys_item_code; // to_not_wish_tag.dataset.sys_item_code = sys_item_code; // // OnClick登録 // to_wish_tag.addEventListener('click', MSWLM.onClickToWish); // to_not_wish_tag.addEventListener('click', MSWLM.onClickToNotWish); // // タグを返す // return tag; // }; /** * * @param {string} sys_item_code * @returns */ MSWLM.make_tag.freepage_wishlist_item = function(sys_item_code) { console.log("sys_item_code:" + sys_item_code); console.log("-- product_dict --"); console.log(MSWLM.product_dict[sys_item_code]); console.log("--"); if (MSWLM.product_dict[sys_item_code] == undefined) { console.log("商品情報が見つかりませんでした。販売終了商品である可能性があります。"); return; } let prod_info = MSWLM.product_dict[sys_item_code]; let tag = MSWLM.make_tag.freepage_wishlist_item_base_tag.cloneNode(true); console.log(tag); tag.querySelector(".product-item-link").setAttribute('href', prod_info.url); tag.querySelector(".product-item-image").setAttribute('src', prod_info.image_S); tag.querySelector(".product-item-name").textContent = prod_info.name; tag.querySelector(".product-item-price").textContent = Number(prod_info.price).toLocaleString(); tag.querySelector(".product-item-cart-entry").setAttribute('href', prod_info.cart_entry_url); let fav_icon = tag.querySelector(".favorite a"); fav_icon.dataset.sys_item_code = sys_item_code; // クリックアクションを追加 fav_icon.addEventListener("click", function(e) { if (sys_item_code == undefined) { console.log("sys_item_code is undefined."); return; } // const is_wished = MSWLM.checkIsWished(sys_item_code); const is_wished = this.classList.contains("active"); if (is_wished) { MSWLM.changeWishMark(sys_item_code, false, function(resJson) { let resData = JSON.parse(resJson); fav_icon.classList.remove("active"); console.log("to not favorite"); }); } else { MSWLM.changeWishMark(sys_item_code, true, function(resJson) { let resData = JSON.parse(resJson); fav_icon.classList.add("active"); console.log("to favorite"); }); } }); // セール判定 if (prod_info.is_sale) { tag.classList.add("is_sale"); tag.querySelector(".product-item-sale-rate").textContent = prod_info.sale_rate + tag.querySelector(".product-item-sale-rate").textContent; } else { tag.classList.remove("is_sale"); // 非表示にする // tag.querySelector(".badge-sale").style.display = "none"; } // 売り切れ判定 if (prod_info.is_soldout) { tag.classList.add("is_soldout"); } else { tag.classList.remove("is_soldout"); } // tag.querySelector(".mswlm-item-name").textContent = MSWLM.product_dict[sys_item_code].name; // tag.querySelector(".mswlm-item-img").setAttribute('src', MSWLM.product_dict[sys_item_code].image_S); // tag.querySelector(".mswlm-item-price").textContent = Number(MSWLM.product_dict[sys_item_code].price).toLocaleString(); // tag.querySelector(".mswlm-item-cart_url").setAttribute('href', MSWLM.product_dict[sys_item_code].cart_entry_url); // for (const n of tag.querySelectorAll(".mswlm-item-detail_url")) { // n.setAttribute('href', MSWLM.product_dict[sys_item_code].url); // } // // お気に入り済みかの切り替え // let is_wished = MSWLM.checkIsWished(sys_item_code); // let to_wish_tag = tag.querySelector(".mswlm-to_wish"); // let to_not_wish_tag = tag.querySelector(".mswlm-to_not_wish"); // if (is_wished) { // to_wish_tag.classList.add("mswlm-hide"); // to_not_wish_tag.classList.remove("mswlm-hide"); // } else { // to_wish_tag.classList.remove("mswlm-hide"); // to_not_wish_tag.classList.add("mswlm-hide"); // } // // データ登録 // to_wish_tag.dataset.sys_item_code = sys_item_code; // to_not_wish_tag.dataset.sys_item_code = sys_item_code; // // OnClick登録 // to_wish_tag.addEventListener('click', MSWLM.onClickToWish); // to_not_wish_tag.addEventListener('click', MSWLM.onClickToNotWish); return tag; } // /** // * // * @param {string} sys_item_code // */ // MSWLM.make_tag.mypage_favorite_item = function(sys_item_code) { // console.log(MSWLM.product_dict); // console.log(MSWLM.product_dict[sys_item_code]); // let tag = MSWLM.make_tag.freepage_wishlist_item_base_tag.cloneNode(true); // return tag; // } // -------------------------------------------------- // /** // * ページ読み込み後に実行 // */ // window.onload = function() { // MSWLM.start(); // } MSWLM.run_1();