Author: m@g3m@nk3y$

If you want to display brand attribute value in the product view page,  You can use the following code:

<referenceContainer name="product.info.main">
    <block class="MagentoCatalogBlockProductViewDescription" name="product.info.brand" template="product/view/attribute.phtml" before="-">
        <arguments>
            <argument name="at_call" xsi:type="string">getBrand</argument>
            <argument name="at_code" xsi:type="string">brand</argument>
            <argument name="css_class" xsi:type="string">brand</argument>
            <argument name="at_label" xsi:type="string">none</argument>
            <argument name="add_attribute" xsi:type="string">itemprop="brand"</argument>
        </arguments>
    </block>
</referenceContainer>

Also If you need to display text before this attribute value in the product page something like:

Brand: Apple

For that you need to change ‘none’ to ‘default’ as shown below in ‘at_label’ :

From:

<argument name="at_label" xsi:type="string">none</argument>

To:

<argument name="at_label" xsi:type="string">default</argument>

Now you can see product attribute value with it’s label in the product page.

Default Magento comes with various functionality along with some helper text which makes that functionality easier to understand for the users.

As the name suggests, Helper text is designed to help the users and default Magento contains builtin “attribute” class that let you add comment or note easily beside the option for the better understanding to product users.

Here, I share the Easiest way to add your own comment along with product attribute, all you need to add the following code to InstallData.php file which is available at below path:

appcodeVendorExtensionSetupInstallData.php

<?php
namespace VendorpExtensionSetup;
use MagentoEavSetupEavSetupFactory;
use MagentoFrameworkSetupInstallDataInterface;
use MagentoFrameworkSetupModuleContextInterface;
use MagentoFrameworkSetupModuleDataSetupInterface;

class InstallData implements InstallDataInterface
{
	private $eavSetupFactory;
	public function __construct(EavSetupFactory $eavSetupFactory)
	{
               $this->eavSetupFactory = $eavSetupFactory;
	}
           	
           public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
	{
               $setup->startSetup();
   	
               $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
               $eavSetup->addAttribute(
                                           	MagentoCatalogModelProduct::ENTITY,
                                           	'your_attribute_id',
                                           	[
                                                           	'type' => 'text',
                                                           	'label' => 'Attribute Label',
                                                           	'input' => 'text',
                                                           	'required' => false,
                                                           	'sort_order' => 4,
                                                           	'global' => MagentoEavModelEntityAttributeScopedAttributeInterface::SCOPE_GLOBAL,
                                                           	'group' => 'Attribute Groupe',
                                                           	'note' => 'Attribute Comment'
                                           	]
                           	);
       $setup->endSetup();
	}
}

Hope this blog will help you to add comment text for product attributes.

Follow below step to create a new table in Magento 2 Database.

1. Create a new file InstallSchema.php,  in your existing module -> Setup folder.
2. Paste the following code in this new file.

<?php 
namespace VenderModulenameSetup;
 
use MagentoFrameworkSetupInstallSchemaInterface;
use MagentoFrameworkSetupModuleContextInterface;
use MagentoFrameworkSetupSchemaSetupInterface;
 
class InstallSchema implements InstallSchemaInterface
{
 
    public function install(
        SchemaSetupInterface $setup,
        ModuleContextInterface $context
    ) {
 
        $tableobj = $setup->getConnection()->newTable($setup->getTable('contact_info'));
 
        $tableobj->addColumn(
            'entity_id',
            MagentoFrameworkDBDdlTable::TYPE_INTEGER,
            null,
            ['identity' => true,'nullable' => false,'primary' => true,'unsigned' => true,],
            'Entity ID'
        );
 
        $tableobj->addColumn(
            'first_name',
            MagentoFrameworkDBDdlTable::TYPE_TEXT,
            50,
            [],
            'first_name'
        );

        $tableobj->addColumn(
            'last_name',
            MagentoFrameworkDBDdlTable::TYPE_TEXT,
            50,
            [],
            'last_name'
        );
 
        $tableobj->addColumn(
            'phone',
            MagentoFrameworkDBDdlTable::TYPE_TEXT,
            15,
            [],
            'phone'
        );
 
        $tableobj->addColumn(
            'email',
            MagentoFrameworkDBDdlTable::TYPE_TEXT,
            50,
            [],
            'email'
        );
 
        $setup->getConnection()->createTable($tableobj);
    }
}

Magento ver. 2.2.2 on an iOS device, go to a product page that contains an image in the fotorama gallery.

The expected result would be the image for the product in the fotorama gallery box. When I click on the close icon on an iPhone or iPad nothing happens. Hooked the device to my iMac to debug and there are no errors visible in the console.

I fixed this issue with below steps, let’s check it here.

Override gallery.js in your custom theme at app/design///web/fotorama/gallery.js. 

You can copy this file from /lib/web/mage/gallery/gallery.js and replace code as mentioned below.

From:

if (this.isTouchEnabled) {
   this.settings.$element.on('tap', '.fotorama__stage__frame', 
   function () {
    var translate = getTranslate($(this).parents('.fotorama__stage__shaft'));

    if (translate[1] === '0' && !$(this).hasClass('fotorama-video-container')) {
        self.openFullScreen();
        self.settings.$pageWrapper.hide();
    }
   });
}

To:

if (this.isTouchEnabled && this.settings.isFullscreen) {
            this.settings.$element.on('tap', '.fotorama__stage__frame', function () {
                var translate = getTranslate($(this).parents('.fotorama__stage__shaft'));

                if (translate[1] === '0' && !$(this).hasClass('fotorama-video-container')) {
                   self.openFullScreen();
                   self.settings.$pageWrapper.hide();
                }
            });
        }

This problem is based on lib/web/mage/gallery/gallery.js file.

Follow below steps to display configurable product specific attribute values count on product listing page in Magento 2.

First, you need to override vendor/magento/module-catalog/Block/Product/ListProduct.php file in your existing module.

To override this file:

Create new file ‘di.xml’ at this path ->  app/code/Vender/Modulename/etc/. Add the following code in this new file:

 <?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="MagentoCatalogBlockProductListProduct" type="VenderModulenameBlockProductListProduct" />
</config>

Then create a new file named ‘ListProduct.php’ at app/code/Vender/Modulename/Block/Product/.

Add the following code in this new file:

<?php
namespace VenderModulenameBlockProduct;

class ListProduct extends MagentoCatalogBlockProductListProduct {

public function getProductDetailsHtml(MagentoCatalogModelProduct $product) {
       $html = '';
       $renderer = $this->getDetailsRenderer($product->getTypeId());
        if ($renderer) {
            if ($product->getTypeId() == MagentoConfigurableProductModelProductTypeConfigurable::TYPE_CODE) {
                $options = array();
                $productColor = array();
                $data = $product->getTypeInstance()->getConfigurableOptions($product);
                foreach ($data as $attr) {
                    foreach ($attr as $p) {

                        if ($p['attribute_code'] == 'color') {
                            if (!in_array($p['option_title'], $productColor)) {
                                $productColor[] = $p['option_title'];
                            }
                        }
                    }
                 }
                $html = '<p> ' . count($productColor) . ' </p>';
             }
             $renderer->setProduct($product);
             return $html . $renderer->toHtml();
         }
         return '';
     }

}

?>

Configuration of Module

Create module.xml file at app/code/Magemonkeys/RewriteProduct/etc and add the following code inside this file:

<?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="Magemonkeys_RewriteProduct" setup_version="1.0.1">
</module>
</config>

Registration of Module

Create registration.php file at app/code/Magemonkeys/RewriteProduct and add the following code inside this file:

<?php

MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Magemonkeys_RewriteProduct',
__DIR__
);

Override di.xml

Create di.xml file at app/code/Magemonkeys/RewriteProduct/etc in order to specify which model to override by using <preference for=””>  and <preference type=””>.

Add the following code inside dl.xml file: The purpose of creating this file is to override di.xml file

<?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="MagentoCatalogModelProduct" type="MagemonkeysRewriteProductModelCatalogProduct" />
</config>

Override Product.php

Now, create Product.php file at app/code/Magemonkeys/RewriteProduct/Model/Catalog and add the following code in this file.

<?php

namespace MagemonkeysRewriteProductModelCatalog;

class Product extends MagentoCatalogModelProduct

{
   public function getName()
   {
       return $this->_getData(self::NAME) . ' + Override Model - Name';
   }

public function getSku()
   {
       return "123-Override Model - Sku";
   }
}

Launch SSH and Run Commands

Run the following commands in the Magento 2 root directory:

php bin/magento module:enable Magemonkeys_RewriteProduct
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:clean
php bin/magento cache:flush

Now, it’s time to check the result!

Go to the product page and you should see as below:

Configure Module

Create module.xml at app/code/Magemonkeys/RewriteContact/etc and add the following code inside it:

<?php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Magemonkeys_RewriteContact',
__DIR__
);

Override di.xml File

Now, I will override di.xml file. Create di.xml at app/code/Magemonkeys/RewriteContact/etc and add following code in the dl.xml file.

<?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="MagentoContactBlockContactForm" type="MagemonkeysRewriteContactBlockContactForm" />
</config>

Override Contact Form

It’s time to override contact form. Create ContactForm.php at app/code/Magemonkeys/RewriteContact/Block and add following code in this newly created file:

<?php
namespace MagemonkeysRewriteContactBlock;
use MagentoFrameworkViewElementTemplate;
class ContactForm extends MagentoContactBlockContactForm{

public function getText() 
{ 
return "Override Contact Block"; 
}
}

Override contact_index_index.xml

Create contact_index_index.xml at app/code/Magemonkeys/RewriteContact/view/frontend/layout and add following code in this file:

<?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="contactForm" remove="true"/>   
       <referenceContainer name="content">
           <block class="MagentoContactBlockContactForm" name="customContactForm" template="Magemonkeys_RewriteContact::form.phtml" />
       </referenceContainer>
   </body>
</page>

Override form.phtml

Go to vendor/magento/module-contact/view/frontend/templates from the root directory of your store and copy the form.phtml file to app/code/Magemonkeys/RewriteContact/view/frontend/templates folder.

Now, you just need to update the form.phtml by adding following code:

<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>

<form class="form contact"

     action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>"

     id="contact-form"

     method="post"

     data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"

     data-mage-init='{"validation":{}}'>

   <fieldset class="fieldset">
       <legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Write Us') ?></span></legend><br />
       <div class="field note no-label"><?php /* @escapeNotVerified */ echo __('Jot us a note and we’ll get back to you as quickly as possible.') ?></div>
<div class="field note no-label"><?php echo $block->getText(); ?></div>
       <div class="field name required">
           <label class="label" for="name"><span><?php /* @escapeNotVerified */ echo __('Name') ?></span></label>
           <div class="control">
               <input name="name" id="name" title="<?php /* @escapeNotVerified */ echo __('Name') ?>" value="<?php echo $block->escapeHtml($this->helper('MagentoContactHelperData')->getPostValue('name') ?: $this->helper('MagentoContactHelperData')->getUserName()) ?>" class="input-text" type="text" data-validate="{required:true}"/>
           </div>
       </div>
       <div class="field email required">
           <label class="label" for="email"><span><?php /* @escapeNotVerified */ echo __('Email') ?></span></label>
           <div class="control">
               <input name="email" id="email" title="<?php /* @escapeNotVerified */ echo __('Email') ?>" value="<?php echo $block->escapeHtml($this->helper('MagentoContactHelperData')->getPostValue('email') ?: $this->helper('MagentoContactHelperData')->getUserEmail()) ?>" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
           </div>
       </div>
       <div class="field telephone">
           <label class="label" for="telephone"><span><?php /* @escapeNotVerified */ echo __('Phone Number') ?></span></label>
           <div class="control">
               <input name="telephone" id="telephone" title="<?php /* @escapeNotVerified */ echo __('Phone Number') ?>" value="<?php echo $block->escapeHtml($this->helper('MagentoContactHelperData')->getPostValue('telephone')) ?>" class="input-text" type="text" />
           </div>
       </div>
       <div class="field comment required">
           <label class="label" for="comment"><span><?php /* @escapeNotVerified */ echo __('What’s on your mind?') ?></span></label>
           <div class="control">
               <textarea name="comment" id="comment" title="<?php /* @escapeNotVerified */ echo __('What’s on your mind?') ?>" class="input-text" cols="5" rows="3" data-validate="{required:true}"><?php echo $block->escapeHtml($this->helper('MagentoContactHelperData')->getPostValue('comment')) ?></textarea>
           </div>
       </div>
       <?php echo $block->getChildHtml('form.additional.info'); ?>
   </fieldset>
   <div class="actions-toolbar">
       <div class="primary">
           <input type="hidden" name="hideit" id="hideit" value="" />
           <button type="submit" title="<?php /* @escapeNotVerified */ echo __('Submit') ?>" class="action submit primary">
               <span><?php /* @escapeNotVerified */ echo __('Submit') ?></span>
           </button>
       </div>
   </div>
</form>

I have added <?php echo $block->getText(); ?>  under <div class=“field note no-label”>  in order to display it in a clear and decent format.

Run Commands

Go to the root directory of your store and run the following commands:

php bin/magento module:enable Magemonkeys_RewriteContact
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
php bin/magento cache:flush

Result

Launch your store and go to the contact form.  You will see the desired result as below: