All things Shopify and commerce
In my Assets Folder
i have created a file
application.js.liquid
and then transfer all codes from .js files on assets folder to my application file which i have created
then in theme.liquid file i have delete all .js scripts and paste this code in the last of theme.liquid
</body> this code <script src="{{ 'application.js' | asset_url }}" async defer> </script>
but when i do this webiste few section got broke beccasue of these three codes
{{ 'slideshow.js' | asset_url | script_tag }}
{{ 'animations.min.js' | asset_url | script_tag }}
{{ 'vendor.min.js' | asset_url | script_tag }}
when i delte this website got broke when i leave this website is ok how to solve this problem please i am doing all this to increase my speed in getmetrix
Solved! Go to the solution
This is an accepted solution.
Hi @learningdesign, As you have added all the JS in a single file it might cause an issue because of dependency. As you know apart from theme.liquid many JS are used in sections and snippets which may create a conflict. To resolve this issue you need to break down your Javascript code. Add the JS file code one by one to your file and check if any error occurs or your theme breaks. This way you will know which file or code is creating the conflict.
This is an accepted solution.
Okay, I have checked these files are called twice on your store! That can also create a conflict in your code. If you add them to your code then remove them from the theme.liquid so they don't render twice on the site.
This is an accepted solution.
If removing these codes from theme.liquid breaks your website then leave them as they are and remove its code from your application.js.liquid.
Hi @learningdesign, You should use "async" or "defer" in the script tag do not use both. Replace the below script with your code. Also, Check the sequence of the code. Add the code to your file in the same sequence.
<script src="{{ 'application.js' | asset_url }}" defer> </script>
If this does not work please provide me the storefront URL.
yes the sequence is correct with your code also it did not work
Hi @learningdesign, I checked that your JS is called at the end. Can you share the screenshot where you have added your code exactly in the theme.liquid?
Screen shot with full code
this is my theme.liquid code and my sequence is
Vendor
animation
product
slideshow
app
scroll-shadow
predictive-search
freeshipping
theme-editor
tiny-img-link-preloader
please check what i am doing wrong here
This is an accepted solution.
Hi @learningdesign, As you have added all the JS in a single file it might cause an issue because of dependency. As you know apart from theme.liquid many JS are used in sections and snippets which may create a conflict. To resolve this issue you need to break down your Javascript code. Add the JS file code one by one to your file and check if any error occurs or your theme breaks. This way you will know which file or code is creating the conflict.
I have already did that these 3 codes are breaking website
{{ 'vendor.min.js' | asset_url | script_tag }}
{{ 'animations.min.js' | asset_url | script_tag }}
{{ 'slideshow.js' | asset_url | script_tag }}
This is an accepted solution.
Okay, I have checked these files are called twice on your store! That can also create a conflict in your code. If you add them to your code then remove them from the theme.liquid so they don't render twice on the site.
if i remove these 3 scripts from theme. liquid my website got broke
you mean i need to delete it from the application.js.liquid file where i copy all code ?
This is an accepted solution.
If removing these codes from theme.liquid breaks your website then leave them as they are and remove its code from your application.js.liquid.
Can you help me in any one of this error which will make my website speed little better becasue this minify js did not have any effect on my website
Hi @learningdesign , You can fix the speed issue by fixing the large content paint "Largest Contentful Paint", "Avoid Large layout Shifts", and "Reduce Javascript Execution time" issues. It will help you improve your website speed.
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024