Vis rabatkode felt med shortcode

Du kan bruge denne kode til at vise rabatkode input feltet hvor som helst, du kan bare indsætte følgende shortcode: [coupon_field], koden er designet til at vise fejl/succes beskeder.

Der medfølger lidt CSS, dette kan du selv ændre, du har også mulighed for at ændre teksterne i knappen, input feltet og fejl/succes beskederne.

Der medfølger også noget jQuery, dette er ikke et krav, men en lille nice-to-have feature, koden gør at “Brug” knappen ændre styling efter der er tilføjet noget til input feltet, så reelt bare en visuel key til brugeren.

Indsæt i pluginnet "Snippets"

add_shortcode( 'coupon_field', 'display_coupon_field' );
function display_coupon_field() {
    if( isset($_GET['coupon']) && isset($_GET['redeem-coupon']) ){
        if( $coupon = esc_attr($_GET['coupon']) ) {
            $applied = WC()->cart->apply_coupon($coupon);
        } else {
            $coupon = false;
        }

        $success = sprintf( __('Din rabatkode "%s" er tilføjet.'), $coupon );
        $error   = __("Rabatkoden er ugyldig.");

        $message = isset($applied) && $applied ? $success : $error;
    }

    $output  = '<div class="redeem-coupon"><form id="coupon-redeem">
    <p class="form-content"><input type="text" name="coupon" id="coupon" placeholder="Rabatkode"/>
    <input class="form-coupon-submit" type="submit" name="redeem-coupon" value="'.__('Brug').'" /></p>';

    $output .= isset($coupon) ? '<p class="result">'.$message.'</p>' : '';

    return $output . '</form></div>';
}

Koden herunder skal indsættes i “Tilpas” -> “Ekstra CSS”:

.redeem-coupon .form-content {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.redeem-coupon .form-content input {
	background: var(--e-global-color-47e87cf6);
	border-color: var(--e-global-color-7fb1b6ac) !important;
}

.redeem-coupon .form-content .form-coupon-submit {
	background: transparent;
	opacity: 0.4;
}

.redeem-coupon .form-content .form-coupon-submit.active {
	opacity: 1;
	background: black !important;
	color: white !important;
	border-color: black !important;
}

Indsæt i Elementor Brugerdefineret Kode

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

$(document).ready(function() {
    $('#coupon').on('input', function() {
        if ($(this).val().trim().length > 0) {
            $('.form-coupon-submit').addClass('active');
        } else {
            $('.form-coupon-submit').removeClass('active');
        }
    });
});

</script>