114 lines
5.3 KiB
Smarty
114 lines
5.3 KiB
Smarty
{if isset($live_photos) && !empty($live_photos)}
|
||
<div id="addlivephoto-container" class="mt-3 mb-3">
|
||
<h6 class="h6 text-uppercase text-muted mb-2" style="font-size: 0.8rem; letter-spacing: 0.05em;">
|
||
<i class="material-icons" style="font-size: 1rem; vertical-align: text-bottom;">verified</i>
|
||
{l s='Live Warehouse Photos' d='Modules.Addlivephoto.Shop'}
|
||
</h6>
|
||
|
||
<div class="d-flex flex-wrap gap-2">
|
||
{foreach from=$live_photos item=photo name=livephotoloop}
|
||
<div class="position-relative">
|
||
<a href="{$photo.url|escape:'htmlall':'UTF-8'}" class="live-photo-thumb d-block" data-bs-toggle="modal"
|
||
data-bs-target="#livePhotoModal" data-photo-index="{$smarty.foreach.livephotoloop.index}">
|
||
<img src="{$photo.url|escape:'htmlall':'UTF-8'}" alt="{$photo.alt|escape:'htmlall':'UTF-8'}"
|
||
class="img-thumbnail" width="80" height="80" loading="lazy" style="object-fit: cover;">
|
||
</a>
|
||
|
||
{* BADGES *}
|
||
{if $photo.type == 'expiry'}
|
||
<span class="badge bg-success position-absolute bottom-0 start-0 w-100 rounded-0 rounded-bottom"
|
||
style="font-size: 0.6rem;">
|
||
{l s='Expiry Date' d='Modules.Addlivephoto.Shop'}
|
||
</span>
|
||
{else}
|
||
<span class="badge bg-info position-absolute bottom-0 start-0 w-100 rounded-0 rounded-bottom"
|
||
style="font-size: 0.6rem;">
|
||
{l s='Packaging' d='Modules.Addlivephoto.Shop'}
|
||
</span>
|
||
{/if}
|
||
|
||
{* SCHEMA.ORG METADATA FOR GOOGLE (Hidden but readable by bots) *}
|
||
<div style="display:none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
|
||
<meta itemprop="contentUrl" content="{$photo.url|escape:'htmlall':'UTF-8'}" />
|
||
<meta itemprop="uploadDate" content="{$photo.date|escape:'htmlall':'UTF-8'}" />
|
||
<meta itemprop="description" content="{$photo.alt|escape:'htmlall':'UTF-8'}" />
|
||
</div>
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
</div>
|
||
|
||
{* Modal code remains mostly same, just ensuring script handles it *}
|
||
<div class="modal fade" id="livePhotoModal" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">{l s='Live Stock Photo' d='Modules.Addlivephoto.Shop'}</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body text-center p-0 bg-light">
|
||
<img id="livePhotoModalImage" src="" class="img-fluid" style="max-height: 80vh;">
|
||
</div>
|
||
<div class="modal-footer justify-content-between">
|
||
<small class="text-muted" id="livePhotoModalDate"></small>
|
||
<p id="livePhotoModalCaption" class="mb-0 fw-bold"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// 1. Ініціалізація даних
|
||
const photos = {$live_photos|json_encode nofilter};
|
||
// Отримуємо дані про товар з Smarty (PrestaShop зазвичай має змінну $product)
|
||
const productId = '{$product.id_product|default:0}';
|
||
const productName = '{$product.name|escape:"javascript"}';
|
||
|
||
// Елементи модального вікна
|
||
const modalElement = document.getElementById('livePhotoModal');
|
||
const modalImg = document.getElementById('livePhotoModalImage');
|
||
const modalCap = document.getElementById('livePhotoModalCaption');
|
||
const modalDate = document.getElementById('livePhotoModalDate');
|
||
|
||
// --- ФУНКЦІЯ TREKING (GA4) ---
|
||
const trackClick = (photoType) => {
|
||
if (typeof gtag === 'function') {
|
||
gtag('event', 'select_content', {
|
||
'content_type': 'live_photo',
|
||
'item_id': productId,
|
||
'item_name': productName,
|
||
'photo_type': photoType, // 'expiry' або 'packaging'
|
||
'event_category': 'Product Engagement',
|
||
'event_label': 'Live Photo Click'
|
||
});
|
||
console.log('GA4 Event sent: ' + photoType);
|
||
} else {
|
||
console.log('GA4 not loaded');
|
||
}
|
||
};
|
||
|
||
// --- ОБРОБНИКИ КЛІКІВ ---
|
||
document.querySelectorAll('.live-photo-thumb').forEach(link => {
|
||
link.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
const idx = e.currentTarget.dataset.photoIndex;
|
||
|
||
if (photos[idx]) {
|
||
// Оновлення модалки
|
||
modalImg.src = photos[idx].url;
|
||
modalCap.textContent = photos[idx].alt;
|
||
modalDate.textContent = "Дата зйомки/завантаження: " + photos[idx].date;
|
||
|
||
// ВІДПРАВКА ПОДІЇ
|
||
// photos[idx].type ми додали в попередньому кроці (expiry/packaging)
|
||
trackClick(photos[idx].type || 'unknown');
|
||
}
|
||
});
|
||
});
|
||
|
||
// (Опціонально) Відстеження перегляду самого блоку, якщо він видимий
|
||
// Можна реалізувати через IntersectionObserver, але кліку зазвичай достатньо.
|
||
});
|
||
</script>
|
||
{/if} |