Pechenki sortable design and baner OC3

Pechenki_sortable_design.ocmod.xml

<?xml version="1.0" encoding="utf-8"?>
<modification>
    <name>Pechenki sortable </name>
    <code>Pechenki sortable</code>
    <version>0.1</version>
    <date>26.07.2022</date>
    <author>Oleksandr</author>
    <link>https://pechenki.top</link>

    <file path="admin/view/template/design/{layout_form,banner_form}.twig">

        <operation error="skip">
            <search><![CDATA[{{ footer }} ]]></search>
            <add position="before"><![CDATA[
		    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
		    <script>
            let tables = document.querySelectorAll('table').forEach(table=>{

               new Sortable(table.querySelector('tbody'), {
                    easing: "cubic-bezier(1, 0, 0, 1)",
                    animation: 150,
                    fallbackTolerance:50,
                    onChange: function (evt) {
                        const index = evt.newIndex
                        const body = evt.from;

                        body.querySelectorAll('tr').forEach((item, index) => {
                            const inputsort = item.querySelector('[name$="[sort_order]')
                            if (inputsort) {
                                inputsort.value = index
                            }
                        })
                    }
                });

            })
		    </script>

		    <style>
                #module-content-top tbody tr:hover{
                    background: #ccc;
                    cursor: move;
                }
                .sortable-chosen{
                  //  border-bottom: 2px solid #000000;
                }
		    </style>
		    ]]>
            </add>
        </operation>
    </file>

</modification>