0

I am trying to include the Owl Carousel slider in my Magento 1 Store Home Page. But the line <script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js"></script> is creating an issue. Other sliders are not working.

I tried to investigate the issue. I read this Stack Overflow question: Magento showing jQuery conflict with each other. I found from the HTML source code of my project Home Page that jQuery is included before prototype. I went to page.xml and head.phtml, but I could not find where the jQuery library is added to the site.

=> page.xml :

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>

    <action method="addItem"><type>skin_js</type><name>js/jquery.easing.1.3.js</name><params/></action>
    <action method="addItem"><type>skin_js</type><name>js/jquery.mobile.customized.min.js</name><params/></action>

    <action method="addItem"><type>skin_js</type><name>js/bootstrap.js</name><params/></action>
    <action method="addItem"><type>skin_js</type><name>js/jquery.carouFredSel-6.2.1.js</name><params/></action>
    <action method="addItem"><type>skin_js</type><name>js/jquery.touchSwipe.js</name><params/></action>

    <action method="addItem"><type>skin_js</type><name>js/jquery.bxslider.min.js</name><params/></action>

    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addCss"><stylesheet>css/font-awesome.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/jquery.bxslider.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/photoswipe.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/bootstrap.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/extra_style.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/responsive.css</stylesheet></action>
    <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
    <action method="addCss"><stylesheet>css/superfish.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/camera.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

    <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
    <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
</block>

=> head.phtml :

<meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<title><?php echo $this->getTitle() ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<link rel="icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery-1.10.2.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery-migrate-1.2.1.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/superfish.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/scripts.js') ?>"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300italic,300,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>


<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>
<?php
    $product = Mage::registry('current_product');
    if($product){
?>
<meta property="og:title" content="<?php echo trim($product->getName()); ?>"/>
<meta property="og:url" content="<?php echo $this->helper('core/url')->getCurrentUrl();?>"/>
<meta property="og:type" content="product"/>
<meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($product, 'image') ;?>"/>
<?php
    }
?>

Where can I find the jQuery inclusion?

1

You can add local copy of jquery after following line[skin/frontend/yourpackage/yourtheme/js/jquery.min.js]

<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
<action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name><params/></action>

OR

Use their js using following way:

<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
<action method="addItem"><type>external_js</type><name>http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js</name><params/></action>

And rest of your code

1

If you use a variable $k, then all of your jQuery calls would be with that object.

You can use below example of code. You have to modify according your requirements:

<script type="text/javascript">
$k = jQuery.noConflict();
$k(document).ready(function(){
   $k('#brands-carousel').elastislide({
        imageW      : 163,
        margin      : 0,
        current     : 0,
        border      : 0,
        minItems    : 2,
        easing      : 'easeInBack'
    });
});
</script>

You have to modify according your requirements:

<script type="text/javascript">
$k = jQuery.noConflict();
$k(document).ready(function(){
   $k('#any-id-here').owlcarousel({
        // code here
    });
});
</script>

Hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.