Ü Liste Varyant Resmi

Ürün liste görünüm için buradaki yapı kullanılabilir.#

smarty

    {foreach from=$SUB_LIST item=SUB name=variant}
        <a href="javascript:void(0);"
        id="{$SUB.TYPE_ID}"
        ...
        ...
        ...
        data-callback="variantCallback"

            class="snap-item {if !$smarty.foreach.variant.last} mr-1{/if} border p-1 sub-button-item{if $SUB.TYPE_ID == $SELECTED && $IS_DEFAULT_VARIANT_ACTIVE|default:1 == 1} selected{/if}{if $SUB.IN_STOCK == false && $NEGATIVE_STOCK == 0} passive{/if}">
            <span>{$SUB.TYPE}</span>
        </a>
    {/foreach}

Standart resim değişimi#

javascript ürün liste

window["changeVariantImage"]=function(el){
    let productId=el.dataset.pid;
    let variantId=el.dataset.id;
    let item=el.closest(".product-item");
    let endpoint=`/srv/service/product/get-sub-product-images/${productId}/${variantId}`
    axios.get(endpoint).then((res)=> {
        let subInfos=res.data.data;
        if(res.data.status== true && subInfos.length){
            let subImg=subInfos[0].ResimUrl?`/Data/K/${subInfos[0].ResimUrl}`:"";
            subImg && item ?item.querySelector(".image-inner img").setAttribute("src", subImg):"";
        }
    })
    .catch((error)=> {
        console.log(error);
    })
}


window["variantCallback"]=function(el){
    window["changeVariantImage"](el)
}

Ürün Detaya gidince de seçili rengin gelmesi için#

javascript ürün liste

window["changeVariantImage"]=function(el){
    let productId=el.dataset.pid;
    let variantId=el.dataset.id;
    let item=el.closest(".product-item");
    let endpoint=`/srv/service/product/get-sub-product-images/${productId}/${variantId}`
    let link=item ? item.querySelector("a.image-wrapper") :"";
    axios.get(endpoint).then((res)=> {
        let subInfos=res.data.data;
        if(res.data.status== true && subInfos.length){
            let subImg=subInfos[0].ResimUrl?`/Data/K/${subInfos[0].ResimUrl}`:"";
            subImg && item?item.querySelector(".image-inner img").setAttribute("src", subImg):"";
        }
        link ? link.setAttribute("href",T.getLink("variantOne",el.dataset.id, link.getAttribute("href"))) :"";
    })
    .catch((error)=> {
        console.log(error);
    })
}


window["variantCallback"]=function(el){
    window["changeVariantImage"](el)
}

javascript ürün detaya eklenecek kod

T(`#product-detail .sub-one [data-id="${getUrlParam('variantOne')}"]`).trigger("click")