Feature: Bilder können an Produktgruppen angehängt werden

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

4 files changed, 284 insertions, 0 deletions

diff --git a/views/mods/mod_productgroups/add.phtml b/views/mods/mod_productgroups/add.phtml
index 6de468e..53c7585 100644
--- a/views/mods/mod_productgroups/add.phtml
+++ b/views/mods/mod_productgroups/add.phtml
@@ -4,6 +4,15 @@
 	 * Template für das Anlegen/Bearbeiten einer Produktgruppe

 	 */

 

+    /** @var \wpsg\productgroup|null $oProductgroup */

+    $oProductgroup = null;

+

+    if (intval($_REQUEST['edit_id']??0) > 0) {

+

+        $oProductgroup = wpsg\productgroup::getInstance(intval($_REQUEST['edit_id']));

+

+    }

+

 ?>

 

 <div class="wpsg_productgroups" id="wpsg-bs">

@@ -61,6 +70,78 @@
                         <?php echo wpsg_drawForm_Select('template_file', __('Template', 'wpsg'), $this->view['templates'], $this->view['data']['template_file']); ?>

                         <?php echo wpsg_drawForm_Select('infopage', __('Info Seite', 'wpsg'), $this->view['pages'], $this->view['data']['infopage']); ?>

 

+                        <div class="form-group form-group-sm ">

+                            <label class="col-sm-6 control-label"><?php echo __('Produktgruppenbild', 'wpsg'); ?></label>

+                            <div class="col-sm-6">

+                                <div class="wpsg_field_wrap">

+                                    <div id="imageBox"><?php

+

+                                        if ($oProductgroup !== null) {

+

+                                            if ($oProductgroup->getImage() > 0) {

+

+                                                echo wp_get_attachment_image($oProductgroup->getImage(), 'full', false, [

+                                                    'style' => 'max-width:100%; height:auto; margin-bottom:8px;'

+                                                ]);

+

+                                            }

+

+                                        }

+

+                                    ?></div>

+

+                                    <input value="Mediathek" class="button" type="button" style="text-align:center;" size="10" id="btnAddImgLink" />

+                                    <input type="hidden" name="image" value="<?php echo (($oProductgroup !== null)?$oProductgroup->getImage():0); ?>" id="image_input" />

+

+                                    <script>

+

+                                        let wpframe = undefined;

+                                        let imageBox = document.getElementById('imageBox');

+                                        let elImageInput = document.getElementById('image_input');

+

+                                        document.getElementById('btnAddImgLink').addEventListener('click', (event) => {

+

+                                            event.preventDefault();

+

+                                            if (wpframe !== undefined) { wpframe.open(); return; }

+

+                                            wpframe = wp.media.frames.file_frame = wp.media({

+                                                title: "<?php echo __('Auswählen oder Hochladen von Medien', 'wpsg'); ?>",

+                                                button: { text: "<?php echo __('Medien benutzen', 'wpsg'); ?>" },

+                                                multiple: false

+                                            });

+

+                                            wpframe.on('select', () => {

+

+                                                let attachments = wpframe.state().get('selection').map((attachment) => {

+

+                                                    attachment.toJSON();

+

+                                                    return attachment;

+

+                                                });

+

+                                                for (let i = 0; i < attachments.length; ++i) {

+

+                                                    let attachment = attachments[i];

+

+                                                    imageBox.innerHTML = '<img src="' + attachment.attributes.url + '" alt="" style="max-width:100%; margin-bottom:8px;"/>';

+                                                    elImageInput.value = attachment.attributes.id;

+

+                                                }

+

+                                            });

+

+                                            wpframe.open();

+

+                                        });

+

+                                    </script>

+                                </div>

+                            </div>

+                            <div class="clearfix wpsg_clear"></div>

+                        </div>

+

                     <?php echo wpsg_drawForm_AdminboxEnd(); ?>

 

                 </div>

diff --git a/views/mods/mod_productgroups/settings_edit.phtml b/views/mods/mod_productgroups/settings_edit.phtml
index 6546985..2d00f6c 100644
--- a/views/mods/mod_productgroups/settings_edit.phtml
+++ b/views/mods/mod_productgroups/settings_edit.phtml
@@ -6,6 +6,10 @@
 

 ?>

 <?php echo wpsg_drawForm_Select('wpsg_productgroups_page', __('Produktgruppenübersichtsseite', 'wpsg'), $this->view['pages'], $this->get_option('wpsg_productgroups_page'), array('help' => 'wpsg_mod_productgroups_page')); ?>

+<?php echo wpsg_drawForm_Select('wpsg_productgroups_page_layout', __('Layout der Übersichtsseite', 'wpsg'), [

+    '0' => 'Layout 1 (show.phtml)',

+    '1' => 'Layout 2 (show_2.phml)'

+], $this->get_option('wpsg_productgroups_page_layout'), ['help' => 'wpsg_productgroups_page_layout']); ?>

 <?php echo wpsg_drawForm_Select('wpsg_productgroups_order', __('Sortierung innerhalb der Gruppe', 'wpsg'), array(

 	'id' => __('Nach ID', 'wpsg'),

 	'alphabetisch' => __('Alphabetisch', 'wpsg'),

diff --git a/views/mods/mod_productgroups/show_2.phtml b/views/mods/mod_productgroups/show_2.phtml
new file mode 100644
index 0000000..9c8d12a
--- /dev/null
+++ b/views/mods/mod_productgroups/show_2.phtml
@@ -0,0 +1,81 @@
+<?php
+
+    /** Template für die Anzeige von Produktgruppen Layout 2 */
+
+    namespace wpsg;
+
+    $page_url = \get_permalink(\get_the_ID());
+    $page_url .= ((strpos($page_url, '?') === false)?'?':'&');
+
+    if (isset($_REQUEST['show'])) {
+
+        $oProductgroup = productgroup::getInstance(intval($_REQUEST['show']));
+        $arProducts = $oProductgroup->findProducts();
+        $view = 'products';
+
+    } else {
+
+        $arProductgroups = productgroup::find();
+        $view = 'productgroups';
+
+    }
+
+?>
+
+<div class="wpsg_mod_productgroup_layout2_wrap">
+    <?php if ($view === 'products') { ?>
+
+        <div class="wpsg_mod_productgroup_layout2 products">
+
+            <?php foreach ($arProducts as $oProduct) { ?>
+
+                <?php echo $this->renderProdukt($oProduct->getId(), $oProductgroup->getTemplate()); ?>
+
+            <?php } ?>
+
+            <br />
+
+            <a href="<?php echo $page_url; ?>"><?php echo __('Zurück zur Übersicht', 'wpsg'); ?></a>
+            
+        </div>
+
+    <?php } else if ($view === 'productgroups') { ?>
+
+        <div class="wpsg_mod_productgroup_layout2 productgroups">
+
+            <?php foreach ($arProductgroups as $k => $oProductgroup) { ?>
+
+                <a href="<?php echo $page_url; ?>show=<?php echo $oProductgroup->getId(); ?>" class="productgroup">
+
+                    <div class="title"><?php echo $oProductgroup->getName(); ?></div>
+
+                    <?php echo \wp_get_attachment_image($oProductgroup->getImage(), 'full', false, [
+                        'class' => 'bg'
+                    ]); ?>
+
+                </a>
+
+            <?php } ?>
+
+        </div>
+
+        <style>
+
+            .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: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; }
+
+            }
+
+        </style>
+
+    <?php } ?>
+</div>
diff --git a/views/produkttemplates/standard3.phtml b/views/produkttemplates/standard3.phtml
new file mode 100644
index 0000000..c4c7742
--- /dev/null
+++ b/views/produkttemplates/standard3.phtml
@@ -0,0 +1,118 @@
+<?php

+

+	/*

+	 * Template für das Produkt im Frontend Layout 3

+	 */

+

+	/** @var wpsg_product $oProduct */

+	$oProduct = $this->view['oProduct'];

+

+    $arAttachmentIDsAll = $this->imagehandler->getAttachmentIDs($this->view['data']['product_id']);

+

+?>

+

+<div class="wpsg_produkt_wrapper layout3">

+

+    <input type="hidden" name="wpsg_post_id" value="<?php echo get_the_ID(); ?>" />

+	<input type="hidden" name="titleDisplayed" value="<?php echo $this->titleDisplayed; ?>" />

+

+    <div class="col_wrap">

+        <div class="col image">

+            <div class="thumbnails">

+

+                <?php foreach ($arAttachmentIDsAll as $k => $image_id) { ?>

+

+                    <?php echo \wp_get_attachment_image($image_id, 'small', false, [

+                        'data-index' => $k

+                    ]); ?>

+

+                <?php } ?>

+

+            </div>

+            <div class="view">

+                <div class="wpsg_product_slider">

+

+                    <?php foreach ($arAttachmentIDsAll as $k => $image_id) { ?>

+

+                        <div>

+                            <div class="ds_image_zoom">

+                                <?php echo \wp_get_attachment_image($image_id, 'full', false, [

+                                    'data-index' => $k

+                                ]); ?>

+                            </div>

+                        </div>

+

+                    <?php } ?>

+

+                </div>

+            </div>

+        </div>

+        <div>

+            TODO

+        </div>

+    </div>

+

+    <style>

+

+        .wpsg_produkt_wrapper.layout3 .col_wrap { display:flex; width:100%; justify-content:stretch; gap:1rem; }

+        .wpsg_produkt_wrapper.layout3 .col_wrap > * { flex-grow:1; flex-shrink:0; width:0; }

+        .wpsg_produkt_wrapper.layout3 .col_wrap > .col.image { display:flex; justify-content:stretch; gap:0.5rem; }

+        .wpsg_produkt_wrapper.layout3 .col_wrap > .col.image .thumbnails { width:20%; flex-shrink:0; }

+        .wpsg_produkt_wrapper.layout3 .col_wrap > .col.image .thumbnails img { aspect-ratio: 1 / 1; object-fit:cover; object-position:50% 50%; }

+        .wpsg_produkt_wrapper img { max-width:100%; height:auto; }

+

+        .ds_image_zoom.attached { position:relative; overflow:hidden; cursor:-webkit-zoom-in; cursor:zoom-in; }

+        .ds_image_zoom.attached img { all:initial; position:absolute; left:0; top:0; /* transition:width 0.3s, height 0.3s, left 0.3s, top 0.3s; */ }

+

+    </style>

+

+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">

+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>

+    <script src="http://127.0.0.1:8080/dsimagezoom.js"></script>

+

+    <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

+        });

+

+        for (const el_tn of document.querySelectorAll('.wpsg_produkt_wrapper.layout3 .thumbnails img')) {

+

+            el_tn.addEventListener('click', (event) => {

+

+                slider.goTo(el_tn.getAttribute('data-index'));

+

+            });

+

+        }

+

+        window.addEventListener('load', () => {

+

+            slider.goTo(0);

+

+        });

+

+        slider.events.on('transitionEnd', (event) => {

+

+            DsImageZoom.init(document.querySelectorAll('.tns-slide-active .ds_image_zoom'));

+

+        });

+

+        slider.events.on('transitionStart', (event) => {

+

+            DsImageZoom.destroy(document.querySelectorAll('.tns-item .ds_image_zoom'));

+

+        });

+

+    </script>

+

+</div>
\ No newline at end of file