Jump to content

element de style block article dans la meme catégorie

Enduro

By Enduro
in PrestaShop pour les développeurs

 Share

Recommended Posts

Enduro Newbie

Enduro

Posted
Posted

Bonjour,

 

J'ai ajouté une bordure sur les images du block ventes croisées et produits dans la même catégorie

 

Cette deux block sont en carroussel lorsque le nombre de produit est supérieur à 6.

 

Suite à l'ajout de cette bordure, la bordure droite de l'image de droite est tronquée.

 

La largeur du block est dans un élément de style que je n'arrive décidément pas à trouver.

 

Après cette div:

<div id="block-category-slider" class="carusel-inner responsive toggle_content">

J'ai cette fameuse div avec élément de style, ce qui m'intéresse c'est de modifier la largeur ou de trouver le calcul pour la largeur du block

<div class="caroufredsel_wrapper" style="display: block; text-align: left; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 888px; height: 200px; margin: 0px; overflow: hidden;">

Dans le tpl du module j'ai la première div mais je n'ai pas la seconde qui gère les dimensions du block :wacko:

div id="block-category-slider" class="carusel-inner responsive  toggle_content">
        	<ul id="carouselproduct" class="carousel-ul">
			{foreach from=$categoryProducts item='categoryProduct' name=categoryProduct}
                <li class="item">
                <div class="clearfix">

Ci quelqu'un pourrait m'aider ou me mettre sur la voix.

 

Thank you

Link to comment
Share on other sites
Enduro Newbie

Enduro

Posted
  • Author
Posted

UP,

 

Personne pour me donner un coup de main.

 

Pour plus d'info voici le tpl

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{if isset($orderProducts) && count($orderProducts)}
<section class="crossselling page_product_box">
	<h3 >{l s='Customers who bought this product also bought:' mod='crossselling'}<i class="icon-toggle icon-minus-sign-alt"></i></h3>
    	<div id="block-crossselling-slider" class="carusel-inner responsive toggle_content">
                	<ul id="carouselproductcross" class="carousel-ul">
                    {foreach from=$orderProducts item='orderProduct' name=orderProduct}
                    <li class="item">
                    <div class="clearfix">
                        <a href="{$orderProduct.link}" title="{$orderProduct.name|htmlspecialchars}" class="lnk_img">
                        <img src="{$link->getImageLink($orderProduct.link_rewrite, $orderProduct.id_image, 'medium_default')}" alt="{$orderProduct.name|htmlspecialchars}" /></a>
                    </div>
                        <a class="product_link noSwipe" href="{$orderProduct.link}" title="{$orderProduct.name|htmlspecialchars}">{$orderProduct.name|truncate:15:'...'|escape:'htmlall':'UTF-8'}</a>
                        {if $crossDisplayPrice AND $orderProduct.show_price == 1 AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}
                            <p class="price_display">
                                <span class="price">{convertPrice price=$orderProduct.displayed_price}</span>
                            </p>
                        {else}
                        {/if}
                    </li>
                    {/foreach}
                </ul> 
                             <div class="clearfix"></div>
            	<a class="prev" id="cross_prev" href="#"></a>
				<a class="next" id="cross_next" href="#"></a>
         </div>        
</section>
{/if}
<script type="text/javascript">
	$("#carouselproductcross").carouFredSel({
		debug: true,
		circular: true,
        infinite: true,
		responsive: true,
		align   : "center",
		width: '100%',
	    auto	: {
    		play	: 1,
	    	timeoutDuration :2000
	    },
		
	    items	: {
					
		visible: {
					min: 2,
					max: 6
					 },
					 width:167,
		
		},		
		scroll	: {
			items	: 1,
			pauseOnHover:false
		},
		prev	: {
			button	: "#cross_prev"
		},
		next	: {
			button	: "#cross_next"
		},
		swipe: {
					onMouse: true,
					onTouch: true
			   }
	});
</script>

Je m'arrache les cheuveux

Link to comment
Share on other sites
Enduro Newbie

Enduro

Posted
  • Author
Posted

:( apparemment personne pour m'aider même le distributeur du thème templatemonster ou je perds mon temps depuis 3 jours qui m'indique le fichier plus haut, çà je le savais. la largeur 167px est la largeur de base Il doit certainement y avoir un autre fichier avec un calcul suivant la taille de l'image, le nombre d'article affiché  et la taille du block. 

 

Je doit retirer 2px à cette fameuse largeur pour que l'affiche de l'image ne soit pas tronqué.

Link to comment
Share on other sites
Julien64 Newbie

Julien64

Posted
Posted

Bonjour,

 

Peut être est-ce un problème de cache aussi qui vous empêche de voir vos modifications... il faut supprimer le cache et les fichiers de compilation smarty.

Sinon plutôt que d'essayer de toucher à la largeur de l'élément, essayez de lui appliquer une nouvelle propriété qui permet de ne pas augmenter la largeur de l'élément en fonction du padding et des border éventuels:

box-sizing:border-box;
-moz-box-sizing:border-box;
Link to comment
Share on other sites
Enduro Newbie

Enduro

Posted
  • Author
Posted

Merci pour votre aide.

 

je voix bien les modifications, mais il doit y avoir un autre script qui doit calculer la largeur ul li suivant le nombre d'image et la largeur ul car mon thème est responsive. Il faut que je change la méthode de calcule de cette élément de style pour lui retirer 2px mais je ne sais pas dans quel fichier est calculé cette élément de style.

 

A la base il n'y a pas de bordure ou autre sur l'image, j'y ai ajouté une bordure + un effet d'ombre mais l'effet d'ombre et la bordure sont tronqué sur l'image de droite.

 

Je ne trouve pas de solution css (modification de marge, ...) rien y fait. Également en modifiant la largeur width:167px (qui est remplacé par cette élément de style) il y a des modifications mais mon image est toujours tronquée.

 

Je peux vous transmettre un lien, c'est toujours plus simple de voir sur du concret que des explications.

Link to comment
Share on other sites
Julien64 Newbie

Julien64

Posted
Posted

Effectivement il doit y avoir un javascript qui calcule la largeur et la colle aux éléments <li>. Difficile de vous aider sans avoir accès à ce code qu'il faut trouver.

Sinon une solution qui devrait fonctionner, mais pas la plus "propre", est de mettre dans vos CSS, à la suite de la valeur de la largeur souhaitée par exemple, ce terme "!important". Normalement cette instruction prendra le pas sur le style affecté par le JS mais à tester sur les différents navigateurs...

Link to comment
Share on other sites
Enduro Newbie

Enduro

Posted
  • Author
Posted (edited)

Oui, c'est ce que j'ai fait pour voir que j'avais 2px en trop. Je vais prendre cette solution temporairement avec un style différent pour chaque résolution d'écran.

 

Je pense que la solution se trouve dans ce fichier JS (jQuery carouFredSel 6.2.1) mais pour moi c'est du chinois.

 

J'y retrouve bien caroufredsel_wrapper et item

 

Je vous l'envoi en mp au cas ou.

 

Merci.

Edited by Enduro (see edit history)
Link to comment
Share on other sites
Enduro Newbie

Enduro

Posted
  • Author
Posted

Bon, j'ai forcé la largeur avec !important pour chaque taille d'écran pour le moment. En espérant trouver une solution java, il faut que je me mette au java çà me fera des connaissances en plus parce que la c'est frustrant je suis sure d'avoir trouver le bon fichier java car je retrouve tout les éléments de l'appel du script (item, responsive, visible, le fameux width, ...) mais bon je n'y comprends rien.

 

function sz_setResponsiveSizes(a,B){var d=(a.items.visible,a.items[a.d.width]),e=a[a.d.height],f=is_percentage(e);b.each(function(){var b=$(this),c=d-ms_getPaddingBorderMargin(b,a,"Width");b[a.d.width]©,f&&b[a.d.height].... :o 

Link to comment
Share on other sites
  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...