php - Prestashop carousel arrow is not working when clicked

View Original

one text

i'm try to build a prestashop theme. i dowload the prestashop theme from the prestashop development repository on github.

i install the theme on my local development prestashop and all work fine but the carousel al work but if i click on the arrows left or right it will refreh the page instead of going on the next slide.

here is the slider.tpl file code

    {if $homeslider.slides}
  <div id="carousel" data-ride="carousel" class="carousel slide" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}" data-touch="true">
    <ol class="carousel-indicators">
      {foreach from=$homeslider.slides item=slide key=idxSlide name='homeslider'}
      <li data-target="#carousel" data-slide-to="{$idxSlide}"{if $idxSlide == 0} class="active"{/if}></li>
      {/foreach}
    </ol>
    <ul class="carousel-inner" role="listbox">
      {foreach from=$homeslider.slides item=slide name='homeslider'}
        <li class="carousel-item {if $smarty.foreach.homeslider.first}active{/if}" role="option" aria-hidden="{if $smarty.foreach.homeslider.first}false{else}true{/if}">
          <a href="{$slide.url}">
            <figure>
              <img src="{$slide.image_url}" alt="{$slide.legend|escape}" loading="lazy">
              {if $slide.title || $slide.description}
                <figcaption class="caption">
                  <h2 class="display-1 text-uppercase">{$slide.title}</h2>
                  <div class="caption-description">{$slide.description nofilter}</div>
                </figcaption>
              {/if}
            </figure>
          </a>
        </li>
      {/foreach}
    </ul>
    <div class="direction" aria-label="{l s='Carousel buttons' d='Shop.Theme.Global'}">
      <a class="left carousel-control" href="#carousel" role="button" data-slide="prev" aria-label="{l s='Previous' d='Shop.Theme.Global'}">
        <span class="icon-prev hidden-xs" aria-hidden="true">
          <i class="material-icons">&#xE5CB;</i>
        </span>
      </a>
      <a class="right carousel-control" href="#carousel" role="button" data-slide="next" aria-label="{l s='Next' d='Shop.Theme.Global'}">
        <span class="icon-next" aria-hidden="true">
          <i class="material-icons">&#xE5CC;</i>
        </span>
      </a>
    </div>
  </div>
{/if}

can someone tell me how to solve this problem?

theme.js:4740 JQMIGRATE: jQuery 3.0.0+ REQUIRED
theme.js:4747 JQMIGRATE: Migrate is installed with logging active, version 3.1.0
theme.js:4772 JQMIGRATE: jQuery.expr[':'] is deprecated; use jQuery.expr.pseudos
migrateWarn @ theme.js:4772
get @ theme.js:4785
(anonymous) @ jquery-ui.min.js:5
(anonymous) @ jquery-ui.min.js:5
theme.js:4774 console.trace
migrateWarn @ theme.js:4774
get @ theme.js:4785
(anonymous) @ jquery-ui.min.js:5
(anonymous) @ jquery-ui.min.js:5
theme.js:4772 JQMIGRATE: jQuery.fn.mouseup() event shorthand is deprecated
migrateWarn @ theme.js:4772
jQuery.fn.<computed> @ theme.js:5176
(anonymous) @ jquery-ui.min.js:5
(anonymous) @ jquery-ui.min.js:5
theme.js:4774 console.trace
migrateWarn @ theme.js:4774
jQuery.fn.<computed> @ theme.js:5176
(anonymous) @ jquery-ui.min.js:5
(anonymous) @ jquery-ui.min.js:5
theme.js:4772 JQMIGRATE: jQuery.fn.delegate() is deprecated
migrateWarn @ theme.js:4772
delegate @ theme.js:5205
f @ jquery-ui.min.js:8
e @ jquery-ui.min.js:8
(anonymous) @ jquery-ui.min.js:9
(anonymous) @ jquery-ui.min.js:9
theme.js:4774 console.trace
migrateWarn @ theme.js:4774
delegate @ theme.js:5205
f @ jquery-ui.min.js:8
e @ jquery-ui.min.js:8
(anonymous) @ jquery-ui.min.js:9
(anonymous) @ jquery-ui.min.js:9
theme.js:2524 Uncaught TypeError: Cannot read property 'quantityWanted' of undefined
    at createProductSpin (theme.js:2524)
    at HTMLDocument.<anonymous> (theme.js:2456)
    at u (core.js:39)
    at Object.fireWith [as resolveWith] (core.js:39)
    at Function.ready (core.js:39)
    at HTMLDocument.H (core.js:39)
createProductSpin @ theme.js:2524
(anonymous) @ theme.js:2456
u @ core.js:39
fireWith @ core.js:39
ready @ core.js:39
H @ core.js:39
theme.js:4772 JQMIGRATE: jQuery.event.fixHooks are deprecated and removed: resize
migrateWarn @ theme.js:4772
jQuery.event.fix @ theme.js:5121
dispatch @ core.js:39
g.handle @ core.js:39
theme.js:4774 console.trace
migrateWarn @ theme.js:4774
jQuery.event.fix @ theme.js:5121
dispatch @ core.js:39
g.handle @ core.js:39
favicon.ico:1 GET http://localhost/prestashop/img//prestashop/img/favicon.ico?1598427341 403 (Forbidden)
favicon.ico:1 GET http://localhost/prestashop/img//prestashop/img/favicon.ico?1598427341 403 (Forbidden)
DevTools failed to load SourceMap: Could not load content for http://localhost/prestashop/themes/core.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
theme.js:4772 JQMIGRATE: jQuery.event.fixHooks are deprecated and removed: webkitTransitionEnd
migrateWarn @ theme.js:4772
jQuery.event.fix @ theme.js:5121
dispatch @ core.js:39
g.handle @ core.js:39
trigger @ core.js:39
(anonymous) @ core.js:39
each @ core.js:28
each @ core.js:28
trigger @ core.js:39
triggerTransitionEnd @ theme.js:3482
(anonymous) @ theme.js:3468
setTimeout (async)
f @ theme.js:3467
j._slide @ theme.js:3645
j.next @ theme.js:3594
j.nextWhenVisible @ theme.js:3596
i @ core.js:28
setInterval (async)
j.cycle @ theme.js:3602
j._slide @ theme.js:3645
j.next @ theme.js:3594
j.nextWhenVisible @ theme.js:3596
i @ core.js:28
setInterval (async)
j.cycle @ theme.js:3602
(anonymous) @ theme.js:3652
each @ core.js:28
each @ core.js:28
j._jQueryInterface @ theme.js:3648
(anonymous) @ theme.js:3668
each @ core.js:28
each @ core.js:28
(anonymous) @ theme.js:3667
dispatch @ core.js:39
g.handle @ core.js:39
load (async)
add @ core.js:39
(anonymous) @ core.js:39
each @ core.js:28
each @ core.js:28
ce @ core.js:39
on @ core.js:39
(anonymous) @ core.js:136
n @ core.js:1
(anonymous) @ core.js:88
n @ core.js:1
(anonymous) @ core.js:64
n @ core.js:1
(anonymous) @ core.js:64
n @ core.js:1
(anonymous) @ core.js:1
(anonymous) @ core.js:1
theme.js:4774 console.trace
migrateWarn @ theme.js:4774
jQuery.event.fix @ theme.js:5121
dispatch @ core.js:39
g.handle @ core.js:39
trigger @ core.js:39
(anonymous) @ core.js:39
each @ core.js:28
each @ core.js:28
trigger @ core.js:39
triggerTransitionEnd @ theme.js:3482
(anonymous) @ theme.js:3468
setTimeout (async)
f @ theme.js:3467
j._slide @ theme.js:3645
j.next @ theme.js:3594
j.nextWhenVisible @ theme.js:3596
i @ core.js:28
setInterval (async)
j.cycle @ theme.js:3602
j._slide @ theme.js:3645
j.next @ theme.js:3594
j.nextWhenVisible @ theme.js:3596
i @ core.js:28
setInterval (async)
j.cycle @ theme.js:3602
(anonymous) @ theme.js:3652
each @ core.js:28
each @ core.js:28
j._jQueryInterface @ theme.js:3648
(anonymous) @ theme.js:3668
each @ core.js:28
each @ core.js:28
(anonymous) @ theme.js:3667
dispatch @ core.js:39
g.handle @ core.js:39
load (async)
add @ core.js:39
(anonymous) @ core.js:39
each @ core.js:28
each @ core.js:28
ce @ core.js:39
on @ core.js:39
(anonymous) @ core.js:136
n @ core.js:1
(anonymous) @ core.js:88
n @ core.js:1
(anonymous) @ core.js:64
n @ core.js:1
(anonymous) @ core.js:64
n @ core.js:1
(anonymous) @ core.js:1
(anonymous) @ core.js:1
theme.js:4772 JQMIGRATE: jQuery.event.props.concat() is deprecated and removed
migrateWarn @ theme.js:4772
get @ theme.js:4785
fix @ core.js:39
jQuery.event.fix @ theme.js:5129
dispatch @ core.js:39
g.handle @ core.js:39
theme.js:4774 console.trace
migrateWarn @ theme.js:4774
get @ theme.js:4785
fix @ core.js:39
jQuery.event.fix @ theme.js:5129
dispatch @ core.js:39
g.handle @ core.js:39
theme.js:4772 JQMIGRATE: jQuery.event.fixHooks are deprecated and removed: mouseover
migrateWarn @ theme.js:4772
jQuery.event.fix @ theme.js:5121
dispatch @ core.js:39
g.handle @ core.js:39
theme.js:4774 console.trace
migrateWarn @ theme.js:4774
jQuery.event.fix @ theme.js:5121
dispatch @ core.js:39
g.handle @ core.js:39
theme.js:5124 Uncaught TypeError: jQuery.event.addProp is not a function
    at Object.jQuery.event.fix (theme.js:5124)
    at HTMLDivElement.dispatch (core.js:39)
    at HTMLDivElement.g.handle (core.js:39)
jQuery.event.fix @ theme.js:5124
dispatch @ core.js:39
g.handle @ core.js:39

this is the log i get in the browser console

Source
© 2021
E-mail: contact@webdevask.com
Back to top