Jump to content

Yotpo Star Rating Product List


Recommended Posts

Hi!

 

Has anyone been able to install correctly yotpo star rating in product list?

 

I found that they disappear when I use the block layerd navigation or when I change of page

 

Has anyone the same problem??

 

Thanks

Link to comment
Share on other sites

Hi!

 

I did, i receive this answer:

At this time star rating on ajax category pages is not supported.
We are working on a solution and hopefully a general solution will be found.
Feel free to contact us.

 

 

I don't see anyone in the forum talking about this.. seems like I`m the only one having this problem..

Link to comment
Share on other sites

  • 2 months later...

Hi!

 

I did, i receive this answer:

At this time star rating on ajax category pages is not supported.

We are working on a solution and hopefully a general solution will be found.

Feel free to contact us.

 

 

 

I don't see anyone in the forum talking about this.. seems like I`m the only one having this problem..

 

I've just added yotpo reviews to my site today and came across the same problem as you and couldn't find an answer.

I went digging and for me it was easy to fix:

 

Firstly i added an extra div around the code from yotpo, this is needed for the next step.

<div class="review-summary">
    <div class="yotpo bottomLine" 
    data-appkey="{$yotpoAppkey}" 
    data-domain="{$yotpoDomain}" 
    data-product-id="{$product.id_product}"
    data-product-models="" 
    data-name="{$product.name|escape:'htmlall':'UTF-8'}" 
    data-url="{$product.link|escape:'htmlall':'UTF-8'}" 
    data-image-url="{$link->getImageLink($product.link_rewrite, $product.id_image, '')}" 
    data-description="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}"
    data-lang="{$yotpoLanguage|escape:'htmlall':'UTF-8'}" 
    data-bread-crumbs=""> 
    </div>
</div>

Next I edited the display(view) function, for me this was in the product-list.tpl file but it looks like it's been moved into a global.js file in the latest version. This is where the products in the product list are reformatted when the view is changed from gird to list or vice versa. I added to the function so it now carries over the yotpo rating when it reformats the list which you can see commented in the code below. You might need to alter its location in the code so it appears in the right place on the page.

 

This from the latest version of prestashop, which is somewhat different from my 1.6.0.5 (or possibly 1.6.0.4) version. So if your following this you might want to only copy and paste the commented section as I assume it will probably cause some issues if you straight copy the whole function.

function display(view) {
    if (view == 'list') {
        $('ul.product_list').removeClass('grid').addClass('list row');
        $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
        $('.product_list > li').each(function (index, element) {
            html = '';
            html = '<div class="product-container"><div class="row">';
            html += '<div class="left-block col-xs-4 col-xs-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="center-block col-xs-4 col-xs-7 col-md-4">';
            html += '<div class="product-flags">' + $(element).find('.product-flags').html() + '</div>';
            html += '<h5 itemprop="name">' + $(element).find('h5').html() + '</h5>';
            var rating = $(element).find('.comments_note').html(); // check : rating
            if (rating != null) {
                html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">' + rating + '</div>';
            }

            /* YOTPO review summary */
            var reviews = $(element).find('.review-summary').html();
            if (reviews != null) {
                html += '<div class="review-summary">' + reviews + '</div>';
            }
            /* end YOTPO review summary*/

            html += '<p class="product-desc">' + $(element).find('.product-desc').html() + '</p>';
            var colorList = $(element).find('.color-list-container').html();
            if (colorList != null) {
                html += '<div class="color-list-container">' + colorList + '</div>';
            }
            var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
            if (availability != null) {
                html += '<span class="availability">' + availability + '</span>';
            }
            html += '</div>';
            html += '<div class="right-block col-xs-4 col-xs-12 col-md-4"><div class="right-block-content row">';
            var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
            if (price != null) {
                html += '<div class="content_price col-xs-5 col-md-12">' + price + '</div>';
            }
            html += '<div class="button-container col-xs-7 col-md-12">' + $(element).find('.button-container').html() + '</div>';
            html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
            html += '</div>';
            html += '</div></div>';
            $(element).html(html);
        });
        $('.display').find('li#list').addClass('selected');
        $('.display').find('li#grid').removeAttr('class');
        $.totalStorage('display', 'list');
    } else {
        $('ul.product_list').removeClass('list').addClass('grid row');
        $('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');
        $('.product_list > li').each(function (index, element) {
            html = '';
            html += '<div class="product-container">';
            html += '<div class="left-block">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="right-block">';
            html += '<div class="product-flags">' + $(element).find('.product-flags').html() + '</div>';
            html += '<h5 itemprop="name">' + $(element).find('h5').html() + '</h5>';
            var rating = $(element).find('.comments_note').html(); // check : rating
            if (rating != null) {
                html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">' + rating + '</div>';
            }

            /* YOTPO review summary */
            var reviews = $(element).find('.review-summary').html();
            if (reviews != null) {
                html += '<div class="review-summary">' + reviews + '</div>';
            }
            /* end YOTPO review summary*/

            html += '<p itemprop="description" class="product-desc">' + $(element).find('.product-desc').html() + '</p>';
            var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
            if (price != null) {
                html += '<div class="content_price">' + price + '</div>';
            }
            html += '<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="button-container">' + $(element).find('.button-container').html() + '</div>';
            var colorList = $(element).find('.color-list-container').html();
            if (colorList != null) {
                html += '<div class="color-list-container">' + colorList + '</div>';
            }
            var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
            if (availability != null) {
                html += '<span class="availability">' + availability + '</span>';
            }
            html += '</div>';
            html += '<div class="functional-buttons clearfix">' + $(element).find('.functional-buttons').html() + '</div>';
            html += '</div>';
            $(element).html(html);
        });
        $('.display').find('li#grid').addClass('selected');
        $('.display').find('li#list').removeAttr('class');
        $.totalStorage('display', 'grid');
    }
}

Anyway that's how I fixed the issue I was having, hopefully that helps someone.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • 6 months later...

I've just added yotpo reviews to my site today and came across the same problem as you and couldn't find an answer.

I went digging and for me it was easy to fix:

...

Anyway that's how I fixed the issue I was having, hopefully that helps someone.

 

Thank you very much for posting your fix. People like you are angels!

 

It worked great on 1.6 with a custom theme.

Link to comment
Share on other sites

×
×
  • Create New...