diff options
| -rw-r--r-- | views/mods/mod_productgroups/show_2.phtml | 10 | ||||
| -rw-r--r-- | 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>
|