Skip to content

Update donation form #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
towfiq1997 merged 1 commit into from
Jun 4, 2026
Merged

Update donation form #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions assets/src/css/frontend-common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,14 @@
width: 100%;
}
}
.campaign-cause{
ul{
margin-bottom: 0;
}
p{
margin-bottom: 0;
}
}
.suggested-amounts {
display: grid;
grid-template-columns: repeat(4, 1fr);
Expand Down Expand Up @@ -69,3 +77,63 @@
align-self: center;
}
}
//Frontend donation progressbar
.wcdm-progress-bar {
width: 100%;
margin-bottom: 10px;
.donation-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}

.donation-title {
font-size: 16px;
font-weight: 700;
color: #1e293b;
}

.donation-percent {
font-size: 20px;
font-weight: 700;
background: #7e7eef;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.progress-wrapper {
width: 100%;
height: 14px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
position: relative;
}

.progress-bar {
width: 0;
height: 100%;
border-radius: 999px;
transition: width 1s ease;

background:#7e7eef;
}

.donation-info {
display: flex;
justify-content: space-between;
margin-top: 14px;
font-size: 14px;
color: #64748b;
}

.amount {
font-weight: 700;
color: #0f172a;
}
}
//Donation product donation button
.wcdm-donation-button{
background-color: #10B981 !important;
}
32 changes: 32 additions & 0 deletions assets/src/js/frontend-common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,37 @@
}
});
});

$('.wcdm-progress-bar').each(function () {

const $progressCard = $(this);

const raised = parseFloat($progressCard.attr('data-raised')) || 0;
const goal = parseFloat($progressCard.attr('data-goal')) || 0;
const currency = $progressCard.attr('data-currency') || '$';

const percentage = goal > 0
? Math.min((raised / goal) * 100, 100)
: 0;

console.log(percentage);


$progressCard
.find('.progress-bar')
.css('width', percentage + '%');

$progressCard
.find('.donation-percent')
.text(Math.round(percentage) + '%');

$progressCard
.find('.raised-amount')
.text(currency + raised.toLocaleString());

$progressCard
.find('.goal-amount')
.text(currency + goal.toLocaleString());
});
});
}(jQuery));
64 changes: 42 additions & 22 deletions includes/Frontend/Product.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ public function __construct() {
add_action( 'woocommerce_donation_add_to_cart', array( __CLASS__, 'add_to_cart_template' ) );
add_filter( 'woocommerce_add_to_cart_redirect', array( __CLASS__, 'add_to_cart_redirect' ), 10, 2 );
add_filter( 'woocommerce_add_cart_item', array( __CLASS__, 'add_cart_item' ) );
add_filter( 'wc_add_to_cart_message', array( __CLASS__, 'add_to_cart_message' ), 10, 2 );
add_filter( 'wc_add_to_cart_message_html', array( __CLASS__, 'add_to_cart_message' ), 10, 2 );
add_filter( 'woocommerce_add_to_cart_validation', array( __CLASS__, 'prevent_duplicate_add_to_cart' ), 10, 2 );
}

Expand All @@ -38,10 +38,10 @@ public function __construct() {
* @param string $link Link html.
* @param \WC_Product $product Product object.
*
* @since 1.0.0
* @return string
* @since 1.0.0
*/
public static function add_to_cart_link( $link, $product ) {
public static function add_to_cart_link( string $link, \WC_Product $product ): string {
return ( 'donation' === $product->get_type() ? str_replace( 'ajax_add_to_cart', '', $link ) : $link );
}

Expand All @@ -51,10 +51,10 @@ public static function add_to_cart_link( $link, $product ) {
* @param string $price product price html.
* @param \WC_Product $product Product object.
*
* @since 1.0.0
* @return string
* @since 1.0.0
*/
public static function get_price_html( $price, $product ) {
public static function get_price_html( string $price, \WC_Product $product ): string {
if ( 'donation' === $product->get_type() ) {
return ( is_admin() ? 'Variable' : '' );
}
Expand All @@ -70,7 +70,7 @@ public static function get_price_html( $price, $product ) {
* @since 1.0.0
* @return void
*/
public static function before_add_to_cart_button() {
public static function before_add_to_cart_button(): void {
global $product;

if ( 'donation' === $product->get_type() ) {
Expand All @@ -82,19 +82,39 @@ public static function before_add_to_cart_button() {
?>
<div class="wc-donation-manager">
<?php if ( $campaign_cause ) : ?>
<div class="campaign-cause">
<?php echo wp_kses_post( $campaign_cause ); ?>
</div>
<div class="campaign-cause">
<?php echo wp_kses_post( $campaign_cause ); ?>
</div>
<?php endif; ?>

<?php if ( $campaign_id ) : ?>
<div class="campaign-progress">
<div class="progress-label">
<label for="campaign-progressbar"><?php echo wp_kses_post( sprintf( /* translators: 1: WC currency symbol 2: Raised amount */ __( '%1$s%2$.2f raised', 'wc-donation-manager' ), esc_html( $currency_symbol ), esc_html( get_post_meta( $campaign_id, '_raised_amount', true ) ) ) ); ?></label>
<label for="campaign-progressbar"><?php echo wp_kses_post( sprintf( /* translators: 1: WC currency symbol 2: Raised amount */ __( '%1$s%2$.2f goal', 'wc-donation-manager' ), esc_html( $currency_symbol ), esc_html( get_post_meta( $campaign_id, 'wcdm_goal_amount', true ) ) ) ); ?></label>
<div
class="wcdm-progress-bar"
data-raised="<?php echo esc_attr( (float) get_post_meta( $campaign_id, '_raised_amount', true ) ); ?>"
data-goal="<?php echo esc_attr( (float) get_post_meta( $campaign_id, 'wcdm_goal_amount', true ) ); ?>"
data-currency="<?php echo esc_html( $currency_symbol ); ?>"
>
<div class="donation-header">
<div class="donation-title">Donation Progress</div>
<div class="donation-percent">0%</div>
</div>

<div class="progress-wrapper">
<div class="progress-bar"></div>
</div>

<div class="donation-info">
<div>
Raised:
<span class="amount raised-amount">$0</span>
</div>

<div>
Goal:
<span class="amount goal-amount">$0</span>
</div>
</div>
</div>
<progress id="campaign-progressbar" value="<?php echo esc_attr( get_post_meta( $campaign_id, '_raised_amount', true ) ); ?>" max="<?php echo esc_attr( get_post_meta( $campaign_id, 'wcdm_goal_amount', true ) ); ?>"><?php echo esc_html( get_post_meta( $campaign_id, '_raised_amount', true ) ); ?></progress>
</div>
<?php endif; ?>
<?php
if ( $is_predefined_amounts ) :
Expand All @@ -106,7 +126,7 @@ public static function before_add_to_cart_button() {
}
if ( $predefined_amounts ) {
?>
<div class="suggested-amounts">
<div class="suggested-amounts">
<label class="suggested-amount selected"><?php printf( '%s%.2f', esc_html( $currency_symbol ), floatval( $product->get_price() ) ); ?>
<input type="radio" name="suggested-amount[]" value="<?php echo esc_html( $product->get_price() ); ?>" checked="checked">
</label>
Expand Down Expand Up @@ -140,7 +160,7 @@ class="input-text text"/>
* @since 1.0.0
* @return void
*/
public static function add_to_cart_template() {
public static function add_to_cart_template(): void {
$campaign_id = get_post_meta( get_the_ID(), 'wcdm_campaign_id', true );
$campaign_end_date = intval( str_replace( '-', '', get_post_meta( $campaign_id, '_end_date', true ) ) );
$campaign_expired_text = get_option( 'wcdm_expired_text', __( 'The campaign expired!', 'wc-donation-manager' ) );
Expand All @@ -154,16 +174,16 @@ public static function add_to_cart_template() {
}

/**
* Redirecting weather cart or checkout page.
* Redirecting whether cart or checkout page.
*
* This will only be applied for the donation products.
*
* @param string $url Add to cart button url.
*
* @since 1.0.0
* @return string
* @since 1.0.0
*/
public static function add_to_cart_redirect( $url ) {
public static function add_to_cart_redirect( string $url ) {
wp_verify_nonce( '_wpnonce' );
$product_id = (int) apply_filters( 'woocommerce_add_to_cart_product_id', ! empty( $_POST['add-to-cart'] ) ? sanitize_key( wp_unslash( $_POST['add-to-cart'] ) ) : '' );
if ( $product_id ) {
Expand Down Expand Up @@ -225,10 +245,10 @@ public static function add_to_cart_message( $message, $product_id ) {
* @param bool $passed Whether the product can be added to the cart.
* @param int $product_id Product ID.
*
* @since 1.0.6
* @return bool
* @since 1.0.6
*/
public static function prevent_duplicate_add_to_cart( $passed, $product_id ) {
public static function prevent_duplicate_add_to_cart( bool $passed, int $product_id ): bool {
$product = wc_get_product( $product_id );

// Only donation products.
Expand Down
Loading