FROM CACHE - en_header

How to remove "data-ocu-checkout" "data-disable-recharge" from checkout button

CodeclockerDev
Tourist
30 0 1

Inspecting checkout button on cart page I can see this

Quinn_Fahey_0-1612186497545.png



i am trying to remove "data-ocu-checkout" "data-disable-recharge" from the checkout button. When I find the checkout button in the code editor those fields are not there. Seems they are dynamically loaded from somewhere other then the cart template file. How can I remove these entirely from my checkout button? Please help as this is urgent. 

Replies 8 (8)
diego_ezfy
Shopify Partner
2791 526 714

@CodeclockerDev 

If you can't see it in your theme's code it's very likely coming from an app or Javascript.
Without seeing your website it's very difficult to develop an accurate solution, but theoretically this should do it:


1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
async function removeAtt(){

  function _waitForElement(selector, delay = 50, tries = 200) {
    const element = document.querySelector(selector);

    // creates a local variable w/ the name of the selector to keep track of all tries
    if (!window[`__${selector}`]) {
      window[`__${selector}`] = 0;
    }

    function _search() {
      return new Promise((resolve) => {
        window[`__${selector}`]++;
        console.log(window[`__${selector}`]);
        setTimeout(resolve, delay);
      });
    }

    //element not found, retry
    if (element === null) {
      if (window[`__${selector}`] >= tries) {
        window[`__${selector}`] = 0;
        return Promise.reject(null);
      }

      return _search().then(() => waitForElement(selector));
    } else {
      return Promise.resolve(element);
    }
  }


try{
var $el = await _waitForElement(`[data-disable-recharge]`);
$el.removeAttribute(`data-disable-recharge`);
$el.removeAttribute(`data-ocu-checkout`);
}catch(err){return;}

}

removeAtt();
</script>




Please let me know whether it works.

Kind regards,
Diego

CodeclockerDev
Tourist
30 0 1

Hello!

Thank you for the solution, this did not work for me specifically but it was enough to inspire my own solution. I was able to figure out where the app was being rendered in the code and was able to conditionally render the app only when it was needed.

Thanks again for the help it is always appreciated.

iambrianclark
Shopify Partner
18 2 10

I'm running into this same issue, could you share where the app was rendering the code?

Thanks!

CoolJay
Shopify Partner
22 0 0

May i know which app was it that was rendering this data-ocu-checkout? i'm having the same issue as well

iambrianclark
Shopify Partner
18 2 10

@CoolJay it appeared to be from Ultimate Special Offers for us.

CoolJay
Shopify Partner
22 0 0

Was it initially directing your users to the checkout page instead? Previously we had the " go to cart " button which directs user go to cart page.. but now its redirecting them to checkout page.. i cant find the app that's causing this

iambrianclark
Shopify Partner
18 2 10

No, the issue was that users clicking to checkout from the cart were being sent to the wrong checkout (Non subscription checkout for subscription products).

CoolJay
Shopify Partner
22 0 0

Because it has this data-ocu-checkout, my assumption it was coming from the One Click Upsell - Zipify OCU app...