Cómo cargar una plantilla personalizada para el mini carrito de woocommerce en un widget personalizado

2 minutos de lectura

avatar de usuario
Vipin Kr. Singh

Quiero crear un widget personalizado para WooCommerce Mini Cart, pero también quiero mantener el widget Mini Cart predeterminado de WC, por lo que no quiero que se anule la plantilla copiando mini-cart.php a mi tema. Acabo de copiar la clase de widget del directorio de widgets del complemento (plugins/woocommerce/includes/widgets/class-wc-widget-cart.php) y también creé un nuevo archivo de plantilla para mini carrito copiando el código predeterminado de mini-cart.php en un archivo bajo el directorio de mi tema, por ejemplo, custom-mini-cart.php, que es solo una versión modificada del archivo principal. Ahora quiero cargar ese archivo de plantilla para mi widget. La clase de widget que estoy usando, como puede ver, es muy similar a la clase del widget principal:

class WC_Dropdown_Cart extends WC_Widget {

    public function __construct() {
        $this->widget_cssclass="woocommerce widget_shopping_cart";
        $this->widget_description = __( "Custom Mini Cart", 'woocommerce' );
        $this->widget_name        = __( 'Custom Mini Cart', 'woocommerce' );
        $this->widget_id          = 'woocommerce_widget_custom_mini_cart';
        $this->settings           = array(
            'title'  => array(
                'type'  => 'text',
                'std'   => __( 'Cart', 'woocommerce' ),
                'label' => __( 'Title', 'woocommerce' )
            ),
            'hide_if_empty' => array(
                'type'  => 'checkbox',
                'std'   => 0,
                'label' => __( 'Hide if cart is empty', 'woocommerce' )
            )
        );
        parent::__construct();
    }

    function widget( $args, $instance ) {
    if ( is_cart() || is_checkout() ) {
        return;
    }

        $hide_if_empty = empty( $instance['hide_if_empty'] ) ? 0 : 1;

        $this->widget_start( $args, $instance );

        if ( $hide_if_empty ) {
            echo '<div class="hide_cart_widget_if_empty">';
        }

        // Insert cart widget placeholder - code in woocommerce.js will update this on page load
        echo '<div class="widget_shopping_cart_content"></div>';

        if ( $hide_if_empty ) {
            echo '</div>';
        }

        $this->widget_end( $args );
    }

}

El punto donde WooCommerce llama a ese archivo dentro de la función de widget de la clase es:

echo '<div class="widget_shopping_cart_content"></div>';

pero WooCommerce lo hace en una forma de javascript que no puedo solucionar. ¿Cuáles son los pasos para hacerlo aquí?

avatar de usuario
sam k

Una solución más simple sería usar WooCommerce Hooks:

https://woocommerce.github.io/code-reference/namespaces/default.html

mini gancho de carro:

https://woocommerce.github.io/code-reference/namespaces/default.html#function_woocommerce_mini_cart

Puede crear una plantilla personalizada en su caso con el código que copió y modificó del código original de WooCommerce y luego elimine el valor predeterminado de WooCommerce con esta acción:

remove_action( 'woocommerce_after_mini_cart', 'action_woocommerce_after_mini_cart', 10, 0 );

y luego carga tu template/file en su lugar mediante el uso de la acción:

add_action( 'woocommerce_after_mini_cart', get_template_part('your-template-path'), 10, 0 );

WooCommerce tiene ganchos muy buenos que puede aprovechar en el desarrollo de su tema, consulte el primer enlace para ver todos los ganchos.

Feliz codificación 🙂

¿Ha sido útil esta solución?