Add Star Ratings feature, minor bugfixes

* Add ability to show Star Ratings on View Product Page (PDP)
* Add correct/absolute View Link to Ratings widget
* Add localized Product Name to Ratings Widget
* Minor formatting and code quality improvements

README.md

@@ -29,9 +29,9 @@ Installation and Usage
 
 Roadmap / Remaining Tasks
 -------------------
-- [ ] Include correct price with Reviews Widget (eg RRP), may require configuration option?
+- [ ] Include correct price with Reviews Widget (eg RRP)
 - [ ] Implement Batch Job to push Completed/Shipped Orders into Yotpo (required for [Yotpo Automatic Review Requests](https://support.yotpo.com/en/article/map-mail-after-purchase))  
-- [ ] Implement [Yotpo Star Ratings](https://support.yotpo.com/en/article/generic-other-platforms-installing-the-yotpo-star-rating) on Product Listing Pages
+- [x] Implement [Yotpo Star Ratings](https://support.yotpo.com/en/article/generic-other-platforms-installing-the-yotpo-star-rating) on Product Listing Pages (Completed)
 - [ ] Add support for [Yotpo Reviews Carousel](https://support.yotpo.com/en/article/reviews-carousel)
 
 Licence

src/DependencyInjection/Configuration.php

@@ -17,6 +17,7 @@
 class Configuration implements ConfigurationInterface
 {
     const REVIEW_WIDGET_ENABLED = 'review_widget_enabled'; // Enable/disable JS Reviews Widget
+    const PDP_RATINGS_WIDGET_ENABLED = 'pdp_ratings_widget_enabled'; // Enabled/disable JS Star Ratings Widget on PDP
     const CONVERSION_TRACKING_ENABLED = 'conversion_tracking_enabled'; // Enable/disable JS Conversion Tracking
     const JS_APP_KEY = 'js_app_key'; // Public app key for JS widgets
 
@@ -34,6 +35,7 @@ public function getConfigTreeBuilder()
             $rootNode,
             [
                 self::REVIEW_WIDGET_ENABLED              => ['type' => 'boolean', 'value' => false],
+                self::PDP_RATINGS_WIDGET_ENABLED         => ['type' => 'boolean', 'value' => false],
                 self::CONVERSION_TRACKING_ENABLED        => ['type' => 'boolean', 'value' => false],
                 self::JS_APP_KEY                         => ['type' => 'scalar', 'value' => null],
             ]

src/Layout/DataProvider/YotpoDataProvider.php

@@ -33,6 +33,14 @@ public function isReviewWidgetEnabled()
         return (bool)$this->getConfigValue(Configuration::REVIEW_WIDGET_ENABLED, false);
     }
 
+    /**
+     * @return boolean
+     */
+    public function isProductPageRatingsWidgetEnabled()
+    {
+        return (bool)$this->getConfigValue(Configuration::PDP_RATINGS_WIDGET_ENABLED, false);
+    }
+
     /**
      * @return boolean
      */

src/Resources/config/oro/system_configuration.yml

@@ -14,6 +14,12 @@ system_configuration:
             priority: 30
             options:
                 label: 'hack_oro.yotpo.review_widget_enabled.label'
+        hack_oro_yotpo.pdp_ratings_widget_enabled:
+            data_type: boolean
+            type: Oro\Bundle\ConfigBundle\Form\Type\ConfigCheckbox
+            priority: 30
+            options:
+                label: 'hack_oro.yotpo.pdp_ratings_widget_enabled.label'
         hack_oro_yotpo.conversion_tracking_enabled:
             data_type: boolean
             type: Oro\Bundle\ConfigBundle\Form\Type\ConfigCheckbox
@@ -37,6 +43,7 @@ system_configuration:
                                     yotpo:
                                         children:
                                             - hack_oro_yotpo.review_widget_enabled
+                                            - hack_oro_yotpo.pdp_ratings_widget_enabled
                                             - hack_oro_yotpo.conversion_tracking_enabled
                                             - hack_oro_yotpo.js_app_key
 
@@ -50,5 +57,6 @@ system_configuration:
                                     yotpo:
                                         children:
                                             - hack_oro_yotpo.review_widget_enabled
+                                            - hack_oro_yotpo.pdp_ratings_widget_enabled
                                             - hack_oro_yotpo.conversion_tracking_enabled
                                             - hack_oro_yotpo.js_app_key

src/Resources/translations/messages.en.yml

@@ -6,10 +6,14 @@ hack_oro:
             label: Yotpo Configuration
         review_widget_enabled:
             label: Enable Reviews Widget
+        pdp_ratings_widget_enabled:
+            label: Enable Product Page Star Ratings Widget
         conversion_tracking_enabled:
             label: Enable Conversion Tracking
         js_app_key:
             label: Javascript App Key
             help: >
                 Obtain the App Key Replace from the Yotpo Admin
                 or the API user creation response.
+        frontend:
+            label: Reviews

src/Resources/views/layouts/default/oro_checkout_frontend_checkout/page/conversion_tracking.html.twig

@@ -4,16 +4,16 @@
     {% set order_currency = order.currency %}
     <script type="text/javascript">
         (function e(){var e=document.createElement("script");
-        e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/{{app_key}}/widget.js";
+        e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/{{ app_key }}/widget.js";
         var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
     </script>
     <script>yotpoTrackConversionData = {
-        orderId: "{{order_id}}",
-        orderAmount: "{{order_amount}}",
-        orderCurrency: "{{order_currency}}"
+        orderId: "{{ order_id }}",
+        orderAmount: "{{ order_amount }}",
+        orderCurrency: "{{ order_currency }}"
     }
     </script>
     <noscript>
-        <img src="//api.yotpo.com/conversion_tracking.gif?app_key={{app_key}}&order_id={{order_id}}&order_amount={{order_amount}}&order_currency={{order_currency}}" width="1" height="1">
+        <img src="//api.yotpo.com/conversion_tracking.gif?app_key={{ app_key }}&order_id={{ order_id }}&order_amount={{ order_amount }}&order_currency={{ order_currency }}" width="1" height="1">
     </noscript>
 {% endblock %}

src/Resources/views/layouts/default/oro_product_frontend_product_view/layout.html.twig

@@ -1,5 +1,7 @@
 {% block _yotpo_reviews_widget %}
-    <h2>Yotpo Reviews</h2>
+    {% set view_link = website_secure_path('oro_product_frontend_product_view', {id: product.id}) %}
+    <h2>{{ 'hack_oro.yotpo.frontend.label'|trans }}</h2>
+
     {% import 'OroProductBundle::image_macros.html.twig' as Image %}
     <script type="text/javascript">
         (function e(){var e=document.createElement("script");
@@ -12,10 +14,17 @@
 
     <div class="yotpo yotpo-main-widget"
          data-product-id="{{ product.sku }}"
-         data-name="{{ product.denormalizedDefaultName }}"
-         data-url="{{ app.request.uri }}"
+         data-name="{{ product.names|localized_value|oro_html_strip_tags }}"
+         data-url="{{ view_link }}"
          data-image-url="{{ productImage ? Image.url(productImage.image, 'product_original') : ""}}"
         style="padding: 20px"
     >
     </div>
+{% endblock %}
+
+{% block _yotpo_ratings_widget %}
+    <div class="yotpo bottomLine"
+         data-product-id="{{ product.sku }}"
+         data-url="{{ website_secure_path('oro_product_frontend_product_view', {id: product.id}) }}">
+    </div>
 {% endblock %}

src/Resources/views/layouts/default/oro_product_frontend_product_view/layout.yml

@@ -10,4 +10,13 @@ layout:
             vars:
                 product: '=data["product"]'
                 visible: '=data["hack_oro_yotpo"].isReviewWidgetEnabled()'
-                app_key: '=data["hack_oro_yotpo"].getAppKey()'
+                app_key: '=data["hack_oro_yotpo"].getAppKey()'
+    - '@add':
+          id: yotpo_ratings
+          parentId: product_view_primary_container
+          siblingId: product_view_attribute_group_general_attribute_text_sku
+          blockType: container
+          options:
+              vars:
+                  product: '=data["product"]'
+                  visible: '=data["hack_oro_yotpo"].isProductPageRatingsWidgetEnabled()'