Category: Magento 2

Posted on

How to create a custom theme in magento 2?

Why do you need to create a custom theme in Magento 2?
We need to create a custom theme for Magento 2 because of To customize the design of your Magento store. Natively Magento comes with preinstalled blank and luma theme.
Keeping Maintainability and Upgradability in mind, We need to create a custom theme.
If we modify directly to our changes to core module, Changes will be wiped out in future if we upgrade the Magento version. Do not modify the out of the box Magento core phtml files when we need to customize changes on phtml file.

You need to refer below steps for creating a custom theme in Magento 2.
Go to Magento root folder where you have installed your Magento,

1. Create a directory under app/design/frontend/Magento2/demotheme.
2. Create a theme declaration file theme.xml.
3. Create registration.php file to register our theme.
4. Create a composer.json file.
5. Create a web directories for CSS, JavaScript, images, and fonts of our custom theme.

Your theme structure looks like below, For Demo, We have kept Vendorname as Magento2 and themename as demotheme. You can change based on your themename.
— You should Keep Vendorname as Camelcase letter and themename in lowercase as per Magento theme standard.

app/design/frontend/
├──  ... Magento2/
│   │   ├──...demotheme/
│   │   │   ├──...   theme.xml
│   │   │   ├──...   registration.php
|   │   │   ├──...   composer.json
|   │   │   ├──...   web/
|   │   │   │   ├──   ...css/
|   │   │   │   ├──   ...images/
|   │   │   │   ├──   ...js/
|   │   │   │   ├──   ...fonts/

Create theme.xml  file to your theme directory. app/design/frontend/Magento2/demotheme.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>RakeshJesadiya</title>
    <parent>Magento/luma</parent>
</theme>

In above title is your theme title and parent node is for parent theme name.
You can keep your parent theme we have declared luma as a parent now.

Create registration.php file,

app/design/frontend/Magento2/demotheme/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Magento2/demotheme',
    __DIR__
);

Create composer.json file,

{
    "name": "magento/theme-frontend-demotheme",
    "description": "My custom magento 2 theme",
    "require": {
        "php": "7.0.2|7.0.4|~7.0.6|~7.1.0",
        "magento/theme-frontend-blank": "100.2.*",
        "magento/framework": "101.0.*"
    },
    "type": "magento2-theme",
    "version": "100.2.2",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Above file,  “name” key will be your theme name.
“description” key will be your theme description.
“require” key will be your theme dependency modules.
“type” must be magento2-theme (for any custom theme)
“version” is your theme version.

You can keep your static files in web folder.
— images folder for images of store front
— js folder for js files
— css folder for less/CSS files
— fonts folder for font files

Now run command to our theme activation in site.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Our theme will be activated and check it from the admin panel.
Go To Content Menu from left sidebar, Click Design -> Themes
Your new theme will be shown in the grid.

If you want to apply your custom theme to store,
Go To Content Menu from left sidebar,
Click Design -> Configuration
Click on Edit link and set Your theme from Applied Theme drop-down section.
Save theme.

Clear cache and you can check your storefront with your custom theme.

Posted on

Magento 2 Get Attribute Swatch color hashcode by option id

We can get hash code value of specific visual swatch by swatch option id.
We have created Color Product attribute from Stores -> Attributes -> Product.
Color attribute code with Catalog Input Type for Store Owner set to Visual swatch.

Now We can get the color hash code by color option id using below code snippet.

public function __construct(
    \Magento\Swatches\Helper\Data $swatchHelper,
) {
    $this->swatchHelper = $swatchHelper;
}
/* Get Hashcode of Visual swatch by option id */
public function getAtributeSwatchHashcode($optionid) {
    $hashcodeData = $this->swatchHelper->getSwatchesByOptionsId([$optionid]);
    return $hashcodeData[$optionid]['value'];
}

Call getAtributeSwatchHashcode() function from template,

$hashcode = $this->getAtributeSwatchHashcode(50); //assume 50 is Red option id

The result will be like color Red hashcode is #FF0000

Posted on

How to get configurable product’s used super_attribute details programmatically in Magento 2?

We can get the details of the used super attribute value for the configurable product. You will get the attribute value used in the configurable product using the below example.

Let’s assume a configurable product generated with color and size attributes. But how we can get details of super attribute value using a programmatic way that product is made using color or size or color and size or any other attributes combination.

You can retrieve the Child Product Used Super attribute details for the configurable product.

We can get Dynamically Configurable Product’s used Super attribute details by below code snippet.

<?php
namespace Rbj\ConfigProduct\Block;

class SuperAttribute
{
    public function __construct(
        \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
    ) {
        $this->productRepository = $productRepository;
    }

    /**
     * get Super Attribute details by configurable product id
     */
    public function getSuperAttributeData($productId);
    {
        /** @var \Magento\Catalog\Model\Product $product */
        $product = $this->productRepository->getById($id);
        if ($product->getTypeId() != \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE) {
            return [];
        }

        /** @var \Magento\ConfigurableProduct\Model\Product\Type\Configurable $productTypeInstance */
        $productTypeInstance = $product->getTypeInstance();
        $productTypeInstance->setStoreFilter($product->getStoreId(), $product);

        $attributes = $productTypeInstance->getConfigurableAttributes($product);
        $superAttributeList = [];
        foreach($attributes as $_attribute){
            $attributeCode = $_attribute->getProductAttribute()->getAttributeCode();;
            $superAttributeList[$_attribute->getAttributeId()] = $attributeCode;
        }
        return $superAttributeList;
    }

Call function from a PHP class file,

$productId = 67;
$superAttribute = $this->getSuperAttributeData($productId);
echo "<pre>";print_r($superAttribute);

The result will be,

Array
(
   [93] => color
   [254] => size
)

Where 93,254 are attribute id and color, size is attribute code. Based on output we can say a configurable product is made using color and size super attribute.