Frontend

JTL Shop (5): OnPage Composer (OPC)

Because i had some pain when starting development with JTL Shops new OPC, I start to collect some stuff and things here to help others.

Add new OPC-Mount Point / Region to the Template

This is pretty simple, but i think it’s currently undocumented, just add this:

{opcMountPoint id='opc_before_filter' inContainer=false}

Perform emtpy check for OPC-Mount Points

As of now, there seems to be no function to check if a OPC-Mount Point is empty. So we need to use Smarty instead:

{* Add further OPC region *}
{capture "opc_category_top"}
    {opcMountPoint id='opc_category_top'}
{/capture}

{if $smarty.capture.opc_category_top|strip|replace:' ':'' != ""}
    <div class="result-wrapper-top">
        {$smarty.capture.opc_category_top}
    </div>
{/if}

This is only required if have an extra wrapper surrounding the mount point.

… more to come.

    Good ol‘ Font Awesome: Fork Awesome

    I’m not a big fan of Font Awesome 5, i’m sure it has an amazing feature set and stuff, but I’m completely fine with simple, working iconfonts.

    However, I just wanted to drop a link to project „Fork Aswesome“, a fork of Font Awesome 3 who keeps it updated. Fantastic!

    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;
        }
      }
    }

      Fix blurry skewed pseudo elements (before & after) in Firefox

      Problem: I have some buttons with one skewed side using skewed, absolute positioned pseudo element. In Firefox the pseudo element (::before) looks blurry and the blur overlaps the parent element, so it looked really bad.

      Solution: After a failed Google search i tried to fix it on my own. The simple solution is: Add transform: skew(0) to the parent element.

      (mehr …)

        Keyframe animation is not starting in Safari

        Lately i was running into an Safari issue – what happens really often lately, i really start to fall in love with this „amazing“ piece of software. Whatever – the thing is, you may come to the idea to define all of your animation properties and set it to animation-play-state:paused. So you can simply trigger the animation with help of an equal class, lets say .play{ animation-play-state: running; }.

        (mehr …)

          CSS Object-Fit ♥♥♥

          I first heard of the object-fit attribute a couple of month ago and i make extensive use of it since this ‚magic moment‘. It’s just so freaking helpfull for RWD that i won’t miss it anymore.

          The worse thing about it, like most new techniques, some major browsers do not support it. It’s just IE & Edge and personaly i wouldn’t give a shit about them, but as web professionals – sadly – we still have to care about those.

          So i found a nice workaround which will work in all Browsers supporting the background-size property.

          It’s pretty simple: In JavaScript, use modernizr to detect missing object-fit support, read out the image path, set the image as background to the parent container. The rest ist just a little css.

          Please see the detailed solution here: https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3

          Thank’s alot to Primož Cigler!

            Smart Sticky Sidebar via hcSticky

            If you ever need to have a sticky sidebar, which has a variable height, which is working well with a footer region, without having a second scrollbar … try https://github.com/somewebmedia/hc-sticky

            Trying to build this with waypoint.js or something, is pain in the ass. This great library finished the job in < 5 minutes.

              Smooth scrolling anchor links and hash url’s – also base tag fix

              This solution is also very usefull on pages with -Tag. Sometimes the basetag will make anchor links not working properly anymore (redirecting to the base url).

              $(document).ready(function () {
                // Anchor links on click based on Chris Coyier's solution: https://css-tricks.com/snippets/jquery/smooth-scrolling/
                $('a[href^="#"]:not([href="#"])').click(function(e) {
                  if (location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                    if (target.length) {
                      $('html, body').animate({
                        scrollTop: target.offset().top - 80 + 'px'
                      }, 1000);
                      return false;
                    }
                  }
                });
              
              });
              
              // Smooth scrolling anchor links
              // to top right away
              if (window.location.hash)
                scroll(0, 0);
              // void some browsers issue
              setTimeout(function () {
                scroll(0, 0);
              }, 1);
              
              $(function () {
                // *only* if we have anchor on the url
                $( window ).load(function() {
                  if (window.location.hash && $(window.location.hash).length > 0) {
                    // smooth scroll to the anchor id
                    $('html,body').animate({
                      scrollTop: $(window.location.hash).offset().top - 80 + 'px'
                    }, 1000, 'swing');
                  }
                });
              
              });
              

                Adaptive background (color taken from an image via JS)

                Take a look at this amazing library. You may now the effect from Googles image search.

                The library take´s the „primary color“ of an image, and set it to the image container as background color. Similar to the tv technique „Ambient Light“.

                  iOS Radiobuttons & Checkox Label behavoir

                  For some reason, a click on the label of radio- & checkbox form elements does not work (to check the related form item). After some research we figured out, that we have to set the css attribute cursor:pointer to fix this issue.

                  Another amazing „feature“ made by Apple, big thx for wasting my time guy´s, you´re so great.