Error when PHP else if statement condition is true inside the JS if statement.

Question

I have combined some jQuery and PHP within my function. Google Chrome renders the code correctly and the result is as expected, however, Opera or Firefox are giving me Uncaught SyntaxError: missing ) after argument list error.

The PHP part is just checking if the customer is logged in to my Magento store and then prepend the correct div.

PHP/JS:

AddWelcomeBar();

jQuery(window).resize(function() {
        AddWelcomeBar()
});

<?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$customerSession = $objectManager->get('Magento\Customer\Model\Session');
$customerName = $customerSession->getCustomer()->getName();
?>

function AddWelcomeBar() {
    var innerWidth = window.innerWidth;
    if (innerWidth < 850) {
        <?php   if ($customerSession->isLoggedIn()) { ?>
            var customer = "<?php echo $customerName ?>";
            var welcomebar = jQuery(".welcomebar");
            if (welcomebar.length == 0) {
                jQuery(".section-item-content").prepend("<div class='welcome-message-mobile welcomebar'>Welcome," + customer + "</div>");
            <?php } else { ?>
                jQuery(".section-item-content").prepend("<div class='welcome-message-mobile welcomebar'>10% OFF YOUR 1ST ORDER: CODE 'VV10'</div>");
            <?php } ?>
    } else if (innerWidth > 850) {
            jQuery(".section-item-content > .welcomebar").remove();
            jQuery(".section-item-content").show();
    }
  }
}

HTML:

<div class="section-item-content">

</div>

If I remove the last closing } , then it works on Opera and Firefox but Google chrome is saying that there is a } missing. Any ideas?

Basically, fixing the problem on one browser, breaks the code on the other.

Answer 1

Got it!

The PHP if else when ran, closed the if (welcomebar.length == 0) { when it shouldn't do. The first condition worked, however, the php else was messing up the JS if statement.

Wrapping the PHP if statement with the if(welcomebar.length == 0) { solved my problem.

Here is the working code:

function AddWelcomeBar() {
            var innerWidth = window.innerWidth;
            if (innerWidth < 850) {
                var welcomebar = jQuery(".welcomebar");
                if (welcomebar.length == 0) {
                    <?php   if ($customerSession->isLoggedIn()) { ?>
                        var customer = "<?php echo $customerName ?>";
                            jQuery(".section-item-content").prepend("<div class='welcome-message-mobile welcomebar'>Welcome," + customer + "</div>");
                        <?php } else { ?>
                            jQuery(".section-item-content").prepend("<div class='welcome-message-mobile welcomebar'>10% OFF YOUR 1ST ORDER: CODE 'VV10'</div>");
                        <?php } ?>
                    }
            } else if (innerWidth > 850) {
                    jQuery(".section-item-content > .welcomebar").remove();
                    jQuery(".section-item-content").show();
            }
        }