Jump to content
stevent

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

Recommended Posts

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 !

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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')

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
Share on other sites

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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More