bs Swiper

[bs-loop display="swiper" layout="custom" context="swiper-tailwind-style-loop-cards" tax="category" terms_parent="47" slides_per_view="1,1,2,3,3,3"]

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

// Change tags badge class only in specific context
function swiper_tailwind_change_tags_badge($class) {
  // Check if the context exists and matches
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('swiper-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', 'swiper_tailwind_change_tags_badge');

// Change category badge
function swiper_tailwind_change_category_badge($class) {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('swiper-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', 'swiper_tailwind_change_category_badge');

/**
 * Open swiper wrapper before loop
 */
function swiper_tailwind_before_loop() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('swiper-tailwind-style-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="swiper-wrapper bs-loop-grid">';
  }
}
add_action('bootscore_before_loop', 'swiper_tailwind_before_loop');


/**
 * Open swiper slide before loop item
 */
function swiper_tailwind_before_loop_item() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('swiper-tailwind-style-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="swiper-slide h-auto bs-loop-grid-item">';
  }
}
add_action('bootscore_before_loop_item', 'swiper_tailwind_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('swiper-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 swiper slide after loop item
 */
function swiper_tailwind_after_loop_item() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('swiper-tailwind-style-loop-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '</div>';
  }
}
add_action('bootscore_after_loop_item', 'swiper_tailwind_after_loop_item');


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

[bs-loop display="swiper" layout="custom" context="swiper-overlay-cards" tax="category" terms_parent="47" slides_per_view="1,1,2,3,3,3"]

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

// Change tags badge class only in specific context
function swiper_overlay_change_tags_badge($class) {
  // Check if the context exists and matches
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('swiper-overlay-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', 'swiper_overlay_change_tags_badge');


/**
 * Open swiper wrapper before loop
 */
function swiper_overlay_before_loop() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('swiper-overlay-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="swiper-wrapper bs-loop-grid">';
  }
}
add_action('bootscore_before_loop', 'swiper_overlay_before_loop');


/**
 * Open swiper slide before loop item
 */
function swiper_overlay_before_loop_item() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('swiper-overlay-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="swiper-slide h-auto bs-loop-grid-item">';
  }
}
add_action('bootscore_before_loop_item', 'swiper_overlay_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('swiper-overlay-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 swiper slide after loop item
 */
function swiper_overlay_after_loop_item() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('swiper-overlay-cards', $GLOBALS['bs_loop_contexts'])) {
    echo '</div>';
  }
}
add_action('bootscore_after_loop_item', 'swiper_overlay_after_loop_item');


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

[bs-loop display="swiper" layout="custom" context="swiper-minimal-product-loop" type="product" tax="product_cat" terms="plugins, t-shirts" slides_per_view="1,1,2,3,3,3" load_more="true" posts="4"]

/**
 * Custom Swiper Loop Item for `bs-loop layout="custom" context="swiper-minimal-product-loop"`
 * 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('swiper-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 swiper_minimal_product_loop_add_to_cart_class($classes) {
  return 'btn btn-sm btn-primary';
}


/**
 * Open swiper wrapper before loop
 */
function swiper_minimal_product_loop_before_loop() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('swiper-minimal-product-loop', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="swiper-wrapper bs-loop-grid">';
  }
}
add_action('bootscore_before_loop', 'swiper_minimal_product_loop_before_loop');


/**
 * Open swiper slide before loop item
 */
function swiper_minimal_product_loop_before_loop_item() {
  if (isset($GLOBALS['bs_loop_contexts']) && in_array('swiper-minimal-product-loop', $GLOBALS['bs_loop_contexts'])) {
    echo '<div class="swiper-slide h-auto bs-loop-grid-item">';
  }
}
add_action('bootscore_before_loop_item', 'swiper_minimal_product_loop_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('swiper-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', 'swiper_minimal_product_loop_add_to_cart_class');
          woocommerce_template_loop_add_to_cart();
          remove_filter('bootscore/class/woocommerce/loop/add-to-cart/button', 'swiper_minimal_product_loop_add_to_cart_class');
          ?>
        </div>

      </div>
    </div>

  </div>
  <?php
});


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


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