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.

Use JS to check the browser and add it or not according to the result? — Mickaël Leger, Sep 03 '18 at 09:54
If you click on the error in the console it will show you the line causing the problem — Rory McCrossan, Sep 03 '18 at 09:55
I know which line is causing the error. It works in one browser and not the other, because of the `}` missing. If I add it then the browsers switch, and again one is working and not the other. I'm not sure why downvoted... — Greg, Sep 03 '18 at 09:57
To follow my comment, here is the question that might help you : https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769 — Mickaël Leger, Sep 03 '18 at 09:58
Great, I think this might help me solve the problem on all the browsers :) — Greg, Sep 03 '18 at 09:59
@RoryMcCrossan can you explain why you have downvoted my question so I can improve it for you? — Greg, Sep 03 '18 at 10:01
I would strongly suggest you do not do what @MickaelLeger is suggesting though. Browser sniffing is a *terrible idea*. — Rory McCrossan, Sep 03 '18 at 10:02
Ahh, sorry I thought it was you for some reason :P Anyway, is adding the missing closing `}` dependable on the browser a good practise? — Greg, Sep 03 '18 at 10:03
In the "AddWelcomeBar" function, the If is a bit chaotic. I guess there will be the problem. You open a "if (welcomebar.length == 0) {" block and miss the closing part or do you want to close it with "} else if (innerWidth > 850) {"? You may check it. — DiabloSteve, Sep 03 '18 at 10:03
Well, you should always use the correct syntax. Exactly why the browsers have different results is very strange. It sounds like this is caused by an issue somewhere else in your code. — Rory McCrossan, Sep 03 '18 at 10:04
your js welcome `if` turns into a php `else` - probably what is your problem — Pete, Sep 03 '18 at 10:09
I agree with Rory McCrossan, my "solution" to check the browser could make it works but I think it's not the best practice :s — Mickaël Leger, Sep 03 '18 at 10:21
I'm stuck on this for 2 days now... Can't find a solution. I agree, I think it's the part where the JS if statement turns into the PHP else... I just can't get it to work properly :/ The if statement for the `welcomebar.length` should be only IF statement and not else. It's PHP else if to display the correct div. — Greg, Sep 03 '18 at 10:23
Try this - the tertiary if (where the customer name is set) may need to change (not sure how you do them in php anymore): http://jsfiddle.net/5gLzdu14/ — Pete, Sep 03 '18 at 10:27
Thanks for the attempt but the `welcomebar.length == 0` should only be the `if` statement without the `else`. The else belongs to the `php if else` statement. The `welcomebar.length == 0` only checks if the div already exists and only adds it if it doesn't. — Greg, Sep 03 '18 at 10:37
I found out that the first part of the function works fine. It's when the customer is logged out that the `else` is throwing an error. — Greg, Sep 03 '18 at 10:41
@DiabloSteve you were correct. It was the PHP `else` which was closing my JS if statement. I fixed it by wrapping the PHP if else statement with the JS if statement. Thank you all for you interest and help :) — Greg, Sep 03 '18 at 11:03

score 0 · Answer 1 · answered Sep 03 '18 at 10:55

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

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

1 Answers1