We sacrifice by not doing any other technology, so that you get the best of Magento.

We sacrifice by not doing any other technology, so that you get the best of Magento.

    Author: m@g3m@nk3y$

    How to Add Colour Picker in Magento 2 System Configuration?

    Posted on by m@g3m@nk3y$

    Le’ts add a color picker to textbox through system.xml file located at
    appcodeVendorExtensionetcadminhtml

    <system>
	<section>
    	<group id="my_color_group" ...>
        	<field id="my_color_option" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Background Color</label>
                <comment><![CDATA[Background color]]></comment>
                <frontend_model>VendorExtensionBlockColor</frontend_model>                     
            </field>
    	</group>
	</section>
</system>

    Now we have to create one Color.php file at below location under the hood of extension
    appcodeVendorExtensionBlock

    <?php
namespace VendorExtensionBlock; 
class Color extends MagentoConfigBlockSystemConfigFormField { 
	public function __construct(
    MagentoBackendBlockTemplateContext $context, array $data = []
	) {
        parent::__construct($context, $data);
	}
 
	protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $element) {
    	$html = $element->getElementHtml();
    	$value = $element->getData('value');
 
    	$html .= '<script type="text/javascript">
            require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {
                $(document).ready(function () {
                	var $el = $("#' . $element->getHtmlId() . '");
                    $el.css("backgroundColor", "'. $value .'");
 
                	// Attach the color picker
                    $el.ColorPicker({
                    	color: "'. $value .'",
                        onChange: function (hsb, hex, rgb) {
                            $el.css("backgroundColor", "#" + hex).val("#" + hex);
                    	}
                	});
            	});
        	});
	        </script>';
    	return $html;
	}
 
}

     

    We need to implement JavaScript color picker library to adminhtml_system_config_edit.xml file available at appcodeVendorExtensionviewadminhtmllayout

    <?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
	<head>
    	<css src="jquery/colorpicker/css/colorpicker.css"/>
    	<link src="jquery/colorpicker/js/colorpicker.js"/>
	</head>
</page>

     

    Magento 2: How to Create Customers Programmatically?

    Posted on by m@g3m@nk3y$

    Check the following root script to create customer programmatically:

    use MagentoFrameworkAppBootstrap;
 
require 'app/bootstrap.php';
$bootstrap = Bootstrap::create(BP, $_SERVER);
$objectManager = $bootstrap->getObjectManager();
$state = $objectManager->get('MagentoFrameworkAppState');
$state->setAreaCode('frontend');
 
 
$storeManager = $objectManager->get('MagentoStoreModelStoreManagerInterface');
$storeId = $storeManager->getStore()->getId();
 
$websiteId = $storeManager->getStore($storeId)->getWebsiteId();
 
try {
    $customer = $objectManager->get('MagentoCustomerApiDataCustomerInterfaceFactory')->create();
    $customer->setWebsiteId($websiteId);
    $email = 'ex00@example.com';
    $customer->setEmail($email);
    $customer->setFirstname("example first");
    $customer->setLastname("example last");
    $hashedPassword = $objectManager->get('MagentoFrameworkEncryptionEncryptorInterface')->getHash('MyNewPass', true);
 
    $objectManager->get('MagentoCustomerApiCustomerRepositoryInterface')->save($customer, $hashedPassword);
 
    $customer = $objectManager->get('MagentoCustomerModelCustomerFactory')->create();
    $customer->setWebsiteId($websiteId)->loadByEmail($email);
} catch (Exception $e) {
    echo $e->getMessage();
}

    Run the above script code in a loop and create multiple customers at a time, by changing the email ID every time.

    That’s it!

    Magento 2 CSS inlining error: DOMXPath::query() Invalid expression in selector in all email sent

    Posted on by m@g3m@nk3y$

    In some versions of Magento 2 we are facing issues like this where error occurs in all sent mails.

    I tried so many solutions related .less file also tried adding “pelago/emogrifier”: “1.0.0 as 0.1.1” in our root composer.json

    But it never worked out. If you wish, you can try it and check. In case, if you get negative signal, try below proven method which helped me.

    Go to Admin Marketing Menu – Email Templates and add new custom template then click on Load template button and load Magento_Email – Header

    After load that template content remove below line and save it,

    {{inlinecss file="css/email-inline.css"}}

    This one works in most of the cases. It worked for me in Magento 2.3 versions, Hope this will help you to solve the error.

    How to get drop-down attribute values in Magento 2?

    Posted on by m@g3m@nk3y$

    Sometime we customise code , so we need to get drop-down attribute values in custom file.

    So the below code will help to retrieve attribute based on attribute id

    $objectManager = MagentoFrameworkAppObjectManager::getInstance();
$attributeId = 101;
$eavModel = $objectManager->create('MagentoCatalogModelResourceModelEavAttribute');
$eavModel->load($attributeId);
$attributeCode = $eavModel->getAttributeCode();
$productAttributeRepository = $objectManager->create('MagentoCatalogModelProductAttributeRepository');
$options = $productAttributeRepository->get($attributeCode)->getOptions();


?>

<div class="field required">
    <label class="label"><?= /* @escapeNotVerified */ __('Colour') ?>:</label>
<div class="control">
<select name="product[color]" id="color" class="required-entry input-text">
<?php
foreach ($options as $option) {
    $value = $option->getValue();  // Value
    $label = $option->getLabel();  // Label              
    ?>
    <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
    <?php 
} ?>
</select>
</div>
</div>

    that’s it. Happy coding.

    How can you make your eCommerce store completely bug-free?

    Posted on by m@g3m@nk3y$

    According to Wikipedia, a bug is an error, flaw, or fault in a technical system that causes it to produce an incorrect or unexpected result, or to behave in unintended ways.

    Thus, if your eCommerce system faces such bugs then it directly affects the performance and sales of your eCommerce store.

    Drafting some examples of bugs in the eCommerce system.

    – eCommerce sites take a lot to load or go down due to some technical bugs from the server’s end.
    – Due to some designing bugs the responsive view in mobile and tablets might look messy.
    – Mismatched order records, mathematical calculation faults in product pricing, discounts, deals, or invoice due to development bugs.

    As mentioned above, there can be numerous bugs in any eCommerce store.

    When we shared the audit report on the website, we found that most of the time, store owners are unaware of bugs in their system.
    This happens because store owners are not technical people. A technical person has enough skills to test websites in multiple ways. In short, the auditor knows where to hammer.

    It may be possible that your store is having bugs about which you are still not aware. The question is what should you do about it?

    The answer is ‘Perform a technical audit”.

    Benefits you can achieve by doing a technical audit:
    – Speed up your store
    – Sales improvement
    – Give more insights about how customers are using your store
    – Saves your technical budget
    – Your store’s performance will improve

    Technical audit won’t only help you to make your store bug-free, but it will help you to overcome numerous technical issues and helps you to shape your eCommerce store better than the best. Make your store completely bug-free by hiring a experienced technical auditor today.

    Add Product Custom Option Programmatically Magento2

    Posted on by m@g3m@nk3y$

    We will use the event catalog_product_save_before to create product custom option programmatically in magento2.

    <?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="catalog_product_save_before">
        <observer name="magemonkeys_customoption_add_custom_option" instance="MagemonkeysCustomoptionObserverCatalogProductSaveBeforeObserver"/>
    </event>
</config>

    In our CatalogProductSaveBeforeObserver class we get the product object. We have to check if the custom option with name “Custom Option” and type field already exists.

    If not existed, we have to create an array with the options to be created.

    <?php

namespace MagemonkeysCustomoptionObserver;

use MagentoFrameworkEventObserverInterface;
use MagentoCatalogApiDataProductCustomOptionInterface;
use MagentoCatalogModelProductOptionFactory;

class CatalogProductSaveBeforeObserver implements ObserverInterface
{
    /**
     * @var OptionFactory
     */
    protected $productOptionFactory;

    /**
     * Catalog Product After Save constructor.
     * @param OptionFactory $productOptionFactory
     */
    public function __construct(
        OptionFactory $productOptionFactory
    ) {
        $this->productOptionFactory = $productOptionFactory;
    }

    /**
     * Catalog Product Before Save
     *
     * @param MagentoFrameworkEventObserver $observer
     * @return void
     */
    public function execute(MagentoFrameworkEventObserver $observer)
    {
        $product = $observer->getEvent()->getProduct();

        $exist = false;
        //check if the custom option exists
        foreach ($product->getOptions() as $option) {
            if ($option->getGroupByType() == ProductCustomOptionInterface::OPTION_TYPE_FIELD
                && $option->getTitle() == 'Custom Option') {
                $exist = true;
            }
        }

        if (!$exist) {
            try {
                $optionArray = [
                    'title' => 'Custom Option',
                    'type' => 'field',
                    'is_require' => false,
                    'sort_order' => 1,
                    'price' => 0,
                    'price_type' => 'fixed',
                    'sku' => '',
                    'max_characters' => 0
                ];
                $option = $this->productOptionFactory->create();
                $option->setProductId($product->getId())
                    ->setStoreId($product->getStoreId())
                    ->addData($optionArray);
                $product->addOption($option);
            } catch (Exception $e) {
                //throw new CouldNotSaveException(__('Something went wrong while saving option.'));
            }
        }
    }
}

     

    How to get configurable product children ids Magento 2?

    Posted on by m@g3m@nk3y$

    To get all the children product ids from the configurable product in Magento 2, you need to retrieve the list of child item ids by the configurable product id.

    <?php
namespace MagemonkeysChildIdsModel;

use MagentoConfigurableProductModelProductTypeConfigurable;

class ConfigurableChildrenIds
{    
    private $configurable;
    public function __construct(
        Configurable $configurable
    ) {
        $this->configurable = $configurable;
    }
    
    public function getChildrenIds(int $id)
    {
        $childItemId = $this->configurable->getChildrenIds($id);
        return $childItemId;
    }
} ?>

    List out the children items id for a configurable product by using below commands.

    $configurableId = 1478;
$superAttributeByChild = $this->getChildrenIds($configurableId);

     

    How to show sub category image with sub category name on list page in Magento 2?

    Posted on by m@g3m@nk3y$

    If you want to show sub category image with sub category name of current category page then follow below process.

    Get subcategory of current category

    Step 1 : create sub-category.phtml file under ../app/design/frontend/[VendorName]/[theme]/Magento_Catalog/templates/category/

    and paste below code inside it

    <?php
    $objectManager = MagentoFrameworkAppObjectManager::getInstance();
    $category = $objectManager->get('MagentoFrameworkRegistry')->registry('current_category');    //get current category
    $subcategories = $category->getChildrenCategories();
    $_helper = $this->helper('MagentoCatalogHelperOutput');
?>

<ul class="sub-category">
    <?php
    foreach ($subcategories as $sub_category) {
            $_category = $objectManager->create('MagentoCatalogModelCategory')->load($sub_category->getId());
            $_outputhelper = $this->helper('MagentoCatalogHelperOutput');
            $subcategoryurl = $sub_category->getUrl();            
            $catimgHtml = '';
            echo '<li>';
            if ($catimgUrl = $_category->getImageUrl()) {
                $catimgHtml = '<img src="' . $catimgUrl . '" />';
                $catimgHtml = $_outputhelper->categoryAttribute($_category, $catimgHtml, 'image');
                /* @escapeNotVerified */
                echo '<a href="' . $subcategoryurl . '" title="' . $sub_category->getName() . '">' . $catimgHtml . '</a>';
            }
            echo '<h2><a href="' . $subcategoryurl . '" title="' . $sub_category->getName() . '">' . $sub_category->getName() . '</a></h2>';
            echo '</li>';
    } ?>
</ul>

     

    Step 2 : Add below mention code in ../app/design/frontend/[VendorName]/[theme]/Magento_Catalog/layout/catalog_category_view.xml

    <referenceContainer name="columns.top">
    <!-- Add this below code -->
    <container name="category.view.customcatlink" htmlTag="div" htmlClass="custom-category-link" before="category.view.container">
        <block class="MagentoCatalogBlockCategoryView" name="custom.category.links" template="Magento_Catalog::category/custom-cat-links.phtml"/>
    </container>

     

    After that run below commands

    – php bin/magento setup:upgrade
    – php bin/magento setup:di:compile
    – php bin/magento cache:clean

    That’s it.

    Now, sub category image with sub category name will show on list page.

    How to remove custom option price from the dropdown in Magento 2?

    Posted on by m@g3m@nk3y$

    To remove custom option pricing from the dropdown, you need to add below small piece of code to “select.pthml” file

    Location of “select.pthml” file:

    appdesignfrontendThemesyourthemeMagento_Catalogtemplatesproductviewoptionstypeselect.phtml

    <script>
  require([
    'jquery',
    'domReady!'
], function($) {
    $(document).ready(function() {
        $('select.product-custom-option').change(function() {
            $('option').each(function() {
                var selectedOption = $(this).text();
                if (selectedOption.indexOf('+') > -1) {
                    selectedOption = selectedOption.substring(0, selectedOption.indexOf('+'));
                    $(this).text(selectedOption);
                } else if (selectedOption.indexOf('-') > -1) {
                    selectedOption = selectedOption.substring(0, selectedOption.indexOf('-'));
                    $(this).text(selectedOption);
                }
            });
        });
    });
});
</script>

     

    Let’s initiate a discussion!!

    With Only Agency that provides a 24/7 emergency support.