Drupal 8 Programatik Popup Mesaj Oluşturma

Skip to main contentToolbar items Administration menu Drupal Content Structure Appearance Extend People Reports Configuration Help Breadcrumb Back to site Edit Drupal Toolbar items Shortcuts [email protected] Drupal 8 Programatik Popup Mesaj Oluşturma Add to Default shortcuts Published Hide sidebar panel Primary tabs View Edit(active tab) Outline Revisions Error message Close There is a security update available for your version of Drupal. To ensure the security of your server, you should update immediately! See the available updates page for more information and to install your missing updates. Title Drupal 8 Programatik Popup Mesaj Oluşturma Read Time 11 Show row weights İçerik Text Paragraph view mode Container Body

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.

About text formats Text format Full HTML List additional actions to İçerik Drupal Kategori Drupal 8 Published Last saved 01/14/2021 - 22:51 Author drupart Create new revision Revision log message Briefly describe the changes you have made. Delete Menu settings Not in menu Meta Tags Book outline Not in book XML Sitemap URL alias Automatic alias Generate automatic URL alias Uncheck this to create a custom alias below. Configure URL alias patterns. URL alias /drupal/drupal-8-programatik-popup-mesaj-olusturma Specify an alternative path by which this data can be accessed. For example, type "/about" when writing an about page. URL redirects Authoring information By drupart (1) on 2021-01-14 Promotion options