Problème affichage Carrousel sur tablette

  • Posts: 25
  • Thank you received: 2
4 years 5 months ago #320031

-- url of the page with the problem -- : artshop.pozor.com
-- HikaShop version -- : 4.3.0
-- Joomla version -- : 3.9.18
-- PHP version -- : 7.3.17
-- Browser(s) name and version -- : Safari 13, Chrome 83, Firefox 26 PC/OSX/iOS

Bonjour,
J'ai installé un module de 5 articles en carrousel sur notre page d'accueil artshop.pozor.com
Après paramétrage, tout s'affiche comme souhaité sur ordinateur, mais sur mobile et tablette, le carrousel n'affiche que le haut de 2 articles en énorme…
Il semblerait que le carrousel bascule dans des modes réduits sans réglages appropriés, plutôt qu'une réduction proportionnelle comme pour un affichage sans carrousel.
Comment peut-on régler ce problème s'il vous plaît ?
Pour info, ce site boutique comme le site principal lié, est sur un template Rocket Theme Capelco fixe à 960px.
Merci d'avance

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

  • Posts: 82867
  • Thank you received: 13374
  • MODERATOR
4 years 5 months ago #320048

Bonjour,

Le carousel passe en mode slide 2 par 2 au lieu de X par X en dessous d'une certaines largeur d'écran disponible (car justement, afficher 5 produits cote à cote sans avoir suffisamment de largeur rend tout trop petit.

Concernant le fait que les produits eux-mêmes n'apparaissent pas correctement, cela semble être lié au CSS du template.
En rajoutant ce CSS vous n'aurez plus le soucis:

.owl-carousel .owl-item img {
    width: auto !important;
}
www.hikashop.com/support/documentation/1...ize-the-display.html

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

  • Posts: 25
  • Thank you received: 2
4 years 5 months ago #320098

Bonjour Nicolas,

Merci c'est mieux, le css (que j'avais du mal à trouver) améliore la situation, les produits ne sont plus déformés et tronqués.

Cependant les produits s'affichant de toute façon en petits (voir copies d'écrans jointes), et il n'y a pas d'intérêt à cette bascule en mode restreint à 2 produits, surtout pour une tablette ou même un smartphone à l'horizontal.
Aussi, les points ne semblent pas recalculés. Il en est affiché le nombre total de produits sans être divisé par le nombre affiché…
Peut-on modifier ces paramètres pour afficher d'avantage de produits, ou régler, voire supprimer ces changement de mode s'il vous plaît ?

Merci de votre aide.
Cordialement

Attachments:

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

  • Posts: 82867
  • Thank you received: 13374
  • MODERATOR
4 years 5 months ago #320108

Bonjour,

Vous pouvez changer cela oui.
La bascule se fait avec la ligne:

$options['responsive'] = '{0:{items:1, slideBy:1, dotsEach: 1}, 768:{items:2, slideBy:'.$slideByFor2.', dotsEach: '.$slideByFor2.'}, 992:{items:'.$products.', dotsEach: '.$products.'}}';
dans le fichier product / carousel.php que vous pouvez éditer via le menu Affichage->Vues.

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

  • Posts: 25
  • Thank you received: 2
4 years 5 months ago #320138

Bonjour,

j'ai changé les réglages, et c'est parfait, merci

J'ai aussi des chamboulements pas terribles à l'utilisation sur tablettes, des pages "panier", "récapitulatif de commande" et "facture en ligne".
Pouvez-vous m'indiquer les fichiers à corriger s'il vous plaît, j'ai du mal à les identifier ?

Cordialement

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

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
4 years 5 months ago #320139

Bonjour,

Pour répondre de manière globale à votre question, je vais vous donner un petit truc concernant une option qui justement permet de voir immédiatemment les vues responsables de telle ou telle affichage.

Suivez moi, étape par étape :
- D'abord à partir de la Main HikaShop Configuration (Components => HikaShop => Configuration).
- Puis onglet Advanced, et enfin dans la partie Advanced settings
- Trouvez la première option Display view files, et choisissez frontend



Vous aurez l'information ajouter sur votre frontend.

Mais avant tout, vérifiez tout de même que vous ne corrigez pas des choses qui sont proviennent de votre template.
Pour cela, faites des tests avec un template par défaut (comme ProtoStar), et si avec ProtoStar l'affichage vous convient et que cela fait des résultats plus hiératiques avec votre template, contactez votre createur du template vous épargnera du temps d'ajustement de votre coté.

Cordialement

Last edit: 4 years 5 months ago by Philip.

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

  • Posts: 25
  • Thank you received: 2
4 years 5 months ago #320206

Bonsoir,

avec cette méthode, j'ai pu repéré les fichiers des vues opérant des bascules malheureuses :
- checkout/show_block_cart.php concernant la vue du panier qui bascule les colonnes en lignes sur tablette
- order/show.php concernant les vues de la commande et de la facture dont les lignes se décalent sur tablette
Néanmoins je ne trouve pas les instructions à y modifier. Pouvez-vous m'aider s'il vous plaît ?

Cordialement

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

  • Posts: 82867
  • Thank you received: 13374
  • MODERATOR
4 years 5 months ago #320223

Bonjour,

La bascule se fait en CSS.
Donc c'est le code CSS que vous voulez modifier, pas le code PHP.
Par exemple, pour l'affichage du panier dans le passage en caisse, c'est ce code CSS qui fait la bascule:

@media only screen and (max-width:350px) {
	.hikashop_product_price_full {
		padding-top: 10px !important;
		height: 50px !important;
	}
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
	.hikashop_checkout_cart table,
	.hikashop_checkout_cart table thead,
	.hikashop_checkout_cart table tbody,
	.hikashop_checkout_cart table thead th,
	.hikashop_checkout_cart table tbody td,
	.hikashop_checkout_cart table thead tr,
	.hikashop_checkout_cart table tbody tr {
		display: block;
	}
	.hikashop_checkout_cart table tfoot tr,
	.hikashop_checkout_cart table tfoot td,
	.hikashop_checkout_cart table tfoot {
		display: block;
	}
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_total2_title,
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_shipping_title,
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_final_total_title,
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_coupon_title,
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_tax_title,
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_payment_title,
	.hikashop_checkout_cart table tbody td.hikashop_cart_additional_title {
		display: none !important;
	}
	.hikashop_checkout_cart_final_total_title { display:none; }
	.hikashop_checkout_cart table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.hikashop_checkout_cart table tr { border: 1px solid #ccc; }
	.hikashop_checkout_cart table tr.margin { border: 0px solid #ccc; }

	.hikashop_checkout_cart table td {
		min-height: 25px;
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 30% !important;
	}
	.hikashop_checkout_cart td.hikashop_cart_product_name_value {width: 64%}
	.hikashop_checkout_cart table td:before {
		position: absolute;
		left: 6px;
		padding-right: 10px;
	}
	.hikashop_checkout_cart table td.hikashop_cart_product_quantity_value:before { padding-top:3px }
	.hikashop_checkout_cart table td:before { content: attr(data-title); font-weight: bold; }
	.hikashop_checkout_cart .hikashop_product_price_full {
		text-align: left;
		min-height: 20px;
		padding-left: 20px;
		padding-top: 3px;
		display: inline !important;
	}

	.hikashop_checkout_cart span.hikashop_checkout_cart_subtotal,
	.hikashop_checkout_cart span.hikashop_checkout_cart_shipping,
	.hikashop_checkout_cart span.hikashop_checkout_cart_final_total,
	.hikashop_checkout_cart span.hikashop_checkout_cart_coupon,
	.hikashop_checkout_cart span.hikashop_checkout_cart_additional,
	.hikashop_checkout_cart span.hikashop_checkout_cart_taxes,
	.hikashop_checkout_cart span.hikashop_checkout_cart_payment,
	.hikashop_checkout_cart span.hikashop_checkout_cart_final_total {
		padding-left: 20px;
	}

	.hikashop_checkout_cart .hikashop_product_quantity_field { margin: 0px 16px 0px 20px !important; }
	.hikashop_checkout_cart a span.hikashop_product_variant_subname img { margin-left: 10px; display: block; margin-top: 5px; }
	.hikashop_checkout_cart td.hikashop_cart_product_price_value span.visible-phone { margin-left: 5px; display:inline !important}
	.hikashop_checkout_cart tbody tr td.hikashop_cart_empty_footer { display: none !important }
}
Vous le trouverez en éditant le fichier CSS de l'option "Front-end CSS File" dans la configuration HikaShop.

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

  • Posts: 25
  • Thank you received: 2
4 years 5 months ago #320268

Bonjour,
Parfait nous avons pu régler tout ça, merci
Bonne soirée

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

Time to create page: 0.068 seconds
Powered by Kunena Forum