js conflict in my new template made by bootstrap 4

[kiasati]

Hi
I've designed a template from scratch using bootstrap 4. now i have some problems in product details page.

when i clicked on add to cart button in product details page, nothing happened.  so i did these:

1. i first set "Activate Css Styles & Javascripts" like the picture below.


2. i put 4 js files in js template folder that come with bootstrap.

Code Select Expand

<!-- script src="templates/FarafanMarket/js/jquery.slim.min.js"></script -->
<script src="templates/FarafanMarket/js/tether.min.js"></script>
<script src="templates/FarafanMarket/js/bootstrap.min.js"></script>
<script src="templates/FarafanMarket/js/scripts.js"></script>
i commented out jquery.slim.min.js and problem solved.

but i haven't test my site to find out if commenting out jquery.slim.min.js file has effected on the site.

is there a better way?
whats jquery.slim.min.js file for? how can i find the conflicts in this file with virtuemart?
in "Activate Css Styles & Javascripts" setting that i have made, isn't any problem? is it ok?
whats "Use Fancybox (Recommended)" option for?



problem number 2: when i put the code for custom fields that i have made in templates/mytemplatename/html/com_virtuemart/producdetails.php, product details page goes blank with error "default_customfields" on the top. i add this code in productdetails.php file:

Code Select Expand

<?php if (!empty($this->product->customfieldsSorted['ttposition'])) { ?>
<div class="card mb-2">
<div class="card-body">
<h2 class="card-title">آموزش برخی اصطلاحات فنی و تکنولوژی های دوربین مدار بسته</h2>
<div class="card-text">
<?php
        $this->position='ttposition'; 
        echo $this->loadTemplate('customfields'); 
?>
</div>
</div>
</div>
<?php } ?>


how can i solve these problems?
is there some configuring or adding some code somewhere in my template for virtuemart to work properly?

[Studio 42]

YOu need to copy or add own release of bootstrap, jquery ... in templates/FarafanMarket/js/jui/
and add it using JHtml::_('bootstrap.framework'); in your template.
All script in templates/YOURTEMPLATE/js/jui/ are loaded if they exist and replace core javascripts in /media/jui/js/

[kiasati]

YOu need to copy or add own release of bootstrap, jquery ... in templates/FarafanMarket/js/jui/
and add it using JHtml::_('bootstrap.framework'); in your template.
All script in templates/YOURTEMPLATE/js/jui/ are loaded if they exist and replace core javascripts in /media/jui/js/

with JHtml::_('bootstrap.framework'); only "bootstrap.min.js" loads. second problem is in this way js file loads on the head of the docuement. i want to load it after footer tag.

[Studio 42]

Why load after in footer ?
modify the doc script and add the defer tag, it do the same and dont block iphone browser render(and some other desktop browser)
jquery is the only script to never defer to prevent bugs on loading.
if you have script that have no depedencies, you can use async tag.
Note that i begin to use this trick in my shop and google only cry because jquery.min.js