Templateshop - Eine große Auswahl an neuen und modernen Templates für die modified eCommerce Shopsoftware
Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Data-attributes im Shop?

    RobtheTop

    • Schreiberling
    • Beiträge: 332
    Data-attributes im Shop?
    am: 15. Juni 2021, 14:02:42
    Hi. Ich versuche gerade ein externes Javascript in den Shop einzubinden, welches data-attributes in der product_info_v1 verwendet/benötigt.

    Wenn ich eine eigenständige Seite erstelle und den Code einfüge wird alles so angezeigt wie es soll.
    Baue ich es aber im Shop ein, werden die data-attributes im Shop zerschossen.
    Im Inspektor von Firefox wird es anders angezeigt als es soll. Es werden einzelne Attribute zusammengefügt, bzw. gedrückt etc. So als ob der Shop diese nicht interpretieren kann. Dem entsprechend funktioniert das Tool natürlich auch nicht.

    Meine Frage wäre nun, ob zusätzlich noch etwas anderes von Nöten ist um data-attributes zu verwenden.
    Sind die irgendwo deaktiviert oder ähnliches, dass der Shop damit nicht umgehen kann.

    Habe aktuell leider keinen Code parat, da ich nicht am Rechner sitze. Ich füge ihn später noch mit ein, aber vielleicht hat ja jemand eine schnelle Antwort parat.
    Dankeschön.

    Linkback: https://www.modified-shop.org/forum/index.php?topic=41909.0

    karsta.de

    • Experte
    • Beiträge: 3.056
    Re: Data-attributes im Shop?
    Antwort #1 am: 15. Juni 2021, 14:51:32
    Erstelle eine neue php-Datei füge dein Javascript-code ein. Davor fürgst du folgendes ein:
     
    Code: PHP  [Auswählen]
    <?php
    ?>
    Dann schiebst du diese Datei in dein Template > javascript > extra. Nun kannst du das Javascript nutzen.

    Willst du das Script nur für die Produkt-Info nutzen, packst du das Javascript in die Abfrage:
    Code: PHP  [Auswählen]
    <?php if (basename($PHP_SELF) == FILENAME_PRODUCT_INFO) { ?>
    ....
    <?php } ?>
     

    BG Karsta

    RobtheTop

    • Schreiberling
    • Beiträge: 332
    Re: Data-attributes im Shop?
    Antwort #2 am: 15. Juni 2021, 14:57:17
    Heißt das, dass data-attributes zwischen PHP Tags eingefügt werden muss?

    Wieso funktioniert es dann ausserhalb des Shops in einer .html-datei.
    Danke dir

    hpzeller

    • Experte
    • Beiträge: 4.130
    • Geschlecht:
    Re: Data-attributes im Shop?
    Antwort #3 am: 16. Juni 2021, 09:21:47
    [...]
    Meine Frage wäre nun, ob zusätzlich noch etwas anderes von Nöten ist um data-attributes zu verwenden.
    Sind die irgendwo deaktiviert oder ähnliches, dass der Shop damit nicht umgehen kann.
    [...]

    Wenn sie diese Form -> <div data-...="irgendwas" haben, sollten sie funktionieren. Damit man dir helfen kann musst du den konkreten Code hier posten.

    Gruss
    Hanspeter

    RobtheTop

    • Schreiberling
    • Beiträge: 332
    Re: Data-attributes im Shop?
    Antwort #4 am: 16. Juni 2021, 10:05:44
    Danke Hanspeter.
    Genau um die Form geht es.
    Es geht, um genau zu su sein, um das 360 Grad Plugin, welches du in einem anderen Beitrag vorgeschlagen hast.
    Da ich nicht davon ausgehe, dass das Plugin selbst schuld daran ist, und erstmal eine allgemeine Antwort bzgl.
    Data-Attributes haben wollte, habe ich diesen Thread aufgemacht.
    Sorry dafür, denn im nach hinein denke ich, dass der Beitrag vielleicht besser dort aufgehoben wäre.

    Wie dem auch sei, ich habe die product_info_v1 folgendermaßen bearbeitet.

    dieses:
    Code: PHP  [Auswählen]
    <div class="pd_big_image">
        <a class="cbimages" title="{$PRODUCTS_NAME|onlytext}" href={$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img class="product_image" itemprop="image" src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" /></a>
    </div>

    ersetzt mit:
    Code: PHP  [Auswählen]
       {*<div class="pd_big_image">
            <a class="cbimages" title="{$PRODUCTS_NAME|onlytext}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img class="product_image" itemprop="image" src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" /></a>
        </div>*}
    {if "`$smarty.const.DIR_FS_DOCUMENT_ROOT`images/product_images/360/id_`$PRODUCTS_ID`/"|file_exists}
    {literal}
    <div
            class="cloudimage-360"
        data-folder="https://scaleflex.cloudimg.io/crop/1920x700/n/https://scaleflex.airstore.io/demo/360-car/"
        data-filename="iris-{index}.jpeg"
        data-amount="36"
        data-magnifier="3"
        data-spin-reverse
    ></div>{/literal}
    {else}
    <div class="pd_big_image">
            <a class="cbimages" title="{$PRODUCTS_NAME|onlytext}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img class="product_image" itemprop="image" src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" /></a>
    </div>
    {/if}

    Die Smarty-Abfrage, ob der Ordner mit dem Bildern vorhandenist funktioniert einwandfrei, das habe ich getestet.
    Ich habe smarty {literal} {/literal} verwendet, weil ich ohne dieses nur einen weiße Seite angezeigt bekam. Als ich dann in die Log-Datei schaute,
    wurde ein Smarty-Fehler ausgegeben weil er nichts mit {index} aus dem data-filename Attribute anfangen konnte.

    ich habe die Data-Attribute im Originalzustand belassen um zu schauen ob es überhaupt funktioniert.
    Mir sollte hier ein Stuhl in einer 360 Grad Ansicht angezeigt werden. Das klappt aber leider nicht.
    Ich habe die Data-Attribute auch schon soweit abgeändert, dass auf einen,von mir erstellten Ordner zugegriffen werden soll.
    Auch das ohne Erfolg. Stattdessen bleibt der Container wo mir das Bild angezeigt werden soll leer.
    Dann habe ich mir im Firefox Inspektor den Teil mal angesehen und raus kam komisches Zeug. Schaut mal auf den Screenshot.
    Ich denke, dass das so nicht aussehen soll.
    Wie ihr seht, wird auch dem "schließendem Div" eine class zugeordnet.
    Ich kann mir kein Reim daraus machen, warum das so ist.
    Ich hoffe, das jemand von euch eine Rat hat.
    Vielen Dank

    Edit:
    Der vollständigkeithalber sollte ich vielleicht noch erwähnen, dass ich die eigentliche Javascript Datei des Plugins in den Javascript Order gepackt habe und entsprechend in der general_bottum.js.php verlinkt habe.
    Quasi so, wie sonst auch immer.

    Hans Bambel

    • Mitglied
    • Beiträge: 117
    Re: Data-attributes im Shop?
    Antwort #5 am: 16. Juni 2021, 11:15:33
    Habe das selbst nicht verwendet aber laut github-Wiki sind alle data-attributes vom verwendeten Modul optional. Könntest also versuchen die erstmal rauszunehmen und zu schauen ob's die Grundfunktion so gegeben ist. Falls ja bindest du danach die data-attributes Stück für Stück wieder ein und schaust bei welchem der Fehler entsteht.

    RobtheTop

    • Schreiberling
    • Beiträge: 332
    Re: Data-attributes im Shop?
    Antwort #6 am: 16. Juni 2021, 11:32:34
    Nicht alle Attribute sind optional.
    Data-folder bspw. muss ich angeben, damit er weiß, auf welchen Ordner zugegriffen werden muss.
    Data-amount ist zwar optional, aber wäre interessant wenn es pro Sequenz doch mehr als 36 Bilder sein sollen um es zb. flüssiger wirken zu lassen.
    Aber ich kann mal versuchen die optionalen rauszulassen.
    Aber bezweifele dass es daran liegt, da ja schon direkt am Anfang bei <div irgendwas nicht richtig läuft.
    Danke dir

    hpzeller

    • Experte
    • Beiträge: 4.130
    • Geschlecht:
    Re: Data-attributes im Shop?
    Antwort #7 am: 16. Juni 2021, 12:43:38
    Hallo Robert,

    erstelle folgenden Ordner /images/product_images/360/id_2 und füge in diesen die Bilder des angehängten images.zip ein. Hinweis: Die 2 bei id_2 kannst du einfach mit derjenigen ID-Nummer ersetzen, bei der du das 360er Bild angezeigt haben willst.

    Erstelle folgende Datei /templates/tpl_modified_responsive/javascript/js-cloudimage-360-view.min.js und befülle sie mit folgendem Code.

    Code: Javascript  [Auswählen]
    /*!
     *
     *  js-cloudimage-360-view v2.6.0
     *  https://github.com/scaleflex/js-cloudimage-360-view
     *
     *  Copyright (c) 2019 scaleflex
     *  Released under the MIT license
     *
     *  Date: 2020-09-03T11:26:04.718Z
     *
     */
    !function(e){var t={};function i(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)i.d(n,o,function(t){return e[t]}.bind(null,o));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=33)}([function(e,t){e.exports="object"==typeof window&&window&&window.Math==Math?window:"object"==typeof self&&self&&self.Math==Math?self:Function("return this")()},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,i){var n=i(10),o=i(26);e.exports=i(4)?function(e,t,i){return n.f(e,t,o(1,i))}:function(e,t,i){return e[t]=i,e}},function(e,t,i){e.exports=!i(1)((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},function(e,t){var i={}.hasOwnProperty;e.exports=function(e,t){return i.call(e,t)}},function(e,t,i){var n=i(0),o=i(9),s=n["__core-js_shared__"]||o("__core-js_shared__",{});(e.exports=function(e,t){return s[e]||(s[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.0.0",mode:i(42)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(e,t,i){var n=i(2);e.exports=function(e){if(!n(e))throw TypeError(String(e)+" is not an object");return e}},function(e,t,i){var n=i(6)("wks"),o=i(27),s=i(0).Symbol,r=i(43);e.exports=function(e){return n[e]||(n[e]=r&&s[e]||(r?s:o)("Symbol."+e))}},function(e,t,i){var n=i(0),o=i(3);e.exports=function(e,t){try{o(n,e,t)}catch(i){n[e]=t}return t}},function(e,t,i){var n=i(4),o=i(23),s=i(7),r=i(25),a=Object.defineProperty;t.f=n?a:function(e,t,i){if(s(e),t=r(t,!0),s(i),o)try{return a(e,t,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported");return"value"in i&&(e[t]=i.value),e}},function(e,t,i){var n=i(0),o=i(28).f,s=i(3),r=i(46),a=i(9),c=i(49),l=i(54);e.exports=function(e,t){var i,u,h,d,f,v=e.target,p=e.global,y=e.stat;if(i=p?n:y?n[v]||a(v,{}):(n[v]||{}).prototype)for(u in t){if(d=t[u],h=e.noTargetGet?(f=o(i,u))&&f.value:i[u],!l(p?u:v+(y?".":"#")+u,e.forced)&&void 0!==h){if(typeof d==typeof h)continue;c(d,h)}(e.sham||h&&h.sham)&&s(d,"sham",!0),r(i,u,d,e)}}},function(e,t,i){var n=i(18),o=i(20);e.exports=function(e){return n(o(e))}},function(e,t){e.exports={}},function(e,t){e.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(e,t,i){var n=i(0),o=i(17),s=Function.call;e.exports=function(e,t,i){return o(s,n[e].prototype[t],i)}},function(e,t,i){var n=i(17),o=i(18),s=i(39),r=i(21),a=i(40);e.exports=function(e,t){var i=1==e,c=2==e,l=3==e,u=4==e,h=6==e,d=5==e||h,f=t||a;return function(t,a,v){for(var p,y,g=s(t),m=o(g),w=n(a,v,3),x=r(m.length),b=0,I=i?f(t,x):c?f(t,0):void 0;x>b;b++)if((d||b in m)&&(y=w(p=m[b],b,g),e))if(i)I[b]=y;else if(y)switch(e){case 3:return!0;case 5:return p;case 6:return b;case 2:I.push(p)}else if(u)return!1;return h?-1:l||u?u:I}}},function(e,t,i){var n=i(38);e.exports=function(e,t,i){if(n(e),void 0===t)return e;switch(i){case 0:return function(){return e.call(t)};case 1:return function(i){return e.call(t,i)};case 2:return function(i,n){return e.call(t,i,n)};case 3:return function(i,n,o){return e.call(t,i,n,o)}}return function(){return e.apply(t,arguments)}}},function(e,t,i){var n=i(1),o=i(19),s="".split;e.exports=n((function(){return!Object("z").propertyIsEnumerable(0)}))?function(e){return"String"==o(e)?s.call(e,""):Object(e)}:Object},function(e,t){var i={}.toString;e.exports=function(e){return i.call(e).slice(8,-1)}},function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on "+e);return e}},function(e,t,i){var n=i(22),o=Math.min;e.exports=function(e){return e>0?o(n(e),9007199254740991):0}},function(e,t){var i=Math.ceil,n=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?n:i)(e)}},function(e,t,i){e.exports=!i(4)&&!i(1)((function(){return 7!=Object.defineProperty(i(24)("div"),"a",{get:function(){return 7}}).a}))},function(e,t,i){var n=i(2),o=i(0).document,s=n(o)&&n(o.createElement);e.exports=function(e){return s?o.createElement(e):{}}},function(e,t,i){var n=i(2);e.exports=function(e,t){if(!n(e))return e;var i,o;if(t&&"function"==typeof(i=e.toString)&&!n(o=i.call(e)))return o;if("function"==typeof(i=e.valueOf)&&!n(o=i.call(e)))return o;if(!t&&"function"==typeof(i=e.toString)&&!n(o=i.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t){var i=0,n=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++i+n).toString(36))}},function(e,t,i){var n=i(4),o=i(45),s=i(26),r=i(12),a=i(25),c=i(5),l=i(23),u=Object.getOwnPropertyDescriptor;t.f=n?u:function(e,t){if(e=r(e),t=a(t,!0),l)try{return u(e,t)}catch(e){}if(c(e,t))return s(!o.f.call(e,t),e[t])}},function(e,t,i){e.exports=i(6)("native-function-to-string",Function.toString)},function(e,t,i){var n=i(6)("keys"),o=i(27);e.exports=function(e){return n[e]||(n[e]=o(e))}},function(e,t,i){var n=i(5),o=i(12),s=i(32)(!1),r=i(13);e.exports=function(e,t){var i,a=o(e),c=0,l=[];for(i in a)!n(r,i)&&n(a,i)&&l.push(i);for(;t.length>c;)n(a,i=t[c++])&&(~s(l,i)||l.push(i));return l}},function(e,t,i){var n=i(12),o=i(21),s=i(52);e.exports=function(e){return function(t,i,r){var a,c=n(t),l=o(c.length),u=s(r,l);if(e&&i!=i){for(;l>u;)if((a=c[u++])!=a)return!0}else for(;l>u;u++)if((e||u in c)&&c[u]===i)return e||u||0;return!e&&-1}}},function(e,t,i){"use strict";i(34),i(55),i(59);var n,o=i(67),s=(n=o)&&n.__esModule?n:{default:n};function r(){var e=[],t=document.querySelectorAll(".cloudimage-360:not(.initialized)");[].slice.call(t).forEach((function(t){e.push(new s.default(t))})),window.CI360._viewers=e}function a(){return!(window.CI360._viewers&&window.CI360._viewers.length>0)}window.CI360=window.CI360||{},window.CI360.init=r,window.CI360.destroy=function(){a()||(window.CI360._viewers.forEach((function(e){e.destroy()})),window.CI360._viewers=[])},window.CI360.getActiveIndexByID=function(e){if(!a()){var t=window.CI360._viewers.filter((function(t){return t.id===e}))[0];return t&&t.activeImage-1}},window.CI360.notInitOnLoad||r()},function(e,t,i){e.exports=i(35)},function(e,t,i){i(36),e.exports=i(15)("Array","forEach")},function(e,t,i){"use strict";var n=i(37);i(11)({target:"Array",proto:!0,forced:[].forEach!=n},{forEach:n})},function(e,t,i){"use strict";var n=[].forEach,o=i(16)(0),s=i(44)("forEach");e.exports=s?function(e){return o(this,e,arguments[1])}:n},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(String(e)+" is not a function");return e}},function(e,t,i){var n=i(20);e.exports=function(e){return Object(n(e))}},function(e,t,i){var n=i(2),o=i(41),s=i(8)("species");e.exports=function(e,t){var i;return o(e)&&("function"!=typeof(i=e.constructor)||i!==Array&&!o(i.prototype)?n(i)&&null===(i=i[s])&&(i=void 0):i=void 0),new(void 0===i?Array:i)(0===t?0:t)}},function(e,t,i){var n=i(19);e.exports=Array.isArray||function(e){return"Array"==n(e)}},function(e,t){e.exports=!1},function(e,t,i){e.exports=!i(1)((function(){String(Symbol())}))},function(e,t,i){"use strict";var n=i(1);e.exports=function(e,t){var i=[][e];return!i||!n((function(){i.call(null,t||function(){throw Error()},1)}))}},function(e,t,i){"use strict";var n={}.propertyIsEnumerable,o=Object.getOwnPropertyDescriptor,s=o&&!n.call({1:2},1);t.f=s?function(e){var t=o(this,e);return!!t&&t.enumerable}:n},function(e,t,i){var n=i(0),o=i(3),s=i(5),r=i(9),a=i(29),c=i(47),l=c.get,u=c.enforce,h=String(a).split("toString");i(6)("inspectSource",(function(e){return a.call(e)})),(e.exports=function(e,t,i,a){var c=!!a&&!!a.unsafe,l=!!a&&!!a.enumerable,d=!!a&&!!a.noTargetGet;"function"==typeof i&&("string"!=typeof t||s(i,"name")||o(i,"name",t),u(i).source=h.join("string"==typeof t?t:"")),e!==n?(c?!d&&e[t]&&(l=!0):delete e[t],l?e[t]=i:o(e,t,i)):l?e[t]=i:r(t,i)})(Function.prototype,"toString",(function(){return"function"==typeof this&&l(this).source||a.call(this)}))},function(e,t,i){var n,o,s,r=i(48),a=i(2),c=i(3),l=i(5),u=i(30),h=i(13),d=i(0).WeakMap;if(r){var f=new d,v=f.get,p=f.has,y=f.set;n=function(e,t){return y.call(f,e,t),t},o=function(e){return v.call(f,e)||{}},s=function(e){return p.call(f,e)}}else{var g=u("state");h[g]=!0,n=function(e,t){return c(e,g,t),t},o=function(e){return l(e,g)?e[g]:{}},s=function(e){return l(e,g)}}e.exports={set:n,get:o,has:s,enforce:function(e){return s(e)?o(e):n(e,{})},getterFor:function(e){return function(t){var i;if(!a(t)||(i=o(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return i}}}},function(e,t,i){var n=i(29),o=i(0).WeakMap;e.exports="function"==typeof o&&/native code/.test(n.call(o))},function(e,t,i){var n=i(5),o=i(50),s=i(28),r=i(10);e.exports=function(e,t){for(var i=o(t),a=r.f,c=s.f,l=0;l<i.length;l++){var u=i[l];n(e,u)||a(e,u,c(t,u))}}},function(e,t,i){var n=i(51),o=i(53),s=i(7),r=i(0).Reflect;e.exports=r&&r.ownKeys||function(e){var t=n.f(s(e)),i=o.f;return i?t.concat(i(e)):t}},function(e,t,i){var n=i(31),o=i(14).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,o)}},function(e,t,i){var n=i(22),o=Math.max,s=Math.min;e.exports=function(e,t){var i=n(e);return i<0?o(i+t,0):s(i,t)}},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t,i){var n=i(1),o=/#|\.prototype\./,s=function(e,t){var i=a[r(e)];return i==l||i!=c&&("function"==typeof t?n(t):!!t)},r=s.normalize=function(e){return String(e).replace(o,".").toLowerCase()},a=s.data={},c=s.NATIVE="N",l=s.POLYFILL="P";e.exports=s},function(e,t,i){e.exports=i(56)},function(e,t,i){i(57),e.exports=i(15)("Array","filter")},function(e,t,i){"use strict";var n=i(16)(2),o=i(58)("filter");i(11)({target:"Array",proto:!0,forced:!o},{filter:function(e){return n(this,e,arguments[1])}})},function(e,t,i){var n=i(1),o=i(8)("species");e.exports=function(e){return!n((function(){var t=[];return(t.constructor={})[o]=function(){return{foo:1}},1!==t[e](Boolean).foo}))}},function(e,t,i){e.exports=i(60)},function(e,t,i){i(61),e.exports=i(15)("Array","includes")},function(e,t,i){"use strict";var n=i(32)(!0);i(11)({target:"Array",proto:!0},{includes:function(e){return n(this,e,arguments.length>1?arguments[1]:void 0)}}),i(62)("includes")},function(e,t,i){var n=i(8)("unscopables"),o=i(63),s=i(3),r=Array.prototype;null==r[n]&&s(r,n,o(null)),e.exports=function(e){r[n][e]=!0}},function(e,t,i){var n=i(7),o=i(64),s=i(14),r=i(66),a=i(24),c=i(30)("IE_PROTO"),l=function(){},u=function(){var e,t=a("iframe"),i=s.length;for(t.style.display="none",r.appendChild(t),t.src=String("javascript:"),(e=t.contentWindow.document).open(),e.write("<script>document.F=Object<\/script>"),e.close(),u=e.F;i--;)delete u.prototype[s[i]];return u()};e.exports=Object.create||function(e,t){var i;return null!==e?(l.prototype=n(e),i=new l,l.prototype=null,i[c]=e):i=u(),void 0===t?i:o(i,t)},i(13)[c]=!0},function(e,t,i){var n=i(4),o=i(10),s=i(7),r=i(65);e.exports=n?Object.defineProperties:function(e,t){s(e);for(var i,n=r(t),a=n.length,c=0;a>c;)o.f(e,i=n[c++],t[i]);return e}},function(e,t,i){var n=i(31),o=i(14);e.exports=Object.keys||function(e){return n(e,o)}},function(e,t,i){var n=i(0).document;e.exports=n&&n.documentElement},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),o=i(68);var s=function(){function e(t,i,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.container=t,this.activeImage=1,this.movementStart=0,this.isClicked=!1,this.loadedImages=0,this.imagesLoaded=!1,this.reversed=!1,this.fullScreenView=!!i,this.ratio=n,this.images=[],this.devicePixelRatio=Math.round(window.devicePixelRatio||1),this.isMobile=!!("ontouchstart"in window||navigator.msMaxTouchPoints),this.id=t.id,this.init(t)}return n(e,[{key:"mousedown",value:function(e){e.preventDefault(),this.imagesLoaded&&(this.glass&&this.closeMagnifier(),this.view360Icon&&this.remove360ViewIcon(),(this.autoplay||this.loopTimeoutId)&&(this.stop(),this.autoplay=!1),this.movementStart=e.pageX,this.isClicked=!0,this.container.style.cursor="grabbing")}},{key:"mouseup",value:function(){this.imagesLoaded&&(this.movementStart=0,this.isClicked=!1,this.container.style.cursor="grab",this.bottomCircle&&this.show360ViewCircleIcon())}},{key:"mousemove",value:function(e){this.isClicked&&this.imagesLoaded&&this.onMove(e.pageX)}},{key:"touchstart",value:function(e){this.imagesLoaded&&(this.glass&&this.closeMagnifier(),this.view360Icon&&this.remove360ViewIcon(),(this.autoplay||this.loopTimeoutId)&&(this.stop(),this.autoplay=!1),this.movementStart=e.touches[0].clientX,this.isClicked=!0)}},{key:"touchend",value:function(){this.imagesLoaded&&(this.movementStart=0,this.isClicked=!1,this.bottomCircle&&this.show360ViewCircleIcon())}},{key:"touchmove",value:function(e){this.isClicked&&this.imagesLoaded&&this.onMove(e.touches[0].clientX)}},{key:"keydownGeneral",value:function(){this.imagesLoaded&&this.glass&&this.closeMagnifier()}},{key:"keydown",value:function(e){this.imagesLoaded&&(this.glass&&this.closeMagnifier(),-1!==[37,39].indexOf(e.keyCode)&&(37===e.keyCode?this.reversed?this.prev():this.next():39===e.keyCode&&(this.reversed?this.next():this.prev()),this.onSpin()))}},{key:"onSpin",value:function(){this.bottomCircle&&this.hide360ViewCircleIcon(),this.view360Icon&&this.remove360ViewIcon(),(this.autoplay||this.loopTimeoutId)&&(this.stop(),this.autoplay=!1)}},{key:"keyup",value:function(e){this.imagesLoaded&&-1!==[37,39].indexOf(e.keyCode)&&this.onFinishSpin()}},{key:"onFinishSpin",value:function(){this.bottomCircle&&this.show360ViewCircleIcon()}},{key:"onMove",value:function(e){if(e-this.movementStart>=this.speedFactor){var t=Math.floor((e-this.movementStart)/this.speedFactor)||1;this.movementStart=e,this.spinReverse?this.moveActiveIndexDown(t):this.moveActiveIndexUp(t),this.bottomCircle&&this.hide360ViewCircleIcon(),this.update()}else if(this.movementStart-e>=this.speedFactor){var i=Math.floor((this.movementStart-e)/this.speedFactor)||1;this.movementStart=e,this.spinReverse?this.moveActiveIndexUp(i):this.moveActiveIndexDown(i),this.bottomCircle&&this.hide360ViewCircleIcon(),this.update()}}},{key:"moveActiveIndexUp",value:function(e){var t=this.controlReverse?!this.spinReverse:this.spinReverse;this.stopAtEdges?this.activeImage+e>=this.amount?(this.activeImage=this.amount,(t?this.prevElem:this.nextElem)&&(0,o.addClass)(t?this.prevElem:this.nextElem,"not-active")):(this.activeImage+=e,this.nextElem&&(0,o.removeClass)(this.nextElem,"not-active"),this.prevElem&&(0,o.removeClass)(this.prevElem,"not-active")):this.activeImage=(this.activeImage+e)%this.amount||this.amount}},{key:"moveActiveIndexDown",value:function(e){var t=this.controlReverse?!this.spinReverse:this.spinReverse;this.stopAtEdges?this.activeImage-e<=1?(this.activeImage=1,(t?this.nextElem:this.prevElem)&&(0,o.addClass)(t?this.nextElem:this.prevElem,"not-active")):(this.activeImage-=e,this.prevElem&&(0,o.removeClass)(this.prevElem,"not-active"),this.nextElem&&(0,o.removeClass)(this.nextElem,"not-active")):this.activeImage-e<1?this.activeImage=this.amount+(this.activeImage-e):this.activeImage-=e}},{key:"loop",value:function(e){e?this.prev():this.next()}},{key:"next",value:function(){this.moveActiveIndexUp(1),this.update()}},{key:"prev",value:function(){this.moveActiveIndexDown(1),this.update()}},{key:"update",value:function(){var e=this.images[this.activeImage-1],t=this.canvas.getContext("2d");if(t.scale(this.devicePixelRatio,this.devicePixelRatio),this.fullScreenView){this.canvas.width=window.innerWidth*this.devicePixelRatio,this.canvas.style.width=window.innerWidth+"px",this.canvas.height=window.innerHeight*this.devicePixelRatio,this.canvas.style.height=window.innerHeight+"px";var i=(0,o.contain)(this.canvas.width,this.canvas.height,e.width,e.height),n=i.offsetX,s=i.offsetY,r=i.width,a=i.height;t.drawImage(e,n,s,r,a)}else this.canvas.width=this.container.offsetWidth*this.devicePixelRatio,this.canvas.style.width=this.container.offsetWidth+"px",this.canvas.height=this.container.offsetWidth*this.devicePixelRatio/e.width*e.height,this.canvas.style.height=this.container.offsetWidth/e.width*e.height+"px",t.drawImage(e,0,0,this.canvas.width,this.canvas.height)}},{key:"updatePercentageInLoader",value:function(e){this.loader&&(this.loader.style.width=e+"%"),this.view360Icon&&(this.view360Icon.innerText=e+"%")}},{key:"onAllImagesLoaded",value:function(){if(this.imagesLoaded=!0,this.container.style.cursor="grab",this.removeLoader(),this.fullScreenView){var e=this.container.offsetHeight/this.container.offsetWidth,t=this.container.offsetWidth;this.ratio>e&&(t=this.container.offsetHeight/this.ratio),this.speedFactor=Math.floor(this.dragSpeed/150*36/this.amount*25*t/1500)||1}else this.speedFactor=Math.floor(this.dragSpeed/150*36/this.amount*25*this.container.offsetWidth/1500)||1;this.autoplay&&this.play(),this.view360Icon&&(this.view360Icon.innerText="",(0,o.setView360Icon)(this.view360Icon,this.logoSrc)),this.initControls()}},{key:"onFirstImageLoaded",value:function(e){var t=this;if(this.hide360Logo||this.add360ViewIcon(),this.fullScreenView){this.canvas.width=window.innerWidth*this.devicePixelRatio,this.canvas.style.width=window.innerWidth+"px",this.canvas.height=window.innerHeight*this.devicePixelRatio,this.canvas.style.height=window.innerHeight+"px";var i=this.canvas.getContext("2d"),n=(0,o.contain)(this.canvas.width,this.canvas.height,e.target.width,e.target.height),s=n.offsetX,r=n.offsetY,a=n.width,c=n.height;i.drawImage(e.target,s,r,a,c)}else{this.canvas.width=this.container.offsetWidth*this.devicePixelRatio,this.canvas.style.width=this.container.offsetWidth+"px",this.canvas.height=this.container.offsetWidth*this.devicePixelRatio/e.target.width*e.target.height,this.canvas.style.height=this.container.offsetWidth/e.target.width*e.target.height+"px",this.canvas.getContext("2d").drawImage(e.target,0,0,this.canvas.width,this.canvas.height)}this.lazyload&&!this.fullScreenView&&this.images.forEach((function(e,i){0!==i?e.getAttribute("data-src")&&(e.src=e.getAttribute("data-src")):t.innerBox.removeChild(t.lazyloadInitImage)})),this.ratio&&(this.container.style.minHeight="auto"),this.magnifier&&!this.fullScreenView&&this.addMagnifier(),this.boxShadow&&!this.fullScreenView&&this.addBoxShadow(),this.bottomCircle&&!this.fullScreenView&&this.add360ViewCircleIcon(),this.fullScreen&&!this.fullScreenView?this.addFullScreenIcon():this.fullScreenView&&this.addCloseFullScreenView()}},{key:"onImageLoad",value:function(e,t){var i=Math.round(this.loadedImages/this.amount*100);this.loadedImages+=1,this.updatePercentageInLoader(i),this.loadedImages===this.amount?this.onAllImagesLoaded(t):0===e&&this.onFirstImageLoaded(t)}},{key:"addCloseFullScreenView",value:function(){var e=document.createElement("div");(0,o.setCloseFullScreenViewStyles)(e),e.onclick=this.closeFullScreenModal.bind(this),this.innerBox.appendChild(e)}},{key:"add360ViewIcon",value:function(){var e=document.createElement("div");(0,o.set360ViewIconStyles)(e),e.innerText="0%",this.view360Icon=e,this.innerBox.appendChild(e)}},{key:"addFullScreenIcon",value:function(){var e=document.createElement("div");(0,o.setFullScreenIconStyles)(e),e.onclick=this.openFullScreenModal.bind(this),this.innerBox.appendChild(e)}},{key:"addMagnifier",value:function(){var e=document.createElement("div");(0,o.setMagnifyIconStyles)(e,this.fullScreen),e.onclick=this.magnify.bind(this),this.innerBox.appendChild(e)}},{key:"getOriginalSrc",value:function(){var e=this.images[this.activeImage-1],t=e.src.lastIndexOf("//");return t>10?e.src.slice(t):e.src}},{key:"magnify",value:function(){var e=this,t=new Image,i=this.getOriginalSrc();t.src=i,t.onload=function(){e.glass&&(e.glass.style.cursor="none")},this.glass=document.createElement("div"),this.container.style.overflow="hidden",(0,o.magnify)(this.container,i,this.glass,this.magnifier||3)}},{key:"closeMagnifier",value:function(){this.glass&&(this.container.style.overflow="visible",this.container.removeChild(this.glass),this.glass=null)}},{key:"openFullScreenModal",value:function(){var t=document.createElement("div");(0,o.setFullScreenModalStyles)(t);var i=this.container.cloneNode(),n=this.images[0],s=n.height/n.width;i.style.height="100%",i.style.maxHeight="100%",t.appendChild(i),window.document.body.appendChild(t),new e(i,!0,s)}},{key:"closeFullScreenModal",value:function(){document.body.removeChild(this.container.parentNode)}},{key:"add360ViewCircleIcon",value:function(){var e=new Image;(0,o.set360ViewCircleIconStyles)(e,this.bottomCircleOffset),this.view360CircleIcon=e,this.innerBox.appendChild(e)}},{key:"hide360ViewCircleIcon",value:function(){this.view360CircleIcon&&(this.view360CircleIcon.style.opacity="0")}},{key:"show360ViewCircleIcon",value:function(){this.view360CircleIcon&&(this.view360CircleIcon.style.opacity="1")}},{key:"remove360ViewCircleIcon",value:function(){this.view360CircleIcon&&(this.innerBox.removeChild(this.view360CircleIcon),this.view360CircleIcon=null)}},{key:"addLoader",value:function(){var e=document.createElement("div");(0,o.setLoaderStyles)(e),this.loader=e,this.innerBox.appendChild(e)}},{key:"addBoxShadow",value:function(){var e=document.createElement("div");(0,o.setBoxShadowStyles)(e,this.boxShadow),this.innerBox.appendChild(e)}},{key:"removeLoader",value:function(){this.loader&&(this.innerBox.removeChild(this.loader),this.loader=null)}},{key:"remove360ViewIcon",value:function(){this.view360Icon&&(this.innerBox.removeChild(this.view360Icon),this.view360Icon=null)}},{key:"play",value:function(){var e=this;this.bottomCircle&&this.hide360ViewCircleIcon(),this.remove360ViewIcon(),this.loopTimeoutId=window.setInterval((function(){e.loop(e.reversed)}),this.autoplaySpeed)}},{key:"stop",value:function(){this.bottomCircle&&this.show360ViewCircleIcon(),window.clearTimeout(this.loopTimeoutId)}},{key:"getSrc",value:function(e,t,i,n,s){var r=s.ciSize,a=s.ciToken,c=s.ciOperation,l=s.ciFilters,u=""+i+n;if(e){var h=t.offsetWidth;if(this.fullScreenView){var d=t.offsetHeight/t.offsetWidth;this.ratio>d&&(h=t.offsetHeight/this.ratio)}u="https://"+a+".cloudimg.io/"+c+"/"+(0,o.getSizeAccordingToPixelRatio)(r||(0,o.getResponsiveWidthOfContainer)(h))+"/"+l+"/"+u}return u}},{key:"preloadImages",value:function(e,t,i,n,s,r,a){var c=this;if(this.imageList)try{var l=JSON.parse(this.imageList);this.amount=l.length,l.forEach((function(e,t){var o=/(http(s?)):\/\//gi.test(e)?"":c.folder,l=c.getSrc(r,s,o,e,a);c.addImage(l,i,n,t)}))}catch(e){console.error("Wrong format in image-list attribute: "+e.message)}else[].concat(function(e){if(Array.isArray(e)){for(var t=0,i=Array(e.length);t<e.length;t++)i[t]=e[t];return i}return Array.from(e)}(new Array(e))).map((function(e,s){var r=(0,o.pad)(s+1,c.indexZeroBase),a=t.replace("{index}",r);c.addImage(a,i,n,s)}))}},{key:"addImage",value:function(e,t,i,n){var o=new Image;t&&!this.fullScreenView?(o.setAttribute("data-src",e),o.className=o.className.length?o.className+" "+i:i,0===n&&(this.lazyloadInitImage=o,o.style.position="absolute",o.style.top="0",o.style.left="0",this.innerBox.appendChild(o))):o.src=e,o.onload=this.onImageLoad.bind(this,n),o.onerror=this.onImageLoad.bind(this,n),this.images.push(o)}},{key:"destroy",value:function(){stop();var e=this.container,t=e.cloneNode(!0),i=t.querySelector(".cloudimage-inner-box");t.className=t.className.replace(" initialized",""),t.style.position="relative",t.style.width="100%",t.style.cursor="default",t.setAttribute("draggable","false"),t.style.minHeight="auto",t.removeChild(i),e.parentNode.replaceChild(t,e)}},{key:"initControls",value:function(){var e=this,t=this.controlReverse?!this.spinReverse:this.spinReverse,i=this.container.querySelector(".cloudimage-360-prev"),n=this.container.querySelector(".cloudimage-360-next");if(i||n){var s=function(t){t.stopPropagation(),e.onSpin(),e.prev(),e.loopTimeoutId=window.setInterval(e.prev.bind(e),e.autoplaySpeed)},r=function(t){t.stopPropagation(),e.onSpin(),e.next(),e.loopTimeoutId=window.setInterval(e.next.bind(e),e.autoplaySpeed)},a=function(){e.onFinishSpin(),window.clearTimeout(e.loopTimeoutId)},c=function(){e.onFinishSpin(),window.clearTimeout(e.loopTimeoutId)};i&&(i.style.display="block",i.addEventListener("mousedown",t?r:s),i.addEventListener("touchstart",t?r:s),i.addEventListener("mouseup",t?c:a),i.addEventListener("touchend",t?c:a),this.prevElem=i),n&&(n.style.display="block",n.addEventListener("mousedown",t?s:r),n.addEventListener("touchstart",t?s:r),n.addEventListener("mouseup",t?a:c),n.addEventListener("touchend",t?a:c),this.nextElem=n),(t?n:i)&&this.stopAtEdges&&(0,o.addClass)(t?n:i,"not-active")}}},{key:"addInnerBox",value:function(){this.innerBox=document.createElement("div"),this.innerBox.className="cloudimage-inner-box",this.container.appendChild(this.innerBox)}},{key:"addCanvas",value:function(){this.canvas=document.createElement("canvas"),this.canvas.style.width="100%",this.canvas.style.fontSize="0",this.ratio&&(this.container.style.minHeight=this.container.offsetWidth*this.ratio+"px",this.canvas.height=parseInt(this.container.style.minHeight)),this.innerBox.appendChild(this.canvas)}},{key:"attachEvents",value:function(e,t,i){e&&(this.container.addEventListener("mousedown",this.mousedown.bind(this)),this.container.addEventListener("mouseup",this.mouseup.bind(this)),this.container.addEventListener("mousemove",this.mousemove.bind(this))),t&&(this.container.addEventListener("touchstart",this.touchstart.bind(this),{passive:!0}),this.container.addEventListener("touchend",this.touchend.bind(this),{passive:!0}),this.container.addEventListener("touchmove",this.touchmove.bind(this))),i?(document.addEventListener("keydown",this.keydown.bind(this)),document.addEventListener("keyup",this.keyup.bind(this))):document.addEventListener("keydown",this.keydownGeneral.bind(this))}},{key:"applyStylesToContainer",value:function(){this.container.style.position="relative",this.container.style.width="100%",this.container.style.cursor="wait",this.container.setAttribute("draggable","false"),this.container.className=this.container.className+" initialized"}},{key:"init",value:function(e){var t=(0,o.get360ViewProps)(e),i=t.folder,n=t.filename,s=t.imageList,r=t.indexZeroBase,a=t.amount,c=t.draggable,l=void 0===c||c,u=t.swipeable,h=void 0===u||u,d=t.keys,f=t.bottomCircle,v=t.bottomCircleOffset,p=t.boxShadow,y=t.autoplay,g=t.speed,m=t.autoplayReverse,w=t.fullScreen,x=t.magnifier,b=t.ratio,I=t.responsive,S=t.ciToken,C=t.ciSize,k=t.ciOperation,E=t.ciFilters,L=t.lazyload,O=t.lazySelector,A=t.spinReverse,M=t.dragSpeed,P=t.stopAtEdges,V=t.controlReverse,R=t.hide360Logo,j=t.logoSrc,z={ciSize:C,ciToken:S,ciOperation:k,ciFilters:E};this.addInnerBox(),this.addLoader(),this.folder=i,this.filename=n,this.imageList=s,this.indexZeroBase=r,this.amount=a,this.bottomCircle=f,this.bottomCircleOffset=v,this.boxShadow=p,this.autoplay=y&&!this.isMobile,this.speed=g,this.reversed=m,this.fullScreen=w,this.magnifier=!(this.isMobile||!x)&&x,this.lazyload=L,this.ratio=b,this.spinReverse=A,this.controlReverse=V,this.dragSpeed=M,this.autoplaySpeed=36*this.speed/this.amount,this.stopAtEdges=P,this.hide360Logo=R,this.logoSrc=j,this.applyStylesToContainer(),this.addCanvas();var F=this.getSrc(I,e,i,n,z);this.preloadImages(a,F,L,O,e,I,z),this.attachEvents(l,h,d)}}]),e}();t.default=s},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=function(e,t){var i=s(e,t),n=s(e,"data-"+t);return null!==i&&"false"!==i||null!==n&&"false"!==n},s=function(e,t){return e.getAttribute(t)},r=(n=!0,function(e,t,i,o){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:.5,a=arguments.length>6&&void 0!==arguments[6]?arguments[6]:.5,c=i/o,l=e/t,u=e*s,h=t*s;return(n?c>l:c<l)?h=u/c:u=h*c,{width:u,height:h,offsetX:(e-u)*r,offsetY:(t-h)*a}});t.get360ViewProps=function(e){return{folder:s(e,"folder")||s(e,"data-folder")||"/",filename:s(e,"filename")||s(e,"data-filename")||"image-{index}.jpg",imageList:s(e,"image-list")||s(e,"data-image-list")||null,indexZeroBase:parseInt(s(e,"index-zero-base")||s(e,"data-index-zero-base")||0,10),amount:parseInt(s(e,"amount")||s(e,"data-amount")||36,10),speed:parseInt(s(e,"speed")||s(e,"data-speed")||80,10),dragSpeed:parseInt(s(e,"drag-speed")||s(e,"data-drag-speed")||150,10),keys:o(e,"keys"),boxShadow:s(e,"box-shadow")||s(e,"data-box-shadow"),autoplay:o(e,"autoplay"),autoplayReverse:o(e,"autoplay-reverse"),bottomCircle:o(e,"bottom-circle"),fullScreen:o(e,"full-screen"),magnifier:(null!==s(e,"magnifier")||null!==s(e,"data-magnifier"))&&parseInt(s(e,"magnifier")||s(e,"data-magnifier"),10),bottomCircleOffset:parseInt(s(e,"bottom-circle-offset")||s(e,"data-bottom-circle-offset")||5,10),ratio:parseFloat(s(e,"ratio")||s(e,"data-ratio")||0)||!1,responsive:o(e,"responsive"),ciToken:s(e,"responsive")||s(e,"data-responsive")||"demo",ciSize:s(e,"size")||s(e,"data-size"),ciOperation:s(e,"operation")||s(e,"data-operation")||"width",ciFilters:s(e,"filters")||s(e,"data-filters")||"q35",lazyload:o(e,"lazyload"),lazySelector:s(e,"lazyload-selector")||s(e,"data-lazyload-selector")||"lazyload",spinReverse:o(e,"spin-reverse"),controlReverse:o(e,"control-reverse"),stopAtEdges:o(e,"stop-at-edges"),hide360Logo:o(e,"hide-360-logo"),logoSrc:s(e,"logo-src")||"https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg"}},t.set360ViewIconStyles=function(e){e.style.position="absolute",e.style.top="0",e.style.bottom="0",e.style.left="0",e.style.right="0",e.style.width="100px",e.style.height="100px",e.style.margin="auto",e.style.backgroundColor="rgba(255,255,255,0.8)",e.style.borderRadius="50%",e.style.boxShadow="rgb(255, 255, 255, 0.5) 0px 0px 4px",e.style.transition="0.5s all",e.style.color="rgb(80,80,80)",e.style.textAlign="center",e.style.lineHeight="100px",e.style.zIndex="2"},t.set360ViewCircleIconStyles=function(e,t){e.src="https://scaleflex.ultrafast.io/https://scaleflex.api.airstore.io/v1/get/_/2236d56f-914a-5a8b-a3ae-f7bde1c50000/360.svg",e.style.position="absolute",e.style.top="auto",e.style.bottom=t+"%",e.style.left="0",e.style.right="0",e.style.width="80%",e.style.height="auto",e.style.margin="auto",e.style.transition="0.5s all",e.style.zIndex="2"},t.setLoaderStyles=function(e){e.className="cloudimage-360-loader",e.style.position="absolute",e.style.zIndex="100",e.style.top="0",e.style.left="0",e.style.right="0",e.style.width="0%",e.style.height="8px",e.style.background="rgb(165,175,184)"},t.setBoxShadowStyles=function(e,t){e.className="cloudimage-360-box-shadow",e.style.position="absolute",e.style.zIndex="99",e.style.top="0",e.style.left="0",e.style.right="0",e.style.bottom="0",e.style.boxShadow=t},t.setView360Icon=function(e,t){e.style.background="rgba(255,255,255,0.8) url('"+t+"') 50% 50% / contain no-repeat"},t.magnify=function(e,t,i,n){var o,s;function r(t){var r,a=void 0,c=void 0;t.preventDefault(),r=function(t){var i,n=0,o=0;return t=t||window.event,i=e.getBoundingClientRect(),n=t.pageX-i.left,o=t.pageY-i.top,n-=window.pageXOffset,o-=window.pageYOffset,{x:n,y:o}}(t),a=r.x,c=r.y,a>e.offsetWidth-o/n&&(a=e.offsetWidth-o/n),a<o/n&&(a=o/n),c>e.offsetHeight-s/n&&(c=e.offsetHeight-s/n),c<s/n&&(c=s/n),i.style.left=a-o+"px",i.style.top=c-s+"px",i.style.backgroundPosition="-"+(a*n-o+3)+"px -"+(c*n-s+3)+"px"}i.setAttribute("class","img-magnifier-glass"),e.prepend(i),i.style.backgroundColor="#fff",i.style.backgroundImage="url('"+t+"')",i.style.backgroundRepeat="no-repeat",i.style.backgroundSize=e.offsetWidth*n+"px "+e.offsetHeight*n+"px",i.style.position="absolute",i.style.border="3px solid #000",i.style.borderRadius="50%",i.style.cursor="wait",i.style.lineHeight="200px",i.style.textAlign="center",i.style.zIndex="1000",i.style.width="250px",i.style.height="250px",i.style.top="-75px",i.style.right="-85px",o=i.offsetWidth/2,s=i.offsetHeight/2,i.addEventListener("mousemove",r),e.addEventListener("mousemove",r),i.addEventListener("touchmove",r),e.addEventListener("touchmove",r)},t.setMagnifyIconStyles=function(e,t){e.style.position="absolute",e.style.top=t?"35px":"5px",e.style.right="5px",e.style.width="25px",e.style.height="25px",e.style.zIndex="101",e.style.cursor="pointer",e.style.background="url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat"},t.setFullScreenModalStyles=function(e){e.style.position="fixed",e.style.top="0",e.style.bottom="0",e.style.left="0",e.style.right="0",e.style.width="100%",e.style.height="100%",e.style.zIndex="1300",e.style.background="#fff"},t.setFullScreenIconStyles=function(e){e.style.position="absolute",e.style.top="5px",e.style.right="5px",e.style.width="25px",e.style.height="25px",e.style.zIndex="101",e.style.cursor="pointer",e.style.background="url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat"},t.setCloseFullScreenViewStyles=function(e){e.style.position="absolute",e.style.top="5px",e.style.right="5px",e.style.width="25px",e.style.height="25px",e.style.zIndex="101",e.style.cursor="pointer",e.style.background="url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat"},t.getResponsiveWidthOfContainer=function(e){return(t=e)<=25?"25":t<=50?"50":(100*Math.ceil(t/100)).toString();var t},t.getSizeAccordingToPixelRatio=function(e){var t=e.toString().split("x"),i=[];return[].forEach.call(t,(function(e){i.push(e*Math.round(window.devicePixelRatio||1))})),i.join("x")},t.contain=r,t.addClass=function(e,t){e.classList?e.classList.add(t):e.className+=" "+t},t.removeClass=function(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\b)"+t.split(" ").join("|")+"(\\b|$)","gi")," ")},t.pad=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return(e+="").length>=t?e:new Array(t-e.length+1).join("0")+e}}]);

    Ersetze in der Datei /templates/tpl_modified_responsive/module/product_info/product_info_tabs_v1.html folgenden Code.

    Code: XML  [Auswählen]
        <div class="pd_imagebox">
          <div class="pd_big_image">
            <a class="cbimages" title="{$PRODUCTS_NAME|onlytext}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img itemprop="image" src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" /></a>
          </div>
          <div class="zoomtext">{#zoomtext#}</div>
        </div>
        {/if}

    mit diesem Code.

    Code: XML  [Auswählen]
      {if "`$smarty.const.DIR_FS_DOCUMENT_ROOT`images/product_images/360/id_`$PRODUCTS_ID`/"|file_exists}
          <div class="pd_imagebox" style="max-width: none !important">
              <div      
               class="cloudimage-360"
               data-folder="{$smarty.const.DIR_WS_CATALOG}images/product_images/360/id_{$PRODUCTS_ID}/"
               data-filename="img{ldelim}index{rdelim}.jpg"
               data-amount="36"
               data-magnifier="5"
               data-spin-reverse
               data-autoplay
               data-full-screen
             >
              </div>
          </div>      
          <script src="{$tpl_path}javascript/js-cloudimage-360-view.min.js"></script>  
      {else}  
        {if $PRODUCTS_IMAGE != ''}
        <div class="pd_imagebox">
          <div class="pd_big_image">
            <a class="cbimages" title="{$PRODUCTS_NAME|onlytext}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img itemprop="image" src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" /></a>
          </div>
          <div class="zoomtext">{#zoomtext#}</div>
        </div>
        {/if}
      {/if}

    Das Ergebnis sollte dann so -> https://hpzeller.com/modified2060/Testkategorie-2/Testprodukt2::2.html aussehen.

    Gruss
    Hanspeter

    RobtheTop

    • Schreiberling
    • Beiträge: 332
    Re: Data-attributes im Shop?
    Antwort #8 am: 16. Juni 2021, 13:13:30
    Wow.
    Tausend Dank
    Ein absolut perfektes Ergebnis.
    Jedenfalls in deinem Testshop.
    Sobald ich Zuhause bin, setze ich das um.
    Ich hoffe, dass sich das auch mit dem Attribute Kombinationsmanager verträgt, bzw. ein stimmiges Bild ergibt.
    Vielen Dank

    Nochmal sorry für die Eröffnung des Beitrages.
    Spätestens jetzt gehört das in den Thread für die 3D Ansicht.
    0 Antworten
    825 Aufrufe
    04. Mai 2019, 12:20:40 von sb_cbo-do
    0 Antworten
    1699 Aufrufe
    07. Mai 2015, 19:00:00 von Nils
    29 Antworten
    15339 Aufrufe
    07. Januar 2015, 18:48:20 von Bonsai
               
    anything