Edit File: affiliate-cosmetic.php
<?php if (class_exists('CSF')) { CSF::createWidget('cta_cosmetic_widget_product', array( 'title' => esc_html__('Oruno - CTA Slider Modülü', 'oruno'), 'class' => 'orun-widget-fields', 'description' => esc_html__('Call to Action amaçlı oluşturacağınız tek ürün slider modülümüz.', 'oruno'), 'fields' => array( array( 'id' => 'title', 'type' => 'text', 'title' => esc_html__('Bileşen başlığını giriniz.', 'oruno'), 'subtitle' => esc_html__('Affiliate alanının başlığını giriniz.', 'oruno'), 'default' => 'Önerilen Ürünler', ), array( 'type' => 'notice', 'style' => 'warning', 'content' => 'Tüm Butonlar için renk ayarları', ), array( 'id' => 'urun1_buton_yazisi_renk', 'type' => 'color', 'title' => esc_html__('Tüm Butonlar için Buton Yazı Rengini seçiniz:', 'oruno'), 'subtitle' => esc_html__('Buton yazı rengini seçiniz.', 'oruno'), 'default' => '#0B3D91', ), array( 'id' => 'urun1_buton_yazisi_arkaplan', 'type' => 'color', 'title' => esc_html__('Tüm Butonlar için Arkaplan Rengini seçiniz:', 'oruno'), 'subtitle' => esc_html__('Arkaplan Rengini seçiniz.', 'oruno'), 'default' => '#9825ce', ), array( 'type' => 'notice', 'style' => 'warning', 'content' => 'Birinci Ürün İçin Başlangıç', ), array( 'id' => 'imagefield', 'type' => 'media', 'title' => esc_html__('1.Ürünün Görselini Seçin:', 'oruno'), 'subtitle' => esc_html__('Bir görsel seçin veya yükleyin.', 'oruno'), 'default' => esc_url('https://img-cosmetica.mncdn.com/UPLOAD/URUNLER/thumb/228054_1_medium.jpg') ), array( 'id' => 'urun1_baslik', 'type' => 'text', 'title' => esc_html__('Ürün başlığını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün için başlık giriniz.', 'oruno'), 'default' => 'Pretty Pb-136 Tattoo Studio Dipliner', ), array( 'id' => 'urun1_aciklamasi', 'type' => 'text', 'title' => esc_html__('Ürün Açıklamasını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün açıklamasını kısaca giriniz.', 'oruno'), 'default' => 'Hassas ciltler için özel olarak formüle edilmiş, hassasiyeti en aza indiren ve göz çevresinde güvenle kullanılabilir.', ), array( 'id' => 'urun1_buton_yazisi', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki yazı içeriğini giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton yazısını giriniz.', 'oruno'), 'default' => 'Satın Al', ), array( 'id' => 'urun1_buton_linki', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki linki giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton linkini giriniz.', 'oruno'), 'default' => 'https://orunotema.com.tr/', ), array( 'type' => 'notice', 'style' => 'warning', 'content' => 'İkinci Ürün İçin Başlangıç', ), array( 'id' => 'imagefield2', 'type' => 'media', 'title' => esc_html__('1.Ürünün Görselini Seçin:', 'oruno'), 'subtitle' => esc_html__('Bir görsel seçin veya yükleyin.', 'oruno'), 'default' => esc_url('https://img-cosmetica.mncdn.com/UPLOAD/URUNLER/thumb/228054_1_medium.jpg') ), array( 'id' => 'urun2_baslik', 'type' => 'text', 'title' => esc_html__('Ürün başlığını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün için başlık giriniz.', 'oruno'), 'default' => 'Maybelline New York Lifter Plump', ), array( 'id' => 'urun2_aciklamasi', 'type' => 'text', 'title' => esc_html__('Ürün Açıklamasını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün açıklamasını kısaca giriniz.', 'oruno'), 'default' => 'Hassas ciltler için özel olarak formüle edilmiş, hassasiyeti en aza indiren ve göz çevresinde güvenle kullanılabilir.', ), array( 'id' => 'urun2_buton_yazisi', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki yazı içeriğini giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton yazısını giriniz.', 'oruno'), 'default' => 'Satın Al', ), array( 'id' => 'urun2_buton_linki', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki linki giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton linkini giriniz.', 'oruno'), 'default' => 'https://orunotema.com.tr/', ), array( 'type' => 'notice', 'style' => 'warning', 'content' => 'Üçüncü Ürün İçin Başlangıç', ), array( 'id' => 'imagefield3', 'type' => 'media', 'title' => esc_html__('1.Ürünün Görselini Seçin:', 'oruno'), 'subtitle' => esc_html__('Bir görsel seçin veya yükleyin.', 'oruno'), 'default' => esc_url('https://img-cosmetica.mncdn.com/UPLOAD/URUNLER/thumb/228054_1_medium.jpg') ), array( 'id' => 'urun3_baslik', 'type' => 'text', 'title' => esc_html__('Ürün başlığını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün için başlık giriniz.', 'oruno'), 'default' => 'Neutrogena Retinol Boost Gece Kremi 50 Ml', ), array( 'id' => 'urun3_aciklamasi', 'type' => 'text', 'title' => esc_html__('Ürün Açıklamasını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün açıklamasını kısaca giriniz.', 'oruno'), 'default' => 'Hassas ciltler için özel olarak formüle edilmiş, hassasiyeti en aza indiren ve göz çevresinde güvenle kullanılabilir.', ), array( 'id' => 'urun3_buton_yazisi', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki yazı içeriğini giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton yazısını giriniz.', 'oruno'), 'default' => 'Satın Al', ), array( 'id' => 'urun3_buton_linki', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki linki giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton linkini giriniz.', 'oruno'), 'default' => 'https://orunotema.com.tr/', ), array( 'type' => 'notice', 'style' => 'warning', 'content' => 'Dördüncü Ürün İçin Başlangıç', ), array( 'id' => 'imagefield4', 'type' => 'media', 'title' => esc_html__('1.Ürünün Görselini Seçin:', 'oruno'), 'subtitle' => esc_html__('Bir görsel seçin veya yükleyin.', 'oruno'), 'default' => esc_url('https://img-cosmetica.mncdn.com/UPLOAD/URUNLER/thumb/228054_1_medium.jpg') ), array( 'id' => 'urun4_baslik', 'type' => 'text', 'title' => esc_html__('Ürün başlığını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün için başlık giriniz.', 'oruno'), 'default' => 'Rexona Deodorant Men Black &White 200 Ml', ), array( 'id' => 'urun4_aciklamasi', 'type' => 'text', 'title' => esc_html__('Ürün Açıklamasını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün açıklamasını kısaca giriniz.', 'oruno'), 'default' => 'Hassas ciltler için özel olarak formüle edilmiş, hassasiyeti en aza indiren ve göz çevresinde güvenle kullanılabilir.', ), array( 'id' => 'urun4_buton_yazisi', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki yazı içeriğini giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton yazısını giriniz.', 'oruno'), 'default' => 'Satın Al', ), array( 'id' => 'urun4_buton_linki', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki linki giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton linkini giriniz.', 'oruno'), 'default' => 'https://orunotema.com.tr/', ), array( 'type' => 'notice', 'style' => 'warning', 'content' => 'Beşinci Ürün için Başlangıç *** Slider Başlıyor..', ), array( 'id' => 'affi1active', 'type' => 'switcher', 'title' => esc_html__('Bileşen Aktifliği:', 'oruno'), 'subtitle' => esc_html__('Bileşenin gözükmesini istemiyorsanız aktifliği kapatınız.', 'oruno'), 'default' => false, ), array( 'id' => 'imagefield5', 'type' => 'media', 'title' => esc_html__('5.Ürünün Görselini Seçin:', 'oruno'), 'subtitle' => esc_html__('Bir görsel seçin veya yükleyin.', 'oruno'), 'default' => esc_url('https://img-cosmetica.mncdn.com/UPLOAD/URUNLER/thumb/228054_1_medium.jpg') ), array( 'id' => 'urun5_baslik', 'type' => 'text', 'title' => esc_html__('Ürün başlığını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün için başlık giriniz.', 'oruno'), 'default' => 'Neutrogena Nemlendirici Vücut Losyonu', ), array( 'id' => 'urun5_aciklamasi', 'type' => 'text', 'title' => esc_html__('Ürün Açıklamasını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün açıklamasını kısaca giriniz.', 'oruno'), 'default' => 'Hassas ciltler için özel olarak formüle edilmiş, hassasiyeti en aza indiren ve göz çevresinde güvenle kullanılabilir.', ), array( 'id' => 'urun5_buton_yazisi', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki yazı içeriğini giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton yazısını giriniz.', 'oruno'), 'default' => 'Satın Al', ), array( 'id' => 'urun5_buton_linki', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki linki giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton linkini giriniz.', 'oruno'), 'default' => 'https://orunotema.com.tr/', ), array( 'type' => 'notice', 'style' => 'warning', 'content' => 'Altıncı Ürün için Başlangıç *** Slider Başlıyor..', ), array( 'id' => 'affi2active', 'type' => 'switcher', 'title' => esc_html__('Bileşen Aktifliği:', 'oruno'), 'subtitle' => esc_html__('Bileşenin gözükmesini istemiyorsanız aktifliği kapatınız.', 'oruno'), 'default' => false, ), array( 'id' => 'imagefield6', 'type' => 'media', 'title' => esc_html__('1.Ürünün Görselini Seçin:', 'oruno'), 'subtitle' => esc_html__('Bir görsel seçin veya yükleyin.', 'oruno'), 'default' => esc_url('https://img-cosmetica.mncdn.com/UPLOAD/URUNLER/thumb/228054_1_medium.jpg') ), array( 'id' => 'urun6_baslik', 'type' => 'text', 'title' => esc_html__('Ürün başlığını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün için başlık giriniz.', 'oruno'), 'default' => 'Rbl Blazer Kofre Unknown Erkek Parfüm', ), array( 'id' => 'urun6_aciklamasi', 'type' => 'text', 'title' => esc_html__('Ürün Açıklamasını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün açıklamasını kısaca giriniz.', 'oruno'), 'default' => 'Hassas ciltler için özel olarak formüle edilmiş, hassasiyeti en aza indiren ve göz çevresinde güvenle kullanılabilir.', ), array( 'id' => 'urun6_buton_yazisi', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki yazı içeriğini giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton yazısını giriniz.', 'oruno'), 'default' => 'Satın Al', ), array( 'id' => 'urun6_buton_linki', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki linki giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton linkini giriniz.', 'oruno'), 'default' => 'https://orunotema.com.tr/', ), array( 'type' => 'notice', 'style' => 'warning', 'content' => 'Yedinci Ürün için Başlangıç ', ), array( 'id' => 'affi3active', 'type' => 'switcher', 'title' => esc_html__('Bileşen Aktifliği:', 'oruno'), 'subtitle' => esc_html__('Bileşenin gözükmesini istemiyorsanız aktifliği kapatınız.', 'oruno'), 'default' => false, ), array( 'id' => 'imagefield7', 'type' => 'media', 'title' => esc_html__('1.Ürünün Görselini Seçin:', 'oruno'), 'subtitle' => esc_html__('Bir görsel seçin veya yükleyin.', 'oruno'), 'default' => esc_url('https://img-cosmetica.mncdn.com/UPLOAD/URUNLER/thumb/228054_1_medium.jpg') ), array( 'id' => 'urun7_baslik', 'type' => 'text', 'title' => esc_html__('Ürün başlığını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün için başlık giriniz.', 'oruno'), 'default' => 'Elidor Güçlü Parlak Şampuan 400 Ml', ), array( 'id' => 'urun7_aciklamasi', 'type' => 'text', 'title' => esc_html__('Ürün Açıklamasını giriniz.', 'oruno'), 'subtitle' => esc_html__('Ürün açıklamasını kısaca giriniz.', 'oruno'), 'default' => 'Hassas ciltler için özel olarak formüle edilmiş, hassasiyeti en aza indiren ve göz çevresinde güvenle kullanılabilir.', ), array( 'id' => 'urun7_buton_yazisi', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki yazı içeriğini giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton yazısını giriniz.', 'oruno'), 'default' => 'Satın Al', ), array( 'id' => 'urun7_buton_linki', 'type' => 'text', 'title' => esc_html__('Ürün Butonundaki linki giriniz.', 'oruno'), 'subtitle' => esc_html__('Buton linkini giriniz.', 'oruno'), 'default' => 'https://orunotema.com.tr/', ), ) )); // Bileşenin içeriğini gösteren fonksiyon if (!function_exists('cta_cosmetic_widget_product')) { function cta_cosmetic_widget_product($args, $instance) { $urun_aciklamasi = $instance['urun_aciklamasi']; echo $urun_aciklamasi; if (!empty($instance['title'])) { echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title']; } ?> <style> .product-slider { width: 100%; height: 600px; position: relative; overflow-x: hidden; overflow-y: hidden; padding:0px 25px; } .slide{ } .product-slider::-webkit-scrollbar { display: none; } .product-slider .slide { display: flex; position: absolute; left: 0; transition: 0.3s left ease-in-out; } .product-slider .item { margin-right: 20px; width: 300px; /* Ayarlayabilirsiniz */ } .product-slider .item:last-child { margin-right: 0; } .item-content { padding: 20px; border: 1px solid #f2f2f2; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .item-content h3{ font-size: 18px !important; font-weight:700 } .item-content p{ font-size: 15px !important; } .item-content button{ height:40px; width:100px; font-family:'Poppins', sans-serif; margin-top:25px; min-width: 50px; background: #ff0000; /* Kırmızı ve beyaz gradient */ border: none; color: #FFF; /* Beyaz yazı rengi */ font-weight: 400; text-align: center; transition: all 0.3s ease; /* Tüm özelliklerde 0.3 saniyelik geçiş efekti */ } .item-content button:hover { background: #fff; /* Beyaz arka plan */ color: #ff0000; /* Kırmızı yazı rengi */ border: 1px solid #ff0000; transform: scale(1.1); /* 10% büyütme animasyonu */ } .item img { width: 100%; height: auto; border-radius: 10px; /* Apply border radius to the image itself */ } .ctrl { text-align: center; margin-top: 5px; } .ctrl-btn { padding: 20px 20px; min-width: 50px; border: none; background-color: rgba(255, 255, 255, 0); color: #ff0000; font-weight: 600; text-align: center; cursor: pointer; outline: none; position: absolute; top: 50%; margin-top: -27.5px; transition: all 0.3s ease; } .ctrl-btn.pro-prev { left: -30px; } .ctrl-btn.pro-next { right: 0; } .ctrl-btn.pro-prev:hover { transform: translateX(-5px); /* Düğmeyi sola kaydırma */ } /* Sağ düğme (Next) */ .ctrl-btn.pro-next:hover { transform: translateX(5px); /* Düğmeyi sağa kaydırma */ } </style> <div class="product-slider" id="product-slider" style="margin-top:50px;margin-bottom:50px;"> <div class="slide" id="slide"> <div class="item"> <div class="item-content"> <?php if (!empty($instance['imagefield']['url'])) { $image_url = esc_url($instance['imagefield']['url']); if (!empty($image_url)) { echo ' <img src="' . $image_url . '"> '; } } ?> <h3><?php if (!empty($instance['urun1_baslik'])) { echo wp_kses_post($instance['urun1_baslik']); } ?></h3> <p><?php if (!empty($instance['urun1_aciklamasi'])) { echo wp_kses_post($instance['urun1_aciklamasi']); } ?></p> <div class="row" style="justify-content:center;"> <?php $urun_buton_renk = esc_attr($instance['urun1_buton_yazisi_renk']); $urun_buton_yazisi_arkaplan = esc_attr($instance['urun1_buton_yazisi_arkaplan']); ?> <button style="background-color:<?php echo $urun_buton_yazisi_arkaplan ?>;color: <?php echo $urun_buton_yazisi_renk?>;" ><a rel="nofollow" href=" <?php if (!empty($instance['urun1_buton_linki'])) { echo wp_kses_post($instance['urun1_buton_linki']); } ?>"><?php if (!empty($instance['urun1_buton_yazisi'])) { echo wp_kses_post($instance['urun1_buton_yazisi']); } ?></a></button> </div> </div> </div> <div class="item"> <div class="item-content"> <?php if (!empty($instance['imagefield2']['url'])) { $image_url2 = esc_url($instance['imagefield2']['url']); if (!empty($image_url2)) { echo ' <img src="' . $image_url2 . '"> '; } } ?> <h3><?php if (!empty($instance['urun2_baslik'])) { echo wp_kses_post($instance['urun2_baslik']); } ?></h3> <p><?php if (!empty($instance['urun2_aciklamasi'])) { echo wp_kses_post($instance['urun2_aciklamasi']); } ?></p> <div class="row" style="justify-content:center;"> <button style="background-color:<?php echo $urun_buton_yazisi_arkaplan ?>;color: <?php echo $urun_buton_yazisi_renk?>;"><a rel="nofollow" href=" <?php if (!empty($instance['urun2_buton_linki'])) { echo wp_kses_post($instance['urun2_buton_linki']); } ?>"><?php if (!empty($instance['urun2_buton_yazisi'])) { echo wp_kses_post($instance['urun2_buton_yazisi']); } ?></a></button> </div> </div> </div> <div class="item"> <div class="item-content"> <?php if (!empty($instance['imagefield3']['url'])) { $image_url3 = esc_url($instance['imagefield3']['url']); if (!empty($image_url3)) { echo ' <img src="' . $image_url3 . '"> '; } } ?> <h3><?php if (!empty($instance['urun3_baslik'])) { echo wp_kses_post($instance['urun3_baslik']); } ?></h3> <p><?php if (!empty($instance['urun3_aciklamasi'])) { echo wp_kses_post($instance['urun3_aciklamasi']); } ?></p> <div class="row" style="justify-content:center;"> <button style="background-color:<?php echo $urun_buton_yazisi_arkaplan ?>;color: <?php echo $urun_buton_yazisi_renk?>;"><a rel="nofollow" href=" <?php if (!empty($instance['urun3_buton_linki'])) { echo wp_kses_post($instance['urun3_buton_linki']); } ?>"><?php if (!empty($instance['urun3_buton_yazisi'])) { echo wp_kses_post($instance['urun3_buton_yazisi']); } ?></a></button> </div> </div> </div> <div class="item"> <div class="item-content"> <?php if (!empty($instance['imagefield4']['url'])) { $image_url4 = esc_url($instance['imagefield4']['url']); if (!empty($image_url4)) { echo ' <img src="' . $image_url4 . '"> '; } } ?> <h3><?php if (!empty($instance['urun4_baslik'])) { echo wp_kses_post($instance['urun4_baslik']); } ?></h3> <p><?php if (!empty($instance['urun4_aciklamasi'])) { echo wp_kses_post($instance['urun4_aciklamasi']); } ?></p> <div class="row" style="justify-content:center;"> <button style="background-color:<?php echo $urun_buton_yazisi_arkaplan ?>;color: <?php echo $urun_buton_yazisi_renk?>;"><a rel="nofollow" href=" <?php if (!empty($instance['urun4_buton_linki'])) { echo wp_kses_post($instance['urun4_buton_linki']); } ?>"><?php if (!empty($instance['urun4_buton_yazisi'])) { echo wp_kses_post($instance['urun4_buton_yazisi']); } ?></a></button> </div> </div> </div> <?php if (!empty($instance['affi1active'])) { ?> <div class="item"> <div class="item-content"> <?php if (!empty($instance['imagefield5']['url'])) { $image_url5 = esc_url($instance['imagefield5']['url']); if (!empty($image_url5)) { echo ' <img src="' . $image_url5 . '"> '; } } ?> <h3><?php if (!empty($instance['urun5_baslik'])) { echo wp_kses_post($instance['urun5_baslik']); } ?></h3> <p><?php if (!empty($instance['urun5_aciklamasi'])) { echo wp_kses_post($instance['urun5_aciklamasi']); } ?></p> <div class="row" style="justify-content:center;"> <button style="background-color:<?php echo $urun_buton_yazisi_arkaplan ?>;color: <?php echo $urun_buton_yazisi_renk?>;"><a rel="nofollow" href=" <?php if (!empty($instance['urun5_buton_linki'])) { echo wp_kses_post($instance['urun5_buton_linki']); } ?>"><?php if (!empty($instance['urun5_buton_yazisi'])) { echo wp_kses_post($instance['urun5_buton_yazisi']); } ?></a></button> </div> </div> </div> <?php } ?> <?php if (!empty($instance['affi2active'])) { ?> <div class="item"> <div class="item-content"> <?php if (!empty($instance['imagefield6']['url'])) { $image_url6 = esc_url($instance['imagefield6']['url']); if (!empty($image_url6)) { echo ' <img src="' . $image_url6 . '"> '; } } ?> <h3><?php if (!empty($instance['urun6_baslik'])) { echo wp_kses_post($instance['urun6_baslik']); } ?></h3> <p><?php if (!empty($instance['urun6_aciklamasi'])) { echo wp_kses_post($instance['urun6_aciklamasi']); } ?></p> <div class="row" style="justify-content:center;"> <button style="background-color:<?php echo $urun_buton_yazisi_arkaplan ?>;color: <?php echo $urun_buton_yazisi_renk?>;"><a rel="nofollow" href=" <?php if (!empty($instance['urun6_buton_linki'])) { echo wp_kses_post($instance['urun6_buton_linki']); } ?>"><?php if (!empty($instance['urun6_buton_yazisi'])) { echo wp_kses_post($instance['urun6_buton_yazisi']); } ?></a></button> </div> </div> </div> <?php } ?> <?php if (!empty($instance['affi3active'])) { ?> <div class="item"> <div class="item-content"> <?php if (!empty($instance['imagefield7']['url'])) { $image_url7 = esc_url($instance['imagefield7']['url']); if (!empty($image_url7)) { echo ' <img src="' . $image_url7 . '"> '; } } ?> <h3><?php if (!empty($instance['urun7_baslik'])) { echo wp_kses_post($instance['urun7_baslik']); } ?></h3> <p><?php if (!empty($instance['urun7_aciklamasi'])) { echo wp_kses_post($instance['urun7_aciklamasi']); } ?></p> <div class="row" style="justify-content:center;"> <button style="background-color:<?php echo $urun_buton_yazisi_arkaplan ?>;color: <?php echo $urun_buton_yazisi_renk?>;"><a rel="nofollow" href=" <?php if (!empty($instance['urun7_buton_linki'])) { echo wp_kses_post($instance['urun7_buton_linki']); } ?>"><?php if (!empty($instance['urun7_buton_yazisi'])) { echo wp_kses_post($instance['urun7_buton_yazisi']); } ?></a></button> </div> </div> </div> <?php } ?> </div> <?php if (!empty($instance['affi1active'])) { ?> <button class="ctrl-btn pro-prev"><i class="fas fa-chevron-left"></i></button> <button class="ctrl-btn pro-next"><i class="fas fa-chevron-right"></i></button> <?php } ?> </div> <script> productScroll(); function productScroll() { let slider = document.getElementById("product-slider"); let next = document.getElementsByClassName("pro-next"); let prev = document.getElementsByClassName("pro-prev"); let slide = document.getElementById("slide"); let item = document.getElementById("slide"); for (let i = 0; i < next.length; i++) { let position = 0; prev[i].addEventListener("click", function () { if (position > 0) { position -= 1; translateX(position); } }); next[i].addEventListener("click", function () { if (position >= 0 && position < hiddenItems()) { position += 1; translateX(position); } else if (position >= hiddenItems()) { position = 0; translateX(position); } }); } function hiddenItems() { let items = getCount(item, false); let visibleItems = slider.offsetWidth / 330; return items - Math.ceil(visibleItems); } } function translateX(position) { slide.style.left = position * -330 + "px"; } function getCount(parent, getChildrensChildren) { let relevantChildren = 0; let children = parent.childNodes.length; for (let i = 0; i < children; i++) { if (parent.childNodes[i].nodeType != 3) { if (getChildrensChildren) relevantChildren += getCount(parent.childNodes[i], true); relevantChildren++; } } return relevantChildren; } </script> <?php } } } ?>