bs Loop

[bs-loop layout="custom" context="tailwind-style-loop-cards" type="post" id="9318, 9326, 9328, 9405"]

/**
 * Custom Loop Item for `layout="custom" context="tailwind-style-loop-cards"`
 * This only affects the shortcode, not theme templates.
 */

// Change tags badge class only in specific context
function change_tags_badge($class) {
  // Check if the context exists and matches
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('tailwind-style-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    return 'custom-tag badge bg-dark bg-opacity-25 backdrop-blur-10 text-white rounded-pill fw-lighter p-2 text-decoration-none';
  }
  return $class;
}
add_filter('bootscore/class/badge/tag', 'change_tags_badge');

// Change category badge
function change_category_badge($class) {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('tailwind-style-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    return 'small text-body-secondary text-uppercase fw-lighter text-decoration-none';
  }
  return $class;
}
add_filter('bootscore/class/badge/category', 'change_category_badge');



// Open row before loop
function open_row_before_loop() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('tailwind-style-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2 row-cols-xxl-3 g-4 mb-4 bs-loop-grid">';
  }
}
add_action('bootscore_before_loop', 'open_row_before_loop');


// Open col before the loop item.
function open_col_before_loop_item() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('tailwind-style-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="col bs-loop-grid-item">';
  }
}
add_action('bootscore_before_loop_item', 'open_col_before_loop_item');


// Custom Loop Item - The actual card
add_action('bootscore_custom_loop_item', function($context) {
  if ($context === 'custom' && isset($GLOBALS['bs_loop_contexts']) && in_array('tailwind-style-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    ?>
    <article class="card shadow h-100 rounded-5">
      
      <?php if ( has_post_thumbnail() ) : ?>
        <a class="pt-2 px-2" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
          <?php the_post_thumbnail('medium', array('class' => 'card-img', 'style' => 'border-radius: calc(var(--bs-border-radius-xxl) - 0.5rem);')); // border-radius-xxl - inner-padding p-2 ?>
        </a>
        <div class="position-absolute top-0 start-0 mt-4 ms-4 small">
          <?php bootscore_tags(); ?>
        </div>
      <?php endif; ?>
      
      <div class="card-body p-4 d-flex flex-column">
        
        <?php bootscore_category_badge(); ?>
        
        <?php the_title('<h2 class="h5">', '</h2>'); ?>

        <p class="card-text small fw-lighter">
          <?= esc_html(wp_strip_all_tags(get_the_excerpt())); ?>
        </p>

        <p class="card-text d-flex align-items-center mt-auto">
          <?php if ('post' === get_post_type()) : ?>
            <span class="small text-body-secondary fw-lighter w-100">
              <i class="fa-regular fa-calendar"></i> <?php bootscore_date();?>
            </span>
          <?php endif; ?>
          <a class="btn btn-sm btn-dark rounded-pill shadow w-100" href="<?php the_permalink(); ?>">
            Learn more <i class="fa-solid fa-arrow-right"></i>
          </a>
        </p>

      </div>
      
    </article>
    <?php
  }
});


// Close col after the loop item.
function close_col_after_loop_item() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('tailwind-style-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '</div>';
  }
}
add_action('bootscore_after_loop_item', 'close_col_after_loop_item');

// Close row after loop
function close_row_after_loop() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('tailwind-style-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '</div>';
  }
}
add_action('bootscore_after_loop', 'close_row_after_loop');

[bs-loop layout="custom" context="custom-overlay-loop-cards" type="post" id="9318, 9326, 9328, 9405"]

/**
 * Custom Loop Item for `layout="custom" context="custom-overlay-loop-cards"`
 * This only affects the shortcode, not theme templates
 */

// Change tags badge
function change_overlay_tags_badge($class) {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('custom-overlay-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    return 'badge bg-dark bg-opacity-25 text-white backdrop-blur-10 rounded-pill fw-lighter p-2 text-decoration-none';
  }
  return $class;
}
add_filter('bootscore/class/badge/tag', 'change_overlay_tags_badge');


// Open row before loop
function open_overlay_row_before_loop() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('custom-overlay-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2 row-cols-xxl-3 g-4 mb-4 bs-loop-grid">';
  }
}
add_action('bootscore_before_loop', 'open_overlay_row_before_loop');


// Open col before the loop item.
function open_overlay_col_before_loop_item() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('custom-overlay-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="col bs-loop-grid-item">';
  }
}
add_action('bootscore_before_loop_item', 'open_overlay_col_before_loop_item');


// Custom Loop Item - The actual card
add_action('bootscore_custom_loop_item', function($context) {
  if ($context === 'custom' && isset($GLOBALS['bs_loop_contexts']) && in_array('custom-overlay-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    ?>
    <article class="card border-0 shadow bg-dark h-auto rounded-4 overflow-hidden">
      
        <?php the_post_thumbnail('medium', array('class' => 'card-img')); ?>

        <div class="position-absolute top-0 start-0 mt-3 ms-3 small">
          <?php bootscore_tags(); ?>
        </div>
      
      <div class="card-img-overlay d-flex flex-column">

        <a class="text-decoration-none mt-auto stretched-link" href="<?php the_permalink(); ?>">
          <?php the_title('<h2 class="text-white h3 lh-1 fw-bold">', '</h2>'); ?>
        </a>
        
        <div class="custom-card-overlay-meta d-flex align-items-center gap-2 mt-2 text-white">
          <p class="card-text d-flex align-items-center mt-auto w-100">
            <span class="author-avatar me-auto">
              <?php echo get_avatar(get_the_author_meta('ID'), 32, '', '', array('class' => 'rounded-circle border border-white shadow')); ?>
            </span>
            <span class="small text-white">
              <i class="fa-regular fa-calendar"></i> <?php bootscore_date();?>
            </span>
          </p>
        </div>
        
      </div>
      
    </article>
    <?php
  }
});


// Close col after the loop item.
function close_overlay_col_after_loop_item() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('custom-overlay-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '</div>';
  }
}
add_action('bootscore_after_loop_item', 'close_overlay_col_after_loop_item');

// Close row after loop
function close_overlay_row_after_loop() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('custom-overlay-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '</div>';
  }
}
add_action('bootscore_after_loop', 'close_overlay_row_after_loop');

[bs-loop layout="custom" context="minimal-product-loop" type="product" tax="product_cat" terms="plugins, t-shirts"]

/**
 * Minimal Product Loop Item for     
    

      
      
              
                  


                  


                  


                  


                  


                  


        
            
          
    



 * This only affects the shortcode, not theme templates.
 */


/**
 * Replace add to cart button with icon in minimal product loop context
 */
add_filter('woocommerce_loop_add_to_cart_link', function ($button, $product, $args) {
  if (!isset($GLOBALS['bs_loop_contexts']) || !in_array('minimal-product-loop', $GLOBALS['bs_loop_contexts'])) {
    return $button;
  }

  $icon = '<i class="fa-solid fa-bag-shopping"></i>';
  if ($product->is_type('variable')) {
    $icon = '<i class="fa-solid fa-cart-shopping"></i>';
  } elseif ($product->is_type('external')) {
    $icon = '<i class="fa-solid fa-arrow-up-right-from-square"></i>';
  }

  return sprintf(
    '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
    esc_url($product->add_to_cart_url()),
    esc_attr(isset($args['quantity']) ? $args['quantity'] : 1),
    esc_attr(isset($args['class']) ? $args['class'] : 'button'),
    isset($args['attributes']) ? wc_implode_html_attributes($args['attributes']) : '',
    $icon
  );
}, 10, 3);


/**
 * Temporarily override the add to cart button class.
 * Named function required so remove_filter() can actually find and remove it.
 */
function minimal_product_loop_add_to_cart_class($classes) {
  return 'btn btn-sm btn-primary';
}


/**
 * Open row before loop — not fired in AJAX context, so Load More handles its own wrapper
 */
function open_minimal_product_before_loop() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('minimal-product-loop', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2 row-cols-xxl-3 g-4 mb-4 bs-loop-grid">';
  }
}
add_action('bootscore_before_loop', 'open_minimal_product_before_loop');


/**
 * Open col before each loop item
 */
function open_minimal_product_col_before_loop_item() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('minimal-product-loop', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="col bs-loop-grid-item">';
  }
}
add_action('bootscore_before_loop_item', 'open_minimal_product_col_before_loop_item');


/**
 * Custom Loop Item — the actual card
 */
add_action('bootscore_custom_loop_item', function ($context) {
  if ($context !== 'custom') return;
  if (!isset($GLOBALS['bs_loop_contexts']) || !in_array('minimal-product-loop', $GLOBALS['bs_loop_contexts'])) return;

  global $product;
  ?>
  <div <?php wc_product_class(esc_attr(apply_filters('bootscore/class/woocommerce/product/card', 'card h-100', 'minimal-product-loop')), $product); ?>>

    <div class="card-body h-100">
      <div class="row g-3 h-100">

        <div class="col-4 h-100">
          <a class="d-block" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
            <?php if (has_post_thumbnail()) : ?>
              <?php the_post_thumbnail('thumbnail', array(
                'class' => 'rounded-1 align-text-top',
                'alt'   => get_the_title(),
              )); ?>
            <?php else : ?>
              <img src="<?php echo esc_url(wc_placeholder_img_src('thumbnail')); ?>"
                   alt="<?php echo esc_attr__('Placeholder', 'woocommerce'); ?>"
                   class="rounded align-text-top">
            <?php endif; ?>
          </a>
        </div>

        <div class="col-8 h-100 d-flex flex-column">
          <?php the_title('<h3 class="h6 mb-0 text-truncate">', '</h3>'); ?>

          <p class="mb-0 small text-body-secondary text-truncate">
            <?= esc_html(wp_strip_all_tags(get_the_excerpt())); ?>
          </p>

          <p><?php echo wc_price($product->get_price()); ?></p>

          <?php
          // Add named filter, display button, then remove it cleanly
          add_filter('bootscore/class/woocommerce/loop/add-to-cart/button', 'minimal_product_loop_add_to_cart_class');
          woocommerce_template_loop_add_to_cart();
          remove_filter('bootscore/class/woocommerce/loop/add-to-cart/button', 'minimal_product_loop_add_to_cart_class');
          ?>
        </div>

      </div>
    </div>

  </div>
  <?php
});


/**
 * Close col after each loop item
 */
function close_minimal_product_col_after_loop_item() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('minimal-product-loop', $GLOBALS['bs_loop_contexts'])) {
    echo '</div>';
  }
}
add_action('bootscore_after_loop_item', 'close_minimal_product_col_after_loop_item');


/**
 * Close row after loop
 */
function close_minimal_product_row_after_loop() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('minimal-product-loop', $GLOBALS['bs_loop_contexts'])) {
    echo '</div>';
  }
}
add_action('bootscore_after_loop', 'close_minimal_product_row_after_loop');