magento2 PHTML小技巧

redmaomail 2024-07-24 18:31 阅读数 81 #Magento

红帽云邮外贸主机

可翻译的文本

<?= __('String to translate'); ?>

在.phtml模板中调用静态块ID(如果存在/启用/不为空)

<?php if($this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('BLOCK_ID')->toHtml() != ''): ?>
    <div class="static-block">
        <?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('BLOCK_ID')->toHtml(); ?>
    </div>
<?php endif; ?>

在.phtml模板中调用小部件

<?= $this->getLayout()->createBlock("Magento\Catalog\Block\Product\Widget\NewWidget")
            ->setDisplayType("all_products")
            ->setShowPager(1)
            ->setProductsPerPage(5)
            ->setProductsCount(10)
            ->setPageVarName("pwkvbl")
            ->setTemplate("product/widget/new/content/new_grid.phtml")
            ->toHtml(); ?>

从模块助手调用方法

<?php $helper = $this->helper('Vendor\Module\Helper\Data'); ?>
<?php $helper->callMethodName(); ?>

从phtml中的/etc/view.xml获取VAR值

<?= $block->getVar("gallery/width", 'Magento_Catalog'); ?>
<?= $block->getVar("breakpoints/mobile/conditions/max-width", 'Magento_Catalog'); ?>

有用的块功能

$block->getViewFileUrl('images/loader-1.gif'); - from web/images directory
$block->getViewFileUrl('Magento_Catalog::images/filename.jpg'); - from e.g Magento_Catalog/web/images directory

$block->getUrl('checkout/cart/index');
$block->getUrl('', array('_direct'=>'hairproducts.html'));
$block->getUrl('', array('_direct'=>'hairproducts.html', '_query'=>'manufacturer=412'));

$block->getBaseUrl();
$block->getMediaDirectory();
$block->getChildBlock('block.name');
$block->getChildHtml('block.name');
$block->getChildChildHtml('block.name');
$block->getBlockHtml('block.name');
$block->escapeHtml();
$block->escapeUrl();
$block->stripTags(); // removes HTML tags

$block->escapeHtml('value', $allowedTags);
$block->escapeHtmlAttr('value', $escapeSingleQuote);
$block->escapeJs('value');
$block->escapeUrl($url);

产品属性操作示例

<?php if($_product->getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE): ?>
        <?php
        $deliveryTime = $_product->getResource()->getAttribute('delivery_time');
        $minDeliveryTime = $deliveryTime->getFrontend()->getValue($_product);
        ?>
        <div class="delivery-time">
            <?php echo __('Delivery time: %1', $minDeliveryTime); ?>
        </div>
<?php endif; ?>
$product->getAttributeText('color'); - value as 'text' label
$product->getResource()->getAttribute('color')->getFrontend()->getValue($product); - value as 'text' label
$product->getData('color'); - value as 'id attribute number'

在类别视图中显示样本后执行 JavaScript 代码

<script>
    require(['jquery', 'Magento_Swatches/js/swatch-renderer'], function ($, swatch) {
        $(document).on('swatch.initialized', function() {
            // Here make some layout changes
        });
    });
</script>  

可用于在调试时获取句柄列表

$this->getLayout()->getUpdate()->getHandles();

获取后端配置选项启用/禁用

<?php $config = $block->getLayout()->createBlock(\Magento\Config\Block\System\Config\Form::class);?>
<?php if($config->getConfigValue('dev/translate_inline/active')): ?>
  // do something
<?php endif; ?>

JavaScript 中的媒体查询

<script type="text/javascript">
        require(['jquery', 'matchMedia'], function ($, mediaCheck) {
            mediaCheck({
                media: '(min-width: 768px)',
                // Switch to Desktop Version
                entry: function () {
                   alert('desktop');
                },
                // Switch to Mobile Version
                exit: function () {
                    alert('mobile');
                }
            });
        });
    </script>

调用 Fotorama 图库脚本的 2 种方法

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?= $block->getMagnifier() ?>,
                "data": <?= $block->getGalleryImagesJson() ?>,
                "options": <?= $block->getGalleryOptions()->getOptionsJson() ?>,
                "fullscreen": <?= $block->getGalleryOptions()->getFSOptionsJson() ?>,
                "breakpoints": <?= $block->getBreakpoints() ?>
            }
        }
    }
</script>
<script>
    require(['jquery', 'mage/gallery/gallery'], function ($, gallery) {
        $(function () {
            $('[data-gallery-role="gallery-placeholder"]').each(function(index, element) {
                gallery({
                    "mixins":["magnifier/magnify"],
                    "magnifierOpts": <?= $block->getMagnifier() ?>,
                    "data": <?= $block->getGalleryImagesJson() ?>,
                    "options": <?= $block->getGalleryOptions()->getOptionsJson() ?>,
                    "fullscreen": <?= $block->getGalleryOptions()->getFSOptionsJson() ?>,
                    "breakpoints": <?= $block->getBreakpoints() ?>
                }, element);
             });
        });
    });
</script>

脚本初始化

标准

<div class="swiper-container header-slider" data-mage-init='{"Swissup_Swiper/js/swiper": {"loop":true,"centeredSlides":true,"autoplay": {"delay": 10000}, "navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"}}}'>
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
   </div>
</div>

或更好:

<script type="text/lazy">
    require(['jquery', 'Swissup_Swiper/js/swiper'], function ($, swiper) {
        $(function() {
            $('.header-slider').each(function(index, element) {
                swiper({"loop":true,"centeredSlides":true,"autoplay": {"delay": 10000}, "navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"}}, element);
             });
        });
    });
</script>

红帽云邮外贸主机

分享到:
版权声明:本站内容源自互联网,如有内容侵犯了你的权益,请联系删除相关内容。
    红帽云邮外贸主机
热门
    红帽云邮外贸主机
    红帽云邮外贸主机