Uncategorized

Fork Awesome Icomoon Package

I’ve invested some time to create a Icomoon.io Package of Fork Awesome, based on the broken SVG icons from the current Fork Awesome release (1.2.0). I have basically resized and centered them, to fit the canvas size, so some icon sizes might be not perfect.

Fork Awesome 1.2.0 · A fork of Font Awesome, originally created by Dave Gandy, now maintained by a community. Fork Awesome is licensed under SIL OFL 1.1· Code is licensed under MIT License. Documentation is licensed under CC BY 3.0.

    JTL Shop (5) – Print Linkgroups in Smarty

    Nova has two simple snippets to print (custom) linkgroups, this snippet prints out list items without the list wrapper.

    Link List with toggable submenus (like the regular sidebar menus)

    {include file='snippets/linkgroup_recursive.tpl' linkgroupIdentifier='LINKGROUP_TEMPLATE_NAME' dropdownSupport=BOOL}

    Link List with dropdown submenus (like the regular top-bar menu)

    {include file='snippets/linkgroup_list.tpl' linkgroupIdentifier='LINKGROUP_TEMPLATE_NAME' dropdownSupport=BOOL}

    To print out the links on your own, check out the code of those snippet templates.

      JTL Shop (5): (Cookie) Consent Manager

      Selbst eingebundene Videos via Consent Manager blockieren / freischalten

      Im Beispiel sind nur die für den Consent Manager nötigen Attribute definiert, für ein umfangreicheres Beispiel, kann man sich beispielsweise das Core Video OPC-Portlet ansehen (\includes\src\OPC\Portlets\Video\Video.tpl).

      <div class="embed-responsive embed-responsive-16by9">
          <iframe class="needs-consent youtube" data-src="https://www.youtube-nocookie.com/embed/VIDEOID"></iframe>
          <a href="#" class="trigger give-consent" data-consent="youtube">Youtube Consent geben</a>
      </div>

      Das funktioniert so ohne weiteres Zutun, eine eigene Initialisierung o. Ä. ist nicht notwendig.

      Javascript

      Event-Listener

      document.addEventListener('consent.ready', function(e) {
          console.log('consent ready!');
      });
      document.addEventListener('consent.updated', function(e) {
          console.log('consent updated!');
      });

      Consent prüfen

      if (e.detail !== null && typeof e.detail.youtube !== 'undefined' && e.detail.youtube === true) {
          console.log('youtube consent given');
      }

      Offizielle Doku (zum jetzigen Zeitpunkt nur für Plugins/PHP dokumentiert): https://jtl-devguide.readthedocs.io/projects/jtl-shop/de/latest/shop_privacy/consentmanager.html?highlight=cookie#jtl-shop-consent-manager

        JTL Shop (4): Eigene SMARTY Template Files in CMS Seiten laden

        Es gibt bedauerlicherweise kein Plugin um das zu erreichen (vom Alleskönner Dropper mal abgesehen), daher habe ich den Templatefile über das ID Feld der CMS Seite geladen und lasse einen Fehler ausgeben wenn die Datei nicht existiert:

        {extends file="../../Evo/layout/index.tpl"}
        {block name="content"}   
            {if !empty($Link->cIdentifier) && ($Link->cIdentifier|substr:0:11 eq "custom-tpl-")}
                <!-- load custom tpl: {$Link->cIdentifier}.tpl -->
                {assign var="custom_tpl_file_path" value="__custom-cms-tpl/{$Link->cIdentifier}.tpl"}
        
                {if file_exists("SERVERPFAD_ZUM_TEMPLATE/{$custom_tpl_file_path}")}
                    {include file=$custom_tpl_file_path}
                {else}
                    <div class="alert alert-danger">
                        Datei: "{$custom_tpl_file_path}" nicht gefunden.
                    </div>
                {/if}
            {/if}
            {$smarty.block.parent}
        {/block}

        Das ganze in der layout/index.tpl im Bereich von H1 + cContent der CMS Seiten einfügen und natürlich den Serverpfad zum template ersetzen.

          CSS (fake) placeholder text for select elements

          For now, there is no placeholder attribute available for HTML select elements what is really bad if you need to achive some kinda reduced form styling, without field labels and stuff.

          HTML Select element with fake placeholder
          Example form with placeholder style select label

          But there is a workaround, we have to add the label as the first option with a value=““. Now we want to style it like the other placeholder texts. To do so we need just a little JS & CSS:

                var $placeholderSelects = $('form select');
                if($placeholderSelects.children().first().is(':selected')){
                  $placeholderSelects.addClass('select-placeholder-option-active');
                }else{
                  $placeholderSelects.removeClass('select-placeholder-option-active');
                }
                $placeholderSelects.on('change', function(){
                  if($(this).children().first().is(':selected')){
                    $(this).addClass('select-placeholder-option-active');
                  }else{
                    $(this).removeClass('select-placeholder-option-active');
                  }
                });

          The JS ensures that we just have the placeholder style / color, if the first value is selected. (Yes, i better should put this in a function …)

          select{
            &.select-placeholder-option-active{
              color: $input-placeholder-color;
              > option:not(:first-child){
                color: $input-color;
              }
            }
          }

            Safari transform z-index bug workaround

            If you have trouble with your z-index using the transform property, you should try to set transform: translate3d(0,0,0) translateZ(1000px) on the element what should overlay the other element(s).

            But be careful, this fucks up all your z-indexes, you have to add translateZ(xxxx) to all elements who should overlay your overlaying element. If you have some position: fixed elements inside your overlaying element, they will fail as well (you must move it outside any container on which you have applied the translateZ property).

            Example:

            // (Animated) element behind the page
            .background-animation-element{
              position:absolute;
              left:50%;
              top:100px;
              z-index:1;
              transform: perspective(200px) rotateX(26deg);
              animation: whatever 1s;
              // ...
            }
            // Page wrapper in front of the element
            .page-wrapper{
              // The part that should work in all major browsers - except safari:
              position:relative;
              z-index:50;
              // The Safari fix:
              transform: translate3d(0,0,0) translateZ(1000px);
            }

            Android TV: Google Play Filme spielt (einige) Videos nicht mehr ab (Nvidia Shield)

            Seit geraumer Zeit konnte ich einige Videos nicht mehr abspielen, der Abspielversuch wurde – abhängig vom Film – mit der Meldung „Es ist ein Fehler aufgetreten“ quittiert. Gleiches beim Abspielen von Trailern.

            Der Versuch das Problem per Chromecast zu umgehen schlug ebenfall mit der Meldung „Die Wiedergabe wird auf diesem Gerät nicht unterstützt. (Fehlercode: 119)“ fehl.

            Die Lösung ist denkbar einfach: Öffnet die Einstellungen eures Android TV Geräts und sucht den Punkt „Apps“, bei Nvidia Shield auf erster Ebene der Einstellungen im Bereich „Allgemeine Einstellungen“ zu finden. Hier wählt hier nun „Google Play Filme & Serien“ und löscht zuerst den Cache. Ich habe direkt alles durchgezogen, daher kann ich nicht abschließend sagen was nun geholfen hat: Cache geleert, Daten gelöscht, Deaktiviert und wieder aktiviert.

            Anschließend ließ sich – bis auf einen einzelnen Film („Suborbicon“) – alles wieder abspielen.

              JTL Shop 4 EVO Template – Kundenpasswörter Maximallänge anpassen

              Aus Gründen beschränkt JTLs EVO Template die Maximallänge von Kundenpasswörtern leider hart im Template.

              Ich will an der Stelle nicht beurteilen warum so ein niedriger Wert angesetzt wurde, sehe jegliche Passwort Restriktionen (welche nicht zur erhöhten Sicherheit beitragen) aber als extrem kontraproduktiv an.

              Die Maximallänge kann in der register/form/customer_account.tpl angepasst werden – im eigenen Sub Theme, nicht im EVO versteht sich. Der Wert muss für beide Passwortfelder angepasst werden, Attribut „maxlength“.

                Typesetter Contact Form released

                We have just released our first bigger Typesetter CMS Plugin. It’s a highly configurable contact form section, where you can add multiple types of fields, send (HTML) Mails to the administrator and the submitter (optional).

                The whole markup and class structure is based on Bootstrap 3, so if you already use a Bootstrap theme, you can install it and you’re ready to go. If you won’t use Bootstrap you have to implement your own styles.

                Currently it’s just a „type“ inside the CustomSections Plugin, which you have to modify a little, please find detailed instructions on Github: https://github.com/webksde/Typesetter-Custom-Sections–Contact-Form

                  Typesetter CMS: Create a reusable object, structured with page manager

                  Let’s say you want to add a „call to action“-section beyond the content which is usable inside the template.

                  1. Create a regular page holding your contents
                  2. Create a new extra content block (/admin/extra), choose type „file include“. (You will notice, that the edit link is disabled inside the backend, ignore this)
                  3. Possibility 1: Use Layout Manager
                    1. Jump back to your frontend, klick „Layout“ at the top right
                    2. Hover the region you wish to include your created extra block, click insert and choose your block
                    3. Click save and click abort when finished
                  4. Possibility 2: Insert your extra block directly inside your template
                    1. Insert the following code to your template: <?php gpOutput::Get(‚Extra‘,’Technical_section_name‘); ?> (the technical section name is the name you choosed with underscores instead of spaces, but still case sensitive!)
                    2. Save and reload your page
                  5. Now hover the new appeard block (which will show something like „Insert File“ per default), click the edit link and choose the page you created in step 1

                  The gerat thing about this is: the configuration of this extra is stored globaly and not per page, you have to set it just once and you can reuse it easily. You have it available to print it out inside your Template, or using a simple include section type with the page manager.