Yotpo Star Rating Product List

jlopez82 · April 1, 2014

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

Dh42 · April 2, 2014

I haven't had the issue. You should contact their tech support, those guys have pretty good tech support from the few times I have had to use them.

Yotpo · April 3, 2014

Hey jlopez,

Are you still having this issue?

If so, have you checked out our instructions for adding Star Rating to the product list? (http://support.yotpo.com/entries/23038366-Installing-Star-Rating-on-Product-Category-Pages-in-Prestashop)

Also, I second Dh's suggestion that you contact our awesome support team!

jlopez82 · April 4, 2014

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..

Yotpo · April 6, 2014

Hello again,

I just confirmed with the Support team, we do not support Star Rating for ajax pages.

Sorry about that!

MrPrister · June 12, 2014

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.

Yotpo · June 12, 2014

Thanks, MrPrister!

meditation · July 31, 2014

Hi MrPrister, thanks for your solution, but it do not work in ps1.5, do you have fix for ps1.5?

best regards

TempMesh · January 31, 2015

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.

Sign In

Yotpo Star Rating Product List

Recommended Posts

jlopez82

Link to comment

Share on other sites

Dh42

Link to comment

Share on other sites

Yotpo

Link to comment

Share on other sites

jlopez82

Link to comment

Share on other sites

Yotpo

Link to comment

Share on other sites

MrPrister

Link to comment

Share on other sites

Yotpo

Link to comment

Share on other sites

meditation

Link to comment

Share on other sites

TempMesh

Link to comment

Share on other sites

Browse

Activity

Go back to prestashop.com