<ul><li>SVG stands for Scalable Vector Graphics</li><li>SVG is used to define vector-based graphics for the Web</li><li>SVG defines the graphics in XML format</li></ul>

how-to-work-svg

We define SVG elements with XML syntax and style them with CSS, just as if they were HTML.&nbsp;SVG elements are purposely built for drawing graphics. We can use &lt;rect&gt; for drawing a rectangle, &lt;circle&gt; for drawing circles, etc.—SVG also defines &lt;ellipse&gt;, &lt;line&gt;, &lt;polyline&gt;, &lt;polygon&gt;, and &lt;path&gt;.&nbsp;The available attributes depend on the element, so while &lt;rect&gt; has width and height attributes, the &lt;circle&gt; element has the r attribute, which defines its radius.&nbsp;While most HTML elements can have children, most SVG elements cannot. One exception is the group element &lt;g&gt;, which we can use in order to apply CSS styles and transformations to multiple elements at once.

How to work SVG?

Another important difference between HTML and SVG is how we position elements, notably via the viewBox attribute of a given outer &lt;svg&gt; element. Its value consists of four numbers separated by whitespace or a comma: min-x, min-y, width, and height. Together, these specify how much of our SVG drawing we want the browser to render. That area will be scaled to fit the bounds of the viewport, as defined by the width and height attributes of the &lt;svg&gt; element.&nbsp;When it comes to letterboxing, the ratio of the width and height attributes of the viewport may indeed differ from the ratio of the width and height parts of the viewBox attribute.&nbsp;By default, the aspect ratio of the SVG canvas will be preserved at the expense of a larger-than-specified viewBox, thereby causing a smaller, letterboxed rendering within the viewport. But you can specify a different behavior via the preserveAspectRatio attribute.

The <svg> Element and Its Attributes:

<ul style="list-style-type:disc;"><li>Magento has officially announced that Magento 1 will reach end of life (EOL) on June 1, 2020 No quality fixes or security patches will be deployed for Magento Commerce 1 or Magento Open Source 1 after this date.</li></ul>

how-to-migrate-magento-1-to-magento-2

Magento has officially announced that Magento 1 will reach end of life (EOL) on June 1, 2020 No quality fixes or security patches will be deployed for Magento Commerce 1 or Magento Open Source 1 after this date.&nbsp;Here we are providing the guideline, how the Magento migration works?&nbsp;There are some thumb rules need to follow before migration.<ol><li>Backend Magento 1 store ( files and database ).</li><li>Create Development Env. of Magento 1 Store.</li><li>Analyze Magento 1 store, Delete unnecessary things ( files and data ).</li><li>Analyze Magento 1 Theme, Extensions and customization are compatible with Magento 2 Store.</li><li>Install Fresh Magento 2 copy on server.</li></ol>&nbsp;Magento Migration Process is is generally divided into five phases.<ul><li>Phase 1 : Theme Migration.</li><li>Phase 2 : Extension Migration.</li><li>Phase 3 : Customization Migration.</li><li>Phase 4 : Data Migration.</li><li>Phase 5 : Testing</li></ul>&nbsp;Phase 1 : Theme MigrationFirst of all you can’t migrate Magento 1 theme to Magento 2, You can Enhance Magento 2 Theme to look like your Magento 1 theme.You also can choose fresh look in Magento 2 theme by choosing themes from Marketplace or via create own custom theme.&nbsp;Phase 2 : Extension Migration.First of all you can’t Migrate your Magento 1 extensions to Magento 2 because of compatibility issues while integrating Magento 1 extensions into Magento 2.You can choose Magento 2 extensions from Marketplace or create your own Magento 2 module.&nbsp;Phase 3 : Customization MigrationMagento Code Migration Toolkit provide feature to Migrate your Magento 1 custom code to Magento 2. Migration Toolkit may require additional class mapping work to make it work successfully.&nbsp;Phase 4 : Data MigrationMagento 2 Data Migration Tool provide feature to migrate you Magento 1 data to Magento 2 including your custom extension.Migrating the custom data may require additional work of mapping tables in Magento 2 Migration tools.Magento 2 Data Migration Tool have three steps to moving data from Magento 1 Store to Magento 2 Store<ul><li>Step 1: Setting Migration</li><li>Step 2: Data Migration</li><li>Step 3: Delta Migration</li></ul>&nbsp;Phase 5 : TestingAfter completing all four phases, you must have to complete the testing part.Magento 2 Migration is not an easy task but you can make it with proper planing and work flow.&nbsp;Do you still need Migration Expert?We can help you to Migrate your store with Proper Planning and work flow, <a href="/contact-us">Contact us</a> for more information.

How to Migrate Magento 1 to Magento 2?

<ul><li>Magento Customer Grid Customisation is very handy.</li><li>Follow the steps to customise the Customer Grid in Magento 2 and add Customer last logged in date.</li></ul>

How to add customer last logged in column customer grid in Magento 2?

Magento Customer Grid Customisation is very handy.&nbsp;Follow the steps to customise the Customer Grid in Magento 2 and add Customer last logged in date.

app/code/Elightwalk/CustomerGrid/registration.php &nbsp;1

Step 1 :  

app/code/Elightwalk/CustomerGrid/etc/module.xml

Step 2:

app/code/Elightwalk/CustomerGrid/view/adminhtml/ui_component/customer_listing.xml

Step 3 :

app/code/Elightwalk/CustomerGrid/Ui/Component/Listing/Column/LastLogin.php

Step 4 :

Step 5:

Here is list of Ability of Plugins in Magento 2.&nbsp;<ul><li>There are three types of plugins: around, before and after.</li><li>Plugins only work on public methods.</li><li>Plugins do not work on final methods, final classes.</li></ul>

Ability of Plugins in Magento 2

Here is list of Ability of Plugins in Magento 2.&nbsp;<ul><li>here are three types of plugins: around, before and after.</li><li>Plugins only work on public methods.</li><li>Plugins do not work on final methods, final classes.</li><li>Plugins can be used on interfaces, abstract classes or parent classes.</li><li>Plugins are mostly used for solution of Module/Class override confliction.</li></ul>&nbsp;– Before plugins modify the input arguments to a method. You can change them to any value.Example from: \Magento\Catalog\Block\Product\ListProduct

To modify the the argument of prepareSortableFieldsByCategory($category) method, add a method to the plugin class:For this we need to define methode name just with prefix “before”.The method above is run before “\Magento\Catalog\Block\Product\ ListProduct::prepareSortableFieldsByCategory”.The return value for the before plugin determines the arguments going into the next plugin or the final targeted method.

– After plugins are used to modify the return value. Example from: \Magento\Catalog\Block\Product\ListProduct

If you need to modify the output from a public method, use an after plugin. In our example class, let’s modify the getProductPrice($product). As such in our plugin class, we would create:

The after plugin includes the input parameters in addition to the return&nbsp;result.&nbsp;– The around plugin modification the input and output of a function. The original function is passed in as a callback and, by standard, is named “$proceed”. Example from: \Magento\Catalog\Block\Product\ListProduct

In our example class, let’s modify the getProductPrice($product). As such in our plugin class, we would create:

Q. How do multiple plugins interact, and how can their execution order be controlled?– When a plugin is declared in “di.xml”, the “sortOrder” attribute can be set. The lower the sort order will be executed prior in the list.&nbsp;Q. In which cases should plugins be avoided? – Plugins are useful to modify the input, output of “an existing method”. So it is best to be avaoided in situations where “the flow of data does not have to be modified”. So use Event/Observer when don’t want to change flow of Data…

For this we need to define methode name just with prefix “around”. We should return the “Original methods returned value” for execute next plugin… *In case the callable is not declared, the calling to neither the next plugin nor the original method is achieved.&nbsp;How plugins work&nbsp;When you create a plugin entry, Magento automatically generates a class wrapper for the plugin target.For example, if you want to modify “\Magento\Catalog\Model\Product” , Magento will auto-generate the \Magento\Catalog\Model\Product\Interceptor class.&nbsp;Every function, that you want to modify, inside the target class will be represented in the auto-generated interceptor class. if you add new functions to a target class, you may need to delete the auto-generated interceptor class from the “/generated” folder.

Wildcard selector is used to select multiple elements simultaneously. It selects similar type of class name or attribute and use CSS property. * wildcard also known as containing wildcard.

 Wildcard Selectors (*, ^ and $) in CSS for classes

The [attribute*=”txt”] selector is used to select that elements whose attribute value contains the specified sub string txt. This example shows how to use a wildcard to select all div with a class that contains txt. This could be at the start, the end or in the middle of the class.

[attribute*=”txt”] Selector

[attribute^=”txt”] Selector

The [attribute$=”value”] selector is used to select those elements whose attribute value ends with a specified value txt. The following example selects all elements with a class attribute value that ends with txt.

[attribute$=”txt”] Selector

<ul><li>In this Article we will show you how to show anchor tag title on mouseover in css3.</li><li>Let’s start off by creating some markup for the links. We need to give it a title which will be the show content. like this</li></ul>

How to get show anchor tag title on mouseover in css3.

In this Article we will show you how to show anchor tag title on mouseover in css3.Let’s start off by creating some markup for the links. We need to give it a title which will be the show content. like this

Now you can test the anchor tag title on mouseover.

The next step is to create some rudimentary styling for our show content like this

Magento Customer Grid Customisation is very handy&nbsp;Follow the steps to customise the Customer Grid in Magento 2 and add Customer last logged in date

How to add customer total order in column customer grid in Magento 2?

Magento Customer Grid Customisation is very handy&nbsp;Follow the steps to customise the Customer Grid in Magento 2 and add Customer last logged in date&nbsp;Step 1 :app/code/Elightwalk/CustomerGrid/registration.php

Step 2 :app/code/Elightwalk/CustomerGrid/etc/module.xml

Step 3 :app/code/Elightwalk/CustomerGrid/view/adminhtml/ui_component/customer_listing.xml

Step 4 :app/code/Elightwalk/CustomerGrid/Ui/Component/Listing/Column/TotalOrders.php

In Magento, whenever we create a configurable product and assign a simple or child product to it then sometimes we need to check whether this simple product belongs to that country or some other attribute value we want to check and for checking this we have to open each simple product and check inside it.

How to display a child product’s attribute value at a configurable product’s grid panel?

Magento\ConfigurableProduct\Ui\DataProvider\Product\Form\Modifier\ConfigurablePanel.php&nbsp;Find function getRows() and add the heading. Like :- ‘manufacturer_country’ =&gt; $this-&gt;getColumn(‘manufacturer_country’, __(‘Manufacturer Country’)),&nbsp;Working Example for ConfigurablePanel.php&nbsp;

Step-1

Note : If attribute type is dropdown or anything else then need to call as per it’s syntax.

Magento\ConfigurableProduct\Ui\DataProvider\Product\Form\Modifier\Data\AssociatedProducts.php&nbsp;Here we need to call attribute value associated with attribute code&nbsp;Find function prepareVariations() and call the product attribute value. Like :- ‘manufacturer_country’ =&gt; $this-&gt;escaper-&gt;escapeHtml($product-&gt;getManufacturerCountry()),&nbsp;Working Example for AssociatedProducts.php

Step-2

If you want to number things in your website without “ol” and “ul” element. It also is pretty reasonable that you want to style those numbers. In this Article we will show how it can be done with the :before pseudo element, which can have a counter as a value to the content property.

How to add order list number without "ol" and "ul" element by CSS for all browsers?

If you want to number things in your website without “ol” and “ul” element. It also is pretty reasonable that you want to style those numbers. In this Article we will show how it can be done with the :before pseudo element, which can have a counter as a value to the content property.&nbsp;But let it be known, applying numbered counters is not limited to ordered lists. For instance, let’s say you wanted to number the question and answer pairs of a FAQ list.

These are default list styles in all browsers.<ul><li>disc (• • •)</li><li>circle (○ ○ ○)</li><li>square (▪ ▪ ▪)</li><li>decimal (1 2 3)</li><li>decimal-leading-zero (01, 02, 03)</li><li>lower-roman (i ii iii)</li><li>upper-roman (I II III)</li><li>lower-greek (α β γ)</li><li>lower-latin (a b c)</li><li>upper-latin (A B C)</li><li>armenian (Ա Բ Գ)</li><li>georgian (ა ბ გ)</li><li>lower-alpha (a b c)</li><li>upper-alpha (A B C) &nbsp;</li></ul>

Each new “dt” element is a new question, hence where we should apply the numbering. It’s as simple as this:

If you want to show “lower-roman”, “upper-roman” and “decimal” etc. specify which in the counter value itself:

<ul><li>IE 8 having problems to implement the CSS3 feature border radius</li><li>Here we will show you have you make the border radius working with IE 8</li><li>Add the following code that work in the other Browsers and not in IE8.</li></ul>

How to get border radius working in IE8

Element’s width and height are both 100px, and the border-radius is set to 50px, the element will become a circle. but In IE8, as we expect, it would still be a square but don’t worry.

IE 8 having problems to implement the CSS3 feature border radius&nbsp;Here we will show you have you make the border radius working with IE 8&nbsp;Add the following code that work in the other Browsers and not in IE8.

To enable the rounded corner effect, insert this line: behavior: url(css/pie.htc);, like so.

add the following style line inside the class to make it work.

Final CSS that need to have into your CSS file

Sometimes we need to inject common properties to a set of class, so most of the programmer add that properties in inherited class,but the real problem comes when&nbsp;<ul><li>all or some of the classes have different parent class(inheritance)!</li><li>code does not fit well in inheritance hierarchy.</li></ul>

Trait, Powerful feature of PHP

Sometimes we need to inject common properties to a set of class, so most of the programmer add that properties in inherited class, but the real problem comes when&nbsp;<ul><li>all or some of the classes have different parent class(inheritance)!</li><li>code does not fit well in inheritance hierarchy.</li></ul>&nbsp;Here trait comes to rescue our problem, as we all know that php does not support multiple inheritance,&nbsp;so from php 5.4 we can use trait to reuse the sets of method in multiple independent classes.&nbsp;Here in this article we will discuss the use of traits in php to overcome the problem of multiple inheritance.&nbsp;Traits is a mechanism for code reuse in single inheritance languages such as PHP. A Trait is intended to reduce some limitations of single inheritance by enabling a developer to reuse sets of methods freely in several independent classes living in different class hierarchies.

What is trait?

// In above example you can see that both classes (ClassOne and ClassTwo) both having different parent class inherited. // To use our our common set of methods we will simply add trait using “use BundleClass” keyword in our class.&nbsp;//use of traits&nbsp;Congrats, you have successfully implemented powerfull feture of PHP. Keep Coding

Here we will see a simple example of how to create trait, and how we can use common set of methods in multiple classes using Trait.

Use of trait

<ul><li>We will learn in this topic how to solve the REST API bug of Magento 1 while getting the order with Order REST API.</li><li>This bug inside the “Mage_Sales_Model_Api2_Order_Rest” class and this is abstract class so can’t override this via magento module override feature in config.xml</li></ul>

Duplicate entry error when getting order using REST API in Magento

We will learn in this topic how to solve the REST API bug of Magento 1 while getting the order with Order REST API.&nbsp;This bug inside the “Mage_Sales_Model_Api2_Order_Rest” class and this is abstract class so can’t override this via magento module override feature in config.xml&nbsp;We can do this via use of “local” codepool of Magento.&nbsp;We need to copy the “Mage_Sales_Model_Api2_Order_Rest” class into app/code/local/ folder of Magento.&nbsp;Add following line into the file&nbsp;$collection-&gt;getSelect()-&gt;group(‘main_table.entity_id’);&nbsp;Here is full source of file

<ul><li>Here we will learn about How to get cart discount amount in minicart in Magento 2.</li><li>We have to create a new module if you already not created, after that follow the steps that describe in the post.</li><li>#1 : We need to register the Plugin in magento 2.</li></ul>

How to get cart discount amount in minicart in Magento 2

Here we will learn about How to get cart discount amount in minicart in Magento 2.&nbsp;We have to create a new module if you already not created, after that follow the steps that describe in the post.&nbsp;#1 : We need to register the Plugin in magento 2.&nbsp;add the following code in “etc/frontend/di.xml” of your module

&nbsp;#3 : Now you need to run the dependancy Setup in your console or terminal command.&nbsp;php bin/magento setup:di:compile&nbsp;#4: Flush the cache in your console or terminal command.&nbsp;php bin/magento cache:clean &amp;&amp; bin/magento cache:flush

#2 : Add the following code in your plugin file.&nbsp;Namespace\Modulename\Plugin\CustomerData\Cart.php

<ul><li>I think it could be Magento’s bug or maybe not but i am suffered from this issue.</li><li>The issue is that whenever you given rating and reviews on config product and after the rating, you are not allowed to add a product to cart on config product.</li></ul>

How you can redirect back automatically after giving the reviews and ratings on config product in Magento.

I think it could be Magento’s bug or maybe not but i am suffered from this issue.&nbsp;The issue is that whenever you given rating and reviews on config product and after the rating, you are not allowed to add a product to cart on config product.&nbsp;So, here i made a simple solution for that.&nbsp;The solution is you can automatically redirected to that product after successfully given review and rating.&nbsp;For that you should follow the below steps.&nbsp;Copy the below file path into your theme or module if the file is override.&nbsp;app\design\frontend\rwd\default\template\review\from.phtml

<ul><li>We will learn the topic how to create Magento 2 module, In Magento 2 you can start creating your module in app/code folder.</li><li>To create the module you have to go thought the steps describe below.</li></ul>

How to create module in Magento 2 - Sample module step by step

We will learn the topic how to create Magento 2 module, In Magento 2 you can start creating your module in app/code folder.&nbsp;To create the module you have to go thought the steps describe below.&nbsp;#1 : You have to switch your magento mode to “developer”, you have to run following command in your terminal or console.php bin/magento deploy:mode:set developer&nbsp;#2 : Create folder in app/code with your module name.app/code/Namespace/Modulename&nbsp;#3 : Now you need to create required file module.xml inside the etc of Model Directory.app/code/Namespace/Modulename/etc/module.xml&nbsp;content of the file

#5 : Best approach to enable module with following command in terminal or console.php bin/magento module:enable Namespace_Modulename&nbsp;and alternate way to enable the module is go to following fileapp/etc/config.phpadd the following like info the config.php file‘Namespace_Modulename’ =&gt; 1&nbsp;#6 : Now you need to run the final command to finish the sample module of Magento 2.php bin/magento setup:upgradeafter run this command you not need to deploy the static content because you are in developer mode.&nbsp;Now your module is ready to create BLOCK, CONTROLLER, MODULE, PLUGIN, OBSERVER, HELPER etc. inside it.

#4 : Now we need to register your module so we need to create registration.php in the Module Directory.content of the file

<ul><li>Here We will learn about Max Qty Allowed on Items Customization while update cart page.</li><li>We have to create a new module if you already not created, after that follow the steps that describe in the post.</li></ul>

Magento 2 : Max Qty Allowed on Items Customization while update cart page

Here We will learn about Max Qty Allowed on Items Customization while update cart page.&nbsp;We have to create a new module if you already not created, after that follow the steps that describe in the post.&nbsp;#1 : We need to register the Plugin in magento 2.add the following code in “etc/frontend/di.xml” of your module

#3 : Now you need to run the dependancy Setup in your console or terminal command.php bin/magento setup:di:compile&nbsp;#4: Flush the cache in your console or terminal commandphp bin/magento cache:clean &amp;&amp; bin/magento cache:flush

#2 : Add the following code in your plugin file.Namespace\Modulename\Plugin\Qtycheck.php