Magento 2 – Override Default Luma Fotorama-Item Product Detail Page Slider

luma-thememagento2product-imagesslider

I want to change the fotorama-item and palace the custom zoom functionality on the product detail page. I am using the default "luma" theme not my custom theme.

I have gone to the admin panel and Enabled Template Path Hints for Storefront and it's using the below file:

E:/xampp/htdocs/learnmagento/vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml

So, just want to remove fotorama and palace the below example when we hover on the image.

http://www.elevateweb.co.uk/image-zoom/examples

I want to use the Inner Zoom.

Anybody can help me how I can palace the Inner Zoom functionality when user hove on the image.

Best Answer

If you want to use zoom functionality within (Inner Zoom) the Image,

\vendor\magento\theme-frontend-luma\etc\view.xml

You can enable the magnifier ‘true’ as referenced,

<var name="magnifier">
<var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)-->
<var name="top"></var> <!-- Top position of magnifier -->
<var name="left"></var> <!-- Left position of magnifier -->
<var name="width"></var> <!-- Width of magnifier block -->
<var name="height"></var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that activates zoom (hover/click) -->
<var name="enabled">true</var> <!-- Turn on/off magnifier (zoom) (true/false) -->
</var>

Recommended to change the changes by creating custom theme.

Related Solutions

Magento – Magento2 : How to disable product image slider on detail page

You can configure slider in view.xml file. It located in /theme_folder/etc/view.xml. There you can write vars for gallery. For luma theme it looks like this

<vars module="Magento_Catalog">

    <!-- Gallery and magnifier theme settings. Start -->
    <var name="gallery">
        <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
        <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
        <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
        <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
        <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
        <var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) -->
        <var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
        <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) -->
        <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
        <var name="transition">
            <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
            <var name="duration">500</var> <!-- Sets transition duration in ms -->
        </var>
        <var name="fullscreen">
            <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
            <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
            <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) -->
            <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false/null) -->
            <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
            <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical)  -->
            <var name="thumbwidth">150</var> <!-- Width of thumbnails in fullscreen -->
            <var name="thumbheight">150</var> <!-- Height of thumbnails in fullscreen -->
            <var name="navigation_carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
            <var name="transition">
                <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                <var name="duration">500</var> <!-- Sets transition duration in ms -->
                <var name="carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
            </var>
        </var>
    </var>

Hope this help

Magento – Magento 2.2.5: How to validate shipping address

You can try something like this , add this in your layout checkout_index_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
 -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="checkout.root">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="checkout" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="steps" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="billing-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="payment" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="payments-list" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="before-place-order" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="agreements" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Aht_MagentoCheckoutCustom/js/view/custom-js</item>
                                                                        <item name="sortOrder" xsi:type="string">100</item>
                                                                        <item name="displayArea" xsi:type="string">before-place-order</item>
                                                                        <item name="dataScope" xsi:type="string">checkoutAgreements</item>
                                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

in Aht\MagentoCheckoutCustom\view\frontend\web\js\view\custom-js.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

 define([
'ko',
'jquery',
'uiComponent',
'Magento_CheckoutAgreements/js/model/agreements-modal'
], function (ko, $, Component, agreementsModal) {
//put the logic here
});

Best Answer

Related Solutions

Magento – Magento2 : How to disable product image slider on detail page

Magento – Magento 2.2.5: How to validate shipping address

Related Topic