Style only show's correct button after refreshing the page-CodePudding

we use WordPress and Elementor to build a page. We currently have 2 different checkout systems - one for ourselves and 1 with Shopify for Affiliates.

Because of that, we have 2 "Buy now" buttons, and we display only 1, depending on a cookie "ref".

Our own checkout uses www.digistore24.com as link and the Affiliate checkout uses neuroprogrammer.myshopify.com..

The ref cookie is set from the Shopify Affiliate plugin, which also is implemented in the WordPress page.

I placed the following code to hide one of the buttons into the header.php:

<?php   if(isset($_COOKIE["ref"])) : ?>
    <style>
      .btn-ds24{
        display: none !important;
      }
    </style>

<?php else: ?>

    <style>
      .btn-shopify{
        display: none !important;
      }
    </style>

<?php endif; ?>

My problem now is, that if I open the page with the ref code, the correct button is only visible after refreshing the page again. The cookie is placed correctly after the first load, that's why I can't explain, why it shows the wrong button at first.

You can test it yourself here: https://biotonics.de/playlist/biotonics-vol-1/?ref=ticverdun

Embedded in the green "Jetzt bestellen" button should be the .myshopify Link, but it's the Digistore24 link.

Is there a better way to achieve my goal?

CodePudding user response：

Without actually seeing your code first hand and the order of operations, the only thing I can pick up on is that your cookie, while being set AFTER a person visits a page, may not be set BEFORE this style is generated.

Honestly, this is a bit of a redundant way to do it. You're better off adapting the template itself to the button, rather than using a conditional style to show/hide the button. Makes for a better experience and less prone to errors.

I get that you're using Elementor, and I'm assuming that means you're building these on the fly and somewhat need to use styles, but it's not something I'd generally suggest.

A better option may be to look at a JS library like js-cookie for easy reads, and that way you cun run the test once the browser has actually built (make sure you start with 1 button always hidden, or actively build the URL to the button based on the cookie). Still a shoddy way to do it, but a more robust, better shoddy way

CodePudding user response：

You can test for $_COOKIE & $_GET

<?php if(isset($_COOKIE["ref"]) || isset($_GET['ref'])) : ?>
    <style>
      .btn-ds24{
        display: none !important;
      }
    </style>

<?php else: ?>

    <style>
      .btn-shopify{
        display: none !important;
      }
    </style>

<?php endif; ?>