Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #3633585
Make List Items collapsible
Open

Comments

  •  4
    Eric started the conversation

    Hi, it would be a  nice feature if the list items were collapsible. is there any chance to get this integrated quick?

  •  4
    Eric replied

    screenshot

    Attached files:  Screenshot 2024-04-23 103223.png

  •  1,223
    Dustin replied

    Hi Eric,

    Please add the custom code below. (How to add custom code?):

    add_action( 'wp_footer', function () {
        ?>
        <style>
            .wooco_component_layout_list .wooco_component_product_selection {
                flex-direction: column;
            }
            .wooco_component_layout_list .wooco_component_product_selection_list.wooco_component_product_selection_hide {
                display: none;
            }
            .wooco_component_layout_list .wooco_component_product_selection_toggle {
                display: block;
                width: 100%;
                padding: 20px;
                margin-bottom: 10px;
                text-align: center;
                border: 1px solid #dddddd;
                cursor: pointer;
                -webkit-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .wooco_component_layout_list .wooco_component_product_selection_toggle:hover {
                border-color: #999999;
            }
            .wooco_component_layout_list .wooco_component_product_selection_toggle:before {
                content: '↓';
                margin-right: 10px;
            }
            .wooco_component_layout_list .wooco_component_product_selection_toggle.wooco_component_product_selection_close:before {
                content: '↑';
            }
        </style>
        <script type="text/javascript">
          (function($) {
            $(function() {
              // ready
              if ($('.wooco_component_layout_list').length) {
                $('.wooco_component_layout_list').each(function() {
                  $('<div class="wooco_component_product_selection_toggle">View component products</div>').
                      insertBefore($(this).find('.wooco_component_product_selection_list'));
                  $(this).
                      find('.wooco_component_product_selection_list').
                      addClass('wooco_component_product_selection_hide');
                });
              }
            });
            $(document).on('click touch', '.wooco_component_product_selection_toggle', function(e) {
              $(this).toggleClass('wooco_component_product_selection_close');
              $(this).
                  closest('.wooco_component_product_selection').
                  find('.wooco_component_product_selection_list').
                  toggleClass('wooco_component_product_selection_hide');
            });
          })(jQuery);
        </script>
        <?php
    }, 99 );

    And the result:

    4139743162.png


    Best regards,
    Dustin

  •  4
    Eric replied

    i added the code to functions php but it seems not to be working. Here is my composite config

    Attached files:  composite.png
      cashless.png

  •  4
    Eric replied

    ok, now i added it via code snippets an it works :) is there a way to only activate it for some components in my product?

  •  1,223
    Dustin replied

    This snippet applies only to components with the list layout. You can choose another layout for other components.

    Best regards,
    Dustin