@blux.ai/web-sdk 2.2.12 → 2.2.14

package/scripts/cafe24/dist/custom_scripts/nerdy.js

@@ -0,0 +1,734 @@
+import { BluxClient, AddCustomEvent, AddProductDetailViewEvent, UserRec, ItemRelatedRec, } from "@blux.ai/web-sdk";
+const applicationId = "67583cfeef849a320553be6c";
+const bluxApiKey = "oCpWEtItYbYoC1E0fBHTgFG55W5oNxV3x7qXRm-5z6c";
+const bluxClient = new BluxClient({ applicationId, bluxApiKey });
+const cafe24Client = CAFE24API.init({
+    client_id: "gRSxaEXKARIpFrRcpAEhJB",
+    version: "2023-06-01",
+});
+const useItemRecommendation = true; // 상품 추천을 사용하는 경우 지표 수집을 위해 true로 변경
+const BLUX_ATTRIBUTES = {
+    section: "blux-section",
+    recommendation_id: "blux-rec-id",
+};
+const HOMEPAGE_FROM = "homepage";
+const HOMEPAGE_REC_REQUEST_LIMIT = 18;
+const HOMEPAGE_ITEMS_TO_SHOW = 2;
+const SESSION_STORAGE_PREV_SECTION_KEY = "prev_section";
+const SESSION_STORAGE_RECOMMENDATION_ID_KEY = "recommendation_id";
+const SESSION_STORAGE_BLUX_ENTER_PDP_FROM_CATEGORY_PAGE_KEY = "blux_enter_pdp_from_category_page";
+const SESSION_STORAGE_BLUX_CATEGORY_REC_REJECT_TIMESTAMP_KEY = "blux_category_rec_reject_timestamp";
+const SESSION_STORAGE_BLUX_RECENTLY_CLICKED_ITEM_ID_FROM_CATEGORY_PAGE_KEY = "blux_recently_clicked_item_id_from_category_page";
+const LOCAL_STORAGE_BLUX_REF_KEY = "blux_ref";
+const CATEGORY_FROM = "category_page";
+const PRODUCT_DETAIL_PAGE_PATH = "/product/detail";
+const PRODUCT_LIST_PAGE_PATH = "/product/list";
+const ORDER_FORM_PAGE_PATH = "/order/orderform";
+// Recommendation Call Types
+const HOMEPAGE_CALL_TYPE = "user-recommendations";
+const PRODUCT_DETAIL_PAGE_CLOTHING_CALL_TYPE = "related-items-clothing";
+const PRODUCT_DETAIL_PAGE_HOODY_CALL_TYPE = "related-items-hoodysweater";
+const PRODUCT_DETAIL_PAGE_ACCESSORY_CALL_TYPE = "related-items-accessory";
+const CATEGORY_PAGE_CALL_TYPE = "category-recommendations";
+const OTHER_CATEGORY_FROM = "product_detail_page-other_category";
+const SAME_CATEGORY_FROM = "product_detail_page-same_category";
+const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
+const PRODUCT_DETAIL_PAGE_ITEMS_TO_SHOW = 7;
+const CATEGORY_PAGE_ITEMS_TO_SHOW = 6;
+const CAROUSEL_ITEM_DISTANCE = 20;
+const SAME_CATEGORY_TITLE = "지금 주목해야 할 BEST";
+const OTHER_CATEGORY_TITLE = "함께 보면 좋은 상품";
+async function getCustomerIDInfo() {
+    return await new Promise((resolve, reject) => {
+        cafe24Client.getCustomerIDInfo((error, data) => {
+            if (error) {
+                return reject(error);
+            }
+            resolve(data.id);
+        });
+    });
+}
+function getAllParentNodes(node) {
+    const parents = [];
+    let currentNode = node;
+    while (currentNode.parentNode) {
+        currentNode = currentNode.parentNode;
+        parents.push(currentNode);
+    }
+    return parents;
+}
+function handleSectionClick(event) {
+    const clickedElement = event.target;
+    const recSectionElements = Array.from(document.querySelectorAll(`[${BLUX_ATTRIBUTES.section}]`));
+    const allParentNodes = getAllParentNodes(clickedElement);
+    const clickedRecSectionElement = recSectionElements.find((el) => allParentNodes.includes(el));
+    if (clickedRecSectionElement) {
+        const prevSection = clickedRecSectionElement.getAttribute(BLUX_ATTRIBUTES.section);
+        const recommendationId = clickedRecSectionElement.getAttribute(BLUX_ATTRIBUTES.recommendation_id);
+        if (prevSection) {
+            sessionStorage.setItem(SESSION_STORAGE_PREV_SECTION_KEY, prevSection);
+        }
+        if (recommendationId) {
+            sessionStorage.setItem(SESSION_STORAGE_RECOMMENDATION_ID_KEY, recommendationId);
+        }
+    }
+    else {
+        sessionStorage.removeItem(SESSION_STORAGE_PREV_SECTION_KEY);
+        sessionStorage.removeItem(SESSION_STORAGE_RECOMMENDATION_ID_KEY);
+    }
+}
+function getItemIdOnProductDetailPage() {
+    const searchParams = new URLSearchParams(window.location.search);
+    return (searchParams.get("product_no") ??
+        document
+            .querySelector('meta[property="product:productId"]')
+            ?.getAttribute("content") ??
+        null);
+}
+const getCartAddMutationObserver = function (type) {
+    return new MutationObserver((mutations) => {
+        const cartAddConfirmLayer = Array.from(document.querySelectorAll("div.content")).filter((el) => el.outerText.includes("장바구니 담기가 완료되었습니다."));
+        const isCartAdded = cartAddConfirmLayer.length === 1;
+        if (isCartAdded) {
+            if (type === "mobile") {
+                document.getElementsByClassName("action_up")[0].className = "action_up";
+                document.getElementById("fog").style.display = "none";
+                Array.from(document.getElementsByClassName("close_popup")).forEach((el) => el.addEventListener("click", () => {
+                    document.body.style.position = "static";
+                }));
+            }
+        }
+    });
+};
+const calculateDiscountRate = function (originalPrice, discountPrice) {
+    return ((originalPrice - discountPrice) / originalPrice) * 100;
+};
+async function collectEvents() {
+    try {
+        const customerIDInfo = await getCustomerIDInfo();
+        const userId = customerIDInfo.member_id;
+        if (userId) {
+            await bluxClient.signIn(userId);
+        }
+        // 상품 추천을 사용하는 경우에만 추천 구좌에 대한 클릭 이벤트 리스너 등록
+        if (useItemRecommendation) {
+            document.addEventListener("click", handleSectionClick);
+        }
+        const { pathname } = window.location;
+        const searchParams = new URLSearchParams(window.location.search);
+        const categoryNo = searchParams.get("cate_no");
+        const isProductDetailPage = pathname.includes(PRODUCT_DETAIL_PAGE_PATH);
+        const isCategoryPage = pathname.includes(PRODUCT_LIST_PAGE_PATH) && categoryNo;
+        const isOrderFormPage = pathname.includes(ORDER_FORM_PAGE_PATH);
+        /* NERDY Specific */
+        // 카테고리 페이지 이외의 페이지 진입 시
+        // 또는
+        // 상품 상세 페이지 -> 카테고리 페이지 진입이 아닌 경우
+        // '카테고리 페이지에서 왔는지' 여부 초기화
+        if (!isCategoryPage ||
+            !localStorage
+                .getItem(LOCAL_STORAGE_BLUX_REF_KEY)
+                ?.includes(PRODUCT_DETAIL_PAGE_PATH)) {
+            sessionStorage.setItem(SESSION_STORAGE_BLUX_ENTER_PDP_FROM_CATEGORY_PAGE_KEY, "false");
+        }
+        if (isProductDetailPage) {
+            // Cafe24 상품 상세 페이지
+            const itemId = getItemIdOnProductDetailPage();
+            const recommendationId = sessionStorage.getItem(SESSION_STORAGE_RECOMMENDATION_ID_KEY) ??
+                undefined;
+            if (recommendationId) {
+                sessionStorage.removeItem(SESSION_STORAGE_RECOMMENDATION_ID_KEY);
+            }
+            const prevSection = sessionStorage.getItem(SESSION_STORAGE_PREV_SECTION_KEY) ?? undefined;
+            if (prevSection) {
+                sessionStorage.removeItem(SESSION_STORAGE_PREV_SECTION_KEY);
+            }
+            if (itemId) {
+                bluxClient.sendEvent(new AddProductDetailViewEvent({
+                    item_id: itemId,
+                    recommendation_id: recommendationId,
+                    prev_section: prevSection,
+                }));
+                /* NERDY Specific */
+                // 카테고리 페이지 추천에 사용될 '최근 본 상품' 정보 저장
+                // 카테고리 페이지 추천 구좌를 통해 진입한 경우에는 (카테고리 페이지 추천 구좌 유지를 위해) '최근 본 상품' 정보 갱신 생략
+                if (localStorage
+                    .getItem(LOCAL_STORAGE_BLUX_REF_KEY)
+                    ?.includes(PRODUCT_LIST_PAGE_PATH) &&
+                    prevSection !== "category_page") {
+                    sessionStorage.setItem(SESSION_STORAGE_BLUX_RECENTLY_CLICKED_ITEM_ID_FROM_CATEGORY_PAGE_KEY, itemId);
+                }
+                /* NERDY Specific */
+                // 카테고리 페이지에서 왔는지 여부 저장
+                const isEnterPdpFromCategoryPage = localStorage
+                    .getItem(LOCAL_STORAGE_BLUX_REF_KEY)
+                    ?.includes(PRODUCT_LIST_PAGE_PATH)
+                    ? "true"
+                    : "false";
+                sessionStorage.setItem(SESSION_STORAGE_BLUX_ENTER_PDP_FROM_CATEGORY_PAGE_KEY, isEnterPdpFromCategoryPage);
+            }
+        }
+        else if (isOrderFormPage) {
+            // Cafe24 주문서 페이지
+            bluxClient.sendEvent(new AddCustomEvent({
+                event_type: "orderform_view",
+                event_properties: {},
+            }));
+        }
+    }
+    catch (error) {
+        console.error("[BluxClient] Error during initialization and event handling.", error);
+    }
+}
+const fetchProductsInfo = (item_ids) => {
+    const productNoQueries = item_ids.join(",");
+    return new Promise((resolve, reject) => {
+        CAFE24API.get(`/api/v2/products?embed=discountprice,variants&fields=discountprice,product_no,product_name,detail_image,list_image,small_image,price,sold_out,variants&product_no=${productNoQueries}&display=T&selling=T&limit=50`, (err, response) => {
+            if (err) {
+                reject(err);
+            }
+            else {
+                resolve(response.products);
+            }
+        });
+    });
+};
+const fetchProductInfo = (item_id) => {
+    return new Promise((resolve, reject) => {
+        CAFE24API.get(`/api/v2/products/${item_id}?fields=product_no,category&display=T&selling=T`, (err, response) => {
+            if (err) {
+                reject(err);
+            }
+            else {
+                resolve(response.product);
+            }
+        });
+    });
+};
+const getPrimaryCategory = function (categoryNos) {
+    const ACCESSORY_CATEGORIES = [201, 54, 200, 42, 132, 70, 123];
+    const isAccessory = ACCESSORY_CATEGORIES.some((el) => categoryNos.includes(el));
+    if (isAccessory)
+        return "accessory";
+    return "clothing";
+};
+const getProductsInfo = async (item_ids) => {
+    const products = await fetchProductsInfo(item_ids);
+    return item_ids
+        .map((item_id) => products.find((p) => p.product_no.toString() === item_id))
+        .filter((p) => p !== undefined);
+};
+const getTimestampDiff = (timestampString) => {
+    const now = new Date();
+    const diff = now.getTime() - parseInt(timestampString, 10);
+    return diff;
+};
+const getMobileSlideTemplate = function (title, productInfos, from, recommendationId) {
+    const carouselMobileTemplate = document.createElement("div");
+    carouselMobileTemplate.innerHTML = `<div style="
+      display: flex;
+      flex-direction: column;
+      width: calc(100% - 20px);
+      margin: auto;
+      user-select:none;
+      margin-top:35px;
+      margin-bottom:40px;
+      margin-left: 20px;
+      letter-spacing: -0.2px;
+    ">
+    <span style="margin-bottom:20px; font-size:17px; font-weight:600;">${title}</span>
+    <div class="blux-mobile-slide" style="position:relative; width:100%; margin:auto; overflow:auto; padding-bottom:30px;">
+    <div style="display:flex; width: 400%; flex-direction:row;" ${BLUX_ATTRIBUTES.section}="${from}" ${BLUX_ATTRIBUTES.recommendation_id}="${recommendationId}">
+          ${productInfos.slice(0, 10).map((el) => `<a style="width:19%; margin-right: 1%; height:100%; display: flex; flex-direction: column;" href="/product/detail.html?product_no=${el.product_no}&from=${from}&recommendationId=${recommendationId}">
+              <img style="width:100%; height: 100%; margin-bottom:16px;" src="${el.small_image}" />
+              <span style="color:#555555; width:100%; font-size: 13px; font-weight:400; height:32px; overflow:hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical;  -webkit-line-clamp: 2; margin-bottom:15px;">${el.product_name}</span>
+              <div style="display:flex; flex-direction:row; font-size: 13px; font-weight:500">
+                  <span style="color: #FF2E00; margin-right:4px; display: ${calculateDiscountRate(el.price, el.discountprice["mobile_discount_price"]) !== 0
+        ? "block"
+        : "none"}">${calculateDiscountRate(el.price, el.discountprice["mobile_discount_price"]).toFixed()}%</span>
+                  <span>${Number(el.discountprice["mobile_discount_price"]).toLocaleString("en")}원</span>
+              </div>
+              </a>`)}
+          </div>
+      </div>
+    </div>
+    `.replaceAll("</a>,", "</a>");
+    return carouselMobileTemplate;
+};
+const getMobileHomepageSlideTemplate = function (productInfos, recommendationId, deviceType) {
+    const carouselMobileTemplate = document.createElement("div");
+    carouselMobileTemplate.innerHTML = `<ul class="prdNeo">
+  
+  <div id="blux-mobile-homepage-carousel-container" ${BLUX_ATTRIBUTES.section}="${HOMEPAGE_FROM}" ${BLUX_ATTRIBUTES.recommendation_id}="${recommendationId}">
+    ${Array.from({ length: HOMEPAGE_REC_REQUEST_LIMIT / HOMEPAGE_ITEMS_TO_SHOW }, (_, index) => `<div id="blux-mobile-homepage-carousel-${index + 1}" style="display:${index === 0 ? "" : "none"};>
+        ${productInfos
+        .slice(index * HOMEPAGE_ITEMS_TO_SHOW, (index + 1) * HOMEPAGE_ITEMS_TO_SHOW)
+        .map((el) => `<li id="anchorBoxId_${el.product_no}" class="pList xans-record-">
+                <div class="box" style="display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin-bottom: 8px;">
+                  <div class="thumbnail on">
+                  ${deviceType === "mobile"
+        ? `<a
+                      href="/product/detail.html?product_no=${el.product_no}&from=${HOMEPAGE_FROM}&recommendationId=${recommendationId}"
+                      ><img
+                        src="${el.detail_image}"
+                      />
+                    </a>`
+        : `<a href="/skin-skin38/product/detail.html?product_no=${el.product_no}&from=${HOMEPAGE_FROM}&recommendationId=${recommendationId}"><img src="${el.detail_image}" /></a>`}
+                  </div>
+                  <div class="description">
+                    ${deviceType === "mobile"
+        ? `<strong class="name product_name" style="display: block; line-height: 1.3; word-wrap: break-word; margin: 0 0 7px;">
+                            <a
+                              href="/product/detail.html?product_no=${el.product_no}&from=${HOMEPAGE_FROM}&recommendationId=${recommendationId}"
+                              style="display: inline; color: #1b1b1b;"
+                            >${el.product_name}</a>
+                          </strong>`
+        : `<div class="name">
+                            <a
+                              href="/skin-skin38/product/detail.html?product_no=${el.product_no}&from=${HOMEPAGE_FROM}&recommendationId=${recommendationId}"
+                              class="product_name"
+                              style="display: inline"
+                            >${el.product_name}</a>
+                          </div>`}
+                    <div class="priceGroup">
+                      <div class="dc_rate rate50" style="display: ${calculateDiscountRate(el.price, el.discountprice["mobile_discount_price"]) !== 0
+        ? "block"
+        : "none"}">${calculateDiscountRate(el.price, el.discountprice["mobile_discount_price"]).toFixed()}%</div>
+                      <div class="prs prsBold">${Number(el.discountprice["mobile_discount_price"]).toLocaleString("en")}<span>원</span></div>
+                      <div class="prs prsLine">${Number(el.price).toLocaleString("en")}<span>원</span></div>
+                    </div>
+                    <div class="ico_wish">
+                      <img
+                        src="/web/upload/icon_202409121050358700.png"
+                        class="icon_img ec-product-listwishicon"
+                        alt="관심상품 등록 전"
+                        productno="${el.product_no}"
+                        icon_status="off"
+                        login_status="T"
+                        individual-set="F"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </li>`)}
+      </div>`)}
+  </div>
+  </ul>
+      `
+        .replaceAll("</a>,", "</a>")
+        .replaceAll(",<li", "<li")
+        .replaceAll("</div>,", "</div>");
+    return carouselMobileTemplate;
+};
+export const getMobileCategoryPageSlideTemplate = function (productInfos, recommendationId) {
+    const carouselMobileTemplate = document.createElement("div");
+    carouselMobileTemplate.innerHTML = `<div
+    class="blux-mobile-category-page-slide"
+    style="
+      display: flex;
+      flex-direction: column;
+      width: calc(100% - 20px);
+      user-select:none;
+      padding-left: 20px;
+      letter-spacing: -0.2px;
+      overflow: hidden;
+      max-height: 0;
+      transition: max-height 0.3s ease-in-out;
+    ">
+      <div style="display: flex; justify-content:space-between; align-items: center; width: 100%; margin-bottom:12px;">
+        <span style="font-size:16px; font-weight:500; line-height:30px;">이런 상품은 어떠세요?</span>  
+        <div id="blux-mobile-category-page-slide-close-button" style="display: flex; align-items: center;">
+          <span style="font-size:12px; font-weight:300; color:#999999; margin-right:6px;">하루 동안 닫기</span>
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <line x1="3" y1="3" x2="21" y2="21" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
+            <line x1="3" y1="21" x2="21" y2="3" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </div>
+      <div class="blux-mobile-slide" style="position:relative; width:100%; margin:auto; overflow:auto; padding-bottom:30px;">
+        <div style="display:flex; width: 190%; flex-direction:row;" ${BLUX_ATTRIBUTES.section}="${CATEGORY_FROM}" ${BLUX_ATTRIBUTES.recommendation_id}="${recommendationId}">
+          ${productInfos.slice(0, CATEGORY_PAGE_ITEMS_TO_SHOW).map((el) => `<a style="width:30%; margin-right: 1%; height:100%; display: flex; flex-direction: column;" href="/product/detail.html?product_no=${el.product_no}&from=${CATEGORY_FROM}&recommendationId=${recommendationId}">
+                <img style="width:100%; height: 100%; margin-bottom:10px;" src="${el.small_image}" />
+                <span style="color:#555555; width:100%; font-size: 12px; font-weight:300; height: 12px; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical;  -webkit-line-clamp: 1; line-height: 12px; overflow: hidden; margin-bottom: 10px;">${el.product_name}</span>
+                <div style="display:flex; flex-direction:row; font-size: 13px; font-weight:600; line-height: 13px;">
+                    <span style="color: #FF2E00; margin-right:4px; display: ${calculateDiscountRate(el.price, el.discountprice["mobile_discount_price"]) !== 0
+        ? "block"
+        : "none"}">${calculateDiscountRate(el.price, el.discountprice["mobile_discount_price"]).toFixed()}%</span>
+                    <span>${Number(el.discountprice["mobile_discount_price"]).toLocaleString("en")}원</span>
+                </div>
+              </a>`)}
+          </div>
+        </div>
+      </div>
+    </div>
+    `
+        .replaceAll("</a>,", "</a>")
+        .replaceAll("</div>,", "</div>");
+    return carouselMobileTemplate;
+};
+const getPcCarouselTemplate = function (sameCategoryRecProdInfo, sameCategoryRecId, otherCategoryRecProdInfo, otherCategoryRecId) {
+    const pcCarouselTemplate = document.createElement("div");
+    const displayedSameCategoryProducts = sameCategoryRecProdInfo.map((el, idx) => ({ info: el, index: idx }));
+    const displayedOtherCategoryProducts = otherCategoryRecProdInfo.map((el, idx) => ({ info: el, index: idx }));
+    pcCarouselTemplate.innerHTML = `<div style="
+    display: flex;
+      flex-direction: column;
+      width: auto;
+      margin: auto;
+      user-select: none;
+      margin-top: 80px;
+      padding: 0 30px;
+    ">
+    <div style="display: flex; margin-bottom:20px; font-size:20px; font-weight:600; display: inline">
+        <span id="blux-tab1-button" style="margin-right: 22px; font-size:20px; font-weight:600; cursor:pointer">${SAME_CATEGORY_TITLE}</span>
+        <span id="blux-tab2-button" style="font-size:20px; font-weight:600; color: #999999; cursor:pointer">${OTHER_CATEGORY_TITLE}</span>
+    </div>
+
+    <div id="blux-container" style="position:relative; width:98%; overflow:hidden; padding-left:20px">
+      <div id="blux-prevButton" style="position:absolute; top:35%; left:0; z-index: 1; background-color: rgba(0,0,0,0.5);
+      width: 36px;
+      height: 36px;
+      border-radius: 50px;
+      opacity: 0.5;
+      display: none;
+      justify-content: center;
+      align-items: center;
+      cursor:pointer">
+          <svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7073 0.292893C12.0978 0.683417 12.0978 1.31658 11.7073 1.70711L3.41436 10L11.7073 18.2929C12.0978 18.6834 12.0978 19.3166 11.7073 19.7071C11.3167 20.0976 10.6836 20.0976 10.293 19.7071L0.585938 10L10.293 0.292893C10.6836 -0.0976311 11.3167 -0.0976311 11.7073 0.292893Z" fill="white"/>
+          </svg>
+      </div>
+      <div id="blux-nextButton" style="position:absolute; top:35%; right:0; z-index: 1; background-color: rgba(0,0,0,0.5);
+      width: 36px;
+      height: 36px;
+      border-radius: 50px;
+      opacity: 0.5;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor:pointer">
+          <svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.292742 19.7071C-0.0977821 19.3166 -0.097782 18.6834 0.292742 18.2929L8.58564 10L0.292743 1.7071C-0.0977805 1.31658 -0.0977804 0.683415 0.292743 0.292891C0.683268 -0.0976324 1.31643 -0.0976323 1.70696 0.292892L11.4141 10L1.70696 19.7071C1.31643 20.0976 0.683267 20.0976 0.292742 19.7071Z" fill="white"/>
+          </svg>
+      </div>
+      <div id="blux-carousel" ${BLUX_ATTRIBUTES.section}="${SAME_CATEGORY_FROM}" ${BLUX_ATTRIBUTES.recommendation_id}="${sameCategoryRecId}" style="width:100%; height:100%; display:flex; flex-direction:row; transition: transform 0.5s ease-in-out";>
+          ${displayedSameCategoryProducts.map((el) => `<a class="blux-carousel-item" style="flex: 0 0 calc((100% - ${CAROUSEL_ITEM_DISTANCE * (PRODUCT_DETAIL_PAGE_ITEMS_TO_SHOW - 1)}px) / ${PRODUCT_DETAIL_PAGE_ITEMS_TO_SHOW}); margin-right: ${CAROUSEL_ITEM_DISTANCE}px; height:100%; display: flex; flex-direction: column;" href="/product/detail.html?product_no=${el.info.product_no}&from=${SAME_CATEGORY_FROM}&recommendationId=${sameCategoryRecId}">
+                <img style="width:100%; height: 100%; margin-bottom:16px;" src="${el.info.small_image}" alt="Z.Ai 퍼스널MD 추천 상품 / 상품명 : ${el.info.product_name}"/>
+                <span style="color:#555555; font-size: 14px; font-weight:400; padding-bottom:12px; line-height:21px; height:40px;">${el.info.product_name}</span>
+                <div style="display:flex; flex-direction:row; font-size: 15px; font-weight:500">
+                    <span style="color: #FF2E00; margin-right:4px; display: ${calculateDiscountRate(el.info.price, el.info.discountprice["pc_discount_price"]) !== 0
+        ? "block"
+        : "none"}">${calculateDiscountRate(el.info.price, el.info.discountprice["pc_discount_price"]).toFixed()}%</span>
+                    <span>${Number(el.info.discountprice["pc_discount_price"]).toLocaleString("en")}원</span>
+                </div>
+              </a>`)}
+      </div>
+    </div>
+
+    <div id="blux-container2" style="position:relative; width:98%; overflow:hidden; padding-left:20px; display:none">
+      <div id="blux-prevButton2" style="position:absolute; top:35%; left:0; z-index: 1; background-color: rgba(0,0,0,0.5);
+      width: 36px;
+      height: 36px;
+      border-radius: 50px;
+      opacity: 0.5;
+      display: none;
+      justify-content: center;
+      align-items: center;
+      cursor:pointer">
+          <svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7073 0.292893C12.0978 0.683417 12.0978 1.31658 11.7073 1.70711L3.41436 10L11.7073 18.2929C12.0978 18.6834 12.0978 19.3166 11.7073 19.7071C11.3167 20.0976 10.6836 20.0976 10.293 19.7071L0.585938 10L10.293 0.292893C10.6836 -0.0976311 11.3167 -0.0976311 11.7073 0.292893Z" fill="white"/>
+          </svg>
+      </div>
+      <div id="blux-nextButton2" style="position:absolute; top:35%; right:0; z-index: 1; background-color: rgba(0,0,0,0.5);
+      width: 36px;
+      height: 36px;
+      border-radius: 50px;
+      opacity: 0.5;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor:pointer">
+          <svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.292742 19.7071C-0.0977821 19.3166 -0.097782 18.6834 0.292742 18.2929L8.58564 10L0.292743 1.7071C-0.0977805 1.31658 -0.0977804 0.683415 0.292743 0.292891C0.683268 -0.0976324 1.31643 -0.0976323 1.70696 0.292892L11.4141 10L1.70696 19.7071C1.31643 20.0976 0.683267 20.0976 0.292742 19.7071Z" fill="white"/>
+          </svg>
+      </div>
+      <div id="blux-carousel2" ${BLUX_ATTRIBUTES.section}="${OTHER_CATEGORY_FROM}" ${BLUX_ATTRIBUTES.recommendation_id}="${otherCategoryRecId}" style="width:100%; height:100%; display:flex; flex-direction:row; transition: transform 0.5s ease-in-out";>
+          ${displayedOtherCategoryProducts.map((el) => `<a class="blux-carousel-item2" style="flex: 0 0 calc((100% - ${CAROUSEL_ITEM_DISTANCE * (PRODUCT_DETAIL_PAGE_ITEMS_TO_SHOW - 1)}px) / ${PRODUCT_DETAIL_PAGE_ITEMS_TO_SHOW}); margin-right: ${CAROUSEL_ITEM_DISTANCE}px; height:100%; display: flex; flex-direction: column;" href="/product/detail.html?product_no=${el.info.product_no}&from=${OTHER_CATEGORY_FROM}&recommendationId=${otherCategoryRecId}">
+                <img style="width:100%; height: 100%; margin-bottom:16px;" src="${el.info.small_image}" alt="Z.Ai 퍼스널MD 추천 상품 / 상품명 : ${el.info.product_name}"/>
+                <span style="color:#555555; font-size: 14px; font-weight:400; padding-bottom:12px; line-height:21px; height:40px;">${el.info.product_name}</span>
+                <div style="display:flex; flex-direction:row; font-size: 15px; font-weight:500">
+                    <span style="color: #FF2E00; margin-right:4px; display: ${calculateDiscountRate(el.info.price, el.info.discountprice["pc_discount_price"]) !== 0
+        ? "block"
+        : "none"}">${calculateDiscountRate(el.info.price, el.info.discountprice["pc_discount_price"]).toFixed()}%</span>
+                    <span>${Number(el.info.discountprice["pc_discount_price"]).toLocaleString("en")}원</span>
+                </div>
+              </a>`)}
+      </div>
+    </div>
+    </div>
+    `.replaceAll("</a>,", "</a>");
+    return pcCarouselTemplate;
+};
+async function makeRecSections() {
+    const { pathname } = window.location;
+    const searchParams = new URLSearchParams(window.location.search);
+    const categoryNo = searchParams.get("cate_no");
+    const deviceType = window.location.host.startsWith("m") ? "mobile" : "pc";
+    const isHomepage = pathname === "/";
+    const isProductDetailPage = pathname.includes(PRODUCT_DETAIL_PAGE_PATH);
+    const isCategoryPage = pathname.includes(PRODUCT_LIST_PAGE_PATH) && categoryNo;
+    if (isHomepage) {
+        // 홈페이지
+        const homepageRecPosition = document.getElementById("blux_home_rec");
+        const userRec = await bluxClient.getUserRec(new UserRec({
+            call_type: HOMEPAGE_CALL_TYPE,
+            limit: 18,
+        }));
+        const userRecProdNos = userRec.item_ids;
+        const userRecProdInfo = await getProductsInfo(userRecProdNos);
+        const userRecId = userRec.recommendation_id; // web-sdk 버전 1.2.0 초과로 올리면 assert 제거 가능
+        if (!homepageRecPosition || !homepageRecPosition.parentNode)
+            throw Error("homepageRecPosition should exist");
+        // [Mobile] ITEMS FOR YOU 구좌
+        homepageRecPosition.parentNode.insertBefore(getMobileHomepageSlideTemplate(userRecProdInfo, userRecId, deviceType), homepageRecPosition.nextSibling);
+        const bluxHomepageRecUpdateButton = document.querySelector("#blux_home_rec .main_prd_top a.main_cate_link");
+        if (!bluxHomepageRecUpdateButton)
+            throw Error("bluxHomepageRecUpdateButton should exist");
+        console.log("bluxHomepageRecUpdateButton", bluxHomepageRecUpdateButton);
+        const bluxMobileHomepageCarousels = Array.from({ length: HOMEPAGE_REC_REQUEST_LIMIT / HOMEPAGE_ITEMS_TO_SHOW }, (_, idx) => document.getElementById(`blux-mobile-homepage-carousel-${idx + 1}`));
+        let currentOffset = 0;
+        bluxHomepageRecUpdateButton.addEventListener("click", () => {
+            currentOffset++;
+            if (currentOffset === HOMEPAGE_REC_REQUEST_LIMIT / HOMEPAGE_ITEMS_TO_SHOW)
+                currentOffset = 0;
+            console.log("currentOffset", currentOffset);
+            bluxMobileHomepageCarousels.forEach((carousel, idx) => {
+                if (!carousel)
+                    return;
+                carousel.style.display = idx === currentOffset ? "" : "none";
+            });
+        });
+    }
+    else if (isProductDetailPage) {
+        // 상품 상세 페이지
+        // Get Product No.(Item ID), Product Primary Category(`clothing` or `accessory`)
+        const productNo = getItemIdOnProductDetailPage();
+        if (!productNo)
+            throw Error("productNo should exist");
+        const productCategories = (await fetchProductInfo(productNo)).category.map((el) => el.category_no);
+        const productPrimaryCategory = getPrimaryCategory(productCategories);
+        // CartAdd Mutation Observer
+        const cartAddMutationObserver = getCartAddMutationObserver(deviceType);
+        cartAddMutationObserver.observe(document.body, {
+            subtree: true,
+            childList: true,
+        });
+        // Fetch Related Items Recommendations
+        const sameCategoryRec = await bluxClient.getItemRelatedRec(new ItemRelatedRec({
+            call_type: PRODUCT_DETAIL_PAGE_HOODY_CALL_TYPE,
+            item_id: productNo,
+            limit: 14,
+        }));
+        const sameCategoryRecProdNos = sameCategoryRec.item_ids;
+        const sameCategoryRecProdInfo = await getProductsInfo(sameCategoryRecProdNos);
+        const sameCategoryRecId = sameCategoryRec.recommendation_id; // web-sdk 버전 1.2.0 초과로 올리면 assert 제거 가능
+        const otherCategoryRec = await bluxClient.getItemRelatedRec(new ItemRelatedRec({
+            call_type: productPrimaryCategory === "clothing"
+                ? PRODUCT_DETAIL_PAGE_ACCESSORY_CALL_TYPE
+                : PRODUCT_DETAIL_PAGE_CLOTHING_CALL_TYPE,
+            item_id: productNo,
+            limit: 14,
+        }));
+        const otherCategoryRecProdNos = otherCategoryRec.item_ids;
+        const otherCategoryRecProdInfo = await getProductsInfo(otherCategoryRecProdNos);
+        const otherCategoryRecId = otherCategoryRec.recommendation_id; // web-sdk 버전 1.2.0 초과로 올리면 assert 제거 가능
+        const pdpRecPosition = document.getElementById("prdReview")?.nextSibling;
+        if (!pdpRecPosition?.parentNode)
+            throw Error("pdpRecPosition.parentNode should exist");
+        if (deviceType === "pc") {
+            pdpRecPosition.parentNode.insertBefore(getPcCarouselTemplate(sameCategoryRecProdInfo, sameCategoryRecId, otherCategoryRecProdInfo, otherCategoryRecId), pdpRecPosition);
+            let currentIndex = 0;
+            const bluxContainer = document.getElementById("blux-container");
+            const items = document.querySelectorAll(".blux-carousel-item");
+            const itemWidth = items[0].offsetWidth +
+                parseInt(window.getComputedStyle(items[0]).marginRight);
+            const bluxCarousel = document.getElementById("blux-carousel");
+            const bluxPrevButton = document.getElementById("blux-prevButton");
+            const bluxNextButton = document.getElementById("blux-nextButton");
+            if (!bluxContainer || !bluxCarousel || !bluxPrevButton || !bluxNextButton)
+                throw Error("bluxContainer, bluxCarousel, bluxPrevButton, bluxNextButton should exist");
+            bluxPrevButton.addEventListener("click", () => {
+                bluxNextButton.style.display = "flex";
+                if (currentIndex > 0) {
+                    currentIndex--;
+                    bluxCarousel.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
+                }
+                if (currentIndex === 0)
+                    bluxPrevButton.style.display = "none";
+            });
+            bluxNextButton.addEventListener("click", () => {
+                bluxPrevButton.style.display = "flex";
+                if (currentIndex <
+                    bluxCarousel.childElementCount - PRODUCT_DETAIL_PAGE_ITEMS_TO_SHOW) {
+                    currentIndex++;
+                    bluxCarousel.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
+                }
+                if (currentIndex ===
+                    bluxCarousel.childElementCount - PRODUCT_DETAIL_PAGE_ITEMS_TO_SHOW)
+                    bluxNextButton.style.display = "none";
+            });
+            // [PC] "함께 보면 좋은 상품" 구좌 (Tab 구현)
+            let currentIndex2 = 0;
+            const bluxContainer2 = document.getElementById("blux-container2");
+            const items2 = document.querySelectorAll(".blux-carousel-item");
+            const itemWidth2 = items2[0].offsetWidth +
+                parseInt(window.getComputedStyle(items2[0]).marginRight);
+            const bluxCarousel2 = document.getElementById("blux-carousel2");
+            const bluxPrevButton2 = document.getElementById("blux-prevButton2");
+            const bluxNextButton2 = document.getElementById("blux-nextButton2");
+            if (!bluxContainer2 ||
+                !bluxCarousel2 ||
+                !bluxPrevButton2 ||
+                !bluxNextButton2)
+                throw Error("bluxContainer2, bluxCarousel2, bluxPrevButton2, bluxNextButton2 should exist");
+            bluxPrevButton2.addEventListener("click", () => {
+                bluxNextButton2.style.display = "flex";
+                if (currentIndex2 > 0) {
+                    currentIndex2--;
+                    bluxCarousel2.style.transform = `translateX(-${currentIndex2 * itemWidth2}px)`;
+                }
+                if (currentIndex2 === 0)
+                    bluxPrevButton2.style.display = "none";
+            });
+            bluxNextButton2.addEventListener("click", () => {
+                bluxPrevButton2.style.display = "flex";
+                if (currentIndex2 <
+                    bluxCarousel2.childElementCount - PRODUCT_DETAIL_PAGE_ITEMS_TO_SHOW) {
+                    currentIndex2++;
+                    bluxCarousel2.style.transform = `translateX(-${currentIndex2 * itemWidth2}px)`;
+                }
+                if (currentIndex2 ===
+                    bluxCarousel2.childElementCount - PRODUCT_DETAIL_PAGE_ITEMS_TO_SHOW)
+                    bluxNextButton2.style.display = "none";
+            });
+            // 구좌 Tab 전환
+            const bluxTab1Button = document.getElementById("blux-tab1-button");
+            const bluxTab2Button = document.getElementById("blux-tab2-button");
+            if (!bluxTab1Button || !bluxTab2Button)
+                throw Error("bluxTab1Button, bluxTab2Button should exist");
+            bluxTab1Button.addEventListener("click", () => {
+                bluxContainer.style.display = "block";
+                bluxContainer2.style.display = "none";
+                bluxTab1Button.style.color = "black";
+                bluxTab2Button.style.color = "#999999";
+            });
+            bluxTab2Button.addEventListener("click", () => {
+                bluxContainer.style.display = "none";
+                bluxContainer2.style.display = "block";
+                bluxTab1Button.style.color = "#999999";
+                bluxTab2Button.style.color = "black";
+            });
+        }
+        else if (deviceType === "mobile") {
+            pdpRecPosition.parentNode.insertBefore(getMobileSlideTemplate(SAME_CATEGORY_TITLE, sameCategoryRecProdInfo, SAME_CATEGORY_FROM, sameCategoryRecId), pdpRecPosition);
+            // [Mobile] "함께 보면 좋은 상품" 구좌
+            pdpRecPosition.parentNode.insertBefore(getMobileSlideTemplate(OTHER_CATEGORY_TITLE, otherCategoryRecProdInfo, OTHER_CATEGORY_FROM, otherCategoryRecId), pdpRecPosition);
+        }
+    }
+    else if (isCategoryPage) {
+        // 카테고리 페이지
+        const bluxCategoryRecRejectTimestamp = sessionStorage.getItem(SESSION_STORAGE_BLUX_CATEGORY_REC_REJECT_TIMESTAMP_KEY);
+        const bluxEnterPdpFromCategoryPage = sessionStorage.getItem(SESSION_STORAGE_BLUX_ENTER_PDP_FROM_CATEGORY_PAGE_KEY);
+        if (bluxEnterPdpFromCategoryPage === "true" && // 카테고리 페이지 -> 상품 상세 페이지 -> 카테고리 페이지 와 같이 탐색한 경우 그리고
+            (!bluxCategoryRecRejectTimestamp || // "하루 동안 닫기" 버튼을 누르지 않은 경우 또는
+                getTimestampDiff(bluxCategoryRecRejectTimestamp) > ONE_DAY_IN_SECONDS) // "하루 동안 닫기" 버튼을 누르고 24시간이 지난 경우에만 카테고리 페이지 추천 구좌 노출
+        ) {
+            const ulElement = document.querySelector("ul.prdNeo.grid2");
+            // CSS 수정 (추천 구좌 노출 시 기존 상품 목록의 width가 변경되는 것을 방지)
+            ulElement.style.width = "100%";
+            // 현재 카테고리 페이지에 노출된 상품들의 productNo 목록 추출
+            const displayedProductNos = Array.from(ulElement.querySelectorAll("li"))
+                .map((li) => {
+                return li.id.startsWith("anchorBoxId_")
+                    ? li.id.split("anchorBoxId_")[1]
+                    : null;
+            })
+                .filter((id) => id !== null); // null 값은 제외
+            // sessionStorage에서 최근 본 상품 ID 불러오기
+            const recentlyClickedProductNoFromCategoryPage = sessionStorage.getItem(SESSION_STORAGE_BLUX_RECENTLY_CLICKED_ITEM_ID_FROM_CATEGORY_PAGE_KEY);
+            // 0, 1 -> 1
+            // 2, 3 -> 3
+            const recPosition = Math.floor(displayedProductNos.indexOf(recentlyClickedProductNoFromCategoryPage) / 2) *
+                2 +
+                1;
+            // 1 -> 0, 1, 2, 3
+            // 3 -> 2, 3, 4, 5
+            const neighborProductNos = displayedProductNos.slice(recPosition - 1, recPosition + 3);
+            // 최근 본 상품이 현재 카테고리 페이지에 노출된 상품인지 확인
+            if (recentlyClickedProductNoFromCategoryPage &&
+                displayedProductNos.includes(recentlyClickedProductNoFromCategoryPage)) {
+                // 최근 본 상품에 대한 연관 추천 상품 요청
+                const categoryPageRec = await bluxClient.getItemRelatedRec(new ItemRelatedRec({
+                    call_type: CATEGORY_PAGE_CALL_TYPE,
+                    item_id: recentlyClickedProductNoFromCategoryPage,
+                    limit: CATEGORY_PAGE_ITEMS_TO_SHOW * 2,
+                }));
+                // 추천 상품에서 구좌 근방의 상품 제외
+                const categoryPageRecProdNos = categoryPageRec.item_ids.filter((item_id) => !neighborProductNos.includes(item_id));
+                const categoryPageRecProdInfo = await getProductsInfo(categoryPageRecProdNos);
+                const categoryPageRecId = categoryPageRec.recommendation_id; // web-sdk 버전 1.2.0 초과로 올리면 assert 제거 가능
+                // DOM에 추천 구좌 추가
+                document
+                    .getElementById(`anchorBoxId_${displayedProductNos[recPosition]}`)
+                    ?.insertAdjacentElement("afterend", getMobileCategoryPageSlideTemplate(categoryPageRecProdInfo, categoryPageRecId));
+                const bluxMobileCategoryPageSlide = document.querySelector(".blux-mobile-category-page-slide");
+                const recentlyClickedProductFromCategoryPage = document.getElementById(`anchorBoxId_${recentlyClickedProductNoFromCategoryPage}`);
+                // "하루 동안 닫기" 버튼 처리
+                const closeButton = document.getElementById("blux-mobile-category-page-slide-close-button");
+                if (!closeButton)
+                    throw Error("closeButton should exist");
+                closeButton.addEventListener("click", () => {
+                    if (!bluxMobileCategoryPageSlide)
+                        throw Error("bluxMobileCategoryPageSlide should exist");
+                    bluxMobileCategoryPageSlide.remove();
+                    sessionStorage.setItem(SESSION_STORAGE_BLUX_CATEGORY_REC_REJECT_TIMESTAMP_KEY, Date.now().toFixed());
+                });
+                window.addEventListener("scroll", function onScroll() {
+                    if (recentlyClickedProductFromCategoryPage.getBoundingClientRect()
+                        .top <= 55) {
+                        // 최근 본 상품이 뷰의 상단에 위치하면 추천 구좌 노출
+                        setTimeout(() => {
+                            bluxMobileCategoryPageSlide.style.maxHeight = "100vh";
+                        }, 100);
+                        // 이벤트 핸들러 제거 (한 번만 실행하고 싶다면)
+                        window.removeEventListener("scroll", onScroll);
+                    }
+                });
+                // 최근 본 상품이 뷰의 상단에 위치하도록 스크롤
+                window.scrollTo({
+                    top: recentlyClickedProductFromCategoryPage.offsetTop + 55, // 55px은 카테고리 페이지의 상단 메뉴 높이
+                    behavior: "smooth", // 부드러운 스크롤 효과
+                });
+            }
+        }
+    }
+}
+const setScreenSize = function () {
+    let vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+    let vw = window.innerWidth * 0.01;
+    document.documentElement.style.setProperty("--vw", `${vw}px`);
+};
+async function main() {
+    // const { member_id: user_id } = await getCustomerIDInfo();
+    // if (user_id !== "3394512358@k") return;
+    if (document.readyState == "complete") {
+        window.addEventListener("resize", setScreenSize);
+        makeRecSections();
+    }
+    else {
+        window.addEventListener("load", () => makeRecSections());
+    }
+    collectEvents();
+}
+main();