naver-smartstore-dropdown-selects.js

// This Script is for Listly.io actionscript in case of Naver smartstore web scarapping

// Naver Smartstore 상품페이지의 드랍다운 옵션에 복수의 선택지 전체를 자동으로 선택하는 스크립트입니다.
// 예제 페이지, 개발자도구에서 실행하십시오.
// https://smartstore.naver.com/jubangplaza/products/6660303090



const el = path => document.querySelector( path )
const elAll = path => document.querySelectorAll( path )

const SHARE_ROOT = '#content > div fieldset'
const APPENDED_ITEM = 'li[class="bd_2PDrk"] > div '
const ITEM_INFO = 'div:nth-of-type(1)'
const OPTION_LIST = '.bd_2dy3Y'
const result_items = el( SHARE_ROOT ).querySelectorAll( APPENDED_ITEM )

const create = ( tag, text ) =>
{
    const elem = document.createElement( tag )
    if ( text )
    {
        const txt = document.createTextNode( text )
        elem.appendChild( txt )
    }
    return elem
}

const appendOptions = async ( group ) => 
{
    const resultItems = el( SHARE_ROOT ).querySelectorAll( APPENDED_ITEM )
    return Array.from( resultItems ).reduce( ( parent, item, idx ) =>
    {
        const itemGroup = create( 'div' )
        const productName = item.querySelector( 'p' ).cloneNode(true)
        const productPrice = item.querySelector( 'div > span' ).cloneNode(true)
        itemGroup.append( ...[productName, productPrice] )
        parent.appendChild( itemGroup )
        return parent
    }, group )
}

const SearchOptions = async optionList =>
{
    const dropbox = () => optionList.children
    const toSelect = ( list, index ) => list[index].lastChild

    const currentIdx = Array( dropbox().length ).fill( 0 )
    const limit = Array( dropbox().length ).fill( -1 )

    const selectAllOptions = async idx =>
    {
        for ( let i = 0; i < dropbox().length; i++ )
        {
            console.log( idx, i, limit, currentIdx )

            if ( idx > 0 && currentIdx[i] > limit[i] ) return idx
            
            // 드랍박스 클릭
            const dropboxToClick = toSelect( dropbox(), i )
            
            if ( !dropboxToClick.innerText.includes( '품절' ) )
            {
                dropboxToClick.click()
            }
            
            // 드랍박스 펼쳐진 리스트에서 옵션 선택
            const children = toSelect( dropbox(), i ).children
            limit[i] = children.length - 1
            
            if ( !toSelect( children, currentIdx[i] ).innerText.includes( '품절' ) )
            {
                toSelect( children, currentIdx[i] ).click()
            }

            if ( i >= dropbox().length - 1 )
            {
                if ( currentIdx[i] >= limit[i] )
                {
                    if ( limit[i - 1] )
                    {
                        currentIdx[i - 1] += 1
                        currentIdx[i] = 0
                        continue
                    } else
                    {
                        return
                    }
                } else currentIdx[i] += 1
            }
        }
        idx++
        return await selectAllOptions( idx )
    }
    return await selectAllOptions( 0 )
}

const init = async () =>
{
    const root = document.getElementsByTagName( 'body' )[0]
    const optionList = el( OPTION_LIST ) // 옵션
    const defaultData = el( SHARE_ROOT ).querySelector( ITEM_INFO )

    const group = create( 'section' )
    group.appendChild( defaultData.cloneNode( true ) )
    
    if ( optionList )
    {
        await SearchOptions( optionList )
        await appendOptions( group )
    }
    // body 상단에 전체 드랍다운 선택 결과 리스트를 추가합니다.
    root.prepend( group.cloneNode(true) )
}
await init()