VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: kiasati on January 30, 2018, 14:38:03 PM

Title: js conflict in my new template made by bootstrap 4
Post by: kiasati on January 30, 2018, 14:38:03 PM
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.
(http://uupload.ir/files/nj9x_vm1.jpg)

2. i put 4 js files in js template folder that come with bootstrap.
<!-- 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:
<?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?
Title: Re: js conflict in my new template made by bootstrap 4
Post by: Studio 42 on January 31, 2018, 18:10:29 PM
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/
Title: Re: js conflict in my new template made by bootstrap 4
Post by: kiasati on February 01, 2018, 06:35:59 AM
Quote from: Studio 42 on January 31, 2018, 18:10:29 PM
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.
Title: Re: js conflict in my new template made by bootstrap 4
Post by: Studio 42 on February 01, 2018, 13:45:44 PM
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