Update products display options - add price property

[MAILPOET-1843]

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

@@ -51,6 +51,7 @@ Module.ProductsBlockModel = base.BlockModel.extend({
       imageFullWidth: false, // true|false
       titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
       featuredImagePosition: 'centered', // 'centered'|'right'|'left'|'alternate'|'none'
+      pricePosition: 'hidden', // 'hidden'|'above'|'below'
       readMoreType: 'link', // 'link'|'button'
       readMoreText: 'Read more', // 'link'|'button'
       readMoreButton: {
@@ -94,7 +95,7 @@ Module.ProductsBlockModel = base.BlockModel.extend({
     this.on('loadMoreProducts', this._loadMoreProducts, this);
 
     this.listenTo(this.get('_selectedProducts'), 'add remove reset', refreshTransformedProducts);
-    this.on('change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:readMoreType change:readMoreText change:showDivider change:titlePosition', refreshTransformedProducts);
+    this.on('change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:pricePosition change:readMoreType change:readMoreText change:showDivider change:titlePosition', refreshTransformedProducts);
     this.listenTo(this.get('readMoreButton'), 'change', refreshTransformedProducts);
     this.listenTo(this.get('divider'), 'change', refreshTransformedProducts);
 
@@ -472,6 +473,7 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
       'change .mailpoet_products_title_alignment': _.partial(this.changeField, 'titleAlignment'),
       'change .mailpoet_products_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
       'change .mailpoet_products_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
+      'change .mailpoet_products_price_position': _.partial(this.changeField, 'pricePosition'),
       'input .mailpoet_posts_read_more_text': _.partial(this.changeField, 'readMoreText'),
       'change .mailpoet_posts_sort_by': _.partial(this.changeField, 'sortBy'),
       'change .mailpoet_products_title_position': _.partial(this.changeField, 'titlePosition'),
@@ -527,7 +529,6 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
     this.changeField('displayType', event);
   },
   changeTitleFormat: function changeTitleFormat(event) {
-    var value = jQuery(event.target).val();
     this.changeField('titleFormat', event);
   },
 });

lib/Newsletter/Editor/PostTransformer.php

@@ -1,6 +1,7 @@
 <?php
 namespace MailPoet\Newsletter\Editor;
 
+use MailPoet\WooCommerce\Helper as WooCommerceHelper;
 use MailPoet\WP\Functions as WPFunctions;
 use MailPoet\Config\Env;
 
@@ -13,11 +14,15 @@ class PostTransformer {
   private $image_position;
   private $wp;
 
+  /** @var WooCommerceHelper */
+  private $woocommerce_helper;
+
   function __construct($args) {
     $this->args = $args;
     $this->with_layout = isset($args['withLayout']) ? (bool)filter_var($args['withLayout'], FILTER_VALIDATE_BOOLEAN) : false;
     $this->image_position = 'left';
     $this->wp = new WPFunctions();
+    $this->woocommerce_helper = new WooCommerceHelper();
   }
 
   function getDivider() {
@@ -148,6 +153,20 @@ class PostTransformer {
     $structure_transformer = new StructureTransformer();
     $content = $structure_transformer->transform($content, $this->args['imageFullWidth'] === true);
 
+    if (isset($this->args['pricePosition']) && $this->args['pricePosition'] !== 'hidden') {
+      $price = $this->getPrice($post);
+      $blocks_count = count($content);
+      if ($blocks_count > 0 && $content[$blocks_count - 1]['type'] === 'text') {
+        if ($this->args['pricePosition'] === 'below') {
+          $content[$blocks_count - 1]['text'] .= $price['text'];
+        } else {
+          $content[$blocks_count - 1]['text'] = $price['text'] . $content[$blocks_count - 1]['text'];
+        }
+      } else {
+        $content[] = $price;
+      }
+    }
+
     $read_more_btn = $this->getReadMoreButton($post);
     $blocks_count = count($content);
     if ($read_more_btn['type'] === 'text' && $blocks_count > 0 && $content[$blocks_count - 1]['type'] === 'text') {
@@ -259,6 +278,23 @@ class PostTransformer {
     );
   }
 
+  private function getPrice($post) {
+    $product = null;
+    if ($this->woocommerce_helper->isWooCommerceActive()) {
+      $product = wc_get_product($post->ID);
+    }
+    if ($product) {
+      $price = '<h2>' . $product->get_price_html() . '</h2>';
+    } else {
+      $price = '';
+    }
+
+    return array(
+      'type' => 'text',
+      'text' => $price,
+    );
+  }
+
   /**
    * Replaces double quote character with a unicode
    * alternative to avoid problems when inlining CSS.

views/newsletter/editor.html

@@ -1343,6 +1343,7 @@
           titleIsLink: false, // false|true
           imageFullWidth: false, // true|false
           featuredImagePosition: 'alternate', // 'centered'|'left'|'right'|'alternate'|'none',
+          pricePosition: 'hidden', // 'hidden'|'above'|'below'
           readMoreType: 'link', // 'link'|'button'
           readMoreText: '<%= __('Read more') | escape('js') %>',
           readMoreButton: {

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

@@ -154,6 +154,30 @@
 
     <hr class="mailpoet_separator" />
 
+    <div class="mailpoet_form_field">
+        <div class="mailpoet_form_field_title"><%= __('Price') %></div>
+        <div class="mailpoet_form_field_radio_option">
+            <label>
+                <input type="radio" name="mailpoet_products_price_position" class="mailpoet_products_price_position" value="hidden" {{#ifCond model.pricePosition '==' 'hidden'}}CHECKED{{/ifCond}} />
+                <%= __('No') %>
+            </label>
+        </div>
+        <div class="mailpoet_form_field_radio_option">
+            <label>
+                <input type="radio" name="mailpoet_products_price_position" class="mailpoet_products_price_position" value="above" {{#ifCond model.pricePosition '==' 'above'}}CHECKED{{/ifCond}} />
+                <%= __('Above text') %>
+            </label>
+        </div>
+        <div class="mailpoet_form_field_radio_option">
+            <label>
+                <input type="radio" name="mailpoet_products_price_position" class="mailpoet_products_price_position" value="below" {{#ifCond model.pricePosition '==' 'below'}}CHECKED{{/ifCond}} />
+                <%= __('Below text') %>
+            </label>
+        </div>
+    </div>
+
+    <hr class="mailpoet_separator" />
+
     <div class="mailpoet_form_field">
         <div class="mailpoet_form_field_title mailpoet_form_field_title_small"><%= __('"Read more" text') %></div>
         <div class="mailpoet_form_field_radio_option">