Javascript 删除Magento 2中的默认产品库
正如您所知,在Magento 2的产品页面中有fotorama JavaScript库和放大镜。我需要知道如何从我的产品页面中删除它。我只需要产品的形象而已 在我的Javascript 删除Magento 2中的默认产品库,javascript,zooming,gallery,product,magento2,Javascript,Zooming,Gallery,Product,Magento2,正如您所知,在Magento 2的产品页面中有fotorama JavaScript库和放大镜。我需要知道如何从我的产品页面中删除它。我只需要产品的形象而已 在我的app\design\frontend\Mypackage\myteme\Magento\u Catalog\templates\product\view\gallery.phtml文件中,我删除了: <script type="text/x-magento-init"> { "[data-gallery-role
app\design\frontend\Mypackage\myteme\Magento\u Catalog\templates\product\view\gallery.phtml
文件中,我删除了:
<script type="text/x-magento-init">
{
"[data-gallery-role=gallery-placeholder]": {
"mage/gallery/gallery": {
"mixins":["magnifier/magnify"],
"magnifierOpts": <?php /* @escapeNotVerified */
echo $block->getMagnifier(); ?>,
"data": <?php /* @escapeNotVerified */
echo $block->getGalleryImagesJson(); ?>,
"options": {
"nav": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/nav"); ?>",
"loop": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/loop"); ?>,
"keyboard": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/keyboard"); ?>,
"arrows": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/arrows"); ?>,
"allowfullscreen": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/allowfullscreen"); ?>,
"showCaption": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/caption"); ?>,
"width": <?php /* @escapeNotVerified */
echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
"thumbwidth": <?php /* @escapeNotVerified */
echo $block->getImageAttribute('product_page_image_small', 'width'); ?>,
"thumbheight": <?php /* @escapeNotVerified */
echo $block->getImageAttribute('product_page_image_small', 'height')
?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
"height": <?php /* @escapeNotVerified */
echo $block->getImageAttribute('product_page_image_medium', 'height')
?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
"transitionduration": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/transition/duration"); ?>,
"transition": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/transition/effect"); ?>",
"navarrows": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/navarrows"); ?>,
"navtype": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/navtype"); ?>",
"navdir": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/navdir"); ?>"
},
"fullscreen": {
"nav": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/nav"); ?>",
"loop": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/loop"); ?>,
"navdir": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/navdir"); ?>",
"arrows": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/arrows"); ?>,
"showCaption": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/caption"); ?>,
"transitionduration": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
"transition": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
},
"breakpoints": <?php /* @escapeNotVerified */
echo $block->getBreakpoints(); ?>
}
}
}
<!-- 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>
<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 atcivates zoom (hover/click) -->
<var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
</var>
<var name="breakpoints">
<var name="mobile">
<var name="conditions">
<var name="max-width">767px</var>
</var>
<var name="options">
<var name="options">
<var name="navigation">dots</var>
</var>
</var>
</var>
</var>
<!-- end. Gallery and magnifier theme settings -->
但是没有运气。删除上述代码会导致删除产品图像和样例功能。有人能帮我吗?有没有什么方法可以让我在保留样例功能的同时删除产品库和缩放?感谢您的帮助。谢谢。如果您只需要主产品图像,请使用以下代码替换gallery.phtml模板的内容:
<?php
$product = $block->getProduct();
$imageHelper = $this->helper('Magento\Catalog\Helper\Image');
if (!$product->getImage() || $product->getImage() == 'no_selection') {
$image = $imageHelper->getDefaultPlaceholderUrl('image');
} else {
$image = $imageHelper->init($product, 'product_page_image_medium')
->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
->setImageFile($product->getImage())
->getUrl();
}
?>
<div class="gallery-placeholder">
<img src="<?php echo $image; ?>" >
</div>
" >
但请记住,您将失去一些Magento 2功能(如在选择选项时在关联产品的图像之间切换)。如果您只想显示产品的主图像,则无需删除库 您可以在view.xml文件中禁用放大镜和全屏功能
...
<var name="gallery">
...
<var name="allowfullscreen">false</var> <!-- Turn on/off fullscreen (true/false) -->
...
</var>
...
<var name="magnifier">
...
<var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
...
</var>
...
文件:Example/OneImage/registration.php
<?php
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Example_OneImage', __DIR__);
谢谢。但我想保留样例功能。删除HTML类和ID的原始结构会删除您所说的样例功能。我已经编辑了关于这一点的问题。非常好!谢谢,编辑view.xml是gallery.phtml中更改值的magento方法
<?php
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Example_OneImage', __DIR__);
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Example_OneImage" setup_version="1.0.0">
<sequence>
<module name="Magento_Catalog"/>
</sequence>
</module>
</config>
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Catalog\Model\Product">
<plugin name="ExampleOneImagePlugin" type="Example\OneImage\Plugin\Model\Product" sortOrder="1" />
</type>
</config>
<?php
namespace Example\OneImage\Plugin\Model;
/**
* Plugin for \Magento\Catalog\Model\Product
*/
class Product
{
/**
* Retrieve media gallery images
*
* @return \Magento\Framework\Data\Collection
*/
public function afterGetMediaGalleryImages(\Magento\Catalog\Model\Product $product, $images)
{
$mainImage = null;
foreach ($images as $key => $image) {
if ($product->getImage() == $image->getFile()) {
$mainImage = $image;
break;
}
}
$images->clear();
if ($mainImage) {
$images->addItem($mainImage);
}
return $images;
}
}