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.
HIKASHOP ESSENTIAL 49,95€The basic version. With the main features for a little shop.
HIKAMARKETAdd-on Create a multivendor platform. Enable many vendors on your website.
HIKASERIALAdd-on Sale e-tickets, vouchers, gift certificates, serial numbers and more!
MARKETPLACEPlugins, modules and other kinds of integrations for HikaShop
HIKAAUCTION 40€Add-on Create auctions and let your customers bid for products.
ACCESS THE CHECKOUTClick here to access the payment area
