I want to change size and layout product detail:
from:
similar to:
details.phtml
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
$_config = $this->helper('Sm\Market\Helper\Data');
$tabStyle = $_config->getProductDetail('tab_style');
$show_custom_tab = $_config->getProductDetail('show_custom_tab');
$custom_tab_name = $_config->getProductDetail('custom_tab_name');
$customtab_content = $_config->getProductDetail('customtab_content');
?>
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')): ?>
<div class="product info detailed">
<?php $layout = $block->getLayout(); ?>
<div class="product data items <?php echo $tabStyle . '-style' ?>" data-mage-init='{"tabs":{"openedState":"active"}}'>
<?php if ($tabStyle == "default" || $tabStyle == "vertical") { ?>
<ul class="resp-tabs-list">
<?php foreach ($detailedInfoGroup as $name): ?>
<?php
$html = $layout->renderElement($name);
if (!trim($html)) {
continue;
}
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<li class="data item title"
aria-labeledby="tab-label-<?= /* @escapeNotVerified */
$alias ?>-title"
data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */
$alias ?>">
<a class="data switch"
tabindex="-1"
data-toggle="switch"
href="#<?= /* @escapeNotVerified */
$alias ?>"
id="tab-label-<?= /* @escapeNotVerified */
$alias ?>-title">
<?= /* @escapeNotVerified */
$label ?>
</a>
</li>
<?php endforeach; ?>
<?php if ($show_custom_tab) { ?>
<li id="tab-label-customtab" class="data item title" aria-labeledby="tab-label-customtab-title" data-role="collapsible" role="tab" data-collapsible="true" aria-controls="product.info.customtab" aria-selected="false" aria-expanded="true" tabindex="0">
<a class="data switch"
tabindex="-1"
data-toggle="switch"
href="#<?= /* @escapeNotVerified */
$alias ?>"
id="tab-label-<?= /* @escapeNotVerified */
$alias ?>-title">
<?php echo $custom_tab_name ?>
</a>
</li>
<?php } ?>
</ul>
<div class="resp-tabs-container">
<?php foreach ($detailedInfoGroup as $name): ?>
<?php
$html = $layout->renderElement($name);
if (!trim($html)) {
continue;
}
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<div class="data item content resp-tab-content" id="<?= /* @escapeNotVerified */
$alias ?>" data-role="content">
<?= /* @escapeNotVerified */
$html ?>
</div>
<?php endforeach; ?>
<?php if ($show_custom_tab) { ?>
<div class="data item content resp-tab-content" id="customtab" data-role="content">
<?php
echo $customtab_content;
?>
</div>
<?php } ?>
</div>
<?php } else { ?>
<?php foreach ($detailedInfoGroup as $name): ?>
<?php
$html = $layout->renderElement($name);
if (!trim($html)) {
continue;
}
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<h2 class="data item title resp-accordion"
aria-labeledby="tab-label-<?= /* @escapeNotVerified */
$alias ?>-title"
data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */
$alias ?>">
<a class="data switch"
tabindex="-1"
data-toggle="switch"
href="#<?= /* @escapeNotVerified */
$alias ?>"
id="tab-label-<?= /* @escapeNotVerified */
$alias ?>-title">
<?= /* @escapeNotVerified */
$label ?>
</a>
</h2>
<div class="data item content resp-tab-content" id="<?= /* @escapeNotVerified */
$alias ?>" data-role="content">
<?= /* @escapeNotVerified */
$html ?>
</div>
<?php endforeach; ?>
<?php if ($show_custom_tab) { ?>
<h2 id="tab-label-customtab" class="data item title resp-accordion" aria-labeledby="tab-label-customtab-title" data-role="collapsible" role="tab" data-collapsible="true" aria-controls="product.info.customtab" aria-selected="false" aria-expanded="true" tabindex="0">
<a class="data switch"
tabindex="-1"
data-toggle="switch"
href="#<?= /* @escapeNotVerified */
$alias ?>"
id="tab-label-<?= /* @escapeNotVerified */
$alias ?>-title">
<?php echo $custom_tab_name ?>
</a>
</h2>
<div class="data item content resp-tab-content" id="customtab" data-role="content">
<?php
echo $customtab_content;
?>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
<?php endif; ?>
gallery.phtml
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/**
* Product media data template
*
* @var $block \Magento\Catalog\Block\Product\View\Gallery
*/
$_config = $this->helper('Sm\Market\Helper\Data');
$zoom_enable = $_config->getProductDetail('use_zoom_image');
$zoom_width = $_config->getProductDetail('zoom_width');
$thumbstyle = $_config->getProductDetail('thumbs_style');
$loop = $_config->getProductDetail('image_loop');
$keyboard = $_config->getProductDetail('image_keyboard');
$bigNav = $_config->getProductDetail('image_navigation');
$fullscreen = $_config->getProductDetail('image_fullscreen');
$thumbs_width = $_config->getProductDetail('thumbs_width');
$thumbs_height = $_config->getProductDetail('thumbs_height');
$thumbs_nav = $_config->getProductDetail('thumbs_navigation');
$breakpoints = $_config->getProductDetail('breakpoints_width');
?>
<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 $block->getImageAttribute('product_page_image_medium', '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"); ?>",
"height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height'); ?>
},
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": {
<?php if ($zoom_enable) { ?>
"enabled": true,
<?php } else { ?>
"enabled": false,
<?php } ?>
"fullscreenzoom":"20",
"top":"",
"left":"",
"height":"",
"eventType":"hover",
"width": <?php echo $zoom_width; ?>,
"mode": "outside"
},
"data": <?php /* @escapeNotVerified */
echo $block->getGalleryImagesJson(); ?>,
"options": {
<?php if ($thumbstyle == 'horizontal' || $thumbstyle == 'vertical') { ?>
"nav": "thumbs",
"navdir": "<?php echo $thumbstyle; ?>",
<?php } else { ?>
"nav": "dots",
<?php } ?>
<?php if ($loop) { ?>
"loop": true,
<?php } else { ?>
"loop": false,
<?php } ?>
<?php if ($keyboard) { ?>
"keyboard": true,
<?php } else { ?>
"keyboard": false,
<?php } ?>
<?php if ($bigNav) { ?>
"arrows": true,
<?php } else { ?>
"arrows": false,
<?php } ?>
<?php if ($fullscreen) { ?>
"allowfullscreen": true,
<?php } else { ?>
"allowfullscreen": false,
<?php } ?>
<?php if (($block->getVar("gallery/caption"))): ?>
"showCaption": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/caption"); ?>,
<?php endif; ?>
"width": "<?php /* @escapeNotVerified */
echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>",
<?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?>
"height": <?php /* @escapeNotVerified */
echo $block->getImageAttribute('product_page_image_medium', 'height')
?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
<?php endif; ?>
"thumbwidth": "<?php echo $thumbs_width; ?>",
"thumbheight": "<?php echo $thumbs_height; ?>",
<?php if ($block->getVar("gallery/transition/duration")): ?>
"transitionduration": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/transition/duration"); ?>,
<?php endif; ?>
"transition": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/transition/effect"); ?>",
<?php if ($thumbs_nav) { ?>
"navarrows": true,
<?php } else { ?>
"navarrows": false,
<?php } ?>
"navtype": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/navtype"); ?>",
"thumbmargin": <?php echo $_config->getProductDetail('thumbs_margin'); ?>,
"thumbborderwidth": <?php echo $_config->getProductDetail('thumbs_borderwidth'); ?>
},
"fullscreen": {
"nav": "thumbs",
<?php if ($block->getVar("gallery/fullscreen/loop")): ?>
"loop": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/loop"); ?>,
<?php endif; ?>
"navdir": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/navdir"); ?>",
<?php if ($block->getVar("gallery/transition/navarrows")): ?>
"navarrows": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/navarrows"); ?>,
<?php endif; ?>
"navtype": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/navtype"); ?>",
<?php if ($block->getVar("gallery/fullscreen/arrows")): ?>
"arrows": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/arrows"); ?>,
<?php endif; ?>
<?php if ($block->getVar("gallery/fullscreen/caption")): ?>
"showCaption": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/caption"); ?>,
<?php endif; ?>
<?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
"transitionduration": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
<?php endif; ?>
"transition": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
},
"breakpoints":{
"mobile":{
"conditions":{
"max-width":"<?php echo $breakpoints . 'px' ?>"
},
"options":{
"options":{
"nav":"dots"
},
"magnifierOpts": {
"enabled": false
}
}
}
}
}
}
}
</script>
anyone help how to do?
