Dynamic view change on frontend

bolando
Topic Author
Offline

9 years 4 months ago #270457 by bolando

Dynamic view change on frontend was created by bolando

-- 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.

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

Philip
Offline

9 years 4 months ago - 9 years 4 months ago #270464 by Philip

Replied by Philip on topic Dynamic view change on frontend

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 :

Code:

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: 9 years 4 months ago by Philip.

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

bolando
Topic Author
Offline

9 years 4 months ago #270539 by bolando

Replied by bolando on topic Dynamic view change on frontend

Thanks, I will try it and maybe give some feedback

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

bolando
Topic Author
Offline

9 years 1 month ago - 9 years 1 month ago #275664 by bolando

Replied by bolando on topic Dynamic view change on frontend

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

Code:

<span class="hikashop_product_opis">
	<?php echo $this->row->product_description; ?>
	</span>

2) I added switch buttons with jQuery:

Code:

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:

Code:

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:

Code:

.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

Code:

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

Code:

<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.

Last edit: 9 years 1 month 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.218 seconds