Showing posts with label custom tab. Show all posts
Showing posts with label custom tab. Show all posts

Wednesday, April 15, 2020

Add custom tab in logged user account in magento 2

Hello All,

Today I saw you How to create custom tab in logged in user account in magento 2.

Custom tab will display like this:



app\code\Chirag\Customproduct\registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Chirag_Customproduct',
    __DIR__
);


app\code\Chirag\Customproduct\etc\module.xml

<?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="Chirag_Customproduct" setup_version="1.0.0" >
<sequence>
        <module name="Magento_Customer"/>
    </sequence>
</module>
</config>


app\code\Chirag\Customproduct\etc\di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Sales\Model\Order\Pdf\Invoice"
                type="Czargroup\Pdfinvoice\Model\Order\Pdf\Invoice"/>
</config>


app\code\Chirag\Customproduct\etc\frontend\routes.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="customproduct" frontName="customproduct">
            <module name="Chirag_Customproduct" />
        </route>
    </router>
</config>


app\code\Chirag\Customproduct\Controller\Customer\Index.php

<?php
namespace Chirag\Customproduct\Controller\Customer; 
class Index extends \Magento\Framework\App\Action\Action {
 
 public function execute() {
 
    $this->_view->loadLayout();
    $this->_view->renderLayout();
  }
 
}
?> 


app\code\Chirag\Customproduct\view\frontend\layout\customer_account.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="customer_account_navigation">
         <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-customproduct">
            <arguments>
               <argument name="path" xsi:type="string">customproduct/customer/index</argument>
               <argument name="label" xsi:type="string">Custom Product</argument>
            </arguments>
         </block>
      </referenceBlock>
   </body>
</page> 


app\code\Chirag\Customproduct\view\frontend\layout\customproduct_customer_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<update handle="customer_account"/>
<body>
    <referenceBlock name="page.main.title">
            <action method="setPageTitle">
                <argument translate="true" name="title" xsi:type="string">Custom Product</argument>
            </action>
     </referenceBlock>
     <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="customproduct" template="Chirag_Customproduct::customproduct.phtml">
        </block>
    </referenceContainer>
</body>
</page>   


app\code\Chirag\Customproduct\view\frontend\templates\customproduct.phtml

<?php
 // Add Some Code Here 
echo "This is custom Product List";
?> 


Monday, April 13, 2020

Add custom tab to product page in maagento 2

Hello

Today I saw you how to add custom tab to product view page in magento 2.


Now create attribute from admin side.
Admin-> Store-> Attribute -> Product
Create a new attribute like this.
Now save it and assign to Attribute set.
Go to product add/edit page and give some value or text to that input box.

Go to your product override path like this :
/public_html/app/design/frontend/Companyname/Themename/Magento_Catalog/layout/catalog_product_view.xml

Write this :

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Magento_Catalog::js/slick/slick-theme.css"/>
        <css src="Magento_Catalog::js/slick/slick.css"/>
</head>
    <body>
<referenceBlock name="page.main.title">
            <arguments>
                <argument name="css_class" xsi:type="string">product</argument>
                <argument name="add_base_attribute" xsi:type="string">itemprop="name"</argument>
            </arguments>
        </referenceBlock>
<referenceContainer name="product.info.stock.sku">
<container name="product.info.type" before="-"/>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="Magento_Catalog::product/view/attribute.phtml" after="product.info.type">
<arguments>
<argument name="at_call" xsi:type="string">getSku</argument>
<argument name="at_code" xsi:type="string">sku</argument>
<argument name="css_class" xsi:type="string">sku</argument>
<argument name="at_label" xsi:type="string">default</argument>
<argument name="add_attribute" xsi:type="string">itemprop="sku"</argument>
</arguments>
</block>
</referenceContainer>
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" as="description" template="Magento_Catalog::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">Product Information</argument>
                        <argument name="sort_order" xsi:type="string">10</argument>
<argument name="add_attribute" xsi:type="string">itemprop="description"</argument>
                    </arguments>
                </block>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.video" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.description">
<arguments>
<argument name="at_call" xsi:type="string">getVideoScript</argument>
<argument name="at_code" xsi:type="string">video_script</argument>
<argument name="css_class" xsi:type="string">videoscript</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Video</argument>
<argument name="sort_order" xsi:type="string">20</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.pump" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.video">
<arguments>
<argument name="at_call" xsi:type="string">getPumpDesc</argument>
<argument name="at_code" xsi:type="string">pump_desc</argument>
<argument name="css_class" xsi:type="string">pumpdesc</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Pump Kit Requirements</argument>
<argument name="sort_order" xsi:type="string">30</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.cover" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.pump">
<arguments>
<argument name="at_call" xsi:type="string">getCoverDesc</argument>
<argument name="at_code" xsi:type="string">cover_desc</argument>
<argument name="css_class" xsi:type="string">coverdesc</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Cover Information</argument>
<argument name="sort_order" xsi:type="string">40</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.care" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.cover">
<arguments>
<argument name="at_call" xsi:type="string">getCareDesc</argument>
<argument name="at_code" xsi:type="string">care_desc</argument>
<argument name="css_class" xsi:type="string">caredesc</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Care Kit Information</argument>
<argument name="sort_order" xsi:type="string">50</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.other" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.care">
<arguments>
<argument name="at_call" xsi:type="string">getOtherDesc</argument>
<argument name="at_code" xsi:type="string">other_desc</argument>
<argument name="css_class" xsi:type="string">otherdesc</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Additional Information</argument>
<argument name="sort_order" xsi:type="string">60</argument>
</arguments>
</block>
</referenceBlock>
<referenceContainer name="content">
<container name="upsell-products-popup" htmlTag="div" htmlClass="upsell_popup" after="product.info.details">
<block class="Magento\Catalog\Block\Product\ProductList\Upsell" name="product.info.upsell" template="Magento_Catalog::product/list/upsell.phtml">
<arguments>
<argument name="type" xsi:type="string">upsell</argument>
</arguments>
</block>
</container>
</referenceContainer>
<referenceContainer name="product.info.price">
<container name="product.prices" label="Product prices" htmlTag="div" htmlClass="product-msrp-price">
<container name="product.msrp" label="Product msrp" htmlTag="div" htmlClass="product-msrp" before="-">
<block class="Magento\Catalog\Pricing\Render" name="product.price.msrp">
<arguments>
<argument name="price_render" xsi:type="string">product.price.render.default</argument>
<argument name="price_type_code" xsi:type="string">msrp_price</argument>
<argument name="zone" xsi:type="string">item_view</argument>
</arguments>
</block>
</container>
<block class="Magento\Catalog\Pricing\Render" name="product.price.final">
<arguments>
<argument name="price_render" xsi:type="string">product.price.render.default</argument>
<argument name="price_type_code" xsi:type="string">final_price</argument>
<argument name="zone" xsi:type="string">item_view</argument>
</arguments>
</block>
</container>
</referenceContainer>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="image_carousel" template="Magento_Catalog::product/view/image_reviews_carousel.phtml" before="product.info.details" />
</referenceContainer>
<move element="upsell-products-popup" destination="content" after="product.info.details"/>
<move element="image_carousel" destination="content" before="product.info.details"/>
<move element="product.info.stock.sku" destination="product.info.price" before="-"/>
<move element="product.info.type" destination="product.info.stock.sku" after="-"/>
<move element="product.info.video" destination="product.info.details" after="product.info.description"/>
<move element="product.info.pump" destination="product.info.details" after="product.info.video"/>
<move element="product.info.cover" destination="product.info.details" after="product.info.pump"/>
<move element="product.info.care" destination="product.info.details" after="product.info.cover"/>
<move element="product.info.other" destination="product.info.details" after="product.info.care"/>
<referenceContainer name="product.info.review" remove="true" />
<referenceContainer name="reviews.tab" remove="true" />
<referenceContainer name="sidebar.main">
<block class="Magento\Catalog\Block\Product\ProductList\Related" name="product.related" template="Magento_Catalog::product/list/related.phtml"/>
<block class="Magento\Catalog\Block\Product\ProductList\Related" name="product.recommended" template="Magento_Catalog::product/list/recommended.phtml"/>
</referenceContainer>
<referenceContainer name="sidebar.additional" remove="true" />
<referenceContainer name="product.info.social" remove="true" />
<referenceContainer name="product.info.overview" remove="true" />
<referenceBlock name="catalog.product.related" remove="true" />
    </body>
</page>


Make changes in phtml file. : /public_html/app/design/frontend/Companyname/Themename/Magento_Catalog/templates/product/view/attribute.phtml

<?php
/**
 * Copyright © Magento, Inc. 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();

$renderLabel = true;
// if defined as 'none' in layout, do not render
if ($_attributeLabel == 'none') {
    $renderLabel = false;
}

if ($_attributeLabel && $_attributeLabel == 'default') {
    $_attributeLabel = $_product->getResource()->getAttribute($_code)->getStoreLabel();
}
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($_className == "sku") { ?>
<div class="product attribute <?= /* @escapeNotVerified */ $_className ?>">
    <p class="product-code"><?php echo "Product Code:" ; ?>
    <span class="value" <?= /* @escapeNotVerified */ $_attributeAddAttribute ?>><?= /* @escapeNotVerified */ $_attributeValue ?></span></p>
</div>
<?php } elseif($_className == "description") { ?>
<div class="product attribute <?= /* @escapeNotVerified */ $_className ?>">                                    
<div class="box-des"> 
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 right-left-bordaer">
<div class="des-in-left value"  <?= /* @escapeNotVerified */ $_attributeAddAttribute ?>>
<?= $_product->getDescription(); ?>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 right-col ">
<div class="des-in-right">
<p class="specilation">Specification</p>
<p class="dimonion">Dimensions:</p>
<ul class="height-weght">
<li>Height:<span><?= (!empty($_product->getResource()->getAttribute('height')->getFrontend()->getValue($_product))) ? $_product->getResource()->getAttribute('height')->getFrontend()->getValue($_product) . " cm" : "n/a" ?> </span></li>
<li>Width:<span>
<?= (!empty($_product->getResource()->getAttribute('width')->getFrontend()->getValue($_product))) ? $_product->getResource()->getAttribute('width')->getFrontend()->getValue($_product) . " cm" : "n/a" ?>
</span></li>
<li>Depth:<span>
<?= (!empty($_product->getResource()->getAttribute('spec_depth')->getFrontend()->getValue($_product))) ? $_product->getResource()->getAttribute('spec_depth')->getFrontend()->getValue($_product) . " cm" : "n/a" ?>

</span></li>

<li>Brands:<span> <?php echo $_product->getResource()->getAttribute('brandp')->getFrontend()->getValue($_product); ?></span></li>
<li>Other:<span> <?php echo $_product->getResource()->getAttribute('spec_other')->getFrontend()->getValue($_product); ?></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<?php } elseif($_className == "videoscript") { ?>
<?php if(!empty($_product->getResource()->getAttribute('video_script')->getFrontend()->getValue($_product))) {?>
<div role="tabpanel" class="tab-pane" id="vd1">
<?= $_product->getResource()->getAttribute('video_script')->getFrontend()->getValue($_product) ?> 
</div>
<?php } ?>
<?php } elseif($_className == "pumpdesc") { echo "<div style='display:none'>pump:".$_product->getResource()->getAttribute('pump_desc')->getFrontend()->getValue($_product)."</div>"; ?>
<?php if(!empty($_product->getResource()->getAttribute('pump_desc')->getFrontend()->getValue($_product))) {?>
<div role="tabpanel" class="tab-pane" id="ppm">
<?= $_product->getResource()->getAttribute('pump_desc')->getFrontend()->getValue($_product) ?> 
</div>
<?php } ?>
<?php } elseif($_className == "coverdesc") { echo "<div style='display:none'>cover:".$_product->getResource()->getAttribute('cover_desc')->getFrontend()->getValue($_product)."</div>"; ?>
<?php if(!empty($_product->getResource()->getAttribute('cover_desc')->getFrontend()->getValue($_product))) {?>
<div role="tabpanel" class="tab-pane" id="cvr">
<?= $_product->getResource()->getAttribute('cover_desc')->getFrontend()->getValue($_product) ?> 
</div>
<?php } ?>
<?php } elseif($_className == "caredesc") { echo "<div style='display:none'>care:".$_product->getResource()->getAttribute('care_desc')->getFrontend()->getValue($_product)."</div>"; ?>
<?php if(!empty($_product->getResource()->getAttribute('care_desc')->getFrontend()->getValue($_product))) {?>
<div role="tabpanel" class="tab-pane" id="car">
<?= $_product->getResource()->getAttribute('care_desc')->getFrontend()->getValue($_product) ?> 
</div>
<?php } ?>
<?php } elseif($_className == "otherdesc") { ?>
<?php if(!empty($_product->getResource()->getAttribute('other_desc')->getFrontend()->getValue($_product))) {?>
<div role="tabpanel" class="tab-pane" id="othr">
<?= $_product->getResource()->getAttribute('other_desc')->getFrontend()->getValue($_product) ?> 
</div>
<?php } ?>
<?php } else { ?>
<div class="product attribute <?= /* @escapeNotVerified */ $_className ?>">
    <?php if ($renderLabel): ?><strong class="type"><?= /* @escapeNotVerified */ $_attributeLabel ?></strong><?php endif; ?>
    <div class="value" <?= /* @escapeNotVerified */ $_attributeAddAttribute ?>><?= /* @escapeNotVerified */ $_attributeValue ?></div>
</div>
<?php } ?>
<?php endif; ?>


Now save it and flush it. You will get custom tabs in product view page