First, you define a new element in shippingAdditional
by creating file view/frontend/layout/checkout_index_index.xml
like this
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAdditional" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">shippingAdditional</item>
<item name="children" xsi:type="array">
<item name="carrier_custom" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping/carrier_custom</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Then create file view/frontend/web/js/view/checkout/shipping/carrier_custom.js
as this
define([
'jquery',
'ko',
'uiComponent',
'Magento_Checkout/js/model/quote'
], function ($, ko, Component, quote) {
'use strict';
return Component.extend({
defaults: {
template: 'Vendor_Module/checkout/shipping/carrier_custom'
},
initObservable: function () {
this.selectedMethod = ko.computed(function() {
var method = quote.shippingMethod();
var selectedMethod = method != null ? method.carrier_code + '_' + method.method_code : null;
return selectedMethod;
}, this);
return this;
},
});
});
And then create a file view/frontend/web/template/checkout/shipping/carrier_custom.html
<div id="my-carrier-custom-block-wrapper" data-bind="visible: selectedMethod() == 'mycarrier_mymethod'">
<p data-bind="i18n: 'This is custom block shown only when selected specific method'"></p>
</div>
Basically XML file tells checkout to initiate js file which is an uiComponent. It initiates knockout template and uses selectedMethod
function to get the value of the currently selected shipping (carrier_method). If the value is what you want it will show the block. You can modify it according to your needs, ie. checking only selected carrier. Because selectedMethod
is defined as knockout.computed()
it will get re-evaluated every time user changes the carrier because quote.shippingMethod()
is an observable.
i updated because the template path was wrong
You have to just overrider attribute.phtml
file from module-catalog core module.
Copy file inside your theme,
app/design/frontend/Vendor/luma/Magento_Catalog/templates/product/view/attribute.phtml
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/**
* Product view template
*
* @see \Magento\Catalog\Block\Product\View\Description
*/
?>
<?php
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
$_call = $block->getAtCall();
$_code = $block->getAtCode();
$_className = $block->getCssClass();
$_attributeLabel = $block->getAtLabel();
$_attributeType = $block->getAtType();
$_attributeAddAttribute = $block->getAddAttribute();
if ($_attributeLabel && $_attributeLabel == 'default') {
$_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
}
if ($_attributeType && $_attributeType == 'text') {
$_attributeValue = ($_helper->productAttribute($_product, $_product->$_call(), $_code)) ? $_product->getAttributeText($_code) : '';
} else {
$_attributeValue = $_helper->productAttribute($_product, $_product->$_call(), $_code);
}
?>
<?php if ($_attributeValue): ?>
<?php if($_code === 'short_description') { ?>
<div class="value more" <?php /* @escapeNotVerified */ echo $_attributeAddAttribute;?> >
<?php if ($_product->getData('short_description')) {
$string = strip_tags($_product->getData('description'));
if (strlen($string) > 50) {
// truncate string
$stringCut = substr($string, 0, 50);
$string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... <a href="javascript:void(0);" class="readmore">Read More</a>';
}
echo $string;
?>
<?php
}else {?>
<?php /* @escapeNotVerified */ echo $_attributeValue;
}
?>
</div>
<div class="less" style="display:none">
<?php echo $_attributeValue; ?>
<a href="javascript:void(0);" class="readless">Read Less</a>
</div>
<script type="text/javascript">
console.log('test');
require(["jquery"],function($){
$('.readmore').on("click",function(){
$('.less').show();
$('.more').hide();
});
$('.readless').on("click",function(){
$('.less').hide();
$('.more').show();
});
});
</script>
<?php } else { ?>
<div class="product attribute <?php /* @escapeNotVerified */ echo $_className?>">
<?php if ($_attributeLabel != 'none'): ?><strong class="type"><?php /* @escapeNotVerified */ echo $_attributeLabel?></strong><?php endif; ?>
<div class="value" <?php /* @escapeNotVerified */ echo $_attributeAddAttribute;?>><?php /* @escapeNotVerified */ echo $_attributeValue; ?></div>
</div>
<?php } ?>
<?php endif; ?>
Best Answer
Try This Below Code..