Magento 2 - Create product tab that displays custom attribute Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?Magento2 : Change order of Tabs on Product PageMagento 2 Change order of Tabs on product pageMagento 2 - Add text before description in product details tabMagento 2: Custom validation on product attributeui_component form custom tab attributeMagento 2 Create/Add new required attribute to current productsDisplaying a product attribute of type text areaWidget/block code in product custom attribute not rendering at front-end magento 2.2.5Magento 2 Attribute Type changeMagento 2 - Simple product Price and description not showing on product pageGet custom attribute value in Magento2 product pageMagento 2 : Custom attribute create with “Use default value” checkbox and that functionality
Why weren't discrete x86 CPUs ever used in game hardware?
In musical terms, what properties are varied by the human voice to produce different words / syllables?
Is multiple magic items in one inherently imbalanced?
How many morphisms from 1 to 1+1 can there be?
What does Turing mean by this statement?
Is there any word for a place full of confusion?
Karn the great creator - 'card from outside the game' in sealed
Most bit efficient text communication method?
What does 丫 mean? 丫是什么意思？
What to do with repeated rejections for phd position
What would you call this weird metallic apparatus that allows you to lift people?
Do I really need to have a message in a novel to appeal to readers?
Trademark violation for app?
What order were files/directories output in dir?
Why can't I install Tomboy in Ubuntu Mate 19.04?
Why are vacuum tubes still used in amateur radios?
What does this say in Elvish?
A letter with no particular backstory
Lagrange four-squares theorem --- deterministic complexity
How would a mousetrap for use in space work?
What are the discoveries that have been possible with the rejection of positivism?
Project Euler #1 in C++
How could we fake a moon landing now?
Is CEO the "profession" with the most psychopaths?
Magento 2 - Create product tab that displays custom attribute
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Announcing the arrival of Valued Associate #679: Cesar Manara
Unicorn Meta Zoo #1: Why another podcast?Magento2 : Change order of Tabs on Product PageMagento 2 Change order of Tabs on product pageMagento 2 - Add text before description in product details tabMagento 2: Custom validation on product attributeui_component form custom tab attributeMagento 2 Create/Add new required attribute to current productsDisplaying a product attribute of type text areaWidget/block code in product custom attribute not rendering at front-end magento 2.2.5Magento 2 Attribute Type changeMagento 2 - Simple product Price and description not showing on product pageGet custom attribute value in Magento2 product pageMagento 2 : Custom attribute create with “Use default value” checkbox and that functionality
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
3
I am using Magento 2, On the product detail page, I would like to create a new tab next to the description tab named 'downloads'.
I have created a attribute with text area named pdf_download to display what items that come with a product.
I have idea about Magento 1 but on Magento 2, I am totally new. Please guide me.
Thanks in Advance.
magento2
asked Dec 24 '17 at 19:18
Farhan AzizFarhan Aziz
234
add a comment |
3
I am using Magento 2, On the product detail page, I would like to create a new tab next to the description tab named 'downloads'.
I have created a attribute with text area named pdf_download to display what items that come with a product.
I have idea about Magento 1 but on Magento 2, I am totally new. Please guide me.
Thanks in Advance.
magento2
asked Dec 24 '17 at 19:18
Farhan AzizFarhan Aziz
234
add a comment |
3
3
3
I am using Magento 2, On the product detail page, I would like to create a new tab next to the description tab named 'downloads'.
I have created a attribute with text area named pdf_download to display what items that come with a product.
I have idea about Magento 1 but on Magento 2, I am totally new. Please guide me.
Thanks in Advance.
magento2
asked Dec 24 '17 at 19:18
Farhan AzizFarhan Aziz
234
I am using Magento 2, On the product detail page, I would like to create a new tab next to the description tab named 'downloads'.
I have created a attribute with text area named pdf_download to display what items that come with a product.
I have idea about Magento 1 but on Magento 2, I am totally new. Please guide me.
Thanks in Advance.
magento2
magento2
asked Dec 24 '17 at 19:18
Farhan AzizFarhan Aziz
234
asked Dec 24 '17 at 19:18
Farhan AzizFarhan Aziz
234
edited Dec 25 '17 at 15:12
Farhan Aziz
asked Dec 24 '17 at 19:18
Farhan AzizFarhan Aziz
234
asked Dec 24 '17 at 19:18
Farhan AzizFarhan Aziz
234
asked Dec 24 '17 at 19:18
Farhan AzizFarhan Aziz
234
234
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
Try following code:
- app/code/[VendorName]/[ModuleName]/registration.php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'[VendorName]_[ModuleName]',
__DIR__
);
- app/code/[VendorName]/[ModuleName]/etc/module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="[VendorName]_[ModuleName]" setup_version="1.0.0">
<sequence>
<module name="Magento_Product"/>
</sequence>
</module>
</config>
- app/code/[VendorName]/[ModuleName]/view/frontend/layout/catalog_product_view.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.description">
<arguments>
<argument name="priority" xsi:type="string">1</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.attributes">
<arguments>
<argument name="priority" xsi:type="string">2</argument>
</arguments>
</referenceBlock>
<referenceBlock name="reviews.tab">
<arguments>
<argument name="priority" xsi:type="string">4</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.info.details">
<block class="MagentoCatalogBlockProductView" name="downloads.tab" template="[VendorName]_[ModuleName]::product/view/details/downloads_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Downloads</argument>
<argument name="priority" xsi:type="string">3</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
- app/code/[VendorName]/[ModuleName]/view/frontend/templates/product/view/details/downloads_tab.phtml
<?php echo $block->getProduct()->getData('pdf_download'); ?>
- app/design/frontend/[VendorName]/[themename]/Magento_Catalog/templates/product/view/details.phtml
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
<div class="product info detailed">
<?php $layout = $block->getLayout(); ?>
<?php $tabPriority = array(); ?>
<?php foreach ($detailedInfoGroup as $name): ?>
<?php $alias = $layout->getElementAlias($name); ?>
<?php $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '9'; ?>
<?php array_push($tabPriority, array($name, $priority)); ?>
<?php endforeach; ?>
<?php usort($tabPriority, function($a, $b) return $a['1'] <=> $b['1']; ); ?>
<div class="product data items" data-mage-init='"tabs":"openedState":"active"'>
<?php foreach ($tabPriority as $name): ?>
<?php
$name = $name[0];
$html = $layout->renderElement($name);
if (!trim($html))
continue;
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<div class="data item title"
aria-labeledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title"
data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
<a class="data switch"
tabindex="-1"
data-toggle="switch"
href="#<?= /* @escapeNotVerified */ $alias ?>"
id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
<?= /* @escapeNotVerified */ $label ?>
</a>
</div>
<div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
<?= /* @escapeNotVerified */ $html ?>
</div>
<?php endforeach;?>
</div>
</div>
<?php endif; ?>
answered Dec 25 '17 at 8:57
Pratik OzaPratik Oza
2,161411
Now it shows first tab Downloads, Can you guide me how i can sort tabs? so Downloads come as 3rd tab e.g Details, Reviews, Downloads
– Farhan Aziz
Dec 25 '17 at 10:25
Hi @FarhanAziz, try updated code to set tab's priority. Also, you can change tab priority as per your requirement from "catalog_product_view.xml".
– Pratik Oza
Dec 25 '17 at 15:23
add a comment |
0
You can follow this code for magento 2.
For magento 2, add custom code in theme files.
- Create new file custom_tab.phtml in
app/code/Vendor/Theme/Magento_Catalog/templates/product/view/
and add this code.
<?php $product = $block->getProduct(); ?>
<?php echo $product->getData('attribute_code'); ?>
- Edit the catalog_product_view.xml in
app/code/Vendor/Theme/Magento_Catalog/layout/
if not exist copy form core file
vendor/magento/module-catalog/view/frontend/layout/
Original Code:
<!-- default code .... -->
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.details" template="product/view/details.phtml" after="-">
<block class="MagentoCatalogBlockProductViewAttributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">More Information</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
</arguments>
</block>
</block>
<!-- default code .... -->
after edit code:
<!-- default code .... -->
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.details" template="product/view/details.phtml" after="-">
<block class="MagentoCatalogBlockProductView" name="custom.tab" template="product/view/custom_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewAttributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">More Information</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
</arguments>
</block>
</block>
<!-- default code .... -->
- Edit the details.phtml file in
app/code/Vendor/Theme/Magento_Catalog/templates/product/view/
if not exist copy form core file
vendor/magento/module-catalog/view/frontend/templates/product/view/
and replace the code:
<!-- default code .... -->
<?php $detailedInfoGroup = ["product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->
replace with this code
<!-- default code .... -->
<?php $detailedInfoGroup = ["custom.tab", "product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->
You can change the position according tab name and set manor of tabs.
- Finally you can see the result.
Thanks. For any query please contact me.
answered 2 days ago
Sohel KhanSohel Khan
11
New contributor
Sohel Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f207042%2fmagento-2-create-product-tab-that-displays-custom-attribute%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try following code:
- app/code/[VendorName]/[ModuleName]/registration.php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'[VendorName]_[ModuleName]',
__DIR__
);
- app/code/[VendorName]/[ModuleName]/etc/module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="[VendorName]_[ModuleName]" setup_version="1.0.0">
<sequence>
<module name="Magento_Product"/>
</sequence>
</module>
</config>
- app/code/[VendorName]/[ModuleName]/view/frontend/layout/catalog_product_view.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.description">
<arguments>
<argument name="priority" xsi:type="string">1</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.attributes">
<arguments>
<argument name="priority" xsi:type="string">2</argument>
</arguments>
</referenceBlock>
<referenceBlock name="reviews.tab">
<arguments>
<argument name="priority" xsi:type="string">4</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.info.details">
<block class="MagentoCatalogBlockProductView" name="downloads.tab" template="[VendorName]_[ModuleName]::product/view/details/downloads_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Downloads</argument>
<argument name="priority" xsi:type="string">3</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
- app/code/[VendorName]/[ModuleName]/view/frontend/templates/product/view/details/downloads_tab.phtml
<?php echo $block->getProduct()->getData('pdf_download'); ?>
- app/design/frontend/[VendorName]/[themename]/Magento_Catalog/templates/product/view/details.phtml
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
<div class="product info detailed">
<?php $layout = $block->getLayout(); ?>
<?php $tabPriority = array(); ?>
<?php foreach ($detailedInfoGroup as $name): ?>
<?php $alias = $layout->getElementAlias($name); ?>
<?php $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '9'; ?>
<?php array_push($tabPriority, array($name, $priority)); ?>
<?php endforeach; ?>
<?php usort($tabPriority, function($a, $b) return $a['1'] <=> $b['1']; ); ?>
<div class="product data items" data-mage-init='"tabs":"openedState":"active"'>
<?php foreach ($tabPriority as $name): ?>
<?php
$name = $name[0];
$html = $layout->renderElement($name);
if (!trim($html))
continue;
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<div class="data item title"
aria-labeledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title"
data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
<a class="data switch"
tabindex="-1"
data-toggle="switch"
href="#<?= /* @escapeNotVerified */ $alias ?>"
id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
<?= /* @escapeNotVerified */ $label ?>
</a>
</div>
<div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
<?= /* @escapeNotVerified */ $html ?>
</div>
<?php endforeach;?>
</div>
</div>
<?php endif; ?>
answered Dec 25 '17 at 8:57
Pratik OzaPratik Oza
2,161411
Now it shows first tab Downloads, Can you guide me how i can sort tabs? so Downloads come as 3rd tab e.g Details, Reviews, Downloads
– Farhan Aziz
Dec 25 '17 at 10:25
Hi @FarhanAziz, try updated code to set tab's priority. Also, you can change tab priority as per your requirement from "catalog_product_view.xml".
– Pratik Oza
Dec 25 '17 at 15:23
add a comment |
0
Try following code:
- app/code/[VendorName]/[ModuleName]/registration.php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'[VendorName]_[ModuleName]',
__DIR__
);
- app/code/[VendorName]/[ModuleName]/etc/module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="[VendorName]_[ModuleName]" setup_version="1.0.0">
<sequence>
<module name="Magento_Product"/>
</sequence>
</module>
</config>
- app/code/[VendorName]/[ModuleName]/view/frontend/layout/catalog_product_view.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.description">
<arguments>
<argument name="priority" xsi:type="string">1</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.attributes">
<arguments>
<argument name="priority" xsi:type="string">2</argument>
</arguments>
</referenceBlock>
<referenceBlock name="reviews.tab">
<arguments>
<argument name="priority" xsi:type="string">4</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.info.details">
<block class="MagentoCatalogBlockProductView" name="downloads.tab" template="[VendorName]_[ModuleName]::product/view/details/downloads_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Downloads</argument>
<argument name="priority" xsi:type="string">3</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
- app/code/[VendorName]/[ModuleName]/view/frontend/templates/product/view/details/downloads_tab.phtml
<?php echo $block->getProduct()->getData('pdf_download'); ?>
- app/design/frontend/[VendorName]/[themename]/Magento_Catalog/templates/product/view/details.phtml
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
<div class="product info detailed">
<?php $layout = $block->getLayout(); ?>
<?php $tabPriority = array(); ?>
<?php foreach ($detailedInfoGroup as $name): ?>
<?php $alias = $layout->getElementAlias($name); ?>
<?php $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '9'; ?>
<?php array_push($tabPriority, array($name, $priority)); ?>
<?php endforeach; ?>
<?php usort($tabPriority, function($a, $b) return $a['1'] <=> $b['1']; ); ?>
<div class="product data items" data-mage-init='"tabs":"openedState":"active"'>
<?php foreach ($tabPriority as $name): ?>
<?php
$name = $name[0];
$html = $layout->renderElement($name);
if (!trim($html))
continue;
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<div class="data item title"
aria-labeledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title"
data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
<a class="data switch"
tabindex="-1"
data-toggle="switch"
href="#<?= /* @escapeNotVerified */ $alias ?>"
id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
<?= /* @escapeNotVerified */ $label ?>
</a>
</div>
<div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
<?= /* @escapeNotVerified */ $html ?>
</div>
<?php endforeach;?>
</div>
</div>
<?php endif; ?>
answered Dec 25 '17 at 8:57
Pratik OzaPratik Oza
2,161411
Now it shows first tab Downloads, Can you guide me how i can sort tabs? so Downloads come as 3rd tab e.g Details, Reviews, Downloads
– Farhan Aziz
Dec 25 '17 at 10:25
Hi @FarhanAziz, try updated code to set tab's priority. Also, you can change tab priority as per your requirement from "catalog_product_view.xml".
– Pratik Oza
Dec 25 '17 at 15:23
add a comment |
0
0
0
Try following code:
- app/code/[VendorName]/[ModuleName]/registration.php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'[VendorName]_[ModuleName]',
__DIR__
);
- app/code/[VendorName]/[ModuleName]/etc/module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="[VendorName]_[ModuleName]" setup_version="1.0.0">
<sequence>
<module name="Magento_Product"/>
</sequence>
</module>
</config>
- app/code/[VendorName]/[ModuleName]/view/frontend/layout/catalog_product_view.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.description">
<arguments>
<argument name="priority" xsi:type="string">1</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.attributes">
<arguments>
<argument name="priority" xsi:type="string">2</argument>
</arguments>
</referenceBlock>
<referenceBlock name="reviews.tab">
<arguments>
<argument name="priority" xsi:type="string">4</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.info.details">
<block class="MagentoCatalogBlockProductView" name="downloads.tab" template="[VendorName]_[ModuleName]::product/view/details/downloads_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Downloads</argument>
<argument name="priority" xsi:type="string">3</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
- app/code/[VendorName]/[ModuleName]/view/frontend/templates/product/view/details/downloads_tab.phtml
<?php echo $block->getProduct()->getData('pdf_download'); ?>
- app/design/frontend/[VendorName]/[themename]/Magento_Catalog/templates/product/view/details.phtml
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
<div class="product info detailed">
<?php $layout = $block->getLayout(); ?>
<?php $tabPriority = array(); ?>
<?php foreach ($detailedInfoGroup as $name): ?>
<?php $alias = $layout->getElementAlias($name); ?>
<?php $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '9'; ?>
<?php array_push($tabPriority, array($name, $priority)); ?>
<?php endforeach; ?>
<?php usort($tabPriority, function($a, $b) return $a['1'] <=> $b['1']; ); ?>
<div class="product data items" data-mage-init='"tabs":"openedState":"active"'>
<?php foreach ($tabPriority as $name): ?>
<?php
$name = $name[0];
$html = $layout->renderElement($name);
if (!trim($html))
continue;
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<div class="data item title"
aria-labeledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title"
data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
<a class="data switch"
tabindex="-1"
data-toggle="switch"
href="#<?= /* @escapeNotVerified */ $alias ?>"
id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
<?= /* @escapeNotVerified */ $label ?>
</a>
</div>
<div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
<?= /* @escapeNotVerified */ $html ?>
</div>
<?php endforeach;?>
</div>
</div>
<?php endif; ?>
answered Dec 25 '17 at 8:57
Pratik OzaPratik Oza
2,161411
Try following code:
- app/code/[VendorName]/[ModuleName]/registration.php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'[VendorName]_[ModuleName]',
__DIR__
);
- app/code/[VendorName]/[ModuleName]/etc/module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="[VendorName]_[ModuleName]" setup_version="1.0.0">
<sequence>
<module name="Magento_Product"/>
</sequence>
</module>
</config>
- app/code/[VendorName]/[ModuleName]/view/frontend/layout/catalog_product_view.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.description">
<arguments>
<argument name="priority" xsi:type="string">1</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.attributes">
<arguments>
<argument name="priority" xsi:type="string">2</argument>
</arguments>
</referenceBlock>
<referenceBlock name="reviews.tab">
<arguments>
<argument name="priority" xsi:type="string">4</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.info.details">
<block class="MagentoCatalogBlockProductView" name="downloads.tab" template="[VendorName]_[ModuleName]::product/view/details/downloads_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Downloads</argument>
<argument name="priority" xsi:type="string">3</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
- app/code/[VendorName]/[ModuleName]/view/frontend/templates/product/view/details/downloads_tab.phtml
<?php echo $block->getProduct()->getData('pdf_download'); ?>
- app/design/frontend/[VendorName]/[themename]/Magento_Catalog/templates/product/view/details.phtml
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
<div class="product info detailed">
<?php $layout = $block->getLayout(); ?>
<?php $tabPriority = array(); ?>
<?php foreach ($detailedInfoGroup as $name): ?>
<?php $alias = $layout->getElementAlias($name); ?>
<?php $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '9'; ?>
<?php array_push($tabPriority, array($name, $priority)); ?>
<?php endforeach; ?>
<?php usort($tabPriority, function($a, $b) return $a['1'] <=> $b['1']; ); ?>
<div class="product data items" data-mage-init='"tabs":"openedState":"active"'>
<?php foreach ($tabPriority as $name): ?>
<?php
$name = $name[0];
$html = $layout->renderElement($name);
if (!trim($html))
continue;
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<div class="data item title"
aria-labeledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title"
data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
<a class="data switch"
tabindex="-1"
data-toggle="switch"
href="#<?= /* @escapeNotVerified */ $alias ?>"
id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
<?= /* @escapeNotVerified */ $label ?>
</a>
</div>
<div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
<?= /* @escapeNotVerified */ $html ?>
</div>
<?php endforeach;?>
</div>
</div>
<?php endif; ?>
answered Dec 25 '17 at 8:57
Pratik OzaPratik Oza
2,161411
edited Dec 25 '17 at 15:17
answered Dec 25 '17 at 8:57
Pratik OzaPratik Oza
2,161411
answered Dec 25 '17 at 8:57
Pratik OzaPratik Oza
2,161411
answered Dec 25 '17 at 8:57
Pratik OzaPratik Oza
2,161411
2,161411
Now it shows first tab Downloads, Can you guide me how i can sort tabs? so Downloads come as 3rd tab e.g Details, Reviews, Downloads
– Farhan Aziz
Dec 25 '17 at 10:25
Hi @FarhanAziz, try updated code to set tab's priority. Also, you can change tab priority as per your requirement from "catalog_product_view.xml".
– Pratik Oza
Dec 25 '17 at 15:23
add a comment |
Now it shows first tab Downloads, Can you guide me how i can sort tabs? so Downloads come as 3rd tab e.g Details, Reviews, Downloads
– Farhan Aziz
Dec 25 '17 at 10:25
Hi @FarhanAziz, try updated code to set tab's priority. Also, you can change tab priority as per your requirement from "catalog_product_view.xml".
– Pratik Oza
Dec 25 '17 at 15:23
Now it shows first tab Downloads, Can you guide me how i can sort tabs? so Downloads come as 3rd tab e.g Details, Reviews, Downloads
– Farhan Aziz
Dec 25 '17 at 10:25
Now it shows first tab Downloads, Can you guide me how i can sort tabs? so Downloads come as 3rd tab e.g Details, Reviews, Downloads
– Farhan Aziz
Dec 25 '17 at 10:25
Hi @FarhanAziz, try updated code to set tab's priority. Also, you can change tab priority as per your requirement from "catalog_product_view.xml".
– Pratik Oza
Dec 25 '17 at 15:23
Hi @FarhanAziz, try updated code to set tab's priority. Also, you can change tab priority as per your requirement from "catalog_product_view.xml".
– Pratik Oza
Dec 25 '17 at 15:23
add a comment |
0
You can follow this code for magento 2.
For magento 2, add custom code in theme files.
- Create new file custom_tab.phtml in
app/code/Vendor/Theme/Magento_Catalog/templates/product/view/
and add this code.
<?php $product = $block->getProduct(); ?>
<?php echo $product->getData('attribute_code'); ?>
- Edit the catalog_product_view.xml in
app/code/Vendor/Theme/Magento_Catalog/layout/
if not exist copy form core file
vendor/magento/module-catalog/view/frontend/layout/
Original Code:
<!-- default code .... -->
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.details" template="product/view/details.phtml" after="-">
<block class="MagentoCatalogBlockProductViewAttributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">More Information</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
</arguments>
</block>
</block>
<!-- default code .... -->
after edit code:
<!-- default code .... -->
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.details" template="product/view/details.phtml" after="-">
<block class="MagentoCatalogBlockProductView" name="custom.tab" template="product/view/custom_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewAttributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">More Information</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
</arguments>
</block>
</block>
<!-- default code .... -->
- Edit the details.phtml file in
app/code/Vendor/Theme/Magento_Catalog/templates/product/view/
if not exist copy form core file
vendor/magento/module-catalog/view/frontend/templates/product/view/
and replace the code:
<!-- default code .... -->
<?php $detailedInfoGroup = ["product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->
replace with this code
<!-- default code .... -->
<?php $detailedInfoGroup = ["custom.tab", "product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->
You can change the position according tab name and set manor of tabs.
- Finally you can see the result.
Thanks. For any query please contact me.
answered 2 days ago
Sohel KhanSohel Khan
11
New contributor
Sohel Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
0
You can follow this code for magento 2.
For magento 2, add custom code in theme files.
- Create new file custom_tab.phtml in
app/code/Vendor/Theme/Magento_Catalog/templates/product/view/
and add this code.
<?php $product = $block->getProduct(); ?>
<?php echo $product->getData('attribute_code'); ?>
- Edit the catalog_product_view.xml in
app/code/Vendor/Theme/Magento_Catalog/layout/
if not exist copy form core file
vendor/magento/module-catalog/view/frontend/layout/
Original Code:
<!-- default code .... -->
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.details" template="product/view/details.phtml" after="-">
<block class="MagentoCatalogBlockProductViewAttributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">More Information</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
</arguments>
</block>
</block>
<!-- default code .... -->
after edit code:
<!-- default code .... -->
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.details" template="product/view/details.phtml" after="-">
<block class="MagentoCatalogBlockProductView" name="custom.tab" template="product/view/custom_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewAttributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">More Information</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
</arguments>
</block>
</block>
<!-- default code .... -->
- Edit the details.phtml file in
app/code/Vendor/Theme/Magento_Catalog/templates/product/view/
if not exist copy form core file
vendor/magento/module-catalog/view/frontend/templates/product/view/
and replace the code:
<!-- default code .... -->
<?php $detailedInfoGroup = ["product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->
replace with this code
<!-- default code .... -->
<?php $detailedInfoGroup = ["custom.tab", "product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->
You can change the position according tab name and set manor of tabs.
- Finally you can see the result.
Thanks. For any query please contact me.
answered 2 days ago
Sohel KhanSohel Khan
11
New contributor
Sohel Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
0
0
0
You can follow this code for magento 2.
For magento 2, add custom code in theme files.
- Create new file custom_tab.phtml in
app/code/Vendor/Theme/Magento_Catalog/templates/product/view/
and add this code.
<?php $product = $block->getProduct(); ?>
<?php echo $product->getData('attribute_code'); ?>
- Edit the catalog_product_view.xml in
app/code/Vendor/Theme/Magento_Catalog/layout/
if not exist copy form core file
vendor/magento/module-catalog/view/frontend/layout/
Original Code:
<!-- default code .... -->
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.details" template="product/view/details.phtml" after="-">
<block class="MagentoCatalogBlockProductViewAttributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">More Information</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
</arguments>
</block>
</block>
<!-- default code .... -->
after edit code:
<!-- default code .... -->
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.details" template="product/view/details.phtml" after="-">
<block class="MagentoCatalogBlockProductView" name="custom.tab" template="product/view/custom_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewAttributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">More Information</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
</arguments>
</block>
</block>
<!-- default code .... -->
- Edit the details.phtml file in
app/code/Vendor/Theme/Magento_Catalog/templates/product/view/
if not exist copy form core file
vendor/magento/module-catalog/view/frontend/templates/product/view/
and replace the code:
<!-- default code .... -->
<?php $detailedInfoGroup = ["product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->
replace with this code
<!-- default code .... -->
<?php $detailedInfoGroup = ["custom.tab", "product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->
You can change the position according tab name and set manor of tabs.
- Finally you can see the result.
Thanks. For any query please contact me.
answered 2 days ago
Sohel KhanSohel Khan
11
New contributor
Sohel Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You can follow this code for magento 2.
For magento 2, add custom code in theme files.
- Create new file custom_tab.phtml in
app/code/Vendor/Theme/Magento_Catalog/templates/product/view/
and add this code.
<?php $product = $block->getProduct(); ?>
<?php echo $product->getData('attribute_code'); ?>
- Edit the catalog_product_view.xml in
app/code/Vendor/Theme/Magento_Catalog/layout/
if not exist copy form core file
vendor/magento/module-catalog/view/frontend/layout/
Original Code:
<!-- default code .... -->
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.details" template="product/view/details.phtml" after="-">
<block class="MagentoCatalogBlockProductViewAttributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">More Information</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
</arguments>
</block>
</block>
<!-- default code .... -->
after edit code:
<!-- default code .... -->
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.details" template="product/view/details.phtml" after="-">
<block class="MagentoCatalogBlockProductView" name="custom.tab" template="product/view/custom_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewAttributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">More Information</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
</arguments>
</block>
</block>
<!-- default code .... -->
- Edit the details.phtml file in
app/code/Vendor/Theme/Magento_Catalog/templates/product/view/
if not exist copy form core file
vendor/magento/module-catalog/view/frontend/templates/product/view/
and replace the code:
<!-- default code .... -->
<?php $detailedInfoGroup = ["product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->
replace with this code
<!-- default code .... -->
<?php $detailedInfoGroup = ["custom.tab", "product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->
You can change the position according tab name and set manor of tabs.
- Finally you can see the result.
Thanks. For any query please contact me.
answered 2 days ago
Sohel KhanSohel Khan
11
New contributor
Sohel Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 2 days ago
Sohel KhanSohel Khan
11
New contributor
Sohel Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 2 days ago
Sohel KhanSohel Khan
11
answered 2 days ago
Sohel KhanSohel Khan
11
11
New contributor
Sohel Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Sohel Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Sohel Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f207042%2fmagento-2-create-product-tab-that-displays-custom-attribute%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
