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
    }
  ]
}