Dynamic view change on frontend

  • Posts: 91
  • Thank you received: 5
8 years 5 months ago #270457

-- HikaShop version -- : 3.1.0
-- Joomla version -- : 3.7.2
-- PHP version -- : 7.0
-- Browser(s) name and version -- : Chrome latest

Does anybody know how to introduce an option in frontend to dynamically switch the view between div (grid) mode and list/table mode? I attach the icons on non-hika site that make it.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 4820
  • Thank you received: 654
  • MODERATOR
8 years 5 months ago #270464

Hello,

there is no options to do this in HikaShop.
BUT I see 2 solutions to fit your needs :
1°) You can create 2 Item Menu listing, 1 with div display configuration AND 1 (with the same products & categories content) but with table display configuration.
One of this Item Menu have to be created in "HikaShop hidden menus" to avoid to have 2 times the "same" name menu in your menu listing.
Then, add via override view on your menu listing 2 buttons WITH required Url to reach one of the other Item Menu.
Maybe if you have some menu listing that don't required this kind of feature, you have to add in your override view a condition to display or not these 2 buttons.
Something like :

if (menu_listing_id == required_menu_id) {
    echo 
        "<div class='buttons'>...</div>".
        "<div class='buttons'>...</div>";
}
See these 2 tutorials, to help you, on Item Menu and Override View .
Hope this will help you.

Regards

Last edit: 8 years 5 months ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 91
  • Thank you received: 5
8 years 5 months ago #270539

Thanks, I will try it and maybe give some feedback

Please Log in or Create an account to join the conversation.

  • Posts: 91
  • Thank you received: 5
8 years 2 months ago #275664

Hey, I managed to do this.
1) I created template override:
html/com_hikashop/product/listing_img_title.php
and in line 72 I added

<span class="hikashop_product_opis">
	<?php echo $this->row->product_description; ?>
	</span>
2) I added switch buttons with jQuery:
jQuery('.sortowanie').before('<div id=switch>Widok: <a id="3kol" href=#><img src="/new/images/icons/widok2.png" alt="3 kolumny" /></a> <a id="1kol" href=#><img src="/new/images/icons/widok1.png" alt="1 kolumna z opisem" /></a></div>');
3) Then I added the click behaviour:
jQuery('#1kol').click(function(e){
		e.preventDefault();
		jQuery('.hikashop_products_listing_main').addClass('kolumna1');
	});
	jQuery('#3kol').click(function(e){
		e.preventDefault();
		jQuery('.hikashop_products_listing_main').removeClass('kolumna1');
	})
4) I added CSS rules:
.hikashop_product_opis {
	display:none;

}
.kolumna1 .hkc-md-4 {
	width:100% !important;
}
.kolumna1 .hikashop_product_opis {
	display:block
}
.kolumna1 .hikashop_product_image {
	float:left;
}
5) Finally I even addes Cookie rules, so If any client prefers 1 column view, he will get it as default in all categories. So the full code from 3) looks like this
var Cookies2 = Cookies.noConflict();
jQuery('#1kol').click(function(e){
		e.preventDefault();
		jQuery('.hikashop_products_listing_main').addClass('kolumna1');
		Cookies2.set('widok', '1kol');
	});
	jQuery('#3kol').click(function(e){
		e.preventDefault();
		jQuery('.hikashop_products_listing_main').removeClass('kolumna1');
		Cookies2.set('widok', '3kol');
	})
	var widok = Cookies2.get('widok');
	//console.log(widok);
	if (widok == '1kol')
	{
		jQuery('#1kol').click();
	}
I used github.com/js-cookie/js-cookie for this, so I had to include
<script src="<?php echo $this->baseurl . '/templates/' . $this->template . '/js/js.cookie.js' ?>"></script>
in my template.

The result of 1 column view is attached.

I hope that can be of help to anyone.

Attachments:
Last edit: 8 years 2 months ago by bolando. Reason: cookies2 explanation
The following user(s) said Thank You: nicolas

Please Log in or Create an account to join the conversation.

Time to create page: 0.061 seconds
Powered by Kunena Forum