0

How can I add a checkbox in account edit page(version magento 2.1). check box will be like email and chnages password, depends on selection I need to display my custom customer attribute field .

Here is my code:

Ibnab -> CustomerPut -> etc -> module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Ibnab_CustomerPut" setup_version="1.0.4">
    <sequence>
        <module name="Magento_Customer"/>
    </sequence>
</module>

Ibnab -> CustomerPut -> registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Ibnab_CustomerPut',
__DIR__
);

Ibnab -> CustomerPut -> Setup -> InstallData.php

<?php
namespace Ibnab\CustomerPut\Setup;

use Magento\Framework\Module\Setup\Migration;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;

class InstallData implements InstallDataInterface
{
/**
 * Customer setup factory
 *
 * @var \Magento\Customer\Setup\CustomerSetupFactory
 */
private $customerSetupFactory;
/**
 * Init
 *
 * @param \Magento\Customer\Setup\CustomerSetupFactory $customerSetupFactory
 */
public function __construct(\Magento\Customer\Setup\CustomerSetupFactory $customerSetupFactory)
{
    $this->customerSetupFactory = $customerSetupFactory;
}
/**
 * Installs DB schema for a module
 *
 * @param ModuleDataSetupInterface $setup
 * @param ModuleContextInterface $context
 * @return void
 */
public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
{

    $installer = $setup;
    $installer->startSetup();

    $customerSetup = $this->customerSetupFactory->create(['setup' => $setup]);
    $entityTypeId = $customerSetup->getEntityTypeId(\Magento\Customer\Model\Customer::ENTITY);
    $customerSetup->removeAttribute(\Magento\Customer\Model\Customer::ENTITY, "promotion_code");

    $customerSetup->addAttribute(\Magento\Customer\Model\Customer::ENTITY, "promotion_code",  array(
        "type"     => "varchar",
        "backend"  => "",
        "label"    => "Promotion Code",
        "input"    => "text",
        "source"   => "",
        "visible"  => true,
        "required" => true,
        "default" => "",
        "frontend" => "",
        "unique"     => false,
        "note"       => ""

    ));

    $promotion_code   = $customerSetup->getAttribute(\Magento\Customer\Model\Customer::ENTITY, "promotion_code");

    $promotion_code = $customerSetup->getEavConfig()->getAttribute(\Magento\Customer\Model\Customer::ENTITY, 'promotion_code');
    $used_in_forms[]="adminhtml_customer";
    $used_in_forms[]="checkout_register";
    $used_in_forms[]="customer_account_create";
    $used_in_forms[]="customer_account_edit";
    $used_in_forms[]="adminhtml_checkout";
    $promotion_code->setData("used_in_forms", $used_in_forms)
        ->setData("is_used_for_customer_segment", true)
        ->setData("is_system", 0)
        ->setData("is_user_defined", 1)
        ->setData("is_visible", 1)
        ->setData("sort_order", 100);

    $promotion_code->save();

    $customerSetup->removeAttribute(\Magento\Customer\Model\Customer::ENTITY, "promotion2_code");

    $customerSetup->addAttribute(\Magento\Customer\Model\Customer::ENTITY, "promotion2_code",  array(
        "type"     => "varchar",
        "backend"  => "",
        "label"    => "Promotion2 Code",
        "input"    => "text",
        "source"   => "",
        "visible"  => true,
        "required" => true,
        "default" => "",
        "frontend" => "",
        "unique"     => false,
        "note"       => ""

    ));

    $promotion2_code   = $customerSetup->getAttribute(\Magento\Customer\Model\Customer::ENTITY, "promotion2_code");

    $promotion2_code = $customerSetup->getEavConfig()->getAttribute(\Magento\Customer\Model\Customer::ENTITY, 'promotion2_code');
    $promotion2_code->setData("used_in_forms", $used_in_forms)
        ->setData("is_used_for_customer_segment", true)
        ->setData("is_system", 0)
        ->setData("is_user_defined", 1)
        ->setData("is_visible", 1)
        ->setData("sort_order", 100);

    $promotion2_code->save();


    $installer->endSetup();
}
}

Ibnab -> CustomerPut -> view -> frontend -> layout -> customer_account_create.xml

<?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>
    <referenceContainer name="form.additional.info">
        <block class="Magento\Framework\View\Element\Template" name="form_additional_info_customerput" template="Ibnab_CustomerPut::additionalinfocustomer.phtml"/>
    </referenceContainer>
</body>

Ibnab -> CustomerPut -> view -> frontend -> layout -> customer_account_create.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
     <referenceContainer name="form.additional.info">
        <block class="Magento\Framework\View\Element\Template"  template="Ibnab_CustomerPut::additionalinfocustomeredit.phtml"/>
     </referenceContainer>

    </referenceContainer>

</body>

Ibnab -> CustomerPut -> view -> frontend -> templates -> additionalinfocustomer.phtml

<fieldset class="fieldset create account" data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">
    <legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Additional Information') ?></span></legend><br>

    <div class="field promotion_code required">
        <label for="promotion_code" class="label"><span><?php /* @escapeNotVerified */ echo __('Promotion Code') ?></span></label>
        <div class="control">
            <input type="text" name="promotion_code" id="promotion_code" title="<?php /* @escapeNotVerified */ echo __('Promotion Code') ?>" class="input-text" data-validate="{required:true}" autocomplete="off">
        </div>
    </div>

    <div class="field promotion2_code required">
        <label for="promotion2_code" class="label"><span><?php /* @escapeNotVerified */ echo __('Promotion2 Code') ?></span></label>
        <div class="control">
            <input type="text" name="promotion2_code" id="promotion2_code" title="<?php /* @escapeNotVerified */ echo __('Promotion2 Code') ?>" class="input-text" data-validate="{required:true}" autocomplete="off">
        </div>
    </div>
</fieldset>

Ibnab -> CustomerPut -> view -> frontend -> templates -> additionalinfocustomeredit.phtml

<fieldset class="fieldset create account" data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">
    <legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Additional Information') ?></span></legend><br>

    <div class="field promotion_code required">
        <label for="promotion_code" class="label"><span><?php /* @escapeNotVerified */ echo __('Promotion Code') ?></span></label>
        <div class="control">
            <input type="text" name="promotion_code" id="promotion_code" title="<?php /* @escapeNotVerified */ echo __('Promotion Code') ?>" class="input-text" data-validate="{required:true}" autocomplete="off">
        </div>
    </div>

    <div class="field promotion2_code required">
        <label for="promotion2_code" class="label"><span><?php /* @escapeNotVerified */ echo __('Promotion2 Code') ?></span></label>
        <div class="control">
            <input type="text" name="promotion2_code" id="promotion2_code" title="<?php /* @escapeNotVerified */ echo __('Promotion2 Code') ?>" class="input-text" data-validate="{required:true}" autocomplete="off">
        </div>
    </div>
</fieldset>

Please suggest solution?

3

Best way is just to check how Magento does this. By looking at vendor/magento/module-customer/view/frontend/templates/form/edit.phtml you'll see that the checkboxes have a data-role="change-email"-attribute.

<input type="checkbox" name="change_email" data-role="change-email" ...

Below the file, you see a text/x-magento-init-script that calls the changeEmailPassword UI Component.

<script type="text/x-magento-init">
    {
        "[data-role=change-email], [data-role=change-password]": {
            "changeEmailPassword": {
                "titleChangeEmail": "<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeJs($block->escapeHtml(__('Change Email'))) ?>",
                "titleChangePassword": "<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeJs($block->escapeHtml(__('Change Password'))) ?>",
                "titleChangeEmailAndPassword": "<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeJs($block->escapeHtml(__('Change Email and Password'))) ?>"
            }
        }
    }
</script>

If you look at requirejs-config.js, you'll see that this maps to Magento_Customer/change-email-password. And if you'll open this file you see that it is actually a custom JavaScript widget that does all this magic.

_create: function () {
    this.element.on('change', $.proxy(function () {
        this._checkChoice();
    }, this));

    this._checkChoice();
},

So to answer your question: it seems that Magento has no global solution for this, so you have to implement your own solution for this. Although the example provided by the customer module might be a good starting point for you to write your own code.

  • 2
    I always love this kind of answer which answers "why" or "how" instead of giving direct answers (means use this code, bingo.. you got what you want). Thank you for your contributions. – Rajeev K Tomy Sep 18 '17 at 7:15
  • 1
    True. I think it's more important to understand how the code works and why things are built like they are, rather than provide a copy/paste answer that not really answers the question. – Giel Berkers Sep 18 '17 at 7:17
  • Actually I am new to magento 2.1 and I tried to add 2 custom fields which has been added to register form and the data will be saved during the register and I can see them in admin panel. In the front side I should have custom fields in edit account page. I added a layout for edit page and its phtml template. I didn't do anything more, but the custom fields I have added put depending on change email or change password checkbox click! I want the custom fields independ on any click or depend on click on another checkbox. – M Taheri Sep 18 '17 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.