Jump to content

Tips & Tricks I want to share

tintacreative
 Share

Recommended Posts

tintacreative Newbie

tintacreative

Posted
Posted

Hi all,
I've been using PrestaShop for 2 days now, being reading everything about it. Searching here and there, and thanks to the team for their great effort.
I've been searching to change the text on the view button from this forum, but come out nothing.
So i try to figure it out myself by try and error methods.
And it works finally. Just want to share so anybody that might want to change it can read it here. From now on, i will try to add anything that cannot be found here, and i got a way solving on this forum. So more people can benefit from it.

This is the shop I'm currently working on : http://store.tintacreative.com


How To Change Text on the "View" Button under Product List. - EDITED! (Thanks to ruilong)

1. Go to BO and click Tools -> Translations.
2. Under Modify Translation category click the flag represent the language you want to change.
3. Go to product-list - 8 expressions (7) and put anything you want at the right slots.
http://tintacreative.com/Images/store/notes01.gif
4. Save the translation.

How to change to Grid View for Product List

1. Open global.css within the /themes/prestashop/css/ folder
2. Go to this code

ul#product_list li {
   background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;
   border: solid 1px #d0d3d8;
   padding: 3px;
   height:130px;
   clear:both;
   margin-bottom:0.3em;
}


3. Add this code under margin-bottom

    float: left;
   width: 22%;
   height: auto;
   margin-right: 8px;
   clear: none;


4. All the numbers within this code had been adjusted so that, a 4 columns grid view product list can be used.
5. Save and upload the global.css back to your server.

How to Move The Product List Info left a bit so that we can have 4 columns product list

1. Open global.css within the /themes/prestashop/css/ folder
2. Go to this code 

   ul#product_list li div.right_block{
   float:left;
   width: 11em;
   text-align:right;
   margin-left:1em;
   margin-top:0.5em;
}


3. Change the width from 11em; to any value that suites you, for my case, i put 10em, and it fit a 4 columns list.
4. Save and upload the global.css back to your server.

How to Change the Add to cart & View Button Size

1. Open global.css within the /themes/prestashop/css/ folder
2. Find this code

input.button, input.button_disabled, input.exclusive, input.exclusive_disabled, a.button, a.exclusive, span.button, span.exclusive {
   width: 120px;
   background-image: url('../img/button-medium.gif');


3. Change the width to 100px or what ever you desire.
4. Save and upload the global.css back to your server.
5. Then open button-medium.gif & button-medium-exclusive.gif within the /themes/prestashop/img/ folder
6. Edit it with photoshop or any image editor, and make sure the length of the image will be the same as the width you set in the code above.
7. Save it, and upload it back to your server.

Hope that's help.
Please prevent from posting unrelated posts. Everybody is welcome to contribute to this thread, as long as you stick to tips & tricks. Thanks

Link to comment
Share on other sites
tintacreative Newbie

tintacreative

Posted
  • Author
Posted

How to change default view quantity of item?

1. Open pagination.php from your main folder
2. Edit the first row 

$nArray = array(10, 20, 50);


change the value 10, 20 and 50 to what ever value you want it to show.
3. Save, and upload the file to your server.
4. Then go to your back office. Back Office >> Preferences >> Products
Update the Products per page: to the value you desire.

Hope that's help.

Link to comment
Share on other sites
tintacreative Newbie

tintacreative

Posted
  • Author
Posted

How to change the Previous & Next Button

1. I somehow feel that the previous & next button under product list is somesort disturbing,1 because the size is not the same, and 2 there's already an arrow showing right and left.
2. I decided not to include the text within the button, so if you guys want to do the same, you can follow these steps.
3. Open pagination.tpl in /themes/prestashop/ folder
4. Find these lines

>
</pre>
<ul>
       {if $p != 1}
           {assign var='p_previous' value=$p-1}
goPage($requestPage, $p_previous)}">« {l s='previous'}
       {else}
« {l s='previous'}
       {/if}


and delete only the previous which contain within {l s='previous'}, only 2 place to delete. so it should become {l s=''}

5. For Next,

{if $pages_nb > 1 AND $p != $pages_nb}
           {assign var='p_next' value=$p+1}
goPage($requestPage, $p_next)}">{l s='Next'} »
       {else}
{l s='Next'} »


Same thing, just delete the Next within this {l s='Next'}.
6. Save the pagination.tpl, and upload to your server.

Hope thats helps

Link to comment
Share on other sites
Terry Newbie

Terry

Posted
Posted

Thank you very much for sharing!

You just answered two questions that were begging me
but could not find the answer on the forum. Did not want
to ask, because I most likely looked over them and did
not want to get hollered at:)

Thanks again,

Terry

Link to comment
Share on other sites
VIXUS Newbie

VIXUS

Posted
Posted

How to Change the Add to cart & View Button Size

1. Open global.css within the /themes/prestashop/css/ folder
2. Find this code
input.button, input.button_disabled, input.exclusive, input.exclusive_disabled, a.button, a.exclusive, span.button, span.exclusive {
   width: 120px;
   background-image: url('../img/button-medium.gif');


3. Change the width to 100px or what ever you desire.
4. Save and upload the global.css back to your server.
5. Then open button-medium.gif & button-medium-exclusive.gif within the /themes/prestashop/img/ folder
6. Edit it with photoshop or any image editor, and make sure the length of the image will be the same as the width you set in the code above.
7. Save it, and upload it back to your server.

Hope that's help.
Please prevent from posting unrelated posts. Everybody is welcome to contribute to this thread, as long as you stick to tips & tricks. Thanks



NAH, THIS IS WRONG METHOD !!!

This way you change this kind of button in the entire shop not just "add to chart"... theres got to be a better way.
Link to comment
Share on other sites
Skipper Newbie

Skipper

Posted
Posted

1. Open global.css within the /themes/prestashop/css/ folder
2. Go to this code ...
3. Change ...
4. Save and upload the global.css back to your server.


Better do a deep copy of /themes/prestashop/ to /themes/whateveryouwant/ and set the theme to 'whateveryouwant' in the backoffice of PS. Then work on 'whateveryouwant'.

If you change the 'prestashop' theme, you risk, no, you'll lose, your changes on the next upgrade of the shop software.
Link to comment
Share on other sites
jhnstcks Newbie

jhnstcks

Posted
Posted

To change the size or shape of just the add to cart button OR the view button you need to create a new image file, change the code in product.tpl and create a new class in your css file, which would be the same as the code in your product.tpl file.

IF anyone is interested in this i can post full explanation of how to do this.

Link to comment
Share on other sites
VIXUS Newbie

VIXUS

Posted
Posted
DJ-Terror : i see that button become smaller, but too small for the text.


it will fit nicely onmy language once i finish translation. ;)

By the way, what you want is this!

Images Enlarge v1.1
Enable enlarge image on mouseover.
(www.marghoobsuleman.com | www.giftlelo.com)
Link to comment
Share on other sites
tintacreative Newbie

tintacreative

Posted
  • Author
Posted
in this case i just changed "add to chart" in css and tpl -> from button to button_small


i see, i think i can see the basic thing to do, but cannot spend time trying now, got to upload all the products.
Thanks


jhnstcks, if you got free time, upload the tutorial here, would like to see it, and appreciate it a lot.
Thanks
Link to comment
Share on other sites
jhnstcks Newbie

jhnstcks

Posted
Posted

Ok here goes, hope this makes sense.

For this example we will change the add-to-cart button in the product pages.

1. Create your button with your desired width height etc. If you have hover and disabled buttons dont forget to make it 3-tiered. In my example it shall be called button-medium2.gif

2. We have to change the entry in the product.tpl file.

Find the following code:

            
quantity == 0} style="display:none;"{/if} id="add_to_cart" class="buttons_bottom_block"><input type="submit" name="Submit" value="{l s='Add to basket'}" class="exclusive" /></p>



You need to change the class="exclusive" to whatever you want your new button class to be called. I shall call it exclusive2 to keep it simple. SO your code should look like this:

quantity == 0} style="display:none;"{/if} id="add_to_cart" class="buttons_bottom_block"><input type="submit" name="Submit" value="{l s='Add to basket'}" class="exclusive2" /></p>



3. Now you need to create the class in your global.css file:

Find the following code:

/* classic buttons */
input.button_mini, input.button_mini_disabled, input.exclusive_mini, input.exclusive_mini_disabled, a.button_mini, a.exclusive_mini, span.button_mini, span.exclusive_mini {
   width: 30px;
   background-image: url('../img/button-mini.gif');
}
input.button_small, input.button_small_disabled, input.exclusive_small, input.exclusive_small_disabled, a.button_small, a.exclusive_small, span.button_small, span.exclusive_small {
   width: 60px;
   background-image: url('../img/button-small.gif');
}
input.button, input.button_disabled, input.exclusive, input.exclusive_disabled, a.button, a.exclusive, span.button, span.exclusive {
   margin-bottom:5px;
   width: 120px;
   background-image: url('../img/button-medium.gif');
}

input.button_large, input.button_large_disabled, input.exclusive_large, input.exclusive_large_disabled, a.button_large, a.exclusive_large, span.button_large, span.exclusive_large {
   width: 180px;
   background-image: url('../img/button-large.gif');
}



Now you need to add the code here that will tell prestashop to add the button image everytime you use class="exclusive2". So add the following directly underneath:

input.exclusive2, a.exclusive2, span.exclusive2 {
width: 120px;
   background: transparent url('../img/button-medium2.gif');
   }

input.exclusive2:hover, a.exclusive2:hover, span.exclusive2:hover {
   background-position: left -18px;
   color:#888!important;

}



Change the width to whatever size your button is. The code background-position: left -18px will cause the button to move and display the next section of your button image, when you mouse over the button on screen, if you have bigger buttons then you may have to change this value.

Link to comment
Share on other sites
  • 1 month later...
caparuni Newbie

caparuni

Posted
Posted

include product description in backoffice search :


by default when you search product in backoffice you cant search trough product description, to add this you must modify /classes/Product.php go to function searchByName

looking for :

SELECT p.`id_product`, pl.`name`, pl.`link_rewrite`, p.`weight`, p.`active`, p.`ecotax`, i.`id_image`, p.`reference`,



replace with:

SELECT p.`id_product`, pl.`name`, pl.`description`, pl.`link_rewrite`, p.`weight`, p.`active`, p.`ecotax`, i.`id_image`, p.`reference`,




and then looking for :

WHERE pl.`name` LIKE \'%'.pSQL($query).'%\' OR p.`reference` LIKE \'%'.pSQL($query).'%\' OR p.`supplier_reference` LIKE \'%'.pSQL($query).'%\'



replace with:

WHERE pl.`name` LIKE \'%'.pSQL($query).'%\' OR p.`reference` LIKE \'%'.pSQL($query).'%\' OR p.`supplier_reference` LIKE \'%'.pSQL($query).'%\' OR pl.`description` LIKE \'%'.pSQL($query).'%\'

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...