1

Is there anything wrong with including style and script tags inside a template part? The template part which I'm using like something more similar to a vue/react component is working correctly but just wondering if there are any potential hidden issues I may face by using it like this.

For example I have a template part:

<?php
    $randomImg = get_field( 'random_ad_img', 'option' );
    $randomImgAlt = get_field( 'random_ad_img_alt', 'option' );
    $randomUrl = get_field( 'random_ad_url', 'option' );
    $randomDelay = get_field( 'random_ad_delay', 'option' );

    if($randomImg) { ?>
    <style>
        .c-random-singleAd {
            display: none;
            position: fixed;
            height: 251px;
            width: 325px;
            left: 0;
            bottom: 0;
        }
        .c-random-singleAd.isActive {
            display: block;
        }
    </style>

    <div class="c-random-singleAd">
        <a class="c-random-singleAd__link" href="<?php echo $randomUrl; ?>">
            <img class="c-random-singleAd__img" src="<?php echo $randomImg; ?>" alt="<?php echo $randomImgAlt; ?>">
        </a>
    </div>

    <script>

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

            var cookieFooter = jQuery('#catapult-cookie-bar');
            var randomAd = jQuery('.c-random-singleAd');

            setTimeout(function() {
                console.log(offset);
                if(cookieFooter.length == 1) {
                    var offset = cookieFooter.outerHeight(true);
                    randomAd.css('bottom', offset.toString() + 'px');
                } else return;
                randomAd.addClass('isActive')
            }, 10000);

        });

    </script>

    <?php } 
?>

As mentioned earlier this works completely fine and I don't see any weird console errors.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.