Jump to content

Scroll bar in blockcart module.


sarfaraz.r1406

Recommended Posts

Hi

I have added a scroll bar in block cart module by adding a <div> in blockcart.tpl file.

But the problem is that the scroll bar appears only after reloading the page. Also after i remove the last product the scroll still remain there untill I reload the page. I have some idea that I need make some changes in blockcart-json.tpl and ajax-cart.tpl but not exactly sure what should the the change,

Please help.

Link to comment
Share on other sites

I have added the following code in my blockcart.tpl file of my theme folder.

{if $cart_qties > 0}<div class="scrollit" "remove_link">{/if}
    <dl class="products">
    .
    .
    .
    </dl>
{if $cart_qties > 0}</div>{/if}

Please see the reference :- http://nemops.com/quick-tip-product-images-prestashop-ajax-cart/#.VD1nLbCUeDR
But here I dont want to add any image. Just I want to show scroll bar when quatity of the cart increases more than 2 or 3.
Please help.
@vekia

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Scroll will appear but if I delete all the products, the scroll bar will still be there. Also if I want to add condition like after adding 3 products, Scroll bar should come, that will only be visible if I reload the page. I have some idea that I need make some changes in blockcart-json.tpl and ajax-cart.tpl but not exactly sure what should the the change,

 

I have made the changes as per my requirement and for your refernce.

Add any 3 different products and see cart drop down. No scroll bar is present. Then refresh the page and see the cart drop down. Scroll bar is present.

Edited by sarfaraz.r1406 (see edit history)
Link to comment
Share on other sites

How are you adding the "scrollit" div exactly? THat's your issue, it's not there, so no scrollbar via ajax, and it's still there if you delete so it leaves the scrollbar intact

I am simply adding a div in Blockcart.tpl file and giving " overflow-y: scroll " attribute in css...

 

In blockcart.css file:

 

.scrollit {

overflow-y: scroll;

}

 

and in blockcart.tpl file...

Line 58:

{if $cart_qties >= 3}<div class = "scrollit">{/if}
<div class="cart_block_list{if isset($blockcart_top) && !$blockcart_top}{if isset($colapseExpandStatus) && $colapseExpandStatus eq 'expanded' || !$ajax_allowed || !isset($colapseExpandStatus)} expanded{else} collapsed unvisible{/if}{/if}">
.
.
.
.
</div>
{if $cart_qties >= 3}</div>{/if}   (Line 198)
 
I am not doing any changes in ajax-cart.js
 
Please tell me the changes I should do to achieve this.
  • Like 1
Link to comment
Share on other sites

  • 1 month later...

I have added the following code in my blockcart.tpl file of my theme folder.

 

{if $cart_qties > 0}<div class="scrollit" "remove_link">{/if}

    <dl class="products">

    .

    .

    .

    </dl>

{if $cart_qties > 0}</div>{/if}

 

Please see the reference :- http://nemops.com/quick-tip-product-images-prestashop-ajax-cart/#.VD1nLbCUeDR

But here I dont want to add any image. Just I want to show scroll bar when quatity of the cart increases more than 2 or 3.

Please help.

@vekia

You need to some code to ajax-cart.js file also..

Link to comment
Share on other sites

Hi,

 

here are the steps to have scroll in block cart

 

1. in blocacart.tpl find code ( line # 34 approx )

<dl class="products">

and replace this with following code

<dl class="products {if $products|@count > 2} scrollit{/if}"> {* Changed by Divyesh *}

2. update your ajax-cart.js file with attached one.

 

That's it you will have scroll when you have more than 2 products in cart!

 

Enjoy!!!

ajax-cart.js.txt

  • Like 1
Link to comment
Share on other sites

The code is working absolutely fine. :)

Thanks a lot for providing the solution.

 

But one more thing is the scroll bar does not vanish once the no of items comes below 3. Can you help me with that also??

You haven't replaced whole ajax-cart.js that i have attached. I have looked your js ( http://www.metrommart.com/themes/default-bootstrap/js/modules/blockcart/ajax-cart.js ) and seems not updated whole file. I have added 2 code snippets there. Can you please update whole file with the one I have attached ?

Link to comment
Share on other sites

  • 3 months later...

Hello

 

For the scroll in the cart list I just edit the blocart.tpl  file but it can't display any display any change at front side???

 

For this I checked whether the cookies are enable or not, it disabled.

 

I hope you get my point??

 

Please reply me for the situation???

 

Thanks in advance.

 

Nikhil ['}

Link to comment
Share on other sites

Hello

 

For the scroll in the cart list I just edit the blocart.tpl  file but it can't display any display any change at front side???

 

For this I checked whether the cookies are enable or not, it disabled.

 

I hope you get my point??

 

Please reply me for the situation???

 

Thanks in advance.

 

Nikhil ['}

Open Back Office and go to Advance Parameters --> Performance and set "Template Compilation" to "Force Compilation" and save and see the effect in Front office.

Link to comment
Share on other sites

Hello divyesh nice to meet you,

 

Because I am also prajapati as a cast,

 

instead of your jquery code we just have to add css like {height :450px; overflow-y:scroll;}.  Right, Its more feasible or not, I don't know??

 

But, Thanks for reply I solved it recently and it works very fine..

 

There is not issue of cache but  I confused with e two files of blockcart.tpl

 

There is another one question want to ask you that's regarding Login through social accounts.

 

Are there  free Modules for Login using Facebook or Twitter accounts or we have to create ??

 

Nikhil ['}

Link to comment
Share on other sites

  • 3 weeks later...

For scroll in blockcart, you have to add in blockcart.css (this is for prestashop 1.6.0.13, I suppose it works on other versions either)

.cart_block_list {
   max-height:650px;/* you can change as you need it */
   overflow-x:hidden; // hides the horizontal scroll
   overflow-y:auto;  
}
Edited by diana13 (see edit history)
  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Hi,

 

I hope someone can help me. I followed all the steps by changing the line in the blockcart.tpl and I uploaded the ajax-cart.js file given by one of the members in this from. I noticed that the ajax-cart.js file has some missing codes at the end. So I am stuck right now. I even added the code for blockcart.css file given by one of the members in this from. Nothing is working for me because I don't know how to fix the ajax-cart.js file. I am using prestashop 1.5.2. I uploaded my blockcart module zip file so you can see what I have. I also want to let you know that I have two blockcart module files. One of them is in the module folder and the other one is in the theme -> module folder. I changed both of them when I was testing. I know the from is very old but I hope some can help me.Your help is appreciated

 

//Code for blockcart.tpl

<dl class="products">

to

<dl class="products {if $products|@count > 2} scrollit{/if}"> {* Changed by Divyesh *})

 

 

//Code for blockcart.css

.cart_block_list {
max-height:650px;/* you can change as you need it */
overflow-x:hidden; // hides the horizontal scroll
overflow-y:auto; 
}

 

 

blockcart.zip

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

  • 2 months later...

follow this tutorial and you will succed ! tested on 1.6.1.11beta version!

 

 

 

themes\your_theme\css\modules\blockcart  

add

.scrollvertical{
   overflow-y:scroll;
   height:300px;
} 

height: your desire height of cart extended

 

 

 

themes\your_theme\modules\blockcart\blockcart.tpl 

replace this :

<dl class="products">

with:

<dl class="products {if $products|@count>3}scrollvertical{/if}">

count> number of products you want scroll to begin with.

 

 

 

 

 

themes\your_theme\js\modules\blockcart\ajax-cart.js

replace this :

//send the ajax request to the server
 
        $.ajax({
            type: 'POST',
            headers: { "cache-control": "no-cache" },
            url: baseUri + '?rand=' + new Date().getTime(),
            async: true,
            cache: false,
            dataType : "json",
            data: 'controller=cart&add=1&ajax=true&qty=' + ((quantity && quantity != null) ? quantity : '1') + '&id_product=' + idProduct + '&token=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa=' + parseInt(idCombination): '' + '&id_customization=' + ((typeof customizationId !== 'undefined') ? customizationId : 0)),
            success: function(jsonData,textStatus,jqXHR)
            {
                // add appliance to whishlist module
                if (whishlist && !jsonData.errors)
                    WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
 
                if (!jsonData.hasError)
                {
                    if (contentOnly)
                        window.parent.ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
                    else
                        ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
 
                    if (jsonData.crossSelling)
                        $('.crossseling').html(jsonData.crossSelling);
 
                    if (idCombination)
                        $(jsonData.products).each(function(){
                            if (this.id != undefined && this.id == parseInt(idProduct) && this.idCombination == parseInt(idCombination))
                                if (contentOnly)
                                    window.parent.ajaxCart.updateLayer(this);
                                else
                                    ajaxCart.updateLayer(this);
                        });
                    else
                        $(jsonData.products).each(function(){
                            if (this.id != undefined && this.id == parseInt(idProduct))
                                if (contentOnly)
                                    window.parent.ajaxCart.updateLayer(this);
                                else
                                    ajaxCart.updateLayer(this);
                        });
                    if (contentOnly)
                        parent.$.fancybox.close();
                }
                else
                {
                    if (contentOnly)
                        window.parent.ajaxCart.updateCart(jsonData);
                    else
                        ajaxCart.updateCart(jsonData);
                    if (addedFromProductPage)
                        $('#add_to_cart button').removeProp('disabled').removeClass('disabled');
                    else
                        $(callerElement).removeProp('disabled');
                }
 
emptyCustomizations();

with:

//send the ajax request to the server
 
        $.ajax({
            type: 'POST',
            headers: { "cache-control": "no-cache" },
            url: baseUri + '?rand=' + new Date().getTime(),
            async: true,
            cache: false,
            dataType : "json",
            data: 'controller=cart&add=1&ajax=true&qty=' + ((quantity && quantity != null) ? quantity : '1') + '&id_product=' + idProduct + '&token=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa=' + parseInt(idCombination): '' + '&id_customization=' + ((typeof customizationId !== 'undefined') ? customizationId : 0)),
            success: function(jsonData,textStatus,jqXHR)
            {
                // add appliance to whishlist module
                if (whishlist && !jsonData.errors)
                    WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
 
                if (!jsonData.hasError)
                {
                    if (contentOnly)
                        window.parent.ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
                    else
                        ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
 
                    if (jsonData.crossSelling)
                        $('.crossseling').html(jsonData.crossSelling);
 
                    if (idCombination)
                        $(jsonData.products).each(function(){
                            if (this.id != undefined && this.id == parseInt(idProduct) && this.idCombination == parseInt(idCombination))
                                if (contentOnly)
                                    window.parent.ajaxCart.updateLayer(this);
                                else
                                    ajaxCart.updateLayer(this);
                        });
                    else
                        $(jsonData.products).each(function(){
                            if (this.id != undefined && this.id == parseInt(idProduct))
                                if (contentOnly)
                                    window.parent.ajaxCart.updateLayer(this);
                                else
                                    ajaxCart.updateLayer(this);
                        });
                    if (contentOnly)
                        parent.$.fancybox.close();
                }
                else
                {
                    if (contentOnly)
                        window.parent.ajaxCart.updateCart(jsonData);
                    else
                        ajaxCart.updateCart(jsonData);
                    if (addedFromProductPage)
                        $('#add_to_cart button').removeProp('disabled').removeClass('disabled');
                    else
                        $(callerElement).removeProp('disabled');
                }
                /* JS Scroll Vertical */
                if($('.cart_block_list:first dl.products dt').length > 2)
                    $('.cart_block_list:first dl.products').addClass('scrollvertical');
                else
                    $('.cart_block_list:first dl.products').removeClass('scrollvertical');
                /* JS Scroll Vertical */
 
                emptyCustomizations();

and in the same file

themes\your_theme\js\modules\blockcart\ajax-cart.js

replace this :

//remove a product from the cart via ajax
    remove : function(idProduct, idCombination, customizationId, idAddressDelivery){
        //send the ajax request to the server
        $.ajax({
            type: 'POST',
            headers: { "cache-control": "no-cache" },
            url: baseUri + '?rand=' + new Date().getTime(),
            async: true,
            cache: false,
            dataType : "json",
            data: 'controller=cart&delete=1&id_product=' + idProduct + '&ipa=' + ((idCombination != null && parseInt(idCombination)) ? idCombination : '') + ((customizationId && customizationId != null) ? '&id_customization=' + customizationId : '') + '&id_address_delivery=' + idAddressDelivery + '&token=' + static_token + '&ajax=true',
            success: function(jsonData) {
                ajaxCart.updateCart(jsonData);
                if ($('body').attr('id') == 'order' || $('body').attr('id') == 'order-opc')
                    deleteProductFromSummary(idProduct+'_'+idCombination+'_'+customizationId+'_'+idAddressDelivery);
            },

with:

//remove a product from the cart via ajax
    remove : function(idProduct, idCombination, customizationId, idAddressDelivery){
        //send the ajax request to the server
        $.ajax({
            type: 'POST',
            headers: { "cache-control": "no-cache" },
            url: baseUri + '?rand=' + new Date().getTime(),
            async: true,
            cache: false,
            dataType : "json",
            data: 'controller=cart&delete=1&id_product=' + idProduct + '&ipa=' + ((idCombination != null && parseInt(idCombination)) ? idCombination : '') + ((customizationId && customizationId != null) ? '&id_customization=' + customizationId : '') + '&id_address_delivery=' + idAddressDelivery + '&token=' + static_token + '&ajax=true',
            success: function(jsonData) {
                ajaxCart.updateCart(jsonData);
                if ($('body').attr('id') == 'order' || $('body').attr('id') == 'order-opc')
                    deleteProductFromSummary(idProduct+'_'+idCombination+'_'+customizationId+'_'+idAddressDelivery);
                    /* JS Scroll Vertical */
                    if(($('.cart_block_list:first dl.products dt').length-1) > 2)
                        $('.cart_block_list:first dl.products').addClass('scrollvertical');
                    else
                        $('.cart_block_list:first dl.products').removeClass('scrollvertical');
                    /* JS Scroll Vertical */
            },

clear cache / force recompile to see changes

Link to comment
Share on other sites

Hi,

 

here are the steps to have scroll in block cart

 

1. in blocacart.tpl find code ( line # 34 approx )

<dl class="products">

and replace this with following code

<dl class="products {if $products|@count > 2} scrollit{/if}"> {* Changed by Divyesh *}

2. update your ajax-cart.js file with attached one.

 

That's it you will have scroll when you have more than 2 products in cart!

 

Enjoy!!!

 

Hey, can you tell me where are the code snippets you added are? I made alot of changes to ajax-cart.js and I don't want to lose them.

Link to comment
Share on other sites

  • 10 months later...
On 1/15/2017 at 5:32 PM, sidro said:

follow this tutorial and you will succed ! tested on 1.6.1.11beta version!

 

 

 

themes\your_theme\css\modules\blockcart  

add


.scrollvertical{
   overflow-y:scroll;
   height:300px;
} 

height: your desire height of cart extended

 

 

 

themes\your_theme\modules\blockcart\blockcart.tpl 

replace this :


<dl class="products">

with:


<dl class="products {if $products|@count>3}scrollvertical{/if}">

count> number of products you want scroll to begin with.

 

 

 

 

 

themes\your_theme\js\modules\blockcart\ajax-cart.js

replace this :


//send the ajax request to the server
 
        $.ajax({
            type: 'POST',
            headers: { "cache-control": "no-cache" },
            url: baseUri + '?rand=' + new Date().getTime(),
            async: true,
            cache: false,
            dataType : "json",
            data: 'controller=cart&add=1&ajax=true&qty=' + ((quantity && quantity != null) ? quantity : '1') + '&id_product=' + idProduct + '&token=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa=' + parseInt(idCombination): '' + '&id_customization=' + ((typeof customizationId !== 'undefined') ? customizationId : 0)),
            success: function(jsonData,textStatus,jqXHR)
            {
                // add appliance to whishlist module
                if (whishlist && !jsonData.errors)
                    WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
 
                if (!jsonData.hasError)
                {
                    if (contentOnly)
                        window.parent.ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
                    else
                        ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
 
                    if (jsonData.crossSelling)
                        $('.crossseling').html(jsonData.crossSelling);
 
                    if (idCombination)
                        $(jsonData.products).each(function(){
                            if (this.id != undefined && this.id == parseInt(idProduct) && this.idCombination == parseInt(idCombination))
                                if (contentOnly)
                                    window.parent.ajaxCart.updateLayer(this);
                                else
                                    ajaxCart.updateLayer(this);
                        });
                    else
                        $(jsonData.products).each(function(){
                            if (this.id != undefined && this.id == parseInt(idProduct))
                                if (contentOnly)
                                    window.parent.ajaxCart.updateLayer(this);
                                else
                                    ajaxCart.updateLayer(this);
                        });
                    if (contentOnly)
                        parent.$.fancybox.close();
                }
                else
                {
                    if (contentOnly)
                        window.parent.ajaxCart.updateCart(jsonData);
                    else
                        ajaxCart.updateCart(jsonData);
                    if (addedFromProductPage)
                        $('#add_to_cart button').removeProp('disabled').removeClass('disabled');
                    else
                        $(callerElement).removeProp('disabled');
                }
 
emptyCustomizations();

with:


//send the ajax request to the server
 
        $.ajax({
            type: 'POST',
            headers: { "cache-control": "no-cache" },
            url: baseUri + '?rand=' + new Date().getTime(),
            async: true,
            cache: false,
            dataType : "json",
            data: 'controller=cart&add=1&ajax=true&qty=' + ((quantity && quantity != null) ? quantity : '1') + '&id_product=' + idProduct + '&token=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa=' + parseInt(idCombination): '' + '&id_customization=' + ((typeof customizationId !== 'undefined') ? customizationId : 0)),
            success: function(jsonData,textStatus,jqXHR)
            {
                // add appliance to whishlist module
                if (whishlist && !jsonData.errors)
                    WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
 
                if (!jsonData.hasError)
                {
                    if (contentOnly)
                        window.parent.ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
                    else
                        ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
 
                    if (jsonData.crossSelling)
                        $('.crossseling').html(jsonData.crossSelling);
 
                    if (idCombination)
                        $(jsonData.products).each(function(){
                            if (this.id != undefined && this.id == parseInt(idProduct) && this.idCombination == parseInt(idCombination))
                                if (contentOnly)
                                    window.parent.ajaxCart.updateLayer(this);
                                else
                                    ajaxCart.updateLayer(this);
                        });
                    else
                        $(jsonData.products).each(function(){
                            if (this.id != undefined && this.id == parseInt(idProduct))
                                if (contentOnly)
                                    window.parent.ajaxCart.updateLayer(this);
                                else
                                    ajaxCart.updateLayer(this);
                        });
                    if (contentOnly)
                        parent.$.fancybox.close();
                }
                else
                {
                    if (contentOnly)
                        window.parent.ajaxCart.updateCart(jsonData);
                    else
                        ajaxCart.updateCart(jsonData);
                    if (addedFromProductPage)
                        $('#add_to_cart button').removeProp('disabled').removeClass('disabled');
                    else
                        $(callerElement).removeProp('disabled');
                }
                /* JS Scroll Vertical */
                if($('.cart_block_list:first dl.products dt').length > 2)
                    $('.cart_block_list:first dl.products').addClass('scrollvertical');
                else
                    $('.cart_block_list:first dl.products').removeClass('scrollvertical');
                /* JS Scroll Vertical */
 
                emptyCustomizations();

and in the same file

themes\your_theme\js\modules\blockcart\ajax-cart.js

replace this :


//remove a product from the cart via ajax
    remove : function(idProduct, idCombination, customizationId, idAddressDelivery){
        //send the ajax request to the server
        $.ajax({
            type: 'POST',
            headers: { "cache-control": "no-cache" },
            url: baseUri + '?rand=' + new Date().getTime(),
            async: true,
            cache: false,
            dataType : "json",
            data: 'controller=cart&delete=1&id_product=' + idProduct + '&ipa=' + ((idCombination != null && parseInt(idCombination)) ? idCombination : '') + ((customizationId && customizationId != null) ? '&id_customization=' + customizationId : '') + '&id_address_delivery=' + idAddressDelivery + '&token=' + static_token + '&ajax=true',
            success: function(jsonData) {
                ajaxCart.updateCart(jsonData);
                if ($('body').attr('id') == 'order' || $('body').attr('id') == 'order-opc')
                    deleteProductFromSummary(idProduct+'_'+idCombination+'_'+customizationId+'_'+idAddressDelivery);
            },

with:


//remove a product from the cart via ajax
    remove : function(idProduct, idCombination, customizationId, idAddressDelivery){
        //send the ajax request to the server
        $.ajax({
            type: 'POST',
            headers: { "cache-control": "no-cache" },
            url: baseUri + '?rand=' + new Date().getTime(),
            async: true,
            cache: false,
            dataType : "json",
            data: 'controller=cart&delete=1&id_product=' + idProduct + '&ipa=' + ((idCombination != null && parseInt(idCombination)) ? idCombination : '') + ((customizationId && customizationId != null) ? '&id_customization=' + customizationId : '') + '&id_address_delivery=' + idAddressDelivery + '&token=' + static_token + '&ajax=true',
            success: function(jsonData) {
                ajaxCart.updateCart(jsonData);
                if ($('body').attr('id') == 'order' || $('body').attr('id') == 'order-opc')
                    deleteProductFromSummary(idProduct+'_'+idCombination+'_'+customizationId+'_'+idAddressDelivery);
                    /* JS Scroll Vertical */
                    if(($('.cart_block_list:first dl.products dt').length-1) > 2)
                        $('.cart_block_list:first dl.products').addClass('scrollvertical');
                    else
                        $('.cart_block_list:first dl.products').removeClass('scrollvertical');
                    /* JS Scroll Vertical */
            },

clear cache / force recompile to see changes

Thank you for a nice solution. It works like a charm.

 

 

Link to comment
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...