List products in products widget

[MAILPOET-1842]

assets/js/src/newsletter_editor/blocks/products.js

@@ -1,11 +1,11 @@
 /**
- * Posts block.
+ * Products block.
  *
  * This block works slightly differently compared to any other block.
  * The difference is that once the user changes settings of this block,
  * it will be removed and replaced with other blocks. So this block will
  * not appear in the final JSON structure, it serves only as a placeholder
- * for posts, that will be comprised of container, image, button and text blocks
+ * for products, that will be comprised of container, image, button and text blocks
  *
  * This block depends on blocks.button and blocks.divider for block model and
  * block settings view.
@@ -39,7 +39,7 @@ Module.ProductsBlockModel = base.BlockModel.extend({
       withLayout: true,
       amount: '10',
       offset: 0,
-      contentType: 'post', // 'post'|'page'|'mailpoet_page'
+      contentType: 'product',
       postStatus: 'publish', // 'draft'|'pending'|'private'|'publish'|'future'
       terms: [], // List of category and tag objects
       search: '', // Search keyword term
@@ -94,7 +94,7 @@ Module.ProductsBlockModel = base.BlockModel.extend({
 
     this.fetchAvailableProducts();
     this.on('change', this._updateDefaults, this);
-    this.on('change:amount change:contentType change:terms change:inclusionType change:postStatus change:search change:sortBy', refreshAvailableProducts);
+    this.on('change:amount change:terms change:inclusionType change:postStatus change:search change:sortBy', refreshAvailableProducts);
     this.on('loadMoreProducts', this._loadMoreProducts, this);
 
     this.listenTo(this.get('_selectedProducts'), 'add remove reset', refreshTransformedProducts);
@@ -107,6 +107,7 @@ Module.ProductsBlockModel = base.BlockModel.extend({
   fetchAvailableProducts: function fetchAvailableProducts() {
     var that = this;
     this.set('offset', 0);
+    this.set('contentType', 'product');
     CommunicationComponent.getPosts(this.toJSON()).done(function getPostsDone(products) {
       that.get('_availableProducts').reset(products);
       that.get('_selectedProducts').reset(); // Empty out the collection
@@ -313,13 +314,12 @@ ProductSelectionSettingsView = Marionette.View.extend({
     return window.templates.postSelectionProductsBlockSettings;
   },
   regions: {
-    posts: '.mailpoet_post_selection_container',
+    posts: '.mailpoet_product_selection_container',
   },
   events: function events() {
     return {
-      'change .mailpoet_settings_posts_content_type': _.partial(this.changeField, 'contentType'),
+      'change .mailpoet_products_post_status': _.partial(this.changeField, 'postStatus'),
-      'change .mailpoet_posts_post_status': _.partial(this.changeField, 'postStatus'),
+      'input .mailpoet_products_search_term': _.partial(this.changeField, 'search'),
-      'input .mailpoet_posts_search_term': _.partial(this.changeField, 'search'),
     };
   },
   modelEvents: {
@@ -330,10 +330,10 @@ ProductSelectionSettingsView = Marionette.View.extend({
       }
     },
     loadingMoreProducts: function loadingMoreProducts() {
-      this.$('.mailpoet_post_selection_loading').css('visibility', 'visible');
+      this.$('.mailpoet_product_selection_loading').css('visibility', 'visible');
     },
     moreProductsLoaded: function moreProductsLoaded() {
-      this.$('.mailpoet_post_selection_loading').css('visibility', 'hidden');
+      this.$('.mailpoet_product_selection_loading').css('visibility', 'hidden');
     },
   },
   templateContext: function templateContext() {
@@ -344,7 +344,6 @@ ProductSelectionSettingsView = Marionette.View.extend({
   onRender: function onRender() {
     var productsView;
     // Dynamically update available post types
-    CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
     productsView = new ProductSelectionCollectionView({
       collection: this.model.get('_availableProducts'),
       blockModel: this.model,
@@ -355,7 +354,7 @@ ProductSelectionSettingsView = Marionette.View.extend({
   onAttach: function onAttach() {
     var that = this;
 
-    this.$('.mailpoet_posts_categories_and_tags').select2({
+    this.$('.mailpoet_products_categories_and_tags').select2({
       multiple: true,
       allowClear: true,
       placeholder: MailPoet.I18n.t('categoriesAndTags'),
@@ -427,19 +426,6 @@ ProductSelectionSettingsView = Marionette.View.extend({
   changeField: function changeField(field, event) {
     this.model.set(field, jQuery(event.target).val());
   },
-  _updateContentTypes: function updateContentTypes(productTypes) {
-    var select = this.$('.mailpoet_settings_posts_content_type');
-    var selectedValue = this.model.get('contentType');
-
-    select.find('option').remove();
-    _.each(productTypes, function productTypesMap(type) {
-      select.append(jQuery('<option>', {
-        value: type.name,
-        text: type.label,
-      }));
-    });
-    select.val(selectedValue);
-  },
 });
 
 EmptyProductSelectionSettingsView = Marionette.View.extend({
@@ -487,7 +473,6 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
       'change .mailpoet_posts_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
       'change .mailpoet_posts_show_divider': _.partial(this.changeBoolField, 'showDivider'),
       'input .mailpoet_posts_show_amount': _.partial(this.changeField, 'amount'),
-      'change .mailpoet_posts_content_type': _.partial(this.changeField, 'contentType'),
       'change .mailpoet_posts_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
       'change .mailpoet_posts_title_alignment': _.partial(this.changeField, 'titleAlignment'),
       'change .mailpoet_posts_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),

views/newsletter/templates/blocks/products/settings.hbs

@@ -1,4 +1,4 @@
-<h3><%= __('Post selection') %></h3>
+<h3><%= __('Product selection') %></h3>
 <div class="mailpoet_settings_products_selection"></div>
 <div class="mailpoet_settings_products_display_options mailpoet_closed"></div>
 <div class="mailpoet_settings_products_controls">

views/newsletter/templates/blocks/products/settingsSelection.hbs

@@ -1,28 +1,24 @@
 <div class="mailpoet_settings_products_selection_controls">
     <div class="mailpoet_product_selection_filter_row">
-        <input type="text" name="" class="mailpoet_input mailpoet_input_full mailpoet_posts_search_term" value="{{model.search}}" placeholder="<%= __('Search...') %>" />
+        <input type="text" name="" class="mailpoet_input mailpoet_input_full mailpoet_products_search_term" value="{{model.search}}" placeholder="<%= __('Search...') %>" />
     </div>
-    <div class="mailpoet_product_selection_filter_row"><select name="mailpoet_posts_content_type" class="mailpoet_select mailpoet_select_half_width mailpoet_settings_posts_content_type">
-            <option value="post" {{#ifCond model.contentType '==' 'post'}}SELECTED{{/ifCond}}><%= __('Posts') %></option>
-            <option value="page" {{#ifCond model.contentType '==' 'page'}}SELECTED{{/ifCond}}><%= __('Pages') %></option>
-            <option value="mailpoet_page" {{#ifCond model.contentType '==' 'mailpoet_page'}}SELECTED{{/ifCond}}><%= __('MailPoet pages') %></option>
-        </select><select class="mailpoet_select mailpoet_select_half_width mailpoet_posts_post_status">
-            <option value="publish" {{#ifCond model.postStatus '==' 'publish'}}SELECTED{{/ifCond}}><%= __('Published') %></option>
-            <option value="future" {{#ifCond model.postStatus '==' 'future'}}SELECTED{{/ifCond}}><%= __('Scheduled') %></option>
-            <option value="draft" {{#ifCond model.postStatus '==' 'draft'}}SELECTED{{/ifCond}}><%= __('Draft') %></option>
-            <option value="pending" {{#ifCond model.postStatus '==' 'pending'}}SELECTED{{/ifCond}}><%= __('Pending Review') %></option>
-            <option value="private" {{#ifCond model.postStatus '==' 'private'}}SELECTED{{/ifCond}}><%= __('Private') %></option>
-        </select></div>
     <div class="mailpoet_product_selection_filter_row">
-        <select class="mailpoet_select mailpoet_posts_categories_and_tags" multiple="multiple">
+        <select class="mailpoet_select mailpoet_input_full mailpoet_products_post_status">
+            <option value="publish" {{#ifCond model.postStatus '==' 'publish'}}SELECTED{{/ifCond}}><%= __('Published') %></option>
+            <option value="pending" {{#ifCond model.postStatus '==' 'pending'}}SELECTED{{/ifCond}}><%= __('Pending Review') %></option>
+            <option value="draft" {{#ifCond model.postStatus '==' 'draft'}}SELECTED{{/ifCond}}><%= __('Draft') %></option>
+        </select>
+    </div>
+    <div class="mailpoet_product_selection_filter_row">
+        <select class="mailpoet_select mailpoet_products_categories_and_tags" multiple="multiple">
           {{#each model.terms}}
             <option value="{{ id }}" selected="selected">{{ text }}</option>
           {{/each}}
         </select>
     </div>
 </div>
-<div class="mailpoet_post_selection_container">
+<div class="mailpoet_product_selection_container">
 </div>
-<div class="mailpoet_post_selection_loading" style="visibility: hidden;">
+<div class="mailpoet_product_selection_loading" style="visibility: hidden;">
   <%= __('Loading posts...') %>
 </div>

views/newsletter/templates/blocks/products/settingsSelectionEmpty.hbs

@@ -1 +1 @@
-<%= __('No posts available') %>
+<%= __('No products available') %>