Troubleshoot The Error: Checkout Button is Not Working on Cart Page & Mini Cart in Hyva Theme

General

Hyva Tutorials
-
General
-
Troubleshoot The Error: Checkout Button is Not Working on Cart Page & Mini Cart in Hyva Theme

Checkout Button not working in cart page and mini cart page in hyva theme

In this article, we will address a common challenge faced by Magento 2 Hyva Theme users: the Checkout Button is not working on the cart page and mini cart page. We’ll walk you through the steps to identify and resolve the issue, ensuring a seamless checkout experience for your customers.

If the checkout button is not working in the cart or the mini-cart, the reason is probably that the authentication-popup block was removed from the header-content.

How does the checkout button work?

Clicking the checkout buttons dispatches an event toggle-authentication, which is processed by the authentication-popup block template.

The Magento_Customer/templates/account/authentication-popup.phtml template triggers a login form before redirecting to the cart if guest checkout is disabled.

The authentication-popup block is declared in Magento_Customer/layout/default.xml

Copy Code

<block class="Magento\Customer\Block\Account\Customer" name="authentication-popup"
       as="authentication-popup"
       template="Magento_Customer::account/authentication-popup.phtml"/>

The authentication-popup template is rendered by the parent template Magento_Theme/templates/html/header.phtml.

New to Hyvä?? Learn about the Hyvä Theme from basics!

To check if the authentication-popup block is missing, compare the Magento_Theme/templates/html/header.phtml template in your theme to the original at

Copy Code

vendor/hyva-themes/magento2-default-theme/Magento_Theme/templates/html/header.phtml

The template in your theme is probably missing the line given below:

Copy Code

<?= $block->getChildHtml('authentication-popup'); ?>

Delving into Frontend Scripts

Beyond the authentication-popup block and JavaScript events, frontend scripts responsible for handling the checkout button’s behavior could be playing a role in its unresponsiveness. Here’s a step-by-step guide to delve into and potentially resolve the issue:

Troubleshooting Steps

Step 1: Locate the Checkout Button Script

Access your Hyva theme’s frontend scripts directory, often found in app/design/frontend/[Vendor]/[Theme]/web/js.

Step 2: Identify the Checkout Button Handling Script

Look for the script that manages the checkout button’s behavior. This script might be specific to your theme or customization.

Step 3: Review Script Logic

Open the identified script and review the logic related to the checkout button. Pay attention to any conditions, functions, or event listeners associated with its functionality.

Step 4: Verify Dependencies

Confirm that the script has all the necessary dependencies, especially those related to the checkout process. Check for any missing or conflicting dependencies that might impact the checkout button.

Step 5: Check for Theme Compatibility

Ensure that the script is compatible with the Hyva theme. Theme updates or changes might introduce compatibility issues, so it’s crucial to adapt the script accordingly.

Step 6: Debugging with Console Logs

Insert console log statements at relevant points in the script to track its execution. Check the browser console for any error messages or unexpected behaviors when interacting with the checkout button.

Step 7: Recompile and Clear Cache

After making adjustments to the script, recompile your assets and clear the Magento cache to apply the changes.

The steps end here. Hope it was helpful!

Let me know if you have any questions in the comment below.

More resources on Hyva themes: