Javascript error with Magento Porto Theme

I purchase the porto theme at
https://themeforest.net/item/porto-ultimate-responsive-magento-theme/9725864?s_rank=2

It included a lot of feature to help me to customize the theme in light speed. But after installation i saw some javascript error on homepage and catalog and checkout page also:

With owlCarousel jQuery plugin:

With Stellar plugins:

With jQuery Widget:

With timepicker plugin:

After some digg i saw there a lot of their customer got the same problems and they post the question to customer support. But after that they just reply to merge javascript to fix the problem, because requirejs include two different jQuery instance so you can’t use the right jquery instance that loaded with Porto plugins. The solution is you have to remove duplicated jquery load in porto theme and wrapper the plugins load with requirejs so it can load the default Magento jquery instance.

– Remove jQuery load from Porto theme. Create/update your theme file at the default head block: Magento_Theme/layout/default_head_blocks.xml this will applied to all your Magento 2 pages. Put remove directive inside your head tag

and wrap the stellar init function with requirejs, create theme-path/requirejs-config.js to add jquery dependencies for your plugins:

Clean your Magento cache, and flush static view files to refresh new installation

Magento module work with symlink

change file Magento\Framework\Filesystem\Directory\Read

Notice: suggest for development only for security reasons.

public function isFile($path)
{
return $this->driver->isFile($this->driver->getAbsolutePath($this->path, $path));
}

public function isFile($path)
{
$absolute = $this->driver->isFile($this->driver->getAbsolutePath($this->path, $path));
if ($absolute) return $absolute;

$relative = $this->driver->isFile($this->driver->getRelativePath($this->path,$path));
return $relative;
}

How to remove decimal point from price

This guide show you how to customize decimal point for Magento 2 price round, you can add more decimal after point or just remove decimal point from the price.

In Magento 2 price model defined in Magento/Catalog/etc/di.xml for class: Magento\Directory\Model\PriceCurrency

All things you need to customize price problems store here. For all price convert and show to frontend, they will convert by function convertAndRound method in class Magento\Directory\Model\PriceCurrency

In this class you will see const DEFAULT_PRECISION where is store how many decimal after point in price.

With default value set to 2. Now you just change this value to how many decimal after point you want to show on catalog. You can set this value to 0 to make product price displayed in integer.

Currently, we just show how you to update Magento core to change decimal point, i will update a patch with not touching the core in the future very soon.

Magento 2 adding custom option programmatically

Magento 2 have import custom options is excellent, but some time you want to more have more control for custom options product, here is the script to add custom options to the added simple product in magento 2

This is a very basic to add a custom option to a product, hopefully it’s can help you to do some extra stuff for Magento 2 product updates.

Create class autocomplete with get in object manager Magento2 for phpstorm

In Magento 2, in order to create a new object, you have to call get or create method through object manager. But the instance after create is recognize by the IDE, so this is a little bit reduce productivity since you can’t hind methods and properties of the new objects.

Here is the guide to help Phpstorm recognize object create by using PhpStorm Advanced Metadata feature, with this update Phpstorm can understand a object created by magento 2 object manager or a block create by layout object

1. Create a new file: .phpstorm.meta.php at your Phpstorm project root
2. Update .phpstorm.meta.php with  content:

3. Save the file and restart Phpstorm. Let’s try to create some object or create some block in a controller assumed that have construct that assign object manager and layout:

Now you can save your time and enjoy type hinting with Phpstorm and Magento 2 of instance create by object manager now 😉

If you want to create new rule for PhpStorm Advanced Metadata, please take a look at PhpStorm Advanced Metadata for more information.

How to add external js/css/link in magento2

Magento are handle script and css load in head section by layout xml, almost source are loaded from the local, but if some time we want to add external script or css link to our store, external script/source can be 3rd party or external CDN services, here is the guide to do it.

Add this element inside head section of your layout update, you can add in xml layout files or in backend layout update settings, we can add external script/css/link:

Just Simple add the src_type=”url” attribute to the element you want to external.

Maybe loading external script/source can affect your site speed so add async attribute is a good idea, just add async=”true” to the element you want to async loading


If you are a developer you can dig into the code that handle render head block at: