Skip to content

Commit 2ce8ba0

Browse files
feat: Improve onboarding experience (#1145)
- Add preview feed in Step 2 - Add Fallback Image and Title Filter for feed settings after Step 2
1 parent e92bf7e commit 2ce8ba0

5 files changed

Lines changed: 230 additions & 19 deletions

File tree

includes/admin/feedzy-rss-feeds-admin.php

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1978,6 +1978,10 @@ public function feedzy_load_setup_wizard_page() {
19781978
* Enqueue setup wizard required scripts.
19791979
*/
19801980
public function feedzy_enqueue_setup_wizard_scripts() {
1981+
if ( ! did_action( 'wp_enqueue_media' ) ) {
1982+
wp_enqueue_media();
1983+
}
1984+
19811985
wp_enqueue_style( $this->plugin_name . '_chosen' );
19821986
wp_enqueue_style( $this->plugin_name . '_smart_wizard', FEEDZY_ABSURL . 'css/smart_wizard_all.min.css', array(), $this->version );
19831987
wp_enqueue_style( $this->plugin_name . '_setup_wizard', FEEDZY_ABSURL . 'includes/views/css/style-wizard.css', array( $this->plugin_name . '-settings' ), $this->version, 'all' );
@@ -2003,6 +2007,18 @@ public function feedzy_enqueue_setup_wizard_scripts() {
20032007
'firstButtonText' => __( 'Create Page', 'feedzy-rss-feeds' ),
20042008
'secondButtonText' => __( 'Do not create', 'feedzy-rss-feeds' ),
20052009
),
2010+
'mediaUploadText' => array(
2011+
'iframeTitle' => __( 'Select image', 'feedzy-rss-feeds' ),
2012+
'iframeButton' => __( 'Set default image', 'feedzy-rss-feeds' ),
2013+
'actionButtonTextOne' => __( 'Choose image', 'feedzy-rss-feeds' ),
2014+
'actionButtonTextTwo' => __( 'Replace image', 'feedzy-rss-feeds' ),
2015+
'actionButtonTextThree' => __( 'Remove image', 'feedzy-rss-feeds' ),
2016+
),
2017+
'dryRun' => array(
2018+
'loading' => '<p class="hide-when-loaded">' . __( 'Processing the source and loading the items that will be imported when it runs', 'feedzy-rss-feeds' ) . '...</p>'
2019+
. '<p class="loading-img hide-when-loaded"><img src="' . includes_url( 'images/wpspin-2x.gif' ) . '"></p><div></div>',
2020+
'title' => __( 'Importable Items', 'feedzy-rss-feeds' ),
2021+
),
20062022
)
20072023
);
20082024
}

includes/admin/feedzy-rss-feeds-import.php

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -561,9 +561,14 @@ public function feedzy_import_feed_options() {
561561

562562
$default_thumbnail_id = 0;
563563
$inherited_thumbnail_id = ! empty( $this->free_settings['general']['default-thumbnail-id'] ) ? (int) $this->free_settings['general']['default-thumbnail-id'] : 0;
564+
$custom_thumbnail_id = get_post_meta( $post->ID, 'default_thumbnail_id', true );
565+
566+
if ( is_numeric( $custom_thumbnail_id ) ) {
567+
$default_thumbnail_id = $custom_thumbnail_id;
568+
}
569+
564570
if ( feedzy_is_pro() ) {
565-
$default_thumbnail_id = get_post_meta( $post->ID, 'default_thumbnail_id', true );
566-
$import_schedule = array(
571+
$import_schedule = array(
567572
'fz_cron_schedule' => ! empty( $this->free_settings['general']['fz_cron_schedule'] ) ? $this->free_settings['general']['fz_cron_schedule'] : '',
568573
);
569574
}
@@ -3951,6 +3956,8 @@ private function wizard_import_feed() {
39513956

39523957
$post_type = ! empty( $_POST['post_type'] ) ? sanitize_text_field( wp_unslash( $_POST['post_type'] ) ) : '';
39533958
$post_status = ! empty( $_POST['post_status'] ) ? sanitize_text_field( wp_unslash( $_POST['post_status'] ) ) : '';
3959+
$fallback_image = ! empty( $_POST['fallback_image'] ) ? sanitize_text_field( wp_unslash( $_POST['fallback_image'] ) ) : '';
3960+
$excluded_post_title = ! empty( $_POST['excluded_post_title'] ) ? sanitize_text_field( wp_unslash( $_POST['excluded_post_title'] ) ) : '';
39543961
$wizard_data = get_option( 'feedzy_wizard_data', array() );
39553962
$wizard_data = ! empty( $wizard_data ) ? $wizard_data : array();
39563963
$wizard_data['post_type'] = $post_type;
@@ -3994,7 +4001,25 @@ private function wizard_import_feed() {
39944001
// Update wizard data.
39954002
$wizard_data['job_id'] = $job_id;
39964003
update_option( 'feedzy_wizard_data', $wizard_data );
3997-
4004+
4005+
$filter_conditions = array(
4006+
'match' => 'all',
4007+
'conditions' => array(),
4008+
);
4009+
4010+
if ( ! empty( $excluded_post_title ) ) {
4011+
$filter_conditions['conditions'] = array(
4012+
array(
4013+
'field' => 'title',
4014+
'operator' => 'not_contains',
4015+
'value' => $excluded_post_title,
4016+
),
4017+
);
4018+
}
4019+
4020+
update_post_meta( $job_id, 'filter_conditions', wp_json_encode( $filter_conditions ) );
4021+
update_post_meta( $job_id, 'default_thumbnail_id', $fallback_image );
4022+
39984023
$response = array(
39994024
'status' => true,
40004025
);

includes/layouts/setup-wizard.php

Lines changed: 52 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
}
2525
$published_status = array( 'publish', 'draft' );
2626

27+
add_thickbox();
2728
?>
2829
<div class="feedzy-wizard-wrap feedzy-wrap">
2930
<div class="feedzy-header--small">
@@ -138,6 +139,11 @@
138139
</div>
139140
</div>
140141
<div class="form-block">
142+
<?php if ( 'page_builder' !== $integrate_with ) : ?>
143+
<button class="btn btn-ghost<?php echo empty( $feed_source ) ? ' disabled' : ''; ?>" id="preflight">
144+
<?php esc_html_e( 'Preview Import', 'feedzy-rss-feeds' ); ?>
145+
</button>
146+
<?php endif; ?>
141147
<button class="btn btn-primary<?php echo empty( $feed_source ) ? ' disabled' : ''; ?>" data-step_number="2">
142148
<?php
143149
if ( 'page_builder' === $integrate_with ) {
@@ -177,22 +183,55 @@
177183
</select>
178184
</div>
179185
</div>
186+
<div class="form-block">
187+
<div class="fz-form-row">
188+
<div class="fz-form-col-6">
189+
<label class="form-label">
190+
<?php esc_html_e( 'Post status', 'feedzy-rss-feeds' ); ?>
191+
</label>
192+
<div class="mx-320">
193+
<select id="feedzy_post_status" class="form-control feedzy-chosen" name="feedzy_meta_data[import_post_status]">
194+
<?php
195+
foreach ( $published_status as $_status ) {
196+
?>
197+
<option value="<?php echo esc_attr( $_status ); ?>">
198+
<?php echo esc_html( ucfirst( $_status ) ); ?>
199+
</option>
200+
<?php
201+
}
202+
?>
203+
</select>
204+
</div>
205+
</div>
206+
<div class="fz-form-col-6">
207+
<label class="form-label">
208+
<?php esc_html_e( 'Fallback Image', 'feedzy-rss-feeds' ); ?>
209+
</label>
210+
<div class="fz-cta-group pb-8">
211+
<a
212+
href="javascript:;"
213+
class="feedzy-open-media btn btn-outline-primary"
214+
>
215+
<?php esc_html_e( 'Choose image', 'feedzy-rss-feeds' ); ?>
216+
</a>
217+
<a href="javascript:;" class="feedzy-remove-media btn btn-outline-primary"><?php esc_html_e( 'Remove', 'feedzy-rss-feeds' ); ?></a>
218+
<input type="hidden" name="feedzy_meta_data[default_thumbnail_id]" id="feed-post-default-thumbnail" value="">
219+
<div class="help-text pt-8">
220+
<?php esc_html_e( 'Optional. Used as fallback for imported posts without images.', 'feedzy-rss-feeds' ); ?>
221+
</div>
222+
</div>
223+
</div>
224+
</div>
225+
</div>
180226
<div class="form-block">
181227
<label class="form-label">
182-
<?php esc_html_e( 'Post status', 'feedzy-rss-feeds' ); ?>
228+
<?php esc_html_e( 'Exclude posts with title not containing', 'feedzy-rss-feeds' ); ?>
183229
</label>
184-
<div class="mx-320">
185-
<select id="feedzy_post_status" class="form-control feedzy-chosen" name="feedzy_meta_data[import_post_status]">
186-
<?php
187-
foreach ( $published_status as $_status ) {
188-
?>
189-
<option value="<?php echo esc_attr( $_status ); ?>">
190-
<?php echo esc_html( ucfirst( $_status ) ); ?>
191-
</option>
192-
<?php
193-
}
194-
?>
195-
</select>
230+
<div class="fz-form-group">
231+
<input type="text" id="feedzy_exclude_title" name="feedzy_meta_data[exc_key]" class="form-control" value="" />
232+
<div class="help-text pt-8">
233+
<?php esc_html_e( 'Posts will not be imported if their title includes these keywords.', 'feedzy-rss-feeds' ); ?>
234+
</div>
196235
</div>
197236
</div>
198237
<div class="form-block">

includes/views/css/style-wizard.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -471,3 +471,36 @@
471471
.feedzy-accordion-item__title h2 {
472472
margin-bottom: 0;
473473
}
474+
.btn-ghost.disabled {
475+
cursor: none;
476+
pointer-events: none;
477+
color: #757575;
478+
}
479+
#TB_ajaxContent ul {
480+
list-style: decimal;
481+
margin-left: 20px;
482+
}
483+
484+
#TB_ajaxContent ul li {
485+
padding: 5px !important;
486+
}
487+
488+
#TB_ajaxContent p.loading-img {
489+
text-align: center;
490+
}
491+
492+
#TB_ajaxContent.loaded p.hide-when-loaded {
493+
display: none;
494+
}
495+
496+
#TB_ajaxContent div.dry_run span {
497+
display: block;
498+
}
499+
500+
#TB_ajaxContent div.dry_run span i.pass {
501+
color: #149714;
502+
}
503+
504+
#TB_ajaxContent div.dry_run span i.fail {
505+
color: #ca4a1f;
506+
}

js/feedzy-setup-wizard.js

Lines changed: 101 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ jQuery(function ($) {
3535
const feedUrl = $(this).attr('href');
3636
$(this).parents('.fz-row').find('input:text').val(feedUrl);
3737

38-
$('[data-step_number="2"]').removeClass('disabled');
38+
$('[data-step_number="2"], #preflight').removeClass('disabled');
3939
return false;
4040
});
4141

@@ -211,6 +211,8 @@ jQuery(function ($) {
211211
post_status: $(
212212
'select[name="feedzy_meta_data[import_post_status]"]'
213213
).val(),
214+
fallback_image: $('input[name="feedzy_meta_data[default_thumbnail_id]"]').val(),
215+
excluded_post_title: $('input[name="feedzy_meta_data[exc_key]"]').val(),
214216
action: 'feedzy',
215217
_action: 'wizard_import_feed',
216218
},
@@ -329,9 +331,9 @@ jQuery(function ($) {
329331
// Remove disabled class from save button.
330332
$(document).on('input', '#wizard_feed_source', function () {
331333
if ('' === $(this).val()) {
332-
$('[data-step_number="2"]').addClass('disabled');
334+
$('[data-step_number="2"], #preflight').addClass('disabled');
333335
} else {
334-
$('[data-step_number="2"]').removeClass('disabled');
336+
$('[data-step_number="2"], #preflight').removeClass('disabled');
335337
}
336338
});
337339

@@ -359,4 +361,100 @@ jQuery(function ($) {
359361

360362
// Init chosen selectbox.
361363
$('.feedzy-chosen').chosen({ width: '100%' });
364+
365+
// on upload button click
366+
$( 'body' ).on( 'click', '.feedzy-open-media', function( e ) {
367+
e.preventDefault();
368+
const button = $( this ),
369+
wp_media_uploader = wp.media( {
370+
title: feedzySetupWizardData.mediaUploadText.iframeTitle,
371+
library : {
372+
type : 'image'
373+
},
374+
button: {
375+
text: feedzySetupWizardData.mediaUploadText.iframeButton
376+
},
377+
multiple: false
378+
} ).on( 'select', function() { // it also has "open" and "close" events
379+
const selectedAttachments = wp_media_uploader.state().get( 'selection' );
380+
button.parents( '.fz-form-group' ).find( '.feedzy-media-preview' ).remove();
381+
// Display image preview when a single image is selected.
382+
const attachment = selectedAttachments.first().toJSON();
383+
let attachmentUrl = attachment.url;
384+
if ( attachment.sizes.thumbnail ) {
385+
attachmentUrl = attachment.sizes.thumbnail.url;
386+
}
387+
if ( $( '.feedzy-media-preview' ).length ) {
388+
$( '.feedzy-media-preview' ).find( 'img' ).attr( 'src', attachmentUrl );
389+
} else {
390+
$( '<div class="fz-form-group mb-20 feedzy-media-preview"><img src="' + attachmentUrl + '"></div>' ).insertBefore( button.parent() );
391+
}
392+
// Get all selected attachment ids.
393+
const ids = selectedAttachments.map( function( image ) {
394+
return image.id;
395+
} ).join( ',' );
396+
397+
button.parent().find( '.feedzy-remove-media' ).addClass( 'is-show' );
398+
button.parent().find( 'input:hidden' ).val( ids ).trigger( 'change' );
399+
$( '.feedzy-open-media' ).html( feedzySetupWizardData.mediaUploadText.actionButtonTextTwo );
400+
} );
401+
402+
wp_media_uploader.on(' open', function() {
403+
const selectedVal = button.parent().find( 'input:hidden' ).val();
404+
if ( '' === selectedVal ) {
405+
return;
406+
}
407+
const selection = wp_media_uploader.state().get('selection');
408+
409+
selectedVal.split(',').forEach(function( id ) {
410+
const attachment = wp.media.attachment( id );
411+
attachment.fetch();
412+
selection.add(attachment ? [attachment] : []);
413+
});
414+
} );
415+
416+
wp_media_uploader.open();
417+
});
418+
419+
$(document).on( 'click', '.feedzy-remove-media', function( e ) {
420+
$(this)
421+
e.preventDefault();
422+
$('.feedzy-media-preview').remove();
423+
$(this).removeClass('is-show');
424+
425+
// Reset the input.
426+
$('input[name="feedzy_meta_data[default_thumbnail_id]"]').val(0);
427+
$('.feedzy-open-media').html(feedzySetupWizardData.mediaUploadText.actionButtonTextOne);
428+
} );
429+
430+
$('#preflight').on('click', function (e) {
431+
e.preventDefault();
432+
const $fields = {};
433+
// collect all elements.
434+
$('#smartwizard')
435+
.find(':input')
436+
.each(function (index, element) {
437+
if ('undefined' === typeof $(element).attr('name')) {
438+
return;
439+
}
440+
$fields[$(element).attr('name')] = $(element).val();
441+
});
442+
$fields['feedzy_meta_data[source]'] = $('#wizard_feed_source').val();
443+
tb_show(feedzySetupWizardData.dryRun.title, 'TB_inline?');
444+
$('#TB_ajaxContent').html(feedzySetupWizardData.dryRun.loading);
445+
$.post(
446+
ajaxurl,
447+
{
448+
security: window.feedzySetupWizardData.ajax.security,
449+
fields: $.param($fields),
450+
action: 'feedzy',
451+
_action: 'dry_run',
452+
environment: 'wizard',
453+
},
454+
function(data) {
455+
$('#TB_ajaxContent').addClass('loaded');
456+
$('#TB_ajaxContent div').html(data.data.output);
457+
},
458+
);
459+
});
362460
});

0 commit comments

Comments
 (0)