0

I want to change size and layout product detail:

from: enter image description here

similar to:

enter image description here

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?

2

You should go through the Magento frontend dev guide. It will give you an idea to customize frontend layouts and Magento2 custom HTML container is the best option to customize the layout without making any changes to any template files.

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/layout-practice.html https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.