Skip to content

Commit

Permalink
feat: add new condition options and improve UX & UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@Soare-Robert-Daniel
Soare-Robert-Daniel committed Sep 26, 2024
1 parent efc9f32 commit ce926bb
Show file tree
Hide file tree
Showing 5 changed files with 630 additions and 151 deletions.
76 changes: 69 additions & 7 deletions classes/fields.class.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -788,7 +788,7 @@ function render_all_input_types( $name, $data, $fields_type, $field_index, $valu
$html_input .= '</select>';
$html_input .= '</div>';

$html_input .= '<div class="col-md-2 col-sm-2 ppom-only-if">';
$html_input .= '<div>';
$html_input .= '<p>' . __( 'only if', 'woocommerce-product-addon' ) . '</p>';
$html_input .= '</div>';

Expand All @@ -807,8 +807,18 @@ function render_all_input_types( $name, $data, $fields_type, $field_index, $valu
$html_input .= '<div class="row ppom-condition-clone-js">';
foreach ( $condition_rules as $rule_index => $condition ) {

$element_values = isset( $condition['element_values'] ) ? stripslashes( $condition['element_values'] ) : '';
$element = isset( $condition['elements'] ) ? stripslashes( $condition['elements'] ) : '';
$element_values = isset( $condition['element_values'] ) ? stripslashes( $condition['element_values'] ) : '';
$element = isset( $condition['elements'] ) ? stripslashes( $condition['elements'] ) : '';
$element_constant_value = isset( $condition['element_constant'] ) ? stripslashes( $condition['element_constant'] ) : '';

$element_between_value_to = '';
$element_between_value_from = '';

if ( isset( $condition['cond-between-interval'] ) && is_array( $condition['cond-between-interval'] ) ) {
$element_between_value_to = isset( $condition['cond-between-interval']['to'] ) ? $condition['cond-between-interval']['to'] : '';
$element_between_value_from = isset( $condition['cond-between-interval']['from'] ) ? $condition['cond-between-interval']['from'] : '';
}

$operator_is = ( $condition['operators'] == 'is' ) ? 'selected="selected"' : '';
$operator_not = ( $condition['operators'] == 'not' ) ? 'selected="selected"' : '';
$operator_greater = ( $condition['operators'] == 'greater than' ) ? 'selected="selected"' : '';
Expand All @@ -826,22 +836,53 @@ function render_all_input_types( $name, $data, $fields_type, $field_index, $valu
$html_input .= '</div>';

// is value meta
$html_input .= '<div class="col-md-2 col-sm-2">';
$pro_enabled = ppom_pro_is_installed() && 'valid' === apply_filters( 'product_ppom_license_status', '' );

$html_input .= '<div class="col-md-3 col-sm-3">';
$html_input .= '<select name="ppom[' . esc_attr( $field_index ) . '][conditions][rules][' . esc_attr( $rule_index ) . '][operators]" class="form-control ppom-conditional-keys" data-metatype="operators">';

$html_input .= '<optgroup label="' . __( 'Value Comparison', 'woocommerce-product-addon' ) . '">';
$html_input .= '<option ' . $operator_is . ' value="is">' . __( 'is', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option ' . $operator_not . ' value="not">' . __( 'not', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option ' . $operator_not . ' value="not">' . __( 'is not', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option ' . selected( 'empty', $condition['operators'], false ) . ' value="empty">' . __( 'is empty', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option ' . selected( 'any', $condition['operators'], false ) . ' value="any">' . __( 'has any value', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '</optgroup>';

$html_input .= '<optgroup label="' . __( 'Text Matching', 'woocommerce-product-addon' ) . '">';
$html_input .= '<option ' . selected( 'contains', $condition['operators'], false ) . ' value="contains" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'contains', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option ' . selected( 'not-contains', $condition['operators'], false ) . ' value="not-contains" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'does not contain', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option ' . selected( 'regex', $condition['operators'], false ) . ' value="regex" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'matches RegEx', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '</optgroup>';

$html_input .= '<optgroup label="' . __( 'Numeric Comparison', 'woocommerce-product-addon' ) . '">';
$html_input .= '<option ' . $operator_greater . ' value="greater than">' . __( 'greater than', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option ' . $operator_less . ' value="less than">' . __( 'less than', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option ' . selected( 'between', $condition['operators'], false ) . ' value="between" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'is between', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option ' . selected( 'number-multiplier', $condition['operators'], false ) . ' value="number-multiplier" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'is multiple of', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option ' . selected( 'even-number', $condition['operators'], false ) . ' value="even-number" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'is even', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option ' . selected( 'odd-number', $condition['operators'], false ) . ' value="odd-number" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'is odd', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '</optgroup>';

$html_input .= '</select> ';
$html_input .= '</div>';

// conditional elements values
$html_input .= '<div class="col-md-4 col-sm-4">';
$html_input .= '<div class="col-md-3 col-sm-3">';

$html_input .= '<select name="ppom[' . esc_attr( $field_index ) . '][conditions][rules][' . esc_attr( $rule_index ) . '][element_values]" class="form-control ppom-conditional-keys" data-metatype="element_values"
data-existingvalue="' . esc_attr( $element_values ) . '" >';
$html_input .= '<option>' . $element_values . '</option>';
$html_input .= '</select>';
$html_input .= '<input name="ppom[' . esc_attr( $field_index ) . '][conditions][rules][' . esc_attr( $rule_index ) . '][element_constant]" class="form-control ppom-conditional-keys ppom-hide-element" data-metatype="element_constant" value="' . esc_attr( $element_constant_value ) . '" >';

$html_input .= '<div class="ppom-between-input-container ppom-hide-element"> ';
$html_input .= '<input type="number" name="ppom[' . esc_attr( $field_index ) . '][conditions][rules][' . esc_attr( $rule_index ) . '][cond-between-interval][from]" class="form-control ppom-conditional-keys" data-metatype="between-input-from" value="' . esc_attr( $element_between_value_from ) . '" pattern="^\\d+(\\.\\d{1,4})?$">';
$html_input .= '<span>' . __( 'and', 'woocommerce-product-addon' ) . '</span>';
$html_input .= '<input type="number" name="ppom[' . esc_attr( $field_index ) . '][conditions][rules][' . esc_attr( $rule_index ) . '][cond-between-interval][to]" class="form-control ppom-conditional-keys" data-metatype="between-input-to" value="' . esc_attr( $element_between_value_to ) . '" pattern="^\\d+(\\.\\d{1,4})?$">';
$html_input .= '</div>';

// Upsell
$html_input .= '<a class="ppom-upsell-condition ppom-hide-element" target="_blank" href="' . esc_url( tsdk_utmify( tsdk_translate_link( PPOM_UPGRADE_URL ), 'input-field-edit', 'condition' ) ) . '"><span class="dashicons dashicons-external"></span> ' . __('Upgrade to Unlock', 'woocommerce-product-addon') . '</a>';

// $html_input .= '<input type="text" name="ppom['.esc_attr($field_index).'][conditions][rules]['.esc_attr($rule_index).'][element_values]" class="form-control ppom-conditional-keys" value="'.esc_attr($element_values).'" placeholder="Enter Option" data-metatype="element_values">';
$html_input .= '</div>';
Expand Down Expand Up @@ -891,12 +932,33 @@ function render_all_input_types( $name, $data, $fields_type, $field_index, $valu
$html_input .= '</div>';

// is
$pro_enabled = ppom_pro_is_installed() && 'valid' === apply_filters( 'product_ppom_license_status', '' );

$html_input .= '<div class="col-md-2 col-sm-2">';
$html_input .= '<select data-metatype="operators" class="ppom-conditional-keys form-control">';

$html_input .= '<optgroup label="' . __( 'Value Comparison', 'woocommerce-product-addon' ) . '">';
$html_input .= '<option value="any">' . __( 'has any value', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option value="empty">' . __( 'is empty', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option value="is">' . __( 'is', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option value="not">' . __( 'not', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option value="not">' . __( 'is not', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '</optgroup>';

$html_input .= '<optgroup label="' . __( 'Text Matching', 'woocommerce-product-addon' ) . '">';
$html_input .= '<option value="' . ( $pro_enabled ? 'contains' : '' ) . '"' . disabled( false, $pro_enabled, false ) . '>' . __( 'contains', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option value="' . ( $pro_enabled ? 'not-contains' : '' ) . '"' . disabled( false, $pro_enabled, false ) . '>' . __( 'does not contain', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option value="' . ( $pro_enabled ? 'regex' : '' ) . '"' . disabled( false, $pro_enabled, false ) . '>' . __( 'matches RegEx', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '</optgroup>';

$html_input .= '<optgroup label="' . __( 'Numeric Comparison', 'woocommerce-product-addon' ) . '">';
$html_input .= '<option value="greater than">' . __( 'greater than', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option value="less than">' . __( 'less than', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option value="' . ( $pro_enabled ? 'even-number' : '' ) . '"' . disabled( false, $pro_enabled, false ) . '>' . __( 'is even', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option value="' . ( $pro_enabled ? 'odd-number' : '' ) . '"' . disabled( false, $pro_enabled, false ) . '>' . __( 'is odd', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option value="' . ( $pro_enabled ? 'between' : '' ) . '"' . disabled( false, $pro_enabled, false ) . '>' . __( 'is between', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option value="' . ( $pro_enabled ? 'number-multiplier' : '' ) . '"' . disabled( false, $pro_enabled, false ) . '>' . __( 'is multiple of', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '</optgroup>';

$html_input .= '</select> ';
$html_input .= '</div>';

Expand Down
34 changes: 33 additions & 1 deletion css/ppom-admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ ul.ppom-options-container li {

.ppom-condition-style-wrap p {
font-size: 15px;
margin: 0px;
}

/*.ppom-slider select.form-control {*/
Expand Down Expand Up @@ -769,6 +770,11 @@ select {
display: block;
}

.row.ppom-condition-style-wrap {
display: flex;
align-items: center;
}

@media (min-width: 992px) {
.col-md-6 {
width: 50% !important;
Expand Down Expand Up @@ -1796,4 +1802,30 @@ header.ppom-modal-header {

.ppom-attach-container .ppom-settings-container {
margin: 10px 0;
}
}
.ppom-hide-element {
display: none !important;
}

.ppom-invisible-element {
visibility: hidden;
}

.ppom-between-input-container {
display: flex;
flex-direction: row;
align-items: center;

gap: 10px;
}

.ppom-between-input-container span {
font-size: 16px;
}

.ppom-upsell-condition {
font-size: 16px;
padding: 9px;
display: flex;
align-items: center;
}
57 changes: 45 additions & 12 deletions inc/functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2349,10 +2349,30 @@ function ppom_get_conditional_data_attributes( $meta ) {

$bound = isset( $conditions['bound'] ) ? ppom_wpml_translate( $conditions['bound'], 'PPOM' ) : '';
$visibility = isset( $conditions['visibility'] ) ? ppom_wpml_translate( $conditions['visibility'], 'PPOM' ) : '';

$conditions['rules'] = array_filter(
$conditions['rules'],
function( $rule ) {
if ( in_array( $rule['operators'], array( 'any', 'empty', 'even-number', 'odd-number', 'regex') ) ) {
return true;
}

if ( in_array( $rule['operators'], array( 'number-multiplier', 'regex', 'contains', 'not-contains') ) ) {
return ! empty( $rule['element_constant'] );
}

if ( in_array( $rule['operators'], array( 'greater than', 'less than', 'is', 'not' ) ) ) {
return ! empty( $rule['element_constant'] ) || ! empty( $rule['element_values'] );
}

if ( 'between' === $rule['operators'] ) {
return (
! empty( $rule['cond-between-interval']) && is_array( $rule['cond-between-interval'] )
&& isset( $rule['cond-between-interval']['to'] )
&& isset( $rule['cond-between-interval']['from'] )
);
}

return ! empty( $rule['element_values'] );
}
);
Expand All @@ -2362,19 +2382,32 @@ function( $rule ) {
$attr_html .= ' data-cond-bind="' . esc_attr( $bound ) . '"';
$attr_html .= ' data-cond-visibility="' . esc_attr( strtolower( $visibility ) ) . '"';

$index = 0;
$index = 0;
$pro_enabled = ppom_pro_is_installed() && 'valid' === apply_filters( 'product_ppom_license_status', '' );

foreach ( $conditions['rules'] as $rule ) {

$counter = ++ $index;
$input = 'input' . $counter;
$value = 'val' . $counter;
$opr = 'operator' . $counter;
$element = isset( $rule['elements'] ) ? ppom_wpml_translate( $rule['elements'], 'PPOM' ) : '';
$element_val = isset( $rule['element_values'] ) ? ppom_wpml_translate( $rule['element_values'], 'PPOM' ) : '';
$operator = isset( $rule['operators'] ) ? ppom_wpml_translate( $rule['operators'], 'PPOM' ) : '';
$attr_html .= ' data-cond-' . $input . '="' . esc_attr( $element ) . '"';
$attr_html .= ' data-cond-' . $value . '="' . esc_attr( $element_val ) . '"';
$attr_html .= ' data-cond-' . $opr . '="' . esc_attr( $operator ) . '"';
$counter = ++ $index;
$input = 'input' . $counter;
$value = 'val' . $counter;
$opr = 'operator' . $counter;
$element = isset( $rule['elements'] ) ? ppom_wpml_translate( $rule['elements'], 'PPOM' ) : '';
$element_val = isset( $rule['element_values'] ) ? ppom_wpml_translate( $rule['element_values'], 'PPOM' ) : '';
$constant_val = isset( $rule['element_constant'] ) ? ppom_wpml_translate( $rule['element_constant'], 'PPOM' ) : '';
$operator = isset( $rule['operators'] ) ? ppom_wpml_translate( $rule['operators'], 'PPOM' ) : '';

$attr_html .= ' data-cond-' . $input . '="' . esc_attr( $element ) . '"';
$attr_html .= ' data-cond-' . $value . '="' . esc_attr( $element_val ) . '"';
$attr_html .= ' data-cond-' . $opr . '="' . esc_attr( $operator ) . '"';

if ( $pro_enabled && ! empty( $constant_val ) ) {
$attr_html .= ' data-cond-constant-val-' . $counter . '="' . esc_attr( $constant_val ) . '"';
}

if ( $pro_enabled && 'between' === $operator && isset( $rule['cond-between-interval'] ) ) {
$attr_html .= ' data-cond-between-from-' . $counter . '="' . esc_attr( $rule['cond-between-interval']['from'] ) . '"';
$attr_html .= ' data-cond-between-to-' . $counter . '="' . esc_attr( $rule['cond-between-interval']['to'] ) . '"';
}
}
}

Expand Down
Loading

0 comments on commit ce926bb

Please sign in to comment.