26815 sujets

CSS et mise en forme, CSS3

Pages :
Raphael a écrit :
Oui c'est une grosse contrainte en effet.

Je crois qu'il n'existe toujours pas de solution ultime au final : https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

Merci Raphael. J'ai lu l'article, est effectivement c'est pas gagné.
Au final, j'ai donc quand même retenu 2 méthodes qui corresponde le mieux à mes besoin. A savoir toujours le fameux Masonry with flexbox and minimal js (que gcyrillus à résolut juste au dessus, concernant la hauteur des items), et le Masonry par Didumos. Je travail actuellement sur les deux, en tentant de les intégrer à l'application de Reviews.
gcyrillus a écrit :
bonjour,

pour ton probleme de hauteur, au lieu de récupérer le style.height , récupère sa hauteur avec .offsetHeight exemple : https://codepen.io/gc-nomade/pen/aboRWRe

Merci beaucoup gcyrillus, effectivement ça résout très bien le problème.
Voici donc la base du code que je compte utiliser avec 2/3 modifications (CodePen) pour un affichage des commentaires façon Masonry.

Je tente don d'intégrer cette méthode à l'application de reviews que j'utilise sur la boutique Shopify, mais je me retrouve confronté à un problème de Javascript entre cette méthode, et le script de l'application.

Pour afficher chaques commentaires, l'application utilise v-for (le framework Vue.js si j'ai bien compris), avec le code suivant utilisé dans une div :
<div v-for="review in productReviews.data"></div>

Voici le code de base html de cette partie affichage avec v-for :
<div id="HulkAppsReviews" data-type="productReviews" data-product-id="{{product.id}}" data-product-title="{{product.title | escape}}" style="display:none;">

 <div v-if="settings.layout_mode != 'list'">
  <div id="reviewsCarousel" class="carousel row">
   <!-- V-FOR -->
   <div v-for="review in productReviews.data" class="carousel-cell col-xs-12 col-sm-6 col-md-4 col-lg-4 text-center">
    <div class="review-item equalize">
     
	 <!-- Note -->
	 <div class="review-rating">
	  <span v-html="getRating(review)"></span></div>
	 
	 <!-- Titre-->
	 <div class="review-title text-uppercase" 
		  v-text="review.title"></div>
	 
	 <!-- Nom de l'auteur -->
	 <div class="review-author" v-text="review.author"></div>
	 
	 <!-- Date du commentaire -->
	 <div class="review-date text-uppercase" 
		  v-text="dateFormat(review.created_at)"></div>
	 
	 <!-- Contenu du commentaire -->
	 <div class="review-body" v-html="truncateWords(review.body, 20)"></div>
	 
	 <div>
		<a href="#" @click.prevent="showReview(productReviews.data, review.id)">
		 Read More</a></div>
	</div>
   </div>
  </div>
 </div>

</div>



Coté intégration :
Si l'on reprend l'idée du CodePen Masonry + JS légèrement modifié comme décrit plus haut, l'idée serait d'avoir la classe .block(du code Masonry) et le v-for (de mon application Reviews) dans la même div :
 <div class="block" v-for="review in productReviews.data" :key="productReviews.id"></div>

Et donc d'avoir au final quelque chose comme ça côté structure (sans l'affichage de photo pour le moment) :
<div id="HulkAppsReviews" data-type="productReviews" data-product-id="{{product.id}}" data-product-title="{{product.title | escape}}">

	<div v-if="settings.layout_mode != 'list'">

		<div id="block-contain">
			<div class="block" v-for="review in productReviews.data" :key="productReviews.id">
				<div class="inner">
					<!-- Note -->
					<div class="review-rating">
						<span v-html="getRating(review)"></span></div>

					<!-- Titre-->
					<div class="review-title text-uppercase" 
						 v-text="review.title"></div>

					<!-- Nom de l'auteur -->
					<div class="review-author" 
						 v-text="review.author"></div>

					<!-- Date du commentaire -->
					<div class="review-date text-uppercase" 
						 v-text="dateFormat(review.created_at)"></div>

					<!-- Contenu du commentaire -->
					<div class="review-body" 
						 v-html="truncateWords(review.body, 20)"></div>

					<div>
						<a href="#" @click.prevent="showReview(productReviews.data, review.id)">Read More</a></div>
				</div>
			</div>
		</div>
	</div>

</div>

Sauf que ça ne fonctionne pas. Je ne sais pas coder en JavaScript, mais j'aime comme l'impression qu'il y a un conflit entre le JS du CodePen Masonry + JS et JS de l'application.
Certainement au niveau de l'affichage des items, ainsi que de l'ordre d'affichage (<style="order: ..;">). A chaque chargement de ma page produit sur ma boutique, les blocs commentaire ne s'affiche jamais de la même façon. Certaine fois on dirais que les 11 commentaires de test sur ma boutique s'affiche en un seul bloc et repousse le reste.

Premiers tests : j'ai configurer le premier bloc pour qu'il affiche uniquement le titre des commentaires test de ma boutique (nommées Commentaire 1 à Commentaire 11), appel avec v-for + v-text="review.title". Les autres blocs (numéroté de 2 à 12) sont les bloc standard du CodePen Masonry + JS.
Comme on peut le voir sur ces screenshot, la disposition des blocs n'est jamais la même à chaque nouveau chargement de page :
upload/1568904565-77009-10.jpg
----------------------------------------------
upload/1568904620-77009-11.jpg

Second test : avec uniquement le bloc 1 qui appel les titres des commentaires de l'application. Idem, des affichages différents :
upload/1568904840-77009-12.jpg
----------------------------------------------
upload/1568904860-77009-13.jpg

Comme on peut le voir dans les encadrés en rouge, en inspectant la page sur le navigateur j'ai remarqué que la présence aléatoire de
style="order: ... ;"
dans les
<div class="block">
qui sont censé représenté chaque bloc de commentaire. On va dire que l'affichage est à peu près correct quand l'info d'ordre est présente, et cela arrive environ un fois tous les 3/4 chargements. Ce qui me laisse à croire que les 2 scripts sont en duel pour gérer l'affichage.

Une idée de comment résoudre cette intégration et son conflit si il y en a un ? J'ai beau essayé toute sorte de test depuis des jours mais en vain. Certainement car je ne code pas de JavaScript même si je comprend quelque petite chose.
Merci d'avance pour votre aide Smiley smile
c'est effectivement aléatoire, est tu sur que ton script est lancé qu'une fois que ta page est entièrement chargé ?
gcyrillus a écrit :
c'est effectivement aléatoire, est tu sur que ton script est lancé qu'une fois que ta page est entièrement chargé ?


Normalement oui. Ils sont situés juste avant la fermeture du body :
<!-- Start ATH Product Reviews with Photo -->
{{ "ath-reviews.css" | asset_url | stylesheet_tag }}

<!-- Script de l'application Reviews -->
{{ "reviews-photo.js" | asset_url | script_tag }}

<!-- Script de l'affichage Masonry maison -->
{{ "ath-reviews.js" | asset_url | script_tag }}
<!-- End ATH Product Reviews with Photo -->
  
</body>
</html>
Raphael a écrit :

Oui. Mais je n'ai pas compris le rapport avec le sujet Smiley smile

Si un gros rapport, car pourquoi insister sur une technique ou une autre n'est pas le sujet, pour moi je croyais que le sujet était d'obtenir le bon résultat voila pourquoi je proposes cette piste Smiley confused