Using in full html pages |

Using in full html pages

Example of apps generating full html pages:

Please follow the steps below to show widgets inside a full html page. If you need further support, please contact with the following information: + Which product and page you want to change + Staff account with theme + pages access + the app generating the page

Steps to add widget to full html pages

1) add a placeholder div where you want the badge and widget, each with a unique ID.

For example: + badge: <div id='judgeme_badge_palceholder'></div> + widget: <div id='judgeme_widget_palceholder'></div>

2) Find the liquid file generating this page. Most likely this one will containt a buildify slug, such as templates/page.buildify-template.liquid

3) Assign the correct product you want to show the badge/widget for on that page with {% assign product= allproducts["producthandle"] %}

4) and add the widget and badge inside a div with display none.

<div style="display:none">

<div id='judgeme_real_badge' class='jdgm-widget jdgm-preview-badge' data-id='{{ }}'>{{ product.metafields.judgeme.badge }}</div>
<div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-product-title='{{ product.title | escape }}' data-id='{{ }}'>{{ product.metafields.judgeme.widget }}</div>

5) write a JS script to move the badge widget to the placeholder place. If it uses the IDs as mentioned above, this script should do the trick.


document.addEventListener('DOMContentLoaded', function(){
$('#judgeme_badge_palceholder ').append($('#judgeme_real_badge '));
$('#judgeme_widget_palceholder ').append($('#judgeme_product_reviews '));
}, false);

6) Depending on the amount of different products you want, you may need to create different liquid page templates.

Note: These steps are just guidance and most likely they will need to be adapted from case to case.