Drupal 8 ile kendinize özel popup mesajı oluşturmak için sisteminizde bootstrap kütüphanesinin ekli olması gerekmektedir.
 

İlk olarak kendimize bir region oluşturalım.

Region ı drupal 8 altında sitenizin bulunduğu alandaki sitem.info.yml dosyasını açıp içinde regions kısmına kendi regionımızı ekleyeceğiz. Bu region oluşturacağımız bloğun ekranda görünmesi için bir alan hazırlayacak bizlere.
ÖRNEK :
regions:
  header: 'Header'
  primary_menu: 'Primary Menu'
  secondary_menu: 'Secondary Menu'
  contentfront: 'Content Front'
  content: 'Content'
  footer: 'Footer'
 -> popup: 'Popup Message'

Region tanımlama yaptığımıza göre artık bu region sistemimize entegre edelim.
templates -> layout -> page--front.html.twig(Ana sayfa için işlem yapacağım siz isterseniz page.html.twig dosyasını kullanabilirsin iz bu dosya tüm sayfalarda çalışmaktadır.) dosyasını açarak en alta iniyorum ve aşağıdaki kodu ekliyorum.


{% if page.popup %}
    {{ page.popup }}
{% endif %}

Burada eklediğimiz kodda dikkat etmemiz gereken nokta info kısmına eklediğimiz region ın adını burada girmek durumundayız.

Region ekleme işlemi ardından bu region için bir block ve block içinde bir tema oluşturmamız gerekmekte.

Sistem üzerinden custom bir block oluşturun. Adının ne olduğu önemli değildir. Ardından bu bloğu eklediğimiz region a ekleme işlemi yaparken buraya dikkat makine adını popmessageblock şeklinde belirliyoruz. Bunun sebebi daha sonra ekleyeğimiz programatik block temasının adında bu makina adını barındıracaktır.

Kayıt işleminin ardından tekrardan dosya sistemine geri dönüyoruz.

templates -> block ->block--popmessageblock.html.twig dosyasının içerisine alttaki kod bloğunu ekliyoruz , bu kod bloğunda yer alan veriler bizimeklediğimiz blockdan gelecektir. 

{{ label }} =Eklediğimiz block başlığı,

{{ content }} =Eklediğimiz block içeriği,

id="mypopmessage" = Ekleyeceğimiz javascript verisini bu id üzerinden çekeceğiz. 

{#
/**
 * @file
 * Theme override to display a block.
 *
 * Available variables:
 * - plugin_id: The ID of the block implementation.
 * - label: The configured label of the block if visible.
 * - configuration: A list of the block's configuration values.
 *   - label: The configured label for the block.
 *   - label_display: The display settings for the label.
 *   - provider: The module or other provider that provided this block plugin.
 *   - Block plugin specific settings will also be stored here.
 * - content: The content of this block.
 * - attributes: array of HTML attributes populated by modules, intended to
 *   be added to the main container tag of this template.
 *   - id: A valid HTML ID and guaranteed unique.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 *
 * @see template_preprocess_block()
 */
#}
{%
  set classes = [
    'block',
    'block-' ~ configuration.provider|clean_class,
    'block-' ~ plugin_id|clean_class,
  ]
%}
<div class="modal fade" id="mypopmessage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">{{ label }}</h4>
      </div>
      <div class="modal-body">
         {{ content }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Kapat</button>
      </div>
    </div>
  </div>
</div>
 


Ek olarak bu işlemde birde popup ımızın her ekran yenilenmesinde gelmesini engellemek için bir timer eklememiz gerekiyor bu timer ı tutabilmek içinde jquery nin cookie js dosyasına ihtiyacımız var, Buraya tıklayarak linkteki js içeriğini kopyalayın ve js klasörünüzün altında yeni bir dosya oluşturarak içerini kopyaladığınız js verisini yapıştırın.
Bu oluşturduğumuz yeni js dosyasının bilgisini de libraries.yml dosyasına eklememiz gerekmektedir.

Örnek :
  js:
    js/bootstrap.min.js: {}
    js/script.js: {}
    js/jquery.cookie.js: {}
 

Şimdi script.js(sizin kullandığınız custom js dosyanız )  dosyamızın içerisine aşağıdaki kodu yapıştırıp kaydedelim.
 

jQuery(document).ready(function($){

var cookieValue = $.cookie("modalShown");
    //alert('Hatan var-'+cookieValue+'--burada');
    if(cookieValue !='completed') {
        var date = new Date();
         var minutes = 30;
         date.setTime(date.getTime() + (minutes * 60 * 1000));
        $('#mypopmessage').modal({show: 'true'});
        $.cookie("modalShown", 'completed', { expires: date});
      }
});
 

 

Bu ekledğimiz kod kımında date kısmında 30 dk lık bir zaman dilimi belirledik . Yani kullanıcı ilk girişinde kullanıcıy popup gösterilir , ardından cookie set edilir ve cookie süresi dolana kadar (30 dakika) aynı kullıcıya tekrardan popup gösterilmez.

Kategori