How to display cart data in modal window?

Question

WordPress

Let's say I need to display a window with a mini-basket when adding a product to the cart.
I did it like this:

foreach ( WC()->cart->get_cart() as $cart_item ) {
               $item_name = $cart_item['data']->get_title();
               $quantity = $cart_item['quantity'];
               $price = $cart_item['data']->get_price();
            }

But, how to display the deletion itself in the form of a cross and an input to change the quantity?

Answer 1

Who cares, here AJAX did

<div class="modal-items">
        <?php
          $cart_items = WC()->cart->get_cart();
          foreach( $cart_items as $cart_item_key => $item ) { ?>
          
          <div class="left col-md-3">
          <div class="product-image"><!-- Make sure ot check if it's a gallery, if so, get its first image -->
          <?php echo $item['data']->get_image(); ?>
          </div>
          </div>
          <div class="right col-md-8">
          <h4 class="product-name"><?php echo $item['data']->get_name(); ?></h4>
          <div class="product-information">
          <span class="product-quantity"><?php echo $item['quantity'] . 'x' ?></span>
          <span class="product-price"><?php echo $item['data']->get_price_html(); ?></span>
          </div>
          <?php
          echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
          '<a href="%s" aria-label="%s" data-product_id="%s" data-product_sku="%s">X</a>',
          esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
          __( 'Remove this item', 'woocommerce' ),
          esc_attr( $item['product_id'] ),
          esc_attr( $item['data']->get_sku() )
          ), $cart_item_key );
          ?>
          </div>
          <?php } ?>
        </div>

Next, we create exactly the same fragment in functions.php:

function modal_add_to_cart_fragments( $fragments ) {

    ob_start();

    ?>
  <div class="modal-items">
  <?php
          $cart_items = WC()->cart->get_cart();
          foreach( $cart_items as $cart_item_key => $item ) { ?>
          
          <div class="left col-md-3">
          <div class="product-image"><!-- Make sure ot check if it's a gallery, if so, get its first image -->
          <?php echo $item['data']->get_image(); ?>
          </div>
          </div>
          <div class="right col-md-8">
          <h4 class="product-name"><?php echo $item['data']->get_name(); ?></h4>
          <div class="product-information">
          <span class="product-quantity"><?php echo $item['quantity'] . 'x' ?></span>
          <span class="product-price"><?php echo $item['data']->get_price_html(); ?></span>
          </div>
          <?php
          echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
          '<a href="%s" aria-label="%s" data-product_id="%s" data-product_sku="%s">X</a>',
          esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
          __( 'Remove this item', 'woocommerce' ),
          esc_attr( $item['product_id'] ),
          esc_attr( $item['data']->get_sku() )
          ), $cart_item_key );
          ?>
          </div>
          <?php } ?>
  </div>
    <?php
    $fragments['.modal-items'] = ob_get_clean();
    return $fragments;
}

add_filter( 'woocommerce_add_to_cart_fragments', 'modal_add_to_cart_fragments', 10, 1 );

If you know how to make it easier, I will be very grateful!