Skip to content

Commit

Permalink
refactor: product metabox for fields attach (#382)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Soare-Robert-Daniel
Soare-Robert-Daniel authored Sep 20, 2024
1 parent 83145d0 commit ca0264e
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 33 deletions.
42 changes: 42 additions & 0 deletions classes/admin.class.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -398,6 +398,48 @@ function ppom_tabs_custom_style() {
td.ppom-files-display a.button {
text-align: center;
}

.ppom-settings-container {
display: flex;
flex-direction: column;
gap: 15px;
margin: 10px 15px;
}

.ppom-settings-container-item {
display: flex;
align-items: center;
gap: 10px;
}

label.ppom-settings-container-item {
width: 100%;
max-width: 600px;
margin: unset;
}

.ppom-settings-container .ppom-upsell-link {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: #2563eb;
background-color: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 0.375rem;
text-decoration: none;
transition: all 150ms ease-in-out;
}

.ppom-settings-container .ppom-upsell-link:hover {
background-color: #dbeafe;
color: #1d4ed8;
}

.ppom-settings-container .ppom-disabled-text {
color: #8d8d8d;
}
</style>
<?php
}
Expand Down
128 changes: 95 additions & 33 deletions inc/admin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,51 +80,113 @@ function ppom_meta_list( $post ) {
$ppom = new PPOM_Meta( $post->ID );
$all_meta = PPOM()->get_product_meta_all();
$ppom_setting = admin_url( 'admin.php?page=ppom' );

$html = '<div class="options_group ppom-settings-container" style="max-height:375px; overflow:auto;">';

// UP-SELL
$html .= '<a class="ppom-upsell-link" target="_blank" href="' . tsdk_utmify( tsdk_translate_link( PPOM_UPGRADE_URL ), 'product-edit', 'metabox' ) . '">';
$html .= '<span class="dashicons dashicons-external"></span> ';
$html .= __( 'Using multiple PPOM Fields on the same product is available in PRO.', 'woocommerce-product-addon' );
$html .= '</a>';

// PPOM Fields select table.
$html .= '<table id="ppom_meta_sortable" class="wp-list-table widefat fixed striped">';

$html .= '<div class="ppom-search-meta" style="text-align: right;">';
$html .= '<input type="text" class="ppom-search-meta-js" placeholder="' . __( 'Search Meta', 'woocommerce-product-addon' ) . '">';
$html .= '<a target="_blank" class="button button-primary" href="' . esc_url( $ppom_setting ) . '">' . __( 'Create New Meta', 'woocommerce-product-addon' ) . '</a>';
$html .= '</div>';

$html = '<div class="options_group">';
$html .= '<p>' . __( 'Select Meta to Show Fields on this product', 'woocommerce-product-addon' );
// $html .= __(' Or <a target="_blank" class="button" href="'.esc_url($ppom_setting).'">Create New Meta</a>', 'woocommerce-product-addon');
$html .= '</p>';

$html .= '<p>';
$html .= '<select name="ppom_product_meta" id="ppom_product_meta" class="select">';
$html .= '<option selected="selected"> ' . __( 'None', 'woocommerce-product-addon' ) . '</option>';

$html .= '<thead><tr>';
$html .= '<th>' . __( 'Select Meta', 'woocommerce-product-addon' ) . '</th>';
$html .= '<th>' . __( 'Meta ID', 'woocommerce-product-addon' ) . '</th>';
$html .= '<th>' . __( 'Meta Name', 'woocommerce-product-addon' ) . '</th>';
$html .= '<th>' . __( 'Edit', 'woocommerce-product-addon' ) . '</th>';
$html .= '</tr></thead>';

foreach ( $all_meta as $meta ) {
$html .= '<tr data-ppom-search="' . esc_attr( sanitize_key( $meta->productmeta_name ) ) . '" style="cursor: move;">';

// Select/Checkbox
$html .= '<td width="5%">';
$html .= '<input name="ppom_product_meta" type="radio" style="cursor:auto;-webkit-appearance:checkbox" value="' . esc_attr( $meta->productmeta_id ) . '" ';
if (
isset( $ppom->meta_id ) &&
(
(
is_array( $ppom->meta_id ) &&
in_array( $meta->productmeta_id, $ppom->meta_id )
) ||
(
is_numeric( $ppom->meta_id ) &&
$ppom->meta_id === $meta->productmeta_id
)
)
) {
$html .= ' checked ';
}
$html .= 'id="ppom-' . esc_attr( $meta->productmeta_id ) . '">';
$html .= '</td>';

$html .= '<option value="' . esc_attr( $meta->productmeta_id ) . '" ';
$html .= selected( $ppom->single_meta_id, $meta->productmeta_id, false );
$html .= 'id="select_meta_group-' . $meta->productmeta_id . '">';
$html .= stripslashes( $meta->productmeta_name );
$html .= '</option>';
}
$html .= '</select>';
// ID Column
$html .= '<td width="5%">' . $meta->productmeta_id . '</td>';

if ( $ppom->single_meta_id != 'None' ) {
// Meta Name Column
$html .= '<td width="50%">' . stripslashes( $meta->productmeta_name ) . '</td>';

$ppom_add_args = array(
'productmeta_id' => $ppom->single_meta_id,
'do_meta' => 'edit',
'product_id' => $post->ID,
// Edit Meta Shortcut Column
$url_edit = add_query_arg(
array(
'productmeta_id' => $meta->productmeta_id,
'do_meta' => 'edit',
),
$ppom_setting
);

$url_edit = add_query_arg( $ppom_add_args, $ppom_setting );
$html .= ' <a class="button" href="' . esc_url( $url_edit ) . '" title="Edit"><span class="dashicons dashicons-edit"></span></a>';
}
$html .= '<td width="5%">';
$html .= '<a target="_blank" style="font-weight:600; color:#0073aa" href="' . esc_url( $url_edit ) . '"><span class="dashicons dashicons-edit"></span></a>';
$html .= '</td>';

// $html .= '<hr>';
// $html .= ' <a class="button button-primary" href="'.esc_url($ppom_setting).'">Create New Meta</a>';
$html .= '</tr>';
}

$html .= '</p>';
$html .= '</table>';
$html .= '</div>';

$ppom_add_args = array(
'action' => 'new',
'product_id' => $post->ID,
);
$ppom_setting_url = add_query_arg( $ppom_add_args, $ppom_setting );
$html .= '<hr>';
$html .= '<div class="ppom-settings-container">';
$html .= '<strong>' . __( 'PPOM PopUp Settings', 'woocommerce-product-addon' ) . ' (' . __( 'PRO', 'woocommerce-product-addon' ) . ')' . '</strong>';
$html .= '<label class="ppom-settings-container-item ppom-disabled-text"><input type="checkbox" disabled>' . __( 'Enable PopUp', 'woocommerce-product-addon' ) . '</label>';
$html .= '<label class="ppom-settings-container-item ppom-disabled-text">' . __( 'PopUp Button Label', 'woocommerce-product-addon' );
$html .= '<input type="text" disabled></label>';
$html .= '</div>';

$html .= '<hr>';
$html .= '<div class="ppom-settings-container">';
$html .= '<strong>' . __( 'PPOM Enquiry Form Settings', 'woocommerce-product-addon' ) . ' (' . __( 'PRO', 'woocommerce-product-addon' ) . ')' . '</strong>';
$html .= '<label class="ppom-settings-container-item ppom-disabled-text"><input disabled type="checkbox">' . __( 'Enable Enquiry Form', 'woocommerce-product-addon' ) . '</label>';
$html .= '</div>';

?>
<script type="text/javascript">
jQuery(function ($) {
jQuery(document).on('keyup', '.ppom-search-meta-js', function (e) {
e.preventDefault();

var div = $(this).parent().parent();
var search_val = $(this).val().toLowerCase();
if (search_val != '') {
div.find('#ppom_meta_sortable tbody tr').hide();
div.find('#ppom_meta_sortable tbody tr[data-ppom-search*="' + search_val + '"]').show();
} else {
div.find('#ppom_meta_sortable tbody tr:hidden').show();
}
});

$html .= sprintf( __( ' - <a href="%s" target="_blank">Create New Meta</a></p>', 'woocommerce-product-addon' ), esc_url( $ppom_setting_url ) );
$("#ppom_meta_sortable tbody").sortable();
});
</script>
<?php

echo apply_filters( 'ppom_select_meta_in_product', $html, $ppom, $all_meta );

Expand Down

0 comments on commit ca0264e

Please sign in to comment.