Extend Elementor Archive Posts widget with a custom skin in order to show multiple badges

Question

I modified my posts widget in Elementor with a custom skin in order to show multiple badges with following code:

/* MULTIPLE BADGES ON POST */
/* --- */
add_action( 'elementor/widget/posts/skins_init', function( $widget ) {
  
    class cards_multi_badge_skin extends \ElementorPro\Modules\Posts\Skins\Skin_Cards {
        protected function render_badge() {
            $taxonomy = $this->get_instance_value( 'badge_taxonomy' );
            if ( empty( $taxonomy ) ) {
                return;
            }
            $terms = get_the_terms( get_the_ID(), $taxonomy );
            if ( ! is_array( $terms ) ) {
                return;
            }
            ?><div class="elementor-post__badges"><?php
            foreach( $terms as $term ) : ?>
                <div class="elementor-post__badge"><?php echo $term->name; ?></div>
            <?php endforeach; ?>
            </div>
            <?php
        }

        public function get_id() {
            return 'cards_multi_badge';
        }

        public function get_title() {
            return __( 'Cards Multi Badge', 'elementor-pro' );
        }
    }

    // register the skin to the posts widget
    $widget->add_skin( new cards_multi_badge_skin( $widget ) );
} );

This leads to following result:

Now, I'm trying the same for the archive posts widget in Elementor with following code:

/* MULTIPLE BADGES ON ARCHIVE POST */
/* --- */
add_action( 'elementor/widget/archive-posts/skins_init', function( $widget ) {
  
    class cards_multi_badge_skin extends \ElementorPro\Modules\Archive_Posts\Skins\Skin_Cards {
        protected function render_badge() {
            $taxonomy = $this->get_instance_value( 'badge_taxonomy' );
            if ( empty( $taxonomy ) ) {
                return;
            }
            $terms = get_the_terms( get_the_ID(), $taxonomy );
            if ( ! is_array( $terms ) ) {
                return;
            }
            ?><div class="elementor-post__badges"><?php
            foreach( $terms as $term ) : ?>
                <div class="elementor-post__badge"><?php echo $term->name; ?></div>
            <?php endforeach; ?>
            </div>
            <?php
        }

        public function get_id() {
            return 'cards_multi_badge';
        }

        public function get_title() {
            return __( 'Cards Multi Badge', 'elementor-pro' );
        }
    }

    // register the skin to the posts widget
    $widget->add_skin( new cards_multi_badge_skin( $widget ) );
} );

However, this code does not work? Anybody who has an idea what I'm doing wrong?

Answer 1

I have the same problem and just find out that you need to extend from. \ElementorPro\Modules\ThemeBuilder\Skins\Posts_Archive_Skin_Cards rather then \ElementorPro\Modules\Posts\Skins\Skin_Cards