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

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

3 files changed, 166 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>