[SOLVED] How to add/remove displayed tpl conditionally?

[kingsinnersoul]

Hello,

I have two buttons and I monitor their `onclick` state by using:

<script type="text/javascript">
$(document).ready(function() {
 $('#button1').bind('click', function(){
  });
 $('#button2').bind('click', function(){
  });
});
</script>

How can I remove the currently showing tpl from the page and add a different tpl instead of it?

 

Thanks

Edited June 10, 2013 by kingsinnersoul (see edit history)

[vekia]

hello

 

sorry but i don't understand what you exactly expect.

What you want to remove, where and when?

[kingsinnersoul]

Hello,

I originally wanted to have two different views (tpl files) for List View and Grid View for the product-list. I was thinking to use two differnet tpl files, but now I have learned that I can use show/hide a div by using javascript.

I show the work here.

[vekia]

many thanks for link, im convinced that this solution will be very useful for other merchants with the same question as your

 

thanks again!

[kingsinnersoul]

Good point, I will add the solution in this thread.

Using PS 1.5.4.1 - defauly theme.

 

I took the product-list.tpl file, and wrapped the contents with a `<div>` tag with `id="my_list_div"` - without including the smarty `{if isset($products)}` code at the start and `{/if}` at the end.

 

Then I copied the content within the `<div>` and pasted it within a new `<div>` I created before the `{/if}` at the end. I id'ed this `<div>` with `my_grid_div` id. Modified the new `my_grid_div` contents to look as a nice grid view (css, reorganize contents).

 

Finally, add the following javescript to show or hide `my_list_div` or `my_grid_div`.

<script type='text/javascript'>
$(document).ready(function() {
$('div#my_list_div').hide();
$('div#my_grid_div').show();
$("#grid_button_id").addClass("active");
$("#list_button_id").removeClass("active");
});
</script>

Edited June 10, 2013 by kingsinnersoul (see edit history)