Showing results for 
Search instead for 
Did you mean: 

Turn.js in a CMS block


Turn.js in a CMS block

Hi there! 


I would like to have a section on my product page where customers can view my products using Turn.js (if there are any other similar plugins let me know!). I currently have an empty block setup. 


Is there a way to implement turn.js into that block? The end goal is to upload a couple of images for each one of my products and have it displayed there. 

If you need more information feel free to ask!


Re: Turn.js in a CMS block

Hello @tim_muangkeo


you need to add that js using require-config.js method


more info about this :-


If it will help you then mark as solution.


Re: Turn.js in a CMS block

You can directly add require js in static block by below way,

Edit static block,

Add below content in your block,

<script type="text/javascript" xml="space">// <![CDATA[
require(["jquery", "jquery/ui"], function ($) { $(window).load( function(){ $(document).find('.footer.links').addClass('aaaaaaaaaaaa'); }); });
// ]]></script>
If Issue Solved, Click Kudos/Accept As solutions.

Re: Turn.js in a CMS block

I'd recommend separating javascript and HTML, following Magento 2 core modules and utilizing uiComponent for passing options from the backend.


Use the following code in the .phtml template:



<script type="text/x-magento-init">
    "*": {
        "Your_Module/js/your_js_file": <?= $block->getOptions();?>



Implement the getOptions method in your block class (that's a way to pass options from backend to a frontend script):


    public function getOptions()
        return json_encode([
            'targetElementClass' => '.element-to-turn-overriding-default',
            'someOptionValue' => false


And create an appropriate js file in Your/Module/view/frontend/web/js/your_js_file.js with i.e. the following content:


], function($, Component) {
    'use strict';

    return Component.extend({
       defaults: {
            targetElementClass: '.element-to-turn',
            someOptionValue: true
        initialize: function () {
            $(this.targetElementClass).turn({some_option: this.someOptionValue});

The actual turn.js script should be located in Your/Module/view/frontend/web/js/turn.js


Disclaimer: this code is for demonstrational purposes and it was not tested.


Please take a look at core modules for more examples. There are plenty.

Re: Turn.js in a CMS block

Hello @sivashchenko!


My phtml file has the following code: 

<div id="flipbook">
  <div class="hard"> Turn.js </div> 
  <div class="hard"></div>
  <div> Page 1 </div>
  <div> Page 2 </div>
  <div> Page 3 </div>
  <div> Page 4 </div>
  <div class="hard"></div>
  <div class="hard"></div>

Inside my getOption function

return json_encdoe([
=> '.flipbook',
'width' => 500,
'height' => 500

then in my js file, when I return Component:

return Component.extend({       
: {
: '.flipbook',
width: 500,
height: 500
: function () { this._super();
$(this.flipbook).turn({width: this.width, height: this.height}); };

I don't get any errors but it is not working.

Here's my structure:

 Screen Shot 2018-04-18 at 12.24.44 PM.png