From e91fbd59950b1766789da82f7e280e46088dc675 Mon Sep 17 00:00:00 2001
From: Daniel Schmitzer <noreply@maennchen1.de>
Date: Mon, 16 Jan 2023 12:35:19 +0000
Subject: - Bilder in Produktgruppenverwaltung

git-svn-id: https://[internal]/wordpress/plugins/wpsg4@8199 0d5edaf7-2b12-4e95-93f4-047927463d4b
---
 views/mods/mod_productgroups/show_2.phtml | 10 ++--
 views/produkttemplates/standard3.phtml    | 96 ++++++++++++++++++++++---------
 2 files changed, 73 insertions(+), 33 deletions(-)

diff --git a/views/mods/mod_productgroups/show_2.phtml b/views/mods/mod_productgroups/show_2.phtml
index 135791b..96ff569 100644
--- a/views/mods/mod_productgroups/show_2.phtml
+++ b/views/mods/mod_productgroups/show_2.phtml
@@ -47,9 +47,9 @@
 
                 <a href="<?php echo $page_url; ?>show=<?php echo $oProductgroup->getId(); ?>" class="productgroup">
 
-                    <div class="title"><?php echo $oProductgroup->getName(); ?></div>
+                    <div class="title"><?php echo $oProductgroup->getLabel(); ?></div>
 
-                    <?php echo \wp_get_attachment_image($oProductgroup->getImage(), 'full', false, [
+                    <?php echo \wp_get_attachment_image($oProductgroup->getImage(), [462, 462], false, [
                         'class' => 'bg'
                     ]); ?>
 
@@ -63,15 +63,15 @@
 
             .wpsg_mod_productgroup_layout2.productgroups { all:revert; display:grid; grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(10, 1fr); grid-column-gap:1rem; grid-row-gap:1rem; }
             .wpsg_mod_productgroup_layout2.productgroups > .productgroup { grid-column:span 2; padding-top:100%; text-decoration:none; position:relative; overflow:hidden; transition:all 0.3s ease; overflow:hidden width:100%; }
-            .wpsg_mod_productgroup_layout2.productgroups > .productgroup  .bg { position:absolute; left:0; top:0; object-position:50% 50%; background-color:#DEDEDE; width:100%; height:100%; object-fit:cover; z-index:-1; }
-            .wpsg_mod_productgroup_layout2.productgroups > .productgroup .title {  border-radius:2px; transition:all 0.3s ease; position:absolute; left:1rem; top:1rem; background-color:#000000; color:#FFFFFF; padding:0 0.5rem; }
+            .wpsg_mod_productgroup_layout2.productgroups > .productgroup  .bg { position:absolute; left:0; top:0; object-position:50% 50%; background-color:#DEDEDE; width:100%; height:100%; object-fit:cover; z-index:1; }
+            .wpsg_mod_productgroup_layout2.productgroups > .productgroup .title { z-index:2; border-radius:2px; transition:all 0.3s ease; position:absolute; left:1rem; top:1rem; background-color:#000000; color:#FFFFFF; padding:0 0.5rem; }
             .wpsg_mod_productgroup_layout2.productgroups > .productgroup:hover .title { background-color:#FFFFFF; color:#000000; }
 
             @media screen and (min-width:768px) {
 
                 .wpsg_mod_productgroup_layout2.productgroups > .productgroup { padding-top:initial; grid-column:initial; }
                 .wpsg_mod_productgroup_layout2.productgroups > .productgroup:nth-child(6n + 1),
-                .wpsg_mod_productgroup_layout2.productgroups > .productgroup:nth-child(6n + 5) { grid-row:span 2; padding-top:200px; }
+                .wpsg_mod_productgroup_layout2.productgroups > .productgroup:nth-child(6n + 5) { grid-row:span 2; padding-top:100%; }
 
             }
 
diff --git a/views/produkttemplates/standard3.phtml b/views/produkttemplates/standard3.phtml
index 97ca350..4f06af1 100644
--- a/views/produkttemplates/standard3.phtml
+++ b/views/produkttemplates/standard3.phtml
@@ -15,6 +15,7 @@
 
     <input type="hidden" name="wpsg_post_id" value="<?php echo get_the_ID(); ?>" />
 	<input type="hidden" name="titleDisplayed" value="<?php echo $this->titleDisplayed; ?>" />
+	<input type="hidden" name="wpsg[template]" value="standard3.phtml" />
 
     <div class="col_wrap">
         <div class="col image">
@@ -30,12 +31,17 @@
 
             </div>
             <div class="view">
+                <?php foreach ($arAttachmentIDsAll as $k => $image_id) { ?>
+                    <a class="thickbox" id="<?php echo $this->getTemplateIndex(); ?>_<?php echo $k; ?>" rel="gallery-<?php echo $this->getTemplateIndex(); ?>" href="<?php echo \wp_get_attachment_image_src($image_id, 'full')[0]; ?>"></a>
+                <?php } ?>
                 <div class="wpsg_product_slider">
 
                     <?php foreach ($arAttachmentIDsAll as $k => $image_id) { ?>
 
                         <div>
-                            <div class="ds_image_zoom">
+                            <div class="ds_image_zoom" data-image-index="<?php echo $k; ?>"
+                                onclick="document.getElementById('<?php echo $this->getTemplateIndex(); ?>_<?php echo $k; ?>').click();"
+                            >
                                 <?php echo \wp_get_attachment_image($image_id, 'full', false, [
                                     'data-index' => $k
                                 ]); ?>
@@ -405,6 +411,8 @@
 
     <?php if ($this->getTemplateIndex() === 1) { ?>
 
+        <link rel="stylesheet" href="<?php echo $this->getRessourceURL('css/tiny-slider.-2.9.4.min.css'); ?>">
+
         <style>
 
             .wpsg_produkt_wrapper.layout3 .col_wrap { display:flex; width:100%; justify-content:stretch; gap:1rem; }
@@ -419,7 +427,10 @@
 
         </style>
 
-        <link rel="stylesheet" href="<?php echo $this->getRessourceURL('css/tiny-slider.-2.9.4.min.css'); ?>">
+    <?php } ?>
+
+    <?php if ($this->getTemplateIndex() === 1 && ($_REQUEST['action']??'') !== 'wpsg_productvariants_switch') { ?>
+
         <script src="<?php echo $this->getRessourceURL('js/tiny-slider-2.9.2.min.js'); ?>"></script>
         <script src="<?php echo $this->getRessourceURL('js/dsimagezoom.min.js'); ?>"></script>
 
@@ -427,46 +438,75 @@
 
     <script>
 
-        const slider = tns({
-            container: '.wpsg_product_slider',
-            items: 1,
-            slideBy: 1,
-            controls: false,
-            autoplayButton: false,
-            nav: false,
-            arrowKeys: false,
-            autoplayButtonOutput: false,
-            autoplay: false,
-            autoHeight: true
-        });
+        if (!wpsg_standard3_slider) { var wpsg_standard3_slider = {}; }
+
+        if (!wpsg_standard3_load) {
+
+            function wpsg_standard3_load(templateIndex) {
+
+                if (wpsg_standard3_slider[templateIndex]) {
+
+                    wpsg_standard3_slider[templateIndex] = wpsg_standard3_slider[templateIndex].rebuild();
+
+                } else {
+
+                    wpsg_standard3_slider[templateIndex] = tns({
+                        container: '#wpsg_produktform_' + templateIndex + ' .wpsg_product_slider',
+                        items: 1,
+                        slideBy: 1,
+                        controls: false,
+                        autoplayButton: false,
+                        nav: false,
+                        arrowKeys: false,
+                        autoplayButtonOutput: false,
+                        autoplay: false,
+                        autoHeight: true,
+                        onInit: () => {
+
+                        }
+                    });
+
+                }
+
+                wpsg_standard3_slider[templateIndex].events.on('transitionEnd', (event) => {
+
+                    DsImageZoom.init(document.querySelectorAll('#wpsg_produktform_' + templateIndex + ' .tns-slide-active .ds_image_zoom'));
+
+                });
+
+                wpsg_standard3_slider[templateIndex].events.on('transitionStart', (event) => {
+
+                    DsImageZoom.destroy(document.querySelectorAll('#wpsg_produktform_' + templateIndex + ' .tns-item .ds_image_zoom'));
+
+                });
 
-        for (const el_tn of document.querySelectorAll('.wpsg_produkt_wrapper.layout3 .thumbnails img')) {
+                for (const el_tn of document.querySelectorAll('#wpsg_produktform_' + templateIndex + ' .wpsg_produkt_wrapper.layout3 .thumbnails img')) {
 
-            el_tn.addEventListener('click', (event) => {
+                    el_tn.addEventListener('click', (event) => {
 
-                slider.goTo(el_tn.getAttribute('data-index'));
+                        wpsg_standard3_slider[templateIndex].goTo(el_tn.getAttribute('data-index'));
 
-            });
+                    });
 
-        }
+                }
 
-        window.addEventListener('load', () => {
+                wpsg_standard3_slider[templateIndex].goTo(0);
 
-            slider.goTo(0);
+            };
 
-        });
+        };
 
-        slider.events.on('transitionEnd', (event) => {
+        window.addEventListener('load', () => { wpsg_standard3_load(<?php echo $this->getTemplateIndex(); ?>); });
 
-            DsImageZoom.init(document.querySelectorAll('.tns-slide-active .ds_image_zoom'));
+        <?php if (($_REQUEST['action']??'') === 'wpsg_productvariants_switch') { ?>
 
-        });
+            window.setTimeout(() => {
 
-        slider.events.on('transitionStart', (event) => {
+                wpsg_standard3_load(<?php echo $this->getTemplateIndex(); ?>);
 
-            DsImageZoom.destroy(document.querySelectorAll('.tns-item .ds_image_zoom'));
+            }, 100);
 
-        });
+        <?php } ?>
 
     </script>
 
-- 
cgit v1.2.3