diff --git a/assets/src/css/frontend-common.scss b/assets/src/css/frontend-common.scss index 722d08d..f1b33ea 100644 --- a/assets/src/css/frontend-common.scss +++ b/assets/src/css/frontend-common.scss @@ -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); @@ -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; +} diff --git a/assets/src/js/frontend-common.js b/assets/src/js/frontend-common.js index 4756026..0d4eea1 100644 --- a/assets/src/js/frontend-common.js +++ b/assets/src/js/frontend-common.js @@ -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)); diff --git a/includes/Frontend/Product.php b/includes/Frontend/Product.php index 940940d..924e43e 100644 --- a/includes/Frontend/Product.php +++ b/includes/Frontend/Product.php @@ -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 ); } @@ -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 ); } @@ -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' : '' ); } @@ -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() ) { @@ -82,19 +82,39 @@ public static function before_add_to_cart_button() { ?>
-
- -
+
+ +
-
-
- - +
+
+
Donation Progress
+
0%
+
+ +
+
+
+ +
+
+ Raised: + $0 +
+ +
+ Goal: + $0 +
+
- -
-
+
@@ -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' ) ); @@ -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 ) { @@ -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.