CDN (Content Delivery Network), internet üzerindeki birçok veri merkezinde bulunan dağınık ve geniş bir sunucu sistemidir.
CDN, bir web sitesinin içeriğini en düşük ağ ve işlem gecikmesi ile yani en hızlı bir şekilde kullanıcılara ulaştırmak üzere coğrafi olarak farklı bölgelerde konumlandırılmış sunucu kümesine verilen isimdir.
CDN'nin amacı kesintisiz bir şekilde yüksek performans ile son kullanıcılara içerik sunmaktır.
Birçok e-ticaret sitesi sayfa açılma süresini düşük tutabilmek ve trafik yönetimi için CDN kullanmaktadır. CDN üzerinden kullanıcıdan kullanıcıya genelde pek değişmeyen HTML, JS, CSS, görsel, video ve font dosyaları sunulur. CDN bu tip kaynakları origin olarak adlandırdığı asıl sunucudan çekerek belirli bir süre için cache’ler. Bu noktadan sonra CDN’e ilgili kaynaklar için kullanıcıların yaptığı istekler cache’lenen bu kopyadan sağlanır. Cache süresi dolduğunda origin’e yeniden yapılan isteklerle kaynaklar tazelenir.
T-Soft CDN Hizmeti
T-Soft e-ticaret altyapısı ile profesyonel CDN servisi hizmeti sunulmaktadır.
CDN hizmeti ücretli bir servis olarak sunulmaktadır ve T-Soft üzerinden CDN kullanımı için özel sunucunuz olması gerekmektedir.
Web sitenizin güncel trafik verilerinize uygun olarak muhasebe ekibi tarafından fiyat teklifleri iletilecektir.
CDN hizmetini T-Soft altyapısı ile kullanmanız durumunda nildesk üzerinden "Sunucu" ekibimize talep oluşturmanız yeterlidir.
Kullanmak istediğiniz CDN tarifesini seçtikten sonra, sitenizde CDN üzerinden kullanılabilecek tüm içerikler sunucu ekibi tarafından düzenlenecektir.
CDN alt alan adı eticaret yazılımı ile entegredir. Dışarıdan alınan cdn hizmetinde img, images ve imaj gibi alt alan isimleri kullanılabilir.
CDN servisi T-Soft üzerinden kullanıldığında tüm ürün görselleri otomatik olarak çekilecektir.
Eğer önceden eklenmiş interaktif vitrin ve banner görselleri var ise düzenleme sağlamanız gerekmektedir.
Ekli görsellerinizin kodlarına CDN uzantınızı eklemeniz yeterlidir.
Farklı Firmalardan CDN Hizmeti
CDN hizmetini T-Soft altyapısından kullanmak dışında alternatif olarak cdn hizmeti sağlayan firmalardan da alabilirsiniz.
Dışarıdan alınan CDN hizmetlerine ait düzenlemeler için firmalara göre farklılıklar bulunduğundan destek sağlanamamaktadır.
DNS yönetiminiz nerede ise oradan dns adreslerini ekletmelisiniz.
DNS yönetimleriniz T-Soft'ta ise cdn de kullanılacak olan subdomain (img, images, cdn...) uzantısını ve yönlendirilmesi gereken IP adresini sunucu departmanımıza ileterek ekletebilirsiniz.
DNS yönetiminiz farklı bir firmada ise bu işlemleri oradan yapmanız gerekmektedir. T-Soft olarak müdahale edilememektedir.
Dışarıdan alınan cdn hizmetinde şablon desteği sağlanmamaktadır.
CDN hizmeti aldığınız firmanın size ilettiği dosya yollarını sitenizde cdn üzerinden kullanılacak tüm şablonlara eklemeniz gerekmektedir.
Örnek şablon kodları aşağıda şekildedir.
Ürün Detay / Ürün Liste Blokları : Görsellerin çekildiği değişkenlerin sonuna aşağıdaki gibi cdn hizmeti sağlayan firmanızdan aldığınız bilgileri eklemelisiniz. Bu ekleme işlemi şablonlarda yer alan tüm "IMAGE_LIST" alanları için yapılmalıdır. CDN URL bilgisi firmaya göre değişiklik gösterebilmektedir.
Ürün Detay Örnek Kod
<div class="w-100 mb-2 position-relative product-images">
<div class="w-100 mb-2 product-images-slider">
<div class="w-100 position-relative">
<div class="{if $IS_SWIPER}swiper-container{/if}">
<div class="{if $IS_SWIPER}swiper-wrapper{/if} product-images-gallery">
{foreach from=$P.IMAGE_LIST item=IMAGE name=image}
<a id="gallery-{$IMAGE.VARIANT_TYPE_ID}{$smarty.foreach.image.iteration}" class="{if $IS_SWIPER}swiper-slide{/if} product-images-item" data-id="{$IMAGE.VARIANT_TYPE_ID}" href="{$IMAGE.BIG|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}">
<div class="image-wrapper">
<div class="image-inner">
<figure class="image-zoom">
<img src="{$IMAGE.MEDIUM|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" alt="{$P.TITLE} - {$smarty.foreach.image.iteration}" data-toggle="zoom-image" data-target="#product-right" data-width="450" data-height="450" data-image="{$IMAGE.BIG|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}">
</figure>
</div>
</div>
</a>
{/foreach}
</div>
</div>
{if $IS_SWIPER && $P.IMAGE_COUNT > 1}
<div id="swiper-prev-{$BLOCK.ID}" class="swiper-button-prev inside d-none d-md-flex"><i class="ti-arrow-left"></i></div>
<div id="swiper-next-{$BLOCK.ID}" class="swiper-button-next inside d-none d-md-flex"><i class="ti-arrow-right"></i></div>
{/if}
</div>
</div>
{if $IS_SWIPER}
<div class="w-100 product-images-thumb">
<div class="swiper-container">
<div class="swiper-wrapper">
{foreach from=$P.IMAGE_LIST item=IMAGE name=image}
<div id="thumb-{$IMAGE.VARIANT_TYPE_ID}{$smarty.foreach.image.iteration}" class="swiper-slide product-images-item" data-id="{$IMAGE.VARIANT_TYPE_ID}">
<div class="image-wrapper">
<figure class="image-inner">
<img src="{$IMAGE.SMALL|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" alt="{$P.TITLE} - {$smarty.foreach.image.iteration}">
</figure>
</div>
</div>
{/foreach}
</div>
</div>
</div>
{/if}
</div>
Ürün Liste Örnek Kod
<a href="/{$P.URL}" class="image-wrapper {if $P.IMAGE_LIST.1.SMALL != ''}image-animate{else}image-animate-zoom{/if}">
<picture class="image-inner">
{if $P.IMAGE.MEDIUM_WEBP_JPG != null}
<source srcset="{$P.IMAGE.SMALL|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}">
<img {if $IS_LAZY_LOAD_ACTIVE == '1'} src="{$LAZY_LOAD_LOADING_IMAGE}" data-src="{$P.IMAGE.MEDIUM_WEBP_JPG}" class="lazyload" loading="lazy"{else}src="{$P.IMAGE.MEDIUM_WEBP_JPG}"{/if} alt="{$P.TITLE} - {$P.BRAND}">
{else}
<img {if $IS_LAZY_LOAD_ACTIVE == '1'}src="{$LAZY_LOAD_LOADING_IMAGE}" data-src="{$P.IMAGE.SMALL|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" class="lazyload" loading="lazy"{else} src="{$P.IMAGE.SMALL|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" {/if} alt="{$P.TITLE} - {$P.BRAND}">
{/if}
</picture>
{if $P.IMAGE_LIST.1.SMALL != ''}
<picture class="image-inner">
<img {if $IS_LAZY_LOAD_ACTIVE == '1'}src="{$LAZY_LOAD_LOADING_IMAGE}" data-src="{$P.IMAGE_LIST.1.SMALL|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" class="lazyload image-nd" loading="lazy"{else} src="{$P.IMAGE_LIST.1.SMALL|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" class="image-nd"{/if} alt="{$P.TITLE} - {$P.BRAND} (1)">
</picture>
{/if}
{if $P.IS_NEW_PRODUCT == true}
<span class="new-badge bg-primary text-white text-uppercase">
{#new#}
</span>
{/if}
{if $P.IN_STOCK == false}
<span class="out-of-stock bg-white text-body text-center text-uppercase fw-medium">{#out_of_stock#}</span>
{/if}
</a>
Slider ve Banner Blokları : Sitenize eklediğiniz slider ve banner görselleriniz içinde CDN tarafından çekilebilmesi için düzenleme yapılmalıdır.
Slider Örnek Kod
<div class="swiper-wrapper">
{foreach from=$SETTING.IMAGES item=IMAGE}
<div class="swiper-slide">
<a {if $IMAGE.URL != ''}href="{$IMAGE.URL}"{/if} class="w-100 d-block position-relative">
<picture class="d-flex align-items-center justify-content-center overflow-hidden">
{if $IMAGE.IMG1.PATH && $IMAGE.IMG3.PATH}
<source media="(min-width:576px)" srcset="{$IMAGE.IMG1.PATH|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" width="{$IMAGE.IMG1.WIDTH}" height="{$IMAGE.IMG1.HEIGHT}">
{if $IS_LAZY_LOAD_ACTIVE == '1'}
<img data-src="{$IMAGE.IMG3.PATH|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" class="swiper-lazy border-round {foreach from=$SETTING.IMAGE_EFFECT item=EFFECT} {$EFFECT} {/foreach}" width="{$IMAGE.IMG3.WIDTH}" height="{$IMAGE.IMG3.HEIGHT}" alt="{$IMAGE.TITLE}">
<span class="swiper-lazy-preloader">
<img src="{$LAZY_LOAD_LOADING_IMAGE|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" alt="{$IMAGE.TITLE}" width="50" height="50">
</span>
{else}
<img src="{$IMAGE.IMG3.PATH}" class="border-round {foreach from=$SETTING.IMAGE_EFFECT item=EFFECT} {$EFFECT} {/foreach}" width="{$IMAGE.IMG3.WIDTH}" height="{$IMAGE.IMG3.HEIGHT}" alt="{$IMAGE.TITLE}">
{/if}
{else}
{if $IS_LAZY_LOAD_ACTIVE == '1'}
<img data-src="{$IMAGE.IMG1.PATH}" class="swiper-lazy border-round {foreach from=$SETTING.IMAGE_EFFECT item=EFFECT} {$EFFECT} {/foreach}" width="{$IMAGE.IMG1.WIDTH}" height="{$IMAGE.IMG1.HEIGHT}" alt="{$IMAGE.TITLE}">
<span class="swiper-lazy-preloader">
<img src="{$LAZY_LOAD_LOADING_IMAGE|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" alt="{$IMAGE.TITLE}" width="50" height="50">
</span>
{else}
<img src="{$IMAGE.IMG1.PATH|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" class="border-round {foreach from=$SETTING.IMAGE_EFFECT item=EFFECT} {$EFFECT} {/foreach}" width="{$IMAGE.IMG1.WIDTH}" height="{$IMAGE.IMG1.HEIGHT}" alt="{$IMAGE.TITLE}">
{/if}
{/if}
</picture>
</a>
</div>
{/foreach}
</div>
Banner Örnek Kod
<a href="{$IMAGE.URL}" class="d-block">
{if $IMAGE.IMG1.PATH || $IMAGE.IMG2.PATH}
<picture class="d-flex align-items-center justify-content-center overflow-hidden">
{if $IMAGE.IMG1.PATH && $IMAGE.IMG2.PATH}
<source media="(min-width:576px)" srcset="{$IMAGE.IMG1.PATH}" width="{$IMAGE.IMG1.WIDTH}" height="{$IMAGE.IMG1.HEIGHT}">
<img
{if $IS_LAZY_LOAD_ACTIVE == '1'}
src="{$LAZY_LOAD_LOADING_IMAGE|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" data-src="{$IMAGE.IMG2.PATH|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" class="lazyload border-round {foreach from=$SETTING.IMAGE_EFFECT item=EFFECT} {$EFFECT} {/foreach}" loading="lazy"
{else}
src="{$IMAGE.IMG2.PATH|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" class="border-round {foreach from=$SETTING.IMAGE_EFFECT item=EFFECT} {$EFFECT} {/foreach}"
{/if}
width="{$IMAGE.IMG2.WIDTH}" height="{$IMAGE.IMG2.HEIGHT}" alt="{$IMAGE.TITLE}">
{else}
<img
{if $IS_LAZY_LOAD_ACTIVE == '1'}
src="{$LAZY_LOAD_LOADING_IMAGE|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" data-src="{$IMAGE.IMG1.PATH|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" class="lazyload border-round {foreach from=$SETTING.IMAGE_EFFECT item=EFFECT} {$EFFECT} {/foreach}" loading="lazy"
{else}
src="{$IMAGE.IMG1.PATH|replace:'https://www.siteadi.com/':'https://cdn.siteadi.com/'}" class="border-round {foreach from=$SETTING.IMAGE_EFFECT item=EFFECT} {$EFFECT} {/foreach}"
{/if}
width="{$IMAGE.IMG1.WIDTH}" height="{$IMAGE.IMG1.HEIGHT}" alt="{$IMAGE.TITLE}">
{/if}
</picture>
{/if}
</a>