.content_prices en position fixed à partir d'un point déterminé

stevent · October 12, 2013

Bonjour à tous,

Tout est dans le titre...

site prestashop 1.5.4 : http://tempo.printingandco.com/index.php?id_product=72&controller=product

Theme : default modifié

On peut constater que le block .content_prices à été modifié par mes soins et contient total commande, devis, détail produit ( qui en fait est le bref descriptif que j'ai déplacé ) et le bouton d'ajout au panier.

Je désire que quand ce bloc arrive en haut de ma page, il devient alors position fixed et reste affiché. Lorsuq'on remonte et qu'il retrouve sa position, il récupère sa position relative.

Je sais que la solution est quelque part par là :

1. j'ajoute le java script dans mon product.tpl tout à la fin de la balise <script> :


var positionElementInPage = $('#content_prices').offset().top;
$(window).scroll(
    function() {
        if ($(window).scrollTop() >= positionElementInPage) {
            // fixed
            $('#content_prices').addClass("floatable");
        } else {
            // relative
            $('#content_prices').removeClass("floatable");
        }
    }
);

//]]>

</script>

2. je modifie mon css :

.content_prices {	
    float: right;
    text-align: right;
    width: 178px;
    height: 0px;
    margin-left: 573px;
}

#content_prices.floatable {
    position: fixed;
    top: 10px; 
}

Après celà, c'est sensé fonctionner mais...... non !!!! :(

Quelqu'un peut il me venir en aide??

merci à vous !

stevent · October 12, 2013

Vu que mon .tpl à bien été modifié, je vous donne un apercu de mon bloc content_prices :

<div class="content_prices clearfix">
		
		

        <!-- prices -->


			{if $product->show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}

			{if $product->online_only}
			<p class="online_only">{l s='Online only'}</p>
			{/if}



	<!-- block summary -->
	<div id="cart_block_summary" class="{if isset($colapseExpandStatus) && $colapseExpandStatus eq 'expanded' || !$ajax_allowed || !isset($colapseExpandStatus)}collapsed{else}expanded{/if}">
        <p class="titre_commande">

                <span id="titre_commande">Total de la commande</span>

                </p>


        <p class="label_price_Tvac">
                <span id="label_price_Tvac">Total</span>
                </p>
        <span class="ajax_cart_total" {if $cart_qties == 0}style="display:none"{/if}>
			{if $cart_qties > 0}
				{if $priceDisplay == 1}
					{convertPrice price=$cart->getOrderTotal(false)}
				{else}
					{convertPrice price=$cart->getOrderTotal(true)}
				{/if}
			{/if}
		</span>


		<span class="ajax_cart_no_product" {if $cart_qties != 0}style="display:none"{/if}>{l s='0,00  '}</span>
	</div>

            <div class="price">

           <p class="titre_devis">

                <span id="titre_devis">Devis</span>

                </p>


            <p class="label_price">

                <span id="label_price">Total net</span>

                </p>

                <p class="our_price_displayHtva">

                <span id="pretaxe_price"><span id="pretaxe_price_display">{convertPrice price=$product->getPrice(false, $smarty.const.NULL)}</span></span>

                </p>


                <p class="label_price_Tvac">
                <span id="label_price_Tvac">Total</span>
                </p>
            	<p class="our_price_display">
				{if $priceDisplay >= 0 && $priceDisplay <= 2}
                <span id="our_price_display">{convertPrice price=$productPrice}</span>
					<!--{if $tax_enabled  && ((isset($display_tax_label) && $display_tax_label == 1) OR !isset($display_tax_label))}
						{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
					{/if}-->
				{/if}
				</p>
                <div id="short_description_block">
			{if $product->description_short}
				<div id="short_description_content" class="rte align_justify">{$product->description_short}</div>
			{/if}
			{if $product->description}
			<p class="buttons_bottom_block"><a href="javascript:{ldelim}{rdelim}" class="button">{l s='More details'}</a></p>
			{/if}
			{if $packItems|@count > 0}
			<div class="short_description_pack">
				<h3>{l s='Pack content'}</h3>
				{foreach from=$packItems item=packItem}
				<div class="pack_content">
					{$packItem.pack_quantity} x <a href="{$link->getProductLink($packItem.id_product, $packItem.link_rewrite, $packItem.category)}">{$packItem.name|escape:'htmlall':'UTF-8'}</a>
					<p>{$packItem.description_short}</p>
				</div>
				{/foreach}
			</div>
			{/if}
				</div>

				{if $product->on_sale}
					<img src="{$img_dir}onsale_{$lang_iso}.gif" alt="{l s='On sale'}" class="on_sale_img"/>
					<span class="on_sale">{l s='On sale!'}</span>
				{elseif $product->specificPrice AND $product->specificPrice.reduction AND $productPriceWithoutReduction > $productPrice}
					<span class="discount">{l s='Reduced price!'}</span>
				{/if}
				{if $priceDisplay == 2}
					<br />
					<span id="pretaxe_price"><span id="pretaxe_price_display">{convertPrice price=$product->getPrice(false, $smarty.const.NULL)}</span> {l s='tax excl.'}</span>
				{/if}






			</div>
			<p id="reduction_percent" {if !$product->specificPrice OR $product->specificPrice.reduction_type != 'percentage'} style="display:none;"{/if}><span id="reduction_percent_display">{if $product->specificPrice AND $product->specificPrice.reduction_type == 'percentage'}-{$product->specificPrice.reduction*100}%{/if}</span></p>
			<p id="reduction_amount" {if !$product->specificPrice OR $product->specificPrice.reduction_type != 'amount' || $product->specificPrice.reduction|intval ==0} style="display:none"{/if}>
				<span id="reduction_amount_display">
				{if $product->specificPrice AND $product->specificPrice.reduction_type == 'amount' AND $product->specificPrice.reduction|intval !=0}
					-{convertPrice price=$productPriceWithoutReduction-$productPrice|floatval}
				{/if}
				</span>
			</p>
			{if $product->specificPrice AND $product->specificPrice.reduction && $product->specificPrice.reduction > 0}
				<p id="old_price"><span class="bold">
				{if $priceDisplay >= 0 && $priceDisplay <= 2}
					{if $productPriceWithoutReduction > $productPrice}
						<span id="old_price_display">{convertPrice price=$productPriceWithoutReduction}</span>
						<!-- {if $tax_enabled && $display_tax_label == 1}
							{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
						{/if} -->
					{/if}
				{/if}
				</span>
				</p>
			{/if}
			{if $packItems|@count && $productPrice < $product->getNoPackPrice()}
				<p class="pack_price">{l s='Instead of'} <span style="text-decoration: line-through;">{convertPrice price=$product->getNoPackPrice()}</span></p>
				<br class="clear" />
			{/if}
			{if $product->ecotax != 0}
				<p class="price-ecotax">{l s='Include'} <span id="ecotax_price_display">{if $priceDisplay == 2}{$ecotax_tax_exc|convertAndFormatPrice}{else}{$ecotax_tax_inc|convertAndFormatPrice}{/if}</span> {l s='For green tax'}
					{if $product->specificPrice AND $product->specificPrice.reduction}
					<br />{l s='(not impacted by the discount)'}
					{/if}
				</p>
			{/if}
			{if !empty($product->unity) && $product->unit_price_ratio > 0.000000}
				 {math equation="pprice / punit_price"  pprice=$productPrice  punit_price=$product->unit_price_ratio assign=unit_price}
				<p class="unit-price"><span id="unit_price_display">{convertPrice price=$unit_price}</span> {l s='per'} {$product->unity|escape:'htmlall':'UTF-8'}</p>
			{/if}
			{*close if for show price*}
			{/if}
			{if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE}
				<span class="exclusive">
					<span></span>
					{l s='Add to cart'}
				</span>
			{else}
				<p id="add_to_cart" class="buttons_bottom_block">
					<span></span>
					<input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" />
				</p>
			{/if}
			{if isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS}{$HOOK_PRODUCT_ACTIONS}{/if}

			<div class="clear"></div>
		</div>

Julien64 · October 14, 2013

Bonjour,

En regardant le code source de la page je ne vois pas votre script...

De plus si votre élément est une classe, il faut le cibler avec "." et non "#" dans le JS

$('#content_prices')

stevent · October 14, 2013

Merci pour votre réponse. En effet, je ne l'ai aps laissé car, en plus de ne pas fonctionner, il désactive tout mon java script pour les autres fonctionnalités du site.

Vous pouvez télécharger mon .tpl et.css ici : http://www.printingandco.com/download/sources.zip

Julien64 · October 15, 2013

Pour vous aider plus facilement, remettez plutôt votre code en place sur votre propre site. De cette façon nous pourrons voir le bug directement

stevent · October 15, 2013

Ok Julien64. Voilà mon code est replacé.

merci à toi.

Julien64 · October 15, 2013

Déjà je vois directement une erreur dans la console firebug concernant le caractère ">" qui est écrit sous la forme ">"

Donc le script ne s’exécute pas du tout pour le moment, peut être qu'en remplaçant ce caractère ça fonctionnera mieux.

stevent · October 15, 2013

Cela résoud en effet la non execution du script merci mais toujours pas de float pour mon bloc

Julien64 · October 15, 2013

J'ai maintenant cette erreur dans la console "TypeError: $(...).offset(...) is null"

Peut être c'est du au fait que la hauteur de l'élément est fixée à 0... essayez d'enlever cette hauteur nulle pour voir si ça arrange les choses au moins pour le script.

stevent · October 15, 2013

nope.. toujours rien

Julien64 · October 15, 2013

hummmm... je sèche aussi!

Voila un code apparemment fonctionnel, peut être en vous en inspirant vous pourrez régler ce problème:

$(function(){
  var elYpos = $('#scrollingDiv').offset().top; // elYpos variable will stay as it's defined
  $(window).scroll(function(){
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > elYpos ) {
    // and rest of tour code...
  });
});

Si des jQuery masters passent dans le coin, n'hésitez pas à partager votre savoir

stevent · October 15, 2013

Merci quand même

.content_prices en position fixed à partir d'un point déterminé

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in