Skip to content

Commit

Permalink
release: fixes
Browse files Browse the repository at this point in the history
- Fixed a few alignment and UI issues
- Updated behavior for PPOM Image Selection to allow one selection by default.
- Fixed an issue where the "Conditions" field was not working correctly in Image and Conditional Image fields 
- Fixed issues that prevented saving group fields when a large number of fields were present.
  • Loading branch information
selul authored Oct 1, 2024
2 parents 281bba5 + e30abe0 commit 46e4878
Show file tree
Hide file tree
Showing 7 changed files with 93 additions and 46 deletions.
47 changes: 28 additions & 19 deletions classes/fields.class.php
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ function load_script( $hook ) {

// Description Tooltips JS File
wp_enqueue_script( 'ppom-tooltip', PPOM_URL . '/js/ppom-tooltip.js', array( 'jquery' ), PPOM_VERSION, true );
wp_register_script( 'serializejson', PPOM_URL . '/js/admin/serializejson.js', array( 'jquery' ), '2.8.1');

// Add the color picker css file
wp_enqueue_style( 'wp-color-picker' );
Expand All @@ -146,6 +147,7 @@ function load_script( $hook ) {
'ppom-select2',
'ppom-tabletojson',
'ppom-datatables',
'serializejson',
'ppom-tooltip',
'jquery-ui-core',
'jquery-ui-sortable',
Expand Down Expand Up @@ -937,41 +939,48 @@ function render_all_input_types( $name, $data, $fields_type, $field_index, $valu
// 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 .= '<div class="col-md-3 col-sm-3">';
$html_input .= '<select name="ppom[' . esc_attr( $field_index ) . '][conditions][rules][0][operators]" class="form-control ppom-conditional-keys" data-metatype="operators">';

$html_input .= '<optgroup label="' . __( 'Value Comparison', 'woocommerce-product-addon' ) . '">';
$html_input .= '<option value="is">' . __( 'is', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option value="not">' . __( 'is not', 'woocommerce-product-addon' ) . '</option>';
$html_input .= '<option value="empty">' . __( 'is empty', 'woocommerce-product-addon' ) . '</option>';
$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">' . __( '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 .= '<option value="contains" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'contains', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option value="not-contains" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'does not contain', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option 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 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 .= '<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="between" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'is between', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option value="number-multiplier" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'is multiple of', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option value="even-number" ' . disabled( false, $pro_enabled, false ) . '>' . __( 'is even', 'woocommerce-product-addon' ) . ( ! $pro_enabled ? ' (PRO)' : '' ) . '</option>';
$html_input .= '<option 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 .= '<input name="ppom[' . esc_attr( $field_index ) . '][conditions][rules][0][element_constant]" class="form-control ppom-conditional-keys ppom-hide-element" data-metatype="element_constant" >';

$html_input .= '<div class="ppom-between-input-container ppom-hide-element"> ';
$html_input .= '<input type="number" name="ppom[' . esc_attr( $field_index ) . '][conditions][rules][0][cond-between-interval][from]" class="form-control ppom-conditional-keys" data-metatype="between-input-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][0][cond-between-interval][to]" class="form-control ppom-conditional-keys" data-metatype="between-input-to" pattern="^\\d+(\\.\\d{1,4})?$">';
$html_input .= '</div>';

$html_input .= '<select data-metatype="element_values" class="ppom-conditional-keys form-control"></select>';
// 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" class="form-control ppom-conditional-keys" placeholder="Enter Option" data-metatype="element_values">';
$html_input .= '</div>';

// Add and remove btn
Expand Down Expand Up @@ -1019,7 +1028,7 @@ function render_all_input_types( $name, $data, $fields_type, $field_index, $valu
$html_input .= '<input class="form-control ppom-image-option-title" type="text" placeholder="Title" value="' . esc_attr( stripslashes( $pre_uploaded_image['title'] ) ) . '" name="ppom[' . esc_attr( $field_index ) . '][images][' . esc_attr( $opt_index ) . '][title]" data-opt-index="' . esc_attr( $opt_index ) . '" data-metatype="title">';
$html_input .= '<input class="form-control" type="text" placeholder="Price (fix or %)" value="' . esc_attr( stripslashes( $pre_uploaded_image['price'] ) ) . '" name="ppom[' . esc_attr( $field_index ) . '][images][' . esc_attr( $opt_index ) . '][price]" data-opt-index="' . esc_attr( $opt_index ) . '" data-metatype="price">';
$html_input .= '<input class="form-control" type="text" placeholder="Stock" value="' . esc_attr( $image_stock ) . '" name="ppom[' . esc_attr( $field_index ) . '][images][' . esc_attr( $opt_index ) . '][stock]" data-opt-index="' . esc_attr( $opt_index ) . '" data-metatype="stock">';
$html_input .= '<input class="form-control" type="text" placeholder="URL" value="' . esc_url( stripslashes( $pre_uploaded_image['url'] ) ) . '" name="ppom[' . esc_attr( $field_index ) . '][images][' . esc_attr( $opt_index ) . '][url]" data-opt-index="' . esc_attr( $opt_index ) . '" data-metatype="url">';
$html_input .= '<input class="form-control" type="text" placeholder="URL" value="' . esc_url( stripslashes( $image_url ) ) . '" name="ppom[' . esc_attr( $field_index ) . '][images][' . esc_attr( $opt_index ) . '][url]" data-opt-index="' . esc_attr( $opt_index ) . '" data-metatype="url">';

$html_input .= '<button class="btn btn-danger ppom-pre-upload-delete" style="height: 35px;"><i class="fa fa-times" aria-hidden="true"></i></button>';
$html_input .= '</div>';
Expand Down
17 changes: 14 additions & 3 deletions css/ppom-admin.css
Original file line number Diff line number Diff line change
Expand Up @@ -446,9 +446,6 @@ ul.ppom-options-container li {
7- Existin Meta Section CSS
*/

.ppom-meta-table-checkbox-mr label {
margin-left: 7px;
}

#ppom-meta-table .dashicons,
.dashicons-before:before {
Expand Down Expand Up @@ -1851,3 +1848,17 @@ header.ppom-modal-header {
display: flex;
align-items: center;
}

.ppom-wrapper .btn .dashicons{
line-height: initial;
}
.ppom-wrapper select.form-control{
line-height: unset;
}
.ppom-wrapper select.form-control{
line-height: unset;
}

.ppom-wrapper a.ppom-upsell-condition:hover{
text-decoration: none;
}
13 changes: 11 additions & 2 deletions inc/admin.php
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,12 @@ function ppom_admin_product_meta_column( $column, $post_id ) {
$ppom_settings_url = admin_url( 'admin.php?page=ppom' );

if ( $ppom->has_multiple_meta() ) {
$total_items = count( $ppom->meta_id ); // Get the total number of items.
$current_item = 0; // Counter to track the current iteration.

foreach ( $ppom->meta_id as $meta_id ) {
$current_item++; // Increment the counter.

$ppom_setting = $ppom->get_settings_by_id( $meta_id );
if ( $ppom_setting ) {
$meta_title = stripslashes( $ppom_setting->productmeta_name );
Expand All @@ -47,7 +52,10 @@ function ppom_admin_product_meta_column( $column, $post_id ) {
$ppom_settings_url
);
echo sprintf( __( '<a href="%1$s">%2$s</a>', 'woocommerce-product-addon' ), esc_url( $url_edit ), $meta_title );
echo ', ';
// Add a comma only if it's not the last item
if ( $current_item < $total_items ) {
echo ', ';
}
} else {
echo sprintf( __( '<a class="btn button" href="%1$s">%2$s</a>', 'woocommerce-product-addon' ), esc_url( $ppom_settings_url ), 'Add Fields' );
}
Expand Down Expand Up @@ -264,6 +272,7 @@ function ppom_admin_save_form_meta() {
wp_send_json( $resp );
}

$_REQUEST['ppom'] = is_array( $_REQUEST['ppom'] ) ? $_REQUEST['ppom'] : json_decode( wp_unslash( $_REQUEST['ppom'] ), true );
global $wpdb;

extract( $_REQUEST );
Expand Down Expand Up @@ -440,7 +449,7 @@ function ppom_admin_update_form_meta() {

wp_send_json( $resp );
}

$_REQUEST['ppom'] = is_array( $_REQUEST['ppom'] ) ? $_REQUEST['ppom'] : json_decode( wp_unslash( $_REQUEST['ppom'] ), true );
global $wpdb;

$ppom_meta = isset( $_REQUEST['ppom_meta'] ) ? $_REQUEST['ppom_meta'] : $_REQUEST['ppom'];
Expand Down
45 changes: 27 additions & 18 deletions js/admin/ppom-admin.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @ts-check
"use strict";

const FIELD_COMPATIBLE_WITH_SELECT_OPTIONS = [ 'select', 'radio', 'switcher' ];
const FIELD_COMPATIBLE_WITH_SELECT_OPTIONS = [ 'select', 'radio', 'switcher', 'image','conditional_meta'];
const OPERATOR_COMPARISON_VALUE_FIELD_TYPE = {
'select': FIELD_COMPATIBLE_WITH_SELECT_OPTIONS,
}
Expand Down Expand Up @@ -128,22 +128,31 @@ jQuery(function($) {
jQuery(".ppom-meta-save-notice").html('<img src="' + ppom_vars.loader + '">').show();

$('.ppom-unsave-data').remove();

var data = $(this).serialize();

$.post(ajaxurl, data, function(resp) {

const bg_color = resp.status == 'success' ? '#4e694859' : '#ee8b94';
jQuery(".ppom-meta-save-notice").html(resp.message).css({ 'background-color': bg_color, 'padding': '8px', 'border-left': '5px solid #008c00' });
if (resp.status == 'success') {
if (resp.redirect_to != '') {
window.location = resp.redirect_to;
}
else {
window.location.reload(true);
var data = $(this).serializeJSON();
data.ppom = JSON.stringify(data.ppom);
// Send the JSON data via POST request
$.ajax({
url: ajaxurl,
data: data, // Send as regular object (no need to stringify)
type: 'POST',
success: function(resp) {

const bg_color = resp.status == 'success' ? '#4e694859' : '#ee8b94';
jQuery(".ppom-meta-save-notice").html(resp.message).css({ 'background-color': bg_color, 'padding': '8px', 'border-left': '5px solid #008c00' });
if (resp.status == 'success') {
if (resp.redirect_to != '') {
window.location = resp.redirect_to;
}
else {
window.location.reload(true);
}
}
},
error: function() {
// Handle error
jQuery(".ppom-meta-save-notice").html("An error occurred. Please try again.").css({ 'background-color': '#ee8b94', 'padding': '8px', 'border-left': '5px solid #c00' });
}
}, 'json');
});

});

Expand Down Expand Up @@ -1351,8 +1360,7 @@ jQuery(function($) {
* @type {HTMLSelectElement|null}
*/
const conditionTargetSelectInput = container.querySelector( '[data-metatype="elements"]' );

if ( !conditionConstantInput || !conditionTargetSelectOptionsInput || !conditionTargetSelectInput ) {
if ( !conditionConstantInput || !conditionTargetSelectInput ) {
return;
}

Expand Down Expand Up @@ -1390,6 +1398,7 @@ jQuery(function($) {
*/
const targetFieldTypeInput = conditionTargetSelectInput.querySelector(`option[value="${conditionTargetSelectInput.value}"]`);
if (
conditionTargetSelectOptionsInput &&
COMPARISON_VALUE_CAN_USE_SELECT.includes( selectedOperator ) &&
targetFieldTypeInput?.dataset?.fieldtype &&
OPERATOR_COMPARISON_VALUE_FIELD_TYPE['select'].includes( targetFieldTypeInput.dataset.fieldtype )
Expand All @@ -1402,7 +1411,7 @@ jQuery(function($) {
if ( shouldHideSelectInput && shouldHideTextInput && shouldHideBetweenInputs && shouldHideUpsell ) {
conditionConstantInput.parentNode?.classList.add('ppom-invisible-element'); // NOTE: Make the entire container visible to preserve the space.
} else {
conditionTargetSelectOptionsInput.classList.toggle("ppom-hide-element", shouldHideSelectInput );
conditionTargetSelectOptionsInput?.classList.toggle("ppom-hide-element", shouldHideSelectInput );
conditionConstantInput.classList.toggle("ppom-hide-element", shouldHideTextInput );
betweenInputs?.classList.toggle("ppom-hide-element", shouldHideBetweenInputs );
container.querySelector('.ppom-upsell-condition')?.classList.toggle("ppom-hide-element", shouldHideUpsell);
Expand Down
Loading

0 comments on commit 46e4878

Please sign in to comment.