![]() Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/cartforge.co/app/design/frontend/Smartwave/porto/ |
<?php /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ // @codingStandardsIgnoreFile /** * Product media data template * * @var $block \Magento\Catalog\Block\Product\View\Gallery */ ?> <?php $helper = $block->getData('imageHelper'); $porto_helper = $this->helper('Smartwave\Porto\Helper\Data'); $_config = $porto_helper->getConfig('porto_settings/product'); $image_width = (isset($_config['ratio_width']) && $_config['ratio_width'])?$_config['ratio_width']:600; $image_height = (isset($_config['ratio_height']) && $_config['ratio_height'])?$_config['ratio_height']:600; $aspect_ratio = (isset($_config['aspect_ratio']))?$_config['aspect_ratio']:0; if ($aspect_ratio) $image_height = $image_width; $thumb_width = 75; $thumb_height = 75 * $image_height / $image_width; if ($aspect_ratio) $thumb_height = 75; $_product = $block->getProduct(); $page_type = $_product->getData('product_page_type'); if(!$page_type) $page_type = isset($_config['product_page_type'])?$_config['product_page_type']:''; $image_size = $_product->getData('product_image_size'); $thumbnail_type = (isset($_config['vertical_thumbnail']) && $_config['vertical_thumbnail'])?'vertical':'horizontal'; if($page_type == 'wide_grid') { $thumbnail_type = 'vertical'; $thumb_width = 100; $thumb_height = 100; } ?> <?php if($page_type == 'carousel'): ?> <?php $gallery_images = json_decode($block->getGalleryImagesJson()); ?> <div id="gallery_images" class="owl-carousel product-image-carousel"> <?php foreach($gallery_images as $gallery_image): ?> <div class="item"> <img src="<?php echo $gallery_image->img; ?>" alt=""/> </div> <?php endforeach; ?> </div> <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")); ?></div> <div class="fullwidth-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block_2")); ?></div> <script type="text/javascript"> require([ 'jquery', 'owl.carousel/owl.carousel.min' ], function ($) { $("#gallery_images").owlCarousel({ autoplay: false, autoplayTimeout: 5000, autoplayHoverPause: true, loop: true, navRewind: true, margin: 0, nav: true, navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"], dots: false, responsive: { 0: { items:1 }, 768: { items:1 }, 992: { items:2 }, 1200: { items:3 } } }); $(document).ready(function(){ $(".product-info-main > .product-info-price").before($(".short-custom-block").show().detach()); $(".page-main").after($(".fullwidth-custom-block").show().detach()); $(".product-info-main > .prev-next-products").after($(".product-social-links").detach()); }); }); </script> <?php elseif($page_type == 'grid'): ?> <?php $gallery_images = json_decode($block->getGalleryImagesJson()); ?> <div id="gallery_images" class="row"> <?php foreach($gallery_images as $gallery_image): ?> <div class="col-sm-6"> <div class="product-image-grid"> <img src="<?php echo $gallery_image->img; ?>" alt=""/> </div> </div> <?php endforeach; ?> </div> <?php elseif($page_type == 'sticky_right'): ?> <?php $gallery_images = json_decode($block->getGalleryImagesJson()); ?> <div id="gallery_images"> <?php foreach($gallery_images as $gallery_image): ?> <div class="product-image-list"> <img src="<?php echo $gallery_image->img; ?>" alt=""/> </div> <?php endforeach; ?> </div> <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")); ?></div> <script type="text/javascript"> require([ 'jquery' ], function ($) { var product_info_top = 0; var product_image_box_pos = $(".product.media").offset().top; $(window).scroll(function(){ product_image_box_pos = $(".product.media").offset().top; if($(window).innerWidth() >= 992) { $(".product-info-main").each(function(){ if(($(window).scrollTop() > product_image_box_pos - 50) && (product_image_box_pos + $(".product.media").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { product_info_top = $(window).scrollTop() - product_image_box_pos + 50; $(this).css('top',product_info_top + 'px'); } else if ($(window).scrollTop() < product_image_box_pos || $(".product.media").outerHeight() < $(this).outerHeight()) { product_info_top = 0; $(this).css('top',product_info_top + 'px'); } else { product_info_top = $(".product.media").outerHeight() - $(this).outerHeight(); $(this).css('top',product_info_top + 'px'); } }); } else { product_info_top = 0; $(".product-info-main").css('top',product_info_top + 'px'); } }); $(window).resize(function(){ product_image_box_pos = $(".product.media").offset().top; if($(window).innerWidth() >= 992) { $(".product-info-main").each(function(){ if(($(window).scrollTop() > product_image_box_pos - 50) && (product_image_box_pos + $(".product.media").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { product_info_top = $(window).scrollTop() - product_image_box_pos + 50; $(this).css('top',product_info_top + 'px'); } else if ($(window).scrollTop() < product_image_box_pos || $(".product.media").outerHeight() < $(this).outerHeight()) { product_info_top = 0; $(this).css('top',product_info_top + 'px'); } else { product_info_top = $(".product.media").outerHeight() - $(this).outerHeight(); $(this).css('top',product_info_top + 'px'); } }); } else { product_info_top = 0; $(".product-info-main").css('top',product_info_top + 'px'); } }); }); </script> <?php elseif($page_type == 'fullwidth'): ?> <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> <div data-role="loader" class="loading-mask"> <div class="loader"> <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>" alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>"> </div> </div> </div> <!--Fix for jumping content. Loader must be the same size as gallery.--> <script> var config = { "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height') ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>, "navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>", <?php if (!$aspect_ratio): ?> "height": <?php /* @escapeNotVerified */ echo $image_height; ?> <?php endif; ?> }, thumbBarHeight = 0, loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0]; if (config.navtype === 'horizontal') { thumbBarHeight = config.thumbheight; } loader.style.paddingBottom = ( config.height / config.width * 100) + "%"; </script> <script type="text/x-magento-init"> { "[data-gallery-role=gallery-placeholder]": { "mage/gallery/gallery": { "mixins":["magnifier/magnify"], "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>, "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>, "options": { "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>", <?php if (($block->getVar("gallery/loop"))): ?> "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>, <?php endif; ?> <?php if (($block->getVar("gallery/keyboard"))): ?> "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>, <?php endif; ?> <?php if (($block->getVar("gallery/arrows"))): ?> "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>, <?php endif; ?> <?php if (($block->getVar("gallery/allowfullscreen"))): ?> "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>, <?php endif; ?> <?php if (($block->getVar("gallery/caption"))): ?> "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>, <?php endif; ?> "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, "thumbwidth": <?php /* @escapeNotVerified */ echo $thumb_width; ?>, "thumbheight": <?php /* @escapeNotVerified */ echo $thumb_height; ?>, <?php if(!$aspect_ratio): ?> "height": <?php /* @escapeNotVerified */ echo $image_height; ?>, <?php endif; ?> <?php if ($block->getVar("gallery/transition/duration")): ?> "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>, <?php endif; ?> "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>", <?php if (($block->getVar("gallery/navarrows"))): ?> "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>, <?php endif; ?> "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>", "navdir": "vertical" }, "fullscreen": { "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>", <?php if ($block->getVar("gallery/fullscreen/loop")): ?> "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>, <?php endif; ?> "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>", <?php if ($block->getVar("gallery/transition/navarrows")): ?> "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>, <?php endif; ?> "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>", <?php if ($block->getVar("gallery/fullscreen/arrows")): ?> "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>, <?php endif; ?> <?php if ($block->getVar("gallery/fullscreen/caption")): ?> "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>, <?php endif; ?> <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?> "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>, <?php endif; ?> "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>" }, "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?> } } } </script> <div class="fullwidth-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")); ?></div> <script type="text/javascript"> require([ 'jquery' ], function($){ $(document).ready(function(){ $(".product.info.detailed").detach().appendTo($(".product-info-main")); $(".page-main").after($(".fullwidth-custom-block").show().detach()); }); var product_image_box_top = 0; var product_info_pos = $(".product-info-main").offset().top; $(window).scroll(function(){ product_info_pos = $(".product-info-main").offset().top; if($(window).innerWidth() >= 768) { $(".product.media").each(function(){ if(($(window).scrollTop() > product_info_pos - 50) && (product_info_pos + $(".product-info-main").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { product_image_box_top = $(window).scrollTop() - product_info_pos + 50; $(this).css('top',product_image_box_top + 'px'); } else if ($(window).scrollTop() < product_info_pos) { product_image_box_top = 0; $(this).css('top',product_image_box_top + 'px'); } }); } else { product_image_box_top = 0; $(".product.media").css('top',product_image_box_top + 'px'); } }); $(window).resize(function(){ product_info_pos = $(".product-info-main").offset().top; if($(window).innerWidth() >= 768) { $(".product.media").each(function(){ if(($(window).scrollTop() > product_info_pos - 50) && (product_info_pos + $(".product-info-main").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { product_image_box_top = $(window).scrollTop() - product_info_pos + 50; $(this).css('top',product_image_box_top + 'px'); } else if ($(window).scrollTop() < product_info_pos) { product_image_box_top = 0; $(this).css('top',product_image_box_top + 'px'); } }); } else { product_image_box_top = 0; $(".product.media").css('top',product_image_box_top + 'px'); } }); }); </script> <?php else: ?> <?php $images = $block->getGalleryImages()->getItems(); $mainImage = current(array_filter($images, function ($img) use ($block) { return $block->isMainImage($img); })); if (!empty($images) && empty($mainImage)) { $mainImage = $block->getGalleryImages()->getFirstItem(); } $mainImageData = $mainImage ? $mainImage->getData('medium_image_url') : $helper->getDefaultPlaceholderUrl('image'); ?> <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> <img alt="main product photo" class="gallery-placeholder__image" src="<?= /* @noEscape */ $mainImageData ?>" /> <div data-role="loader" class="loading-mask"> <div class="loader"> <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>" alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>"> </div> </div> </div> <!--Fix for jumping content. Loader must be the same size as gallery.--> <script> var config = { "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height') ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>, "navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>", <?php if (!$aspect_ratio): ?> "height": <?php /* @escapeNotVerified */ echo $image_height; ?> <?php endif; ?> }, thumbBarHeight = 0, loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0]; if (config.navtype === 'horizontal') { thumbBarHeight = config.thumbheight; } loader.style.paddingBottom = ( config.height / config.width * 100) + "%"; </script> <script type="text/x-magento-init"> { "[data-gallery-role=gallery-placeholder]": { "mage/gallery/gallery": { "mixins":["magnifier/magnify"], "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>, "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>, "options": { "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>", <?php if (($block->getVar("gallery/loop"))): ?> "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>, <?php endif; ?> <?php if (($block->getVar("gallery/keyboard"))): ?> "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>, <?php endif; ?> <?php if (($block->getVar("gallery/arrows"))): ?> "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>, <?php endif; ?> <?php if (($block->getVar("gallery/allowfullscreen"))): ?> "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>, <?php endif; ?> <?php if (($block->getVar("gallery/caption"))): ?> "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>, <?php endif; ?> "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, "thumbwidth": <?php /* @escapeNotVerified */ echo $thumb_width; ?>, "thumbheight": <?php /* @escapeNotVerified */ echo $thumb_height; ?>, <?php if(!$aspect_ratio): ?> "height": <?php /* @escapeNotVerified */ echo $image_height; ?>, <?php endif; ?> <?php if ($block->getVar("gallery/transition/duration")): ?> "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>, <?php endif; ?> "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>", <?php if (($block->getVar("gallery/navarrows"))): ?> "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>, <?php endif; ?> "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>", "navdir": "<?= /* @escapeNotVerified */ $thumbnail_type ?>" }, "fullscreen": { "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>", <?php if ($block->getVar("gallery/fullscreen/loop")): ?> "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>, <?php endif; ?> "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>", <?php if ($block->getVar("gallery/transition/navarrows")): ?> "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>, <?php endif; ?> "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>", <?php if ($block->getVar("gallery/fullscreen/arrows")): ?> "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>, <?php endif; ?> <?php if ($block->getVar("gallery/fullscreen/caption")): ?> "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>, <?php endif; ?> <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?> "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>, <?php endif; ?> "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>" }, "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?> } } } </script> <script type="text/javascript"> require([ 'jquery', 'Magento_Catalog/js/jquery.zoom.min' ], function ($) { var loaded = false; $(window).load(function(){ if($('.loading-mask').length)$('.loading-mask').remove(); }); $('.product.media .gallery-placeholder').bind("DOMSubtreeModified",function(){ $('.product.media .fotorama').on('fotorama:ready', function (e, fotorama, extra) { loaded = false; $('.product.media .fotorama').on('fotorama:load', function (e, fotorama, extra) { if(!loaded){ $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); $('.product.media .fotorama__stage .fotorama__active').zoom({ touch:false }); loaded = true; } }); $('.product.media .fotorama').on('fotorama:showend', function (e, fotorama, extra) { $('.product.media .fotorama__stage .fotorama__active').zoom({ touch:false }); }); $('.fotorama').off('fotorama:fullscreenenter').on('fotorama:fullscreenenter', function (e, fotorama, extra) { $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); $('img.zoomImg').remove(); }); $('.fotorama').off('fotorama:fullscreenexit').on('fotorama:fullscreenexit', function (e, fotorama, extra) { $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); $('img.zoomImg').remove(); $('img.fotorama__img').not('.fotorama__img--full').each(function(){ $(this).after($(this).parent().children("img.fotorama__img--full")); }); $('.product.media .fotorama__stage .fotorama__active').zoom({ touch:false }); $('.product.media .fotorama').off('fotorama:showend').on('fotorama:showend', function (e, fotorama, extra) { $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); $('.product.media .fotorama__stage .fotorama__active').zoom({ touch:false }); }); }); }); }); }); </script> <?php endif; ?> <?php if ($image_size): ?> <style type="text/css"> @media (min-width: 768px) { .product.media { width: <?php echo $image_size * 100 / 12 - 2; ?>% !important; } .product-info-main { width: <?php echo (12 - $image_size) * 100 / 12; ?>% !important; } } </style> <?php endif; ?>