Integration with Swiper

  • Posts: 429
  • Thank you received: 19
1 year 4 months ago #354403

Hello, owl carousel is now deprecated and not supported, is it possible to integrate swiper which has much more features. I did some tests it works great.

Last edit: 1 year 4 months ago by neo191987.

Please Log in or Create an account to join the conversation.

  • Posts: 83022
  • Thank you received: 13403
  • MODERATOR
1 year 4 months ago #354406

Hi,

Thank you for your feedback. We'll look into it.

Please Log in or Create an account to join the conversation.

  • Posts: 429
  • Thank you received: 19
1 year 4 months ago #354510

Hi, I'm almost done with Swiper integration and will post the code tomorrow based on /components/com_hikashop/views/category/tmpl/carousel.php. I rewrote some of the code so that everything works correctly. If you choose you can use it as a base, I have ported most of the functions from owl carousel.

Please Log in or Create an account to join the conversation.

  • Posts: 83022
  • Thank you received: 13403
  • MODERATOR
1 year 4 months ago #354516

Hi,

That would be terrific. I was actually looking at this soon. So if you can provide what you did, that would help a lot !
Thanks in advance.

Please Log in or Create an account to join the conversation.

  • Posts: 429
  • Thank you received: 19
1 year 4 months ago #354526

100% working code with all features. A big battle was with the additional Pagination types :)

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	4.7.5
 * @author	hikashop.com
 * @copyright	(C) 2010-2023 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?>
<?php
$options=array();
$rows=array();
$doc=JFactory::getDocument();
$lang=JFactory::getLanguage();
$rtl=(bool) $lang->isRTL();
$mainDivClasses='hikashop_carousel';
if($this->params->get('only_if_products','-1')=='-1'){
$config=hikashop_config();
$defaultParams=$config->get('default_params');
$this->params->set('only_if_products',@$defaultParams['only_if_products']);
}
$only_if_products=$this->params->get('only_if_products',0);
foreach($this->rows as $row){
if($only_if_products&&$row->number_of_products<1)continue;
$rows[]=$row;
}
$this->rows=$rows;
$nb_products=count($this->rows);
$options['direction']='"'.$this->params->get('slide_direction').'"';
if($nb_products<$this->params->get('columns')){
$options['loop']=false;
$columns=$this->params->get('columns');
$products=$this->params->get('item_by_slide');
}
else{
$columns=min($nb_products,$this->params->get('columns'));
$products=min($nb_products,$this->params->get('item_by_slide'));
}
if(empty($products))$products=$columns;
$mainDivName=$this->params->get('main_div_name');
$spaceBetween=(int)$this->params->get('margin');
$options['spaceBetween']=$spaceBetween;
$navigation=(bool) $this->params->get('display_button');
if($navigation){
$options['navigation']='{nextEl:".swiper-button-next", prevEl:".swiper-button-prev"}';
}
$autoplay=(bool) $this->params->get('auto_slide');
if($autoplay){
$delay=$this->params->get('auto_slide_duration');
if(empty($delay))$delay=3000;
$options['autoplay']='{pauseOnMouseEnter:true, disableOnInteraction:false, delay:'.$delay.'}';
}
$carouselEffect=$this->params->get('carousel_effect');
if($carouselEffect=='fade'){
$products=1;
$options['loop']=true;
$options['autoHeight']=true;
$options['mousewheel']=true;
$options['spaceBetween']=0;
}
else{
$options['direction']='"horizontal"';
}
$options['slidesPerView']=$products;
$speed=$this->params->get('carousel_effect_duration');
if(empty($speed))$speed=1500;
$options['speed']=$speed;
$pagination_position=$this->params->get('pagination_position');
$pagination_type=$this->params->get('pagination_type');
$pagination=$pagination_type!='no_pagination';
if($pagination){
switch($pagination_position){
case 'top':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'bottom':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'left':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'right':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'inside':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
}
$options['pagination']='{el:".swiper-pagination", clickable:true}';
}
if($products>1){
$slidesPerView=$this->params->get('one_by_one')?1:$products;
$slideByFor2=$this->params->get('one_by_one')?1:2;
$options['breakpoints']='{0:{slidesPerView:1},768:{slidesPerView:'.$slideByFor2.', spaceBetween:'.$spaceBetween.'},992:{slidesPerView:'.$products.', spaceBetween:'.$spaceBetween.'}}';
}
?>
<div class="hikashop_carousel_parent_div <?php echo $pagination_type; ?>" id="hikashop_carousel_parent_div_<?php echo $mainDivName; ?>">
<div class="<?php echo $mainDivClasses; ?>">
<div class="swiper" id="hikashop_carousel_<?php echo $mainDivName; ?>" <?php if($rtl){ ?>dir="rtl"<?php } ?>>
<div class="swiper-wrapper">
<?php foreach($this->rows as $row){$this->row=&$row; ?>
<div class="swiper-slide"><?php $this->setLayout('listing_'.$this->params->get('div_item_layout_type'));echo $this->loadTemplate(); ?></div>
<?php } ?>
</div>
</div>
<?php if($pagination&&$pagination_type=='rounds'){ ?>
<div class="swiper-pagination<?php echo $paginationDivClasses; ?>"></div>
<?php
}
if($pagination&&$pagination_type!='rounds'){
$i=0;
$pagination_html='<div thumbsSlider="" class="swiper" id="hikashop_carousel_thumbs_'.$mainDivName.'"><div class="swiper-wrapper">';
foreach($this->rows as $row){
$i++;
$this->row=&$row;
$thumbs=$i;
$thumbs_data='';
switch($pagination_type){
case 'numbers':
$thumbs_data=$i;
break;
case 'names':
$thumbs_data=$this->escape($row->category_name);
break;
case 'thumbnails':
$thumbnailHeight=$this->params->get('pagination_image_height');
$thumbnailWidth=$this->params->get('pagination_image_width');
if(empty($thumbnailWidth)&&empty($thumbnailHeight)){
$thumbnailHeight=$this->image->main_thumbnail_y/4;
$thumbnailWidth=$this->image->main_thumbnail_x/4;
}
$img=$this->image->getThumbnail(@$this->row->file_path,array('width'=>$thumbnailWidth,'height'=>$thumbnailHeight),array('default'=>true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside')));
if($img->success)$thumbs_data='<img src="'.$img->url.'" />';
break;
}
$pagination_html.='<div class="swiper-slide">'.$thumbs_data.'</div>';
}
$pagination_html.='</div></div>';
echo $pagination_html;
$options['thumbs']='{swiper: thumbs}';
}
if($navigation){
?>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<?php } ?>
</div>
</div>
<script type="text/javascript">
window.hikashop.ready(function(){
<?php if($pagination&&$pagination_type!='rounds'){ ?>
var thumbs = new Swiper('#hikashop_carousel_thumbs_<?php echo $mainDivName; ?>', { spaceBetween: <?php echo $spaceBetween; ?>, slidesPerView: <?php echo $thumbs; ?>, freeMode: true, watchSlidesProgress: true });
<?php } ?>
var carousel = new Swiper('#hikashop_carousel_<?php echo $mainDivName; ?>', { <?php foreach($options as $key=>$val){if(is_bool($val))$val=$val?'true':'false';echo $key.':'.$val.',';} ?> });
});
</script>
<?php $doc->addScript(JURI::base(true).'/templates/shaper_helixultimate/js/addons/swiper/swiper-bundle.min.js'); ?>

Last edit: 1 year 4 months ago by neo191987.

Please Log in or Create an account to join the conversation.

  • Posts: 429
  • Thank you received: 19
1 year 4 months ago #354537

Final code

category

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	4.7.5
 * @author	hikashop.com
 * @copyright	(C) 2010-2023 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?>
<?php
$options=array();
$rows=array();
$doc=JFactory::getDocument();
$lang=JFactory::getLanguage();
$rtl=(bool) $lang->isRTL();
$mainDivClasses='hikashop_carousel';
if($this->params->get('only_if_products','-1')=='-1'){
$config=hikashop_config();
$defaultParams=$config->get('default_params');
$this->params->set('only_if_products',@$defaultParams['only_if_products']);
}
$only_if_products=$this->params->get('only_if_products',0);
foreach($this->rows as $row){
if($only_if_products&&$row->number_of_products<1)continue;
$rows[]=$row;
}
$this->rows=$rows;
$nb_products=count($this->rows);
$options['direction']='"'.$this->params->get('slide_direction').'"';
if($nb_products<$this->params->get('columns')){
$options['loop']=false;
$columns=$this->params->get('columns');
$products=$this->params->get('item_by_slide');
}
else{
$columns=min($nb_products,$this->params->get('columns'));
$products=min($nb_products,$this->params->get('item_by_slide'));
}
if(empty($products))$products=$columns;
$mainDivName=$this->params->get('main_div_name');
$spaceBetween=(int)$this->params->get('margin');
$options['spaceBetween']=$spaceBetween;
$navigation=(bool) $this->params->get('display_button');
if($navigation){
$options['navigation']='{nextEl:"#hikashop_carousel_navigation_'.$mainDivName.'>.swiper-button-next", prevEl:"#hikashop_carousel_navigation_'.$mainDivName.'>.swiper-button-prev"}';
}
$autoplay=(bool) $this->params->get('auto_slide');
if($autoplay){
$delay=$this->params->get('auto_slide_duration');
if(empty($delay))$delay=3000;
$options['autoplay']='{pauseOnMouseEnter:true, disableOnInteraction:false, delay:'.$delay.'}';
}
$carouselEffect=$this->params->get('carousel_effect');
if($carouselEffect=='fade'){
$products=1;
$options['loop']=true;
$options['autoHeight']=true;
$options['mousewheel']=true;
$options['spaceBetween']=0;
}
else{
$options['direction']='"horizontal"';
}
$options['slidesPerView']=$products;
$speed=$this->params->get('carousel_effect_duration');
if(empty($speed))$speed=1500;
$options['speed']=$speed;
$pagination_position=$this->params->get('pagination_position');
$pagination_type=$this->params->get('pagination_type');
$pagination=$pagination_type!='no_pagination';
if($pagination){
switch($pagination_position){
case 'top':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'bottom':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'left':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'right':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'inside':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
}
$options['pagination']='{el:"#hikashop_carousel_pagination_'.$mainDivName.'>.swiper-pagination", clickable:true}';
}
if($products>1){
$slidesPerView=$this->params->get('one_by_one')?1:$products;
$slideByFor2=$this->params->get('one_by_one')?1:2;
$options['breakpoints']='{0:{slidesPerView:1},768:{slidesPerView:'.$slideByFor2.', spaceBetween:'.$spaceBetween.'},992:{slidesPerView:'.$products.', spaceBetween:'.$spaceBetween.'}}';
}
?>
<div class="hikashop_carousel_parent_div <?php echo $pagination_type; ?>" id="hikashop_carousel_parent_div_<?php echo $mainDivName; ?>">
<div class="<?php echo $mainDivClasses; ?>">
<div class="swiper" id="hikashop_carousel_<?php echo $mainDivName; ?>" <?php if($rtl){ ?>dir="rtl"<?php } ?>>
<div class="swiper-wrapper">
<?php foreach($this->rows as $row){$this->row=&$row; ?>
<div class="swiper-slide"><?php $this->setLayout('listing_'.$this->params->get('div_item_layout_type'));echo $this->loadTemplate(); ?></div>
<?php } ?>
</div>
</div>
<?php if($pagination&&$pagination_type=='rounds'){ ?>
<div id="hikashop_carousel_pagination_<?php echo $mainDivName; ?>"><div class="swiper-pagination<?php echo $paginationDivClasses; ?>"></div></div>
<?php
}
if($pagination&&$pagination_type!='rounds'){
$i=0;
$pagination_html='<div thumbsSlider="" class="swiper" id="hikashop_carousel_thumbs_'.$mainDivName.'"><div class="swiper-wrapper">';
foreach($this->rows as $row){
$i++;
$this->row=&$row;
$thumbs=$i;
$thumbs_data='';
switch($pagination_type){
case 'numbers':
$thumbs_data=$i;
break;
case 'names':
$thumbs_data=$this->escape($row->category_name);
break;
case 'thumbnails':
$thumbnailHeight=$this->params->get('pagination_image_height');
$thumbnailWidth=$this->params->get('pagination_image_width');
if(empty($thumbnailWidth)&&empty($thumbnailHeight)){
$thumbnailHeight=$this->image->main_thumbnail_y/4;
$thumbnailWidth=$this->image->main_thumbnail_x/4;
}
$img=$this->image->getThumbnail(@$this->row->file_path,array('width'=>$thumbnailWidth,'height'=>$thumbnailHeight),array('default'=>true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside')));
if($img->success)$thumbs_data='<img src="'.$img->url.'" />';
break;
}
$pagination_html.='<div class="swiper-slide">'.$thumbs_data.'</div>';
}
$pagination_html.='</div></div>';
echo $pagination_html;
$options['thumbs']='{swiper: thumbs}';
}
if($navigation){
?>
<div id="hikashop_carousel_navigation_<?php echo $mainDivName; ?>"><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>
<?php } ?>
</div>
</div>
<script type="text/javascript">
window.hikashop.ready(function(){
<?php if($pagination&&$pagination_type!='rounds'){ ?>
var thumbs = new Swiper('#hikashop_carousel_thumbs_<?php echo $mainDivName; ?>', { spaceBetween: <?php echo $spaceBetween; ?>, slidesPerView: <?php echo $thumbs; ?>, freeMode: true, watchSlidesProgress: true });
<?php } ?>
var carousel = new Swiper('#hikashop_carousel_<?php echo $mainDivName; ?>', { <?php foreach($options as $key=>$val){if(is_bool($val))$val=$val?'true':'false';echo $key.':'.$val.',';} ?> });
});
</script>
<?php $doc->addScript(JURI::base(true).'/templates/shaper_helixultimate/js/addons/swiper/swiper-bundle.min.js'); ?>

product
<?php
/**
 * @package	HikaShop for Joomla!
 * @version	4.7.5
 * @author	hikashop.com
 * @copyright	(C) 2010-2023 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?>
<?php
$options=array();
$doc=JFactory::getDocument();
$lang=JFactory::getLanguage();
$rtl=(bool) $lang->isRTL();
$mainDivClasses='hikashop_carousel';
$nb_products=count($this->rows);
$options['direction']='"'.$this->params->get('slide_direction').'"';
if($nb_products<$this->params->get('columns')){
$options['loop']=false;
$columns=$this->params->get('columns');
$products=$this->params->get('item_by_slide');
}
else{
$columns=min($nb_products,$this->params->get('columns'));
$products=min($nb_products,$this->params->get('item_by_slide'));
}
if(empty($products))$products=$columns;
$mainDivName=$this->params->get('main_div_name');
$spaceBetween=(int)$this->params->get('margin');
$options['spaceBetween']=$spaceBetween;
$navigation=(bool) $this->params->get('display_button');
if($navigation){
$options['navigation']='{nextEl:"#hikashop_carousel_navigation_'.$mainDivName.'>.swiper-button-next", prevEl:"#hikashop_carousel_navigation_'.$mainDivName.'>.swiper-button-prev"}';
}
$autoplay=(bool) $this->params->get('auto_slide');
if($autoplay){
$delay=$this->params->get('auto_slide_duration');
if(empty($delay))$delay=3000;
$options['autoplay']='{pauseOnMouseEnter:true, disableOnInteraction:false, delay:'.$delay.'}';
}
$carouselEffect=$this->params->get('carousel_effect');
if($carouselEffect=='fade'){
$products=1;
$options['loop']=true;
$options['autoHeight']=true;
$options['mousewheel']=true;
$options['spaceBetween']=0;
}
else{
$options['direction']='"horizontal"';
}
$options['slidesPerView']=$products;
$speed=$this->params->get('carousel_effect_duration');
if(empty($speed))$speed=1500;
$options['speed']=$speed;
$pagination_position=$this->params->get('pagination_position');
$pagination_type=$this->params->get('pagination_type');
$pagination=$pagination_type!='no_pagination';
if($pagination){
switch($pagination_position){
case 'top':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'bottom':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'left':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'right':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
case 'inside':
$paginationDivClasses=' swiper-pagination-'.$pagination_position;
break;
}
$options['pagination']='{el:"#hikashop_carousel_pagination_'.$mainDivName.'>.swiper-pagination", clickable:true}';
}
if($products>1){
$slidesPerView=$this->params->get('one_by_one')?1:$products;
$slideByFor2=$this->params->get('one_by_one')?1:2;
$options['breakpoints']='{0:{slidesPerView:1},768:{slidesPerView:'.$slideByFor2.', spaceBetween:'.$spaceBetween.'},992:{slidesPerView:'.$products.', spaceBetween:'.$spaceBetween.'}}';
}
?>
<div class="hikashop_carousel_parent_div <?php echo $pagination_type; ?>" id="hikashop_carousel_parent_div_<?php echo $mainDivName; ?>">
<div class="<?php echo $mainDivClasses; ?>">
<div class="swiper" id="hikashop_carousel_<?php echo $mainDivName; ?>" <?php if($rtl){ ?>dir="rtl"<?php } ?>>
<div class="swiper-wrapper">
<?php foreach($this->rows as $row){$this->row=&$row; ?>
<div class="swiper-slide" itemprop="itemList" itemscope="" itemtype="http://schema.org/ItemList"><?php $this->setLayout('listing_'.$this->params->get('div_item_layout_type'));echo $this->loadTemplate(); ?></div>
<?php } ?>
</div>
</div>
<?php if($pagination&&$pagination_type=='rounds'){ ?>
<div id="hikashop_carousel_pagination_<?php echo $mainDivName; ?>"><div class="swiper-pagination<?php echo $paginationDivClasses; ?>"></div></div>
<?php
}
if($pagination&&$pagination_type!='rounds'){
$i=0;
$pagination_html='<div thumbsSlider="" class="swiper" id="hikashop_carousel_thumbs_'.$mainDivName.'"><div class="swiper-wrapper">';
foreach($this->rows as $row){
$i++;
$this->row=&$row;
$thumbs=$i;
$thumbs_data='';
switch($pagination_type){
case 'numbers':
$thumbs_data=$i;
break;
case 'names':
$thumbs_data=$this->escape($row->product_name);
break;
case 'thumbnails':
$thumbnailHeight=$this->params->get('pagination_image_height');
$thumbnailWidth=$this->params->get('pagination_image_width');
if(empty($thumbnailWidth)&&empty($thumbnailHeight)){
$thumbnailHeight=$this->image->main_thumbnail_y/4;
$thumbnailWidth=$this->image->main_thumbnail_x/4;
}
$img=$this->image->getThumbnail(@$this->row->file_path,array('width'=>$thumbnailWidth,'height'=>$thumbnailHeight),array('default'=>true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside')));
if($img->success)$thumbs_data='<img src="'.$img->url.'" />';
break;
}
$pagination_html.='<div class="swiper-slide">'.$thumbs_data.'</div>';
}
$pagination_html.='</div></div>';
echo $pagination_html;
$options['thumbs']='{swiper: thumbs}';
}
if($navigation){
?>
<div id="hikashop_carousel_navigation_<?php echo $mainDivName; ?>"><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>
<?php } ?>
</div>
</div>
<script type="text/javascript">
window.hikashop.ready(function(){
<?php if($pagination&&$pagination_type!='rounds'){ ?>
var thumbs = new Swiper('#hikashop_carousel_thumbs_<?php echo $mainDivName; ?>', { spaceBetween: <?php echo $spaceBetween; ?>, slidesPerView: <?php echo $thumbs; ?>, freeMode: true, watchSlidesProgress: true });
<?php } ?>
var carousel = new Swiper('#hikashop_carousel_<?php echo $mainDivName; ?>', { <?php foreach($options as $key=>$val){if(is_bool($val))$val=$val?'true':'false';echo $key.':'.$val.',';} ?> });
});
</script>
<?php $doc->addScript(JURI::base(true).'/templates/shaper_helixultimate/js/addons/swiper/swiper-bundle.min.js'); ?>

Attachments:
Last edit: 1 year 4 months ago by neo191987.

Please Log in or Create an account to join the conversation.

  • Posts: 83022
  • Thank you received: 13403
  • MODERATOR
1 year 4 months ago #354532

Hi,

Thanks a lot ! I've integrated it on my end. It works great as far as I can see.
Thanks very much. We'll be able to add this to the next version of HikaShop.

Last edit: 1 year 4 months ago by nicolas.
The following user(s) said Thank You: neo191987

Please Log in or Create an account to join the conversation.

  • Posts: 429
  • Thank you received: 19
1 year 4 months ago #354573

Hi, glad to hear that. I just want to make some clarifications on the shared code to synchronize our work. The following lines have been removed in the original code

if(!HIKASHOP_J40 && $this->config->get('carousel_legacy', true)) {
	$this->setLayout('carousel_legacy');
	echo $this->loadTemplate();
	return;
}

$borderClass="";
if($this->params->get('border_visible', 1) == 1) {
	$borderClass = "hikashop_subcontainer_border";
}
if($this->params->get('border_visible', 1) == 2) {
	$borderClass = "thumbnail";
}

My frontend has been almost completely rewritten to my liking and therefore differs from the original. Can you add the effects as an option in the backend like Fade, Coverflow, Flip, Cube etc. If you don't have time, I'll write it in the frontend (for more information here ).

Last edit: 1 year 4 months ago by neo191987.

Please Log in or Create an account to join the conversation.

  • Posts: 83022
  • Thank you received: 13403
  • MODERATOR
1 year 4 months ago #354574

Hi,

I actually didn't use your code "as is".
The main carousel file is actually almost unchanged on my end. I only added the code below at the top:

if($this->config->get('carousel_version', 'swiper') == 'swiper') {
	$this->setLayout('carousel_swiper');
	echo $this->loadTemplate();
	return;
}
This means that starting next version the swiper display will be the default, but there will be a hidden option carousel_version which can be changed in the database in case someone customized the old carousel and want to revert to the old one after the update.
And in the carousel_swiper.php view file, I've put your code:
<?php
hikashop_loadJslib('swiper');
$options = [];
$rows = [];
$doc = JFactory::getDocument();
$lang = JFactory::getLanguage();
$rtl = (bool)$lang->isRTL();
$mainDivClasses = "hikashop_carousel";
if ($this->params->get("only_if_products", "-1") == "-1") {
    $config = hikashop_config();
    $defaultParams = $config->get("default_params");
    $this->params->set("only_if_products", @$defaultParams["only_if_products"]);
}
$only_if_products = $this->params->get("only_if_products", 0);
foreach ($this->rows as $row) {
    if ($only_if_products && $row->number_of_products < 1) {
        continue;
    }
    $rows[] = $row;
}
$this->rows = $rows;
$nb_products = count($this->rows);
$options["direction"] = '"' . $this->params->get("slide_direction") . '"';
if ($nb_products < $this->params->get("columns")) {
    $options["loop"] = false;
    $columns = $this->params->get("columns");
    $products = $this->params->get("item_by_slide");
} else {
    $columns = min($nb_products, $this->params->get("columns"));
    $products = min($nb_products, $this->params->get("item_by_slide"));
}
if (empty($products)) {
    $products = $columns;
}
$mainDivName = $this->params->get("main_div_name");
$spaceBetween = (int) $this->params->get("margin");
$options["spaceBetween"] = $spaceBetween;
$navigation = (bool) $this->params->get("display_button");
if ($navigation) {
    $options["navigation"] =
        '{nextEl:"#hikashop_carousel_navigation_' .
        $mainDivName .
        '>.swiper-button-next", prevEl:"#hikashop_carousel_navigation_' .
        $mainDivName .
        '>.swiper-button-prev"}';
}
$autoplay = (bool) $this->params->get("auto_slide");
if ($autoplay) {
    $delay = $this->params->get("auto_slide_duration");
    if (empty($delay)) {
        $delay = 3000;
    }
    $options["autoplay"] =
        "{pauseOnMouseEnter:true, disableOnInteraction:false, delay:" .
        $delay .
        "}";
}
$carouselEffect = $this->params->get("carousel_effect");
if ($carouselEffect == "fade") {
    $products = 1;
    $options["loop"] = true;
    $options["autoHeight"] = true;
    $options["mousewheel"] = true;
    $options["spaceBetween"] = 0;
} else {
    $options["direction"] = '"horizontal"';
}
$options["slidesPerView"] = $products;
$speed = $this->params->get("carousel_effect_duration");
if (empty($speed)) {
    $speed = 1500;
}
$options["speed"] = $speed;
$pagination_position = $this->params->get("pagination_position");
$pagination_type = $this->params->get("pagination_type");
$pagination = $pagination_type != "no_pagination";
$paginationDivClasses='';
if ($pagination) {
    switch ($pagination_position) {
        case "top":
            $paginationDivClasses .=
                " swiper-pagination-" . $pagination_position;
            break;
        case "bottom":
            $paginationDivClasses .=
                " swiper-pagination-" . $pagination_position;
            break;
        case "left":
            $paginationDivClasses .=
                " swiper-pagination-" . $pagination_position;
            break;
        case "right":
            $paginationDivClasses .=
                " swiper-pagination-" . $pagination_position;
            break;
        case "inside":
            $paginationDivClasses .=
                " swiper-pagination-" . $pagination_position;
            break;
    }
    $options["pagination"] = '{el:"#hikashop_carousel_pagination_' . $mainDivName . '>.swiper-pagination", clickable:true}';
}
if ($products > 1) {
    $slidesPerView = $this->params->get("one_by_one") ? 1 : $products;
    $slideByFor2 = $this->params->get("one_by_one") ? 1 : 2;
    $options["breakpoints"] =
        "{0:{slidesPerView:1},768:{slidesPerView:" .
        $slideByFor2 .
        ", spaceBetween:" .
        $spaceBetween .
        "},992:{slidesPerView:" .
        $products .
        ", spaceBetween:" .
        $spaceBetween .
        "}}";
}
?>
<div class="hikashop_carousel_parent_div <?php echo $pagination_type; ?>" id="hikashop_carousel_parent_div_<?php echo $mainDivName; ?>">
    <div class="<?php echo $mainDivClasses; ?>">
        <div class="swiper" id="hikashop_carousel_<?php echo $mainDivName; ?>" <?php if($rtl){ ?>dir="rtl"<?php } ?>>
            <div class="swiper-wrapper">
<?php 
foreach ($this->rows as $row) {
    $this->row = &$row;
?>
                <div class="swiper-slide">
<?php
    $this->setLayout("listing_" . $this->params->get("div_item_layout_type"));
    echo $this->loadTemplate();
?>
                </div>
<?php
}
?>
            </div>
        </div>
<?php
if ($pagination && $pagination_type == "rounds") {
?>
        <div id="hikashop_carousel_pagination_<?php echo $mainDivName; ?>">
            <div class="swiper-pagination<?php echo $paginationDivClasses; ?>">
            </div>
        </div>
<?php
}
if ($pagination && $pagination_type != "rounds") {
    $i = 0;
    $pagination_html =
        '<div thumbsSlider="" class="swiper" id="hikashop_carousel_thumbs_' .
        $mainDivName .
        '"><div class="swiper-wrapper">';
    foreach ($this->rows as $row) {
        $i++;
        $this->row = &$row;
        $thumbs = $i;
        $thumbs_data = "";
        switch ($pagination_type) {
            case "numbers":
                $thumbs_data = $i;
                break;
            case "names":
                $thumbs_data = $this->escape($row->category_name);
                break;
            case "thumbnails":
                $thumbnailHeight = $this->params->get(
                    "pagination_image_height"
                );
                $thumbnailWidth = $this->params->get("pagination_image_width");
                if (empty($thumbnailWidth) && empty($thumbnailHeight)) {
                    $thumbnailHeight = $this->image->main_thumbnail_y / 4;
                    $thumbnailWidth = $this->image->main_thumbnail_x / 4;
                }
                $img = $this->image->getThumbnail(
                    @$this->row->file_path,
                    ["width" => $thumbnailWidth, "height" => $thumbnailHeight],
                    [
                        "default" => true,
                        "forcesize" => $this->config->get(
                            "image_force_size",
                            true
                        ),
                        "scale" => $this->config->get(
                            "image_scale_mode",
                            "inside"
                        ),
                    ]
                );
                if ($img->success) {
                    $thumbs_data = '<img src="' . $img->url . '" />';
                }
                break;
        }
        $pagination_html .=
            '<div class="swiper-slide">' . $thumbs_data . "</div>";
    }
    $pagination_html .= "</div></div>";
    echo $pagination_html;
    $options["thumbs"] = "{swiper: thumbs}";
}
if ($navigation) {
?>
        <div id="hikashop_carousel_navigation_<?php echo $mainDivName; ?>">
            <div class="swiper-button-prev">
            </div>
            <div class="swiper-button-next">
            </div>
        </div>
<?php
}
?>
    </div>
</div>
<script type="text/javascript">
window.hikashop.ready(function(){
<?php
if ($pagination && $pagination_type != "rounds") {
?>
    var thumbs = new Swiper('#hikashop_carousel_thumbs_<?php echo $mainDivName; ?>', { spaceBetween: <?php echo $spaceBetween; ?>, slidesPerView: <?php echo $thumbs; ?>, freeMode: true, watchSlidesProgress: true });
<?php
}
?>
    var carousel = new Swiper('#hikashop_carousel_<?php echo $mainDivName; ?>', {
<?php
foreach ($options as $key => $val) {
    if (is_bool($val)) {
        $val = $val ? "true" : "false";
    }
    echo $key . ":" . $val . ",";
}
?> });
});
</script>
As you can see, I've removed the javascript file you have since I don't use your template. I've taken the swiper bundle JS AND CSS files from the official website and added them to HikaShop. They will be autoloaded with the hikashop_loadJsLib call at the beginning, like owl was loaded in the past.

Regarding extra effects, it's possible but I must say I'm not familiar enough with the swiper API at the moment.

The file administrator/components/com_hikashop/types/effect.php contains the list of available effects for the carousel.
So adding extra choices there is quite easy.
I suppose the best will be to add a check on
$config = hikashop_config(); $config->get('carousel_version', 'swiper');
so that we would only add extra effects to the selector when swiper would be used.

The following user(s) said Thank You: neo191987

Please Log in or Create an account to join the conversation.

  • Posts: 83022
  • Thank you received: 13403
  • MODERATOR
1 year 3 months ago #354925

Hi,

One thing I noticed is that if I hover on a product of the carousel, the carousel doesn't stop.
So when you have an add to cart button for the products in a carousel, if the carousel slides rapidely, you might not have the time to click on the button before it moves.
I can see you've properly set pauseOnMouseEnter for this, but it doesn't seem to do what it is supposed to.
I had to add autoplay.start() autoplay.stop calls in event listeners on mouseover and mouseout to make it work properly. I also adjusted the code to take into account the $mainDivName everywhere so that when you have different carousel modules on the same page, each object is independant:

window.hikashop.ready(function(){
<?php
if ($pagination && $pagination_type != "rounds") {
?>
    var thumbs_<?php echo $mainDivName; ?> = new Swiper('#hikashop_carousel_thumbs_<?php echo $mainDivName; ?>', { spaceBetween: <?php echo $spaceBetween; ?>, slidesPerView: <?php echo $thumbs; ?>, freeMode: true, watchSlidesProgress: true });
<?php
}
?>
    var carousel_<?php echo $mainDivName; ?> = new Swiper('#hikashop_carousel_<?php echo $mainDivName; ?>', {
<?php
foreach ($options as $key => $val) {
    if (is_bool($val)) {
        $val = $val ? "true" : "false";
    }
    echo $key . ":" . $val . ",";
}
?> });
    document.querySelector("#hikashop_carousel_<?php echo $mainDivName; ?>").addEventListener('mouseover',function() {
        carousel_<?php echo $mainDivName; ?>.autoplay.stop();
    });
    document.querySelector("#hikashop_carousel_<?php echo $mainDivName; ?>").addEventListener('mouseout',function() {
        carousel_<?php echo $mainDivName; ?>.autoplay.start();
 });
});

The following user(s) said Thank You: neo191987

Please Log in or Create an account to join the conversation.

  • Posts: 429
  • Thank you received: 19
4 weeks 23 hours ago #364633

Just to add, the current code, only 1 slide will be moved, you can change the code to move several - slidesPerView = slidesPerGroup

If slidesPerView is equal to 4, slidesPerGroup will allow jumping to 4 slides, rather than one at a time.

$options["breakpoints"] = "{0:{slidesPerView:1},768:{slidesPerView:" . $slideByFor2 . ", slidesPerGroup:" . $slideByFor2 . ", spaceBetween:" . $spaceBetween . "},992:{slidesPerView:" . $products . ", slidesPerGroup:" . $products . ", spaceBetween:" . $spaceBetween . "}}";

Last edit: 4 weeks 23 hours ago by neo191987.

Please Log in or Create an account to join the conversation.

  • Posts: 83022
  • Thank you received: 13403
  • MODERATOR
3 weeks 6 days ago #364641

Hi,
Thanks for your feedback, but what about the "Slide one by one" setting of the module ? If that setting is activated, we still want to have a slide one item at a time.

Please Log in or Create an account to join the conversation.

  • Posts: 429
  • Thank you received: 19
3 weeks 6 days ago #364656

I'm currently working on my own improvements to the code. For example, if we have 4 products per row, when it's enabled it should move forward by 1, and when it's disabled it should move forward by 4. Is that how it should work?

Please Log in or Create an account to join the conversation.

  • Posts: 83022
  • Thank you received: 13403
  • MODERATOR
3 weeks 5 days ago #364657

That's correct.

Please Log in or Create an account to join the conversation.

Time to create page: 0.090 seconds
Powered by Kunena Forum