Adding Sheet Music Viewing to Virtual Product Download in Order Detail

[thetesm]

Hello,

I'm quite new to PrestaShop. I want to add a sheet music Viewing to Virtual Products in Order Detail.

This code for viewing a score works well

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.verovio.org/javascript/latest/verovio-toolkit.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js" type="text/javascript"></script>
<style type="text/css">
    .pn-viewer-section {
     display:flex;
     margin : 10px;
     border: 5px solid white;
     background : grey;
    }
    .pn-viewer-section div {
     flex:1;
     -webkit-flex:1;
     padding : 10px;
     color:white;
     border: 2px solid white;
    }
    .pn-viewer-section div * {
     flex:1;
     -webkit-flex:1;
    }
        #leftnavbtn {
        float:left;
        width:100px;
        height:100px;
        border:2px;
        /*background-color:red;*/
        /*background-color:transparent;*/
        }
        #rightnavbtn  {
        float:right;
        width:100px;
        height:100px;
        border:2px;
        /*background-color:red;*/
        /*background-color:transparent;*/
        }
</style></head>
<div id="main" class="main">
		<div id="toTop"><i class="crycon-back2top"></i> </div>	<div  id="forbottom" >
		
		<div style="clear:both;"> </div>

				<section id="container" class="two-columns-right">

			<div id="content" role="main">
				
			<div id="post-1139" class="post-1139 page type-page status-publish hentry">
									<h1 class="entry-title">Visualiseur</h1>
				
				<div class="entry-content">
					<p style="font-size:small">formats supportés : .xml (MusicXML), .mei (MEI), .pae (Plaine &#038; Easie)&#8230;<a href="../readers/afficher-gratuitement-une-partition-numerique-dans-le-browser/#Comment_lutiliser" target="_blank">Aide</a></p>
<p><script type="text/javascript">
//<![CDATA[
//for left and right nav btns
    var timer;
    var status = 1;
    
    var vrvToolkit = new verovio.toolkit();
    var page = 1;
    var zoom = 100;
    var deffont = "Leipzig";
    var pageHeight = 2970;
    var pageWidth = 2100;
    var spacingSystem = 2;
    var scoreData = "";
    var swipe_pages = false;
    // Pour accepter les différents formats, ne pas positionner inputFormat
 //   var format = 'mei';
    var ids = [];

    // reload cookies
    if ( $.cookie('zoom') ) zoom = $.cookie('zoom');
    console.log(zoom);

    function set_options( ) {
        // default = window width
        pageWidth = ($("#pn-viewer-control").width()) * 100 / zoom ;
        pageHeight = pageWidth * 31/23.5 ;
                      
        border = 50;
        options = {
        // Pour accepter les différents formats, ne pas positionner inputFormat
                //   inputFormat: format,
                    font:deffont,
                    pageHeight: pageHeight,
                    pageWidth: pageWidth,
                    border: border,
                    scale: zoom,
                    spacingSystem: spacingSystem,
                    adjustPageHeight: 1,
                    ignoreLayout: 1
                };
        //console.log( options );
        vrvToolkit.setOptions( options );
    }

    function upload_file() {
        var f = $("#mei_files").prop('files')[0];
        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {
                scoreData = e.target.result;
                load_data(scoreData);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsText(f);
    };

    function load_data(data) {
        set_options();
        try {
            vrvToolkit.loadData(data);

            if (vrvToolkit.getPageCount() == 0) {
                log = vrvToolkit.getLog();
                alert(log);
            }
            else {
                $("#total_text").html(vrvToolkit.getPageCount());
                page = 1;
                load_page();
            }
        }
        catch(err) {
            alert(err);
        }
    }
    
    function load_data_with_font(newfont) {
        deffont = newfont;
        load_data(scoreData);
    }
    
    function load_page() {
        $("#jump_text").html(page);

        svg = vrvToolkit.renderPage(page, {});
        //console.log(svg);
        $("#svg_output").html(svg);

        adjust_page_height();
        add_nav_buttons();
    };

    function next_page() {
        if (page >= vrvToolkit.getPageCount()) {
            return;
        }

        page = page + 1;
        load_page();
    };

    function prev_page() {
        if (page <= 1) {
            return;
        }

        page = page - 1;
        load_page();
    };

    function first_page() {
        page = 1;
        load_page();
    };

    function last_page() {
        page = vrvToolkit.getPageCount();
        load_page();
    };

    function apply_zoom() {
        console.log("apply zoom")
        $.cookie('zoom', zoom, { expires: 30 });
        set_options();
        var measure = 0;
        if (page != 1) {
            measure = $("#svg_output .measure").attr("id");
        }

        vrvToolkit.redoLayout();

        $("#total_text").html(vrvToolkit.getPageCount());
        page = 1;
        if (measure != 0) {
            page = vrvToolkit.getPageWithElement(measure);
        }
        load_page();
    }

    function zoom_out() {
        if (zoom < 20) {
            return;
        }

        zoom = zoom / 2;
        apply_zoom();
    }

    function zoom_in() {
        if (zoom > 80) {
            return;
        }

        zoom = zoom * 2;
        apply_zoom();
    }

//permet de saisir le % de zoom
    function do_zoom_enter(e) {
        key = e.keyCode || e.which;
        if (key == 13) {
            text = $("#zoom_text").val();
            zoom_val = Number(text.replace("%", ""));
            if (zoom_val < 10) zoom_val = 10;
            else if (zoom_val > 160) zoom_val = 160;
            zoom = zoom_val;
            apply_zoom();
        }
    }

    function adjust_page_height() {
        // adjust the height of the panel
        if ( $('#svg_panel svg') ) {
            zoomed_height = pageHeight * zoom / 100;
            if ( zoomed_height < $('#svg_panel svg').height() ) {
                zoomed_height = $('#svg_panel svg').height();
            }
            $('#svg_output').height( zoomed_height ); // slighly more for making sure we have no scroll bar
        }

        // also update the zoom control
        $("#zoom_text").val(zoom + "%");
    }

    function add_nav_buttons() {
         var leftbtn = $("<button>");
         var rightbtn = $("<button>");         

         leftbtn.attr("id","leftnavbtn");
         leftbtn.attr("onclick","singleClick('leftnavbtn')");
         leftbtn.attr("ondblclick","doubleClick('leftnavbtn')");
         leftbtn.text("<<");
         //leftbtn.height($('#svg_output').height());
         rightbtn.attr("id", "rightnavbtn");
         rightbtn.attr("onclick", "singleClick('rightnavbtn')");
         rightbtn.attr("ondblclick", "doubleClick('rightnavbtn')");
         rightbtn.text(">>");
         //rightbtn.height($('#svg_output').height());
         $("#svg_output").prepend(leftbtn, rightbtn);
    }
             
    //for leftnav and rightnav btns
    function singleClick(origin) {
        status = 1;
        timer = setTimeout(function() {
            if (status == 1) {
                if (origin == 'leftnavbtn') prev_page();
                else next_page();
            }
        }, 500);

    }

    function doubleClick(origin) {
        clearTimeout(timer);
        status = 0;
        if (origin == 'leftnavbtn') first_page();
        else last_page();
    }

//]]&gt;
</script></p>
<section id="pn-viewer-control" class="pn-viewer-section">
<div>
<input type="file" id="mei_files" accept=".pae,.mei,.xml" onchange="upload_file(); return false" name="file" style="margin: 4px 0px 8px 0px;"></input>
</div>
<div>
    <span><br />
        <span id="jump_text"></span>/<span id="total_text"></span><br />
    </span>
</div>
<div>
    <span class="pn-viewer-section div *"><br />
        <button onclick="zoom_out()"><br />
            <span>&#8211;</span><br />
        </button><br />
        <input type="text" placeholder="100%" id="zoom_text" onkeypress="do_zoom_enter(event)"/><br />
        <button onclick="zoom_in()"><br />
            <span>+</span><br />
        </button><br />
    </span>
</div>
<div>
    <span class="pn-viewer-section div *"><br />
        <select onchange="load_data_with_font($(this).val());"><option value="Bravura">Bravura</option><option value="Gootville">Gootville</option><option value="Leipzig" selected>Leipzig</option></select><br />
    </span>
</div>
</section>
<div style="clear: both;"></div>
<hr/>
<div id="svg_panel">
<div id="svg_output"/>
    </div>
</div>

 

The matter is it s a melting pot of javascript css html and php. In an only PHP website it would work well. But I've seen it must be inserted in a template order-detail-no-return.tpl if I'm not wrong in reading code...

How can I adapt this code?

Thanks for answering!