custom/apps/REVIEWSio/Resources/views/storefront/page/product-detail/review/review.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/page/product-detail/review/review.html.twig' %}
  3. {% block page_product_detail_review_tab_pane %}
  5. {% if config('REVIEWSio.config.showProductWidget') %}
  6.   <div id="ReviewsWidget"></div>
  7.   <script src="https://widget.reviews.co.uk/polaris/build.js"></script>
  8.   <script>
  9.   var loadReviewsioProductWidget = function() {
  11.       new ReviewsWidget('#ReviewsWidget', {
  12.       //Your REVIEWS.io account ID and widget type:
  13.       store: reviewsioUrlKey,
  14.       widget: 'polaris',
  15.       enable_sentiment_analysis: {{ config('REVIEWSio.config.sentimentAnalysis') ? 'true' : 'false' }},
  16.       
  17.       //Content settings (store_review,product_review,questions). Choose what to display in this widget:
  18.       options: {
  19.           types: 'product_review,questions',
  20.           lang: reviewsioCurrentLang,
  21.           //Possible layout options: bordered, large and reverse.
  22.           layout: '',
  23.           //How many reviews & questions to show per page?
  24.           per_page: 15,
  25.           //Product specific settings. Provide product SKU for which reviews should be displayed:
  26.           product_review:{
  27.               //Display product reviews - include multiple product SKUs seperated by Semi-Colons (Main Identifier in your product catalog )
  28.               sku: '{{page.product.productNumber}}',
  29.               hide_if_no_results: false,
  30.               structured_data: {
  31.                 category: "{{page.product.seoCategory.breadcrumb | join(' > ')}}",
  32.                 gtin: "{{page.product.ean}}",
  33.                 url: window.location.href,
  34.                 image: "{{page.product.cover.media.url}}",
  35.                 description: {{page.product.translated.metaDescription | striptags | json_encode | raw}},
  36.                 offers: [{
  37.                   type: "Offer",
  38.                   price: "{{page.product.calculatedPrice.totalPrice}}",
  39.                   priceCurrency: "{{context.currency.isoCode}}",
  40.                   url: window.location.href,
  41.                   availability: "http://schema.org/{% if page.product.available == true %}InStock{% else %}OutOfStock{% endif %}",
  42.                   priceValidUntil: new Date(Date.now() + (30 * 24 * 60 * 60 * 1000)).toISOString().split('T')[0],
  43.                 }],
  44.                 brand: {
  45.                   type: "Brand",
  46.                   name: "{{page.product.manufacturer.name}}",
  47.                 }
  48.             },
  49.           },
  50.           //Questions settings:
  51.           questions:{
  52.               hide_if_no_results: false,
  53.               enable_ask_question: true,
  54.               show_dates: true,
  55.               grouping: '{% for keys in page.product.cheapestPriceContainer.value|keys %}{{keys}};{% endfor %}',
  56.           },
  58.           //Header settings:
  59.           header:{
  60.               enable_summary: true, //Show overall rating & review count
  61.               enable_ratings: true,
  62.               enable_attributes: true,
  63.               enable_header_logo: false,
  64.               enable_image_gallery: true, //Show photo & video gallery
  65.               enable_percent_recommended: false, //Show what percentage of reviewers recommend it
  66.               enable_write_review: {% if config('REVIEWSio.config.disableWriteReview') is not empty %}false{% else %}true{% endif %}, //Show "Write Review" button
  67.               enable_ask_question: true, //Show "Ask Question" button
  68.               enable_sub_header: true, //Show subheader
  69.           },
  71.           //Filtering settings:
  72.           filtering:{
  73.               enable: true, //Show filtering options
  74.               enable_text_search: true, //Show search field
  75.               enable_sorting: true, //Show sorting options (most recent, most popular)
  76.               enable_overall_rating_filter: true, //Show overall rating breakdown filter
  77.               enable_ratings_filters: true, //Show product attributes filter
  78.               enable_attributes_filters: true, //Show author attributes filter
  79.           },
  81.           //Review settings:
  82.           reviews:{
  83.               enable_avatar: true, //Show author avatar
  84.               enable_reviewer_name:  true, //Show author name
  85.               enable_reviewer_address:  true, //Show author location
  86.               reviewer_address_format: 'city, country', //Author location display format
  87.               enable_verified_badge: true, //Show "Verified Customer" badge
  88.               enable_reviewer_recommends: true, //Show "I recommend it" badge
  89.               enable_attributes: true, //Show author attributes
  90.               enable_product_name: true, //Show display product name
  91.               enable_review_title: undefined, //Show review title
  92.               enable_replies: {% if config('REVIEWSio.config.enableReplies') is not empty %}true{% else %}false{% endif %}, //Show review replies
  93.               enable_images: true, //Show display review photos
  94.               enable_ratings: true, //Show product attributes (additional ratings)
  95.               enable_share: true, //Show share buttons
  96.               enable_helpful_vote: true, //Show "was this helpful?" section
  97.               enable_helpful_display: true, //Show how many times times review upvoted
  98.               enable_report: true, //Show report button
  99.               enable_date: true, //Show when review was published
  100.           },
  101.       },
  102.       //Style settings:
  103.       {% if config('REVIEWSio.config.productReviewsWidgetStyles') is not empty %}
  104.         {{ config('REVIEWSio.config.productReviewsWidgetStyles') | raw }}
  105.       {% else %}
  106.         styles: {
  107.             //Base font size is a reference size for all text elements. When base value gets changed, all TextHeading and TexBody elements get proportionally adjusted.
  108.             '--base-font-size': '16px',
  110.             //Button styles (shared between buttons):
  111.             '--common-button-font-family': 'inherit',
  112.             '--common-button-font-size':'16px',
  113.             '--common-button-font-weight':'500',
  114.             '--common-button-letter-spacing':'0',
  115.             '--common-button-text-transform':'none',
  116.             '--common-button-vertical-padding':'10px',
  117.             '--common-button-horizontal-padding':'20px',
  118.             '--common-button-border-width':'2px',
  119.             '--common-button-border-radius':'0px',
  121.             //Primary button styles:
  122.             '--primary-button-bg-color': '#0E1311',
  123.             '--primary-button-border-color': '#0E1311',
  124.             '--primary-button-text-color': '#ffffff',
  126.             //Secondary button styles:
  127.             '--secondary-button-bg-color': 'transparent',
  128.             '--secondary-button-border-color': '#0E1311',
  129.             '--secondary-button-text-color': '#0E1311',
  131.             //Star styles:
  132.             '--common-star-color': '{% if config('REVIEWSio.config.starColour') is empty %}#f47e27{% else %}{{config('REVIEWSio.config.starColour')}}{% endif %}',
  133.             '--common-star-disabled-color': 'rgba(0,0,0,0.25)',
  134.             '--medium-star-size': '22px',
  135.             '--small-star-size': '19px',
  137.             //Heading styles:
  138.             '--heading-text-color': '#0E1311',
  139.             '--heading-text-font-weight': '600',
  140.             '--heading-text-font-family': 'inherit',
  141.             '--heading-text-line-height': '1.4',
  142.             '--heading-text-letter-spacing': '0',
  143.             '--heading-text-transform': 'none',
  145.             //Body text styles:
  146.             '--body-text-color': '#0E1311',
  147.             '--body-text-font-weight': '400',
  148.             '--body-text-font-family': 'inherit',
  149.             '--body-text-line-height': '1.4',
  150.             '--body-text-letter-spacing': '0',
  151.             '--body-text-transform': 'none',
  153.             //Input field styles:
  154.             '--inputfield-text-font-family': 'inherit',
  155.             '--input-text-font-size': '14px',
  156.             '--inputfield-text-font-weight': '400',
  157.             '--inputfield-text-color': '#0E1311',
  158.             '--inputfield-border-color': 'rgba(0,0,0,0.2)',
  159.             '--inputfield-background-color': 'transparent',
  160.             '--inputfield-border-width': '1px',
  161.             '--inputfield-border-radius': '0px',
  163.             '--common-border-color': 'rgba(0,0,0,0.15)',
  164.             '--common-border-width': '1px',
  165.             '--common-sidebar-width': '190px',
  167.             //Slider indicator (for attributes) styles:
  168.             '--slider-indicator-bg-color': 'rgba(0,0,0,0.1)',
  169.             '--slider-indicator-button-color': '#0E1311',
  170.             '--slider-indicator-width': '190px',
  172.             //Badge styles:
  173.             '--badge-icon-color': '#0E1311',
  174.             '--badge-icon-font-size': 'inherit',
  175.             '--badge-text-color': '#0E1311',
  176.             '--badge-text-font-size': 'inherit',
  177.             '--badge-text-letter-spacing': 'inherit',
  178.             '--badge-text-transform': 'inherit',
  180.             //Author styles:
  181.             '--author-font-size': 'inherit',
  182.             '--author-text-transform': 'none',
  184.             //Author avatar styles:
  185.             '--avatar-thumbnail-size': '60px',
  186.             '--avatar-thumbnail-border-radius': '100px',
  187.             '--avatar-thumbnail-text-color': '#0E1311',
  188.             '--avatar-thumbnail-bg-color': 'rgba(0,0,0,0.1)',
  190.             //Product photo or review photo styles:
  191.             '--photo-video-thumbnail-size': '80px',
  192.             '--photo-video-thumbnail-border-radius': '0px',
  194.             //Media (photo & video) slider styles:
  195.             '--mediaslider-scroll-button-icon-color': '#0E1311',
  196.             '--mediaslider-scroll-button-bg-color': 'rgba(255, 255, 255, 0.85)',
  197.             '--mediaslider-overlay-text-color': '#ffffff',
  198.             '--mediaslider-overlay-bg-color': 'rgba(0, 0, 0, 0.8))',
  199.             '--mediaslider-item-size': '110px',
  201.             //Pagination & tabs styles (normal):
  202.             '--pagination-tab-text-color': '#0E1311',
  203.             '--pagination-tab-text-transform': 'none',
  204.             '--pagination-tab-text-letter-spacing': '0',
  205.             '--pagination-tab-text-font-size': '16px',
  206.             '--pagination-tab-text-font-weight': '600',
  208.             //Pagination & tabs styles (active):
  209.             '--pagination-tab-active-text-color': '#0E1311',
  210.             '--pagination-tab-active-text-font-weight': '600',
  211.             '--pagination-tab-active-border-color': '#0E1311',
  212.             '--pagination-tab-border-width': '3px',
  213.         },
  214.       {% endif %}
  215.       });
  217.       snippet = document.querySelector(".ruk_rating_snippet");
  218.       polaris = document.querySelector("#ReviewsWidget");
  219.       reviewTab = document.querySelector("#review-tab");
  220.       if(polaris && snippet) {
  221.         snippet.onclick = function(event) {
  222.           if(reviewTab) {
  223.             reviewTab.click();
  224.           }
  225.           setTimeout(function() {
  226.             polaris.scrollIntoView({ block: 'start',  behavior: 'smooth' });
  227.           }, 500);
  228.         }
  229.       }
  230.   }
  231.   </script>
  233. {% else %}
  234.   {{ parent() }}
  235. {% endif %}
  237. {% endblock %}