Topic: Close button not working in WooCommerce

goodfellastech priority asked 1 week ago


Expected behavior I am trying to use the close button to get the alert from woocommerce to close so that if a user does something on a custom store it will be closed. I made sure that I used the alert in the container div class. This is a local enviornment, but I am guessing this might be a js plugin issue.

Actual behavior Right now you click on the button and it does what it looks like is an animation action, but it does not hide the alert.

Resources (screenshots, code snippets etc.)

<?php foreach ( $notices as $notice ) : ?>
<div data-mdb-alert-init class="alert alert-danger" role="alert" data-mdb-color="danger" <?php echo wc_get_notice_data_attr( $notice ); ?>>
    <div class="d-flex justify-content-between">
        <div><i class="fas fa-times-circle me-3"></i> <?php echo wc_kses_notice( $notice['notice'] ); ?></div>
        <div><button type="button" class="btn-close" aria-label="Close" data-mdb-ripple-init data-mdb-dismiss="alert"></button></div>
    </div>
</div><?php endforeach; ?>

goodfellastech priority answered 1 week ago


<div class="alert alert-dismissible fade show <?php echo wc_get_notice_data_attr( $notice ); ?>" role="alert" data-mdb-alert-init data-mdb-color="danger">
    <i class="fas fa-info-circle me-3"></i> <?php echo wc_kses_notice( $notice['notice'] ); ?>
    <button type="button" class="btn-close" data-mdb-dismiss="alert" aria-label="Close"></button>
</div>

I read the docs wrong. I did nore realize to have the dismissable context you have to have classes "show" and "fade" to trigger the action.


Kamila Pieńkowska staff commented 1 week ago

So do you need any help?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.3.2
  • Device: Mac
  • Browser: Chrome
  • OS: Sequoia 15.0.1
  • Provided sample code: No
  • Provided link: No