- Bilder in Produktgruppenverwaltung

git-svn-id: https://[internal]/wordpress/plugins/wpsg4@8199 0d5edaf7-2b12-4e95-93f4-047927463d4b

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>