Skip to main content

Image-map (Resim-Nokta)

Banner resimleri üzerine nokta#

Banner üzerine nokta ile ürün gösterimi yapmak için kullanılır. Banner Bloğu gelişmiş ayarlar alanındaki
  • DATA1
  • DATA2
  • DATA3
  • DATA4

alanlarına girilen veriye göre resim üzerinde nokta oluşmaktadır.

25|55|1455 gibi soldanyüzde|yukarıdanyüzde|ürünIDşeklinde değer girilmesi gerekmektedir.

Ürün eklenecek olan koordinatın alınması için ise panele giriş yapılmış olması gerekmektedir. Koordinat eklenmesi istenen alana tıklanması yeterlidir. Tıklanılan alanın yüzde koordinatları kopyalama paneline 25|55 (Soldan yüzde|Yukarıdan yüzde) gibi kaydedilmektedir. Otomatik olarak kopyalanan bu alan DATA alanlarından herhangi birine yapıştırılabilir. Sonra da |2456 gibi ürün id eklenirse işlem tamamlanmış olur.

Neticede DATA alanımız 25|55|1455 yani soldanyüzde|yukarıdanyüzde|ürünID haline gelmiş olur.

Kod Alanı#

Smarty#

Smarty
<div class="col-12 mb-1">
{if $SETTING.DISPLAY_TITLE}
<div class="block-title mb-1">{$BLOCK.TITLE}</div>
{/if}
<div class="row">
{foreach from=$SETTING.IMAGES item=IMAGE}
{$DATA_AREAS = [
$IMAGE.DATA1,
$IMAGE.DATA2,
$IMAGE.DATA3,
$IMAGE.DATA4
]}
<div class="{$IMAGE.COL.ALL} col-sm-{$IMAGE.COL.SM} col-md-{$IMAGE.COL.MD} col-lg-{$IMAGE.COL.LG} col-xl-{$IMAGE.COL.XL} mb-2">
<div href="{$IMAGE.URL}" class="w-100 d-block position-relative effect-wrapper map-point-wrapper {if $IS_ADMIN_LOGGED} admin {/if}" aria-label="{$IMAGE.TITLE}">
{if $IMAGE.IMG1.PATH || $IMAGE.IMG2.PATH}
<picture class="d-flex align-items-center justify-content-center overflow-hidden">
{if $IMAGE.IMG1.PATH}
<img {if $IS_LAZY_LOAD_ACTIVE == '1'} src="{$LAZY_LOAD_LOADING_IMAGE}" data-src="{$IMAGE.IMG1.PATH}"
class="{if $SETTING.EFFECT_BG_BRIGHTNESS}map-point-bg-brightness{/if} w-100 ease border-round lazyload" loading="lazy" {else} src="{$IMAGE.IMG1.PATH}" class="{if $SETTING.EFFECT_BG_BRIGHTNESS}map-point-bg-brightness{/if} w-100 ease border-round"
{/if}
width="{$IMAGE.IMG1.WIDTH}" height="{$IMAGE.IMG1.HEIGHT}" alt="{$IMAGE.TITLE}">
{/if}
<div class="position-absolute inset {$SETTING.BG_OVERLAY}"></div>
</picture>
{foreach from=$DATA_AREAS item=DATA key=key name=name}
{assign var="D" value="|"|explode:$DATA}
{product id="{$D[2]}" assign="P"}
{if $D[0] || $D[1] || $D[2]}
<span class="d-flex dropdown align-items-center justify-content-center position-absolute cursor-pointer border border-circle border-white map-point translate-middle {if $SETTING.EFFECT_PULSE}effect-pulse{/if}"
style="left:{$D[0]}%; top:{$D[1]}%;">
<span class="dropdown-title border border-circle d-flex align-items-center {$SETTING.DOT_COLOR|default:'bg-white'}" data-toggle="dropdown">
</span>
<div
class="dropdown-menu border-round {if $D[0]>50} right-100 left-auto {else} left-100 {/if} {if $D[1]>50} bottom-100 top-auto {else} top-100 {/if}">
<div class="w-100 product-item">
<a href="{$P.URL}" class="image-wrapper">
<picture class="image-inner">
<img src="{$P.IMAGE.SMALL}" class="" loading="lazy">
</picture>
</a>
<div class="d-flex flex-wrap gap-1 map-product-info">
<a href="{$P.URL}" class="w-100 mt-1 fw-semibold text-dark product-title text-content">{$P.TITLE}</a>
<div class="w-100 product-price-wrapper d-flex flex-wrap">
{if $P.IS_DISPLAY_DISCOUNTED_ACTIVE == 1}
<div class="mr-1 product-discounted-price text-delete {if $P.DISCOUNT_PERCENT <= 0}d-none{/if}">
<span class="product-price-not-discounted">{vat price=$P.PRICE_NOT_DISCOUNTED vat=$P.VAT}</span>
{$P.TARGET_CURRENCY}
</div>
{/if}
<div class="current-price">
{if $P.DISPLAY_VAT === "1"}
<strong class="fw-black product-price">{vat price=$P.PRICE_SELL vat=$P.VAT}</strong>
{$P.TARGET_CURRENCY}
{else}
<strong class="fw-black product-price-not-vat">{format price=$P.PRICE_SELL}</strong>
{$P.TARGET_CURRENCY} <i class="ti-plus"></i> {#vat#}
{/if}
</div>
</div>
</div>
</div>
</div>
</span>
{/if}
{/foreach}
{/if}
</div>
</div>
{/foreach}
</div>
</div>

Scss#

scss
@include BLOCK {
.admin{
cursor: crosshair;
}
.map-point-wrapper {
&:hover {
.map-point-bg-brightness {
filter: brightness(0.75);
transition-duration: 0.5s;
}
}
.map-point {
padding: 3px;
.dropdown {
&-title {
width: clamp(13px, 1vw, 20px);
aspect-ratio: 1;
}
&-menu {
max-width: clamp(120px, 10vw, 170px);
.product-title{
@include line-clamp(3);
}
}
}
&.effect-pulse {
animation: effect-pulse 1500ms infinite;
}
@keyframes effect-pulse {
0% {
box-shadow: 0 0 0 1px $bgWhite;
}
100% {
box-shadow: 0 0 0 8px transparent;
}
}
}
.left-auto {
left: auto !important;
}
.top-auto {
top: auto !important;
}
}
}
javascript
if(ADMIN_USER_FULLNAME.trim()){
T(`.map-point-wrapper`).on(`click`, function (e) {
let xPercent = Math.round((e.offsetX / this.clientWidth) * 100);
let yPercent = Math.round((e.offsetY / this.clientHeight) * 100);
let copyText = `${xPercent}|${yPercent}`;
navigator.clipboard.writeText(copyText);
console.log(copyText);
T.notify({
text: `${copyText}`+"</br>Konumu kopyalandı",
className: `success`,
duration: 3200,
stopOnFocus: true,
close: true,
gravity: `top`,
position: `left`,
iconClass: `ti-copy`,
});
});
}

Setting#

json
{
"setting": [
{
"xtype": "select",
"key": "DOT_COLOR",
"title": "Nokta Rengi",
"data": "bg-white",
"store": {
"bg-primary": "bg-primary",
"bg-secondary": "bg-secondary",
"bg-white": "bg-white",
"bg-black": "bg-black",
"bg-success": "bg-success",
"bg-info": "bg-info",
"bg-warning": "bg-warning",
"bg-danger": "bg-danger",
"bg-gray": "bg-gray",
"bg-light": "bg-light",
"bg-dark": "bg-dark",
"bg-body": "bg-body",
"bg-custom": "bg-custom"
}
},
{
"xtype": "select",
"key": "BG_OVERLAY",
"title": "Overlay Rengi",
"data": "",
"store": {
"overlay-primary": "overlay-primary",
"overlay-secondary": "overlay-secondary",
"overlay-white": "overlay-white",
"overlay-black": "overlay-black",
"overlay-success": "overlay-success",
"overlay-info": "overlay-info",
"overlay-warning": "overlay-warning",
"overlay-danger": "overlay-danger",
"overlay-gray": "overlay-gray",
"overlay-light": "overlay-light",
"overlay-dark": "overlay-dark",
"overlay-body": "overlay-body",
"overlay-custom": "overlay-custom",
"": "overlay yok"
}
},
{
"xtype": "checkbox",
"key": "EFFECT_BG_BRIGHTNESS",
"title": "Hover Arkaplan Efekti",
"data": 1
},
{
"xtype": "checkbox",
"key": "EFFECT_PULSE",
"title": "Nokta Efekti",
"data": 1
}
]
}