magento2 PHTML小技巧
可翻译的文本
<?= __('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>
版权声明:本站内容源自互联网,如有内容侵犯了你的权益,请联系删除相关内容。
上一篇:Magento2 常用变量 下一篇:Magento2 主题开发