Responsive Comparison Tool

  • Posts: 38
  • Thank you received: 0
8 years 9 months ago #229497

-- url of the page with the problem -- : localhost
-- HikaShop version -- : 2.6.1
-- Joomla version -- : 3.4.8
-- PHP version -- : 5.6.8
-- Browser(s) name and version -- : FF44

I recognise that, to a degree, this is down to the designer/developer. However there is, perhaps, a simple suggestion that could be implemented to help people realise the comparison tool down to lower resolutions with more simplicity. Being that the use of a comparison tool is seeing the information on a variety of products in a "side by side" layout it does mean that below certain resolutions your "maximum permitted" products for comparison stops the tool being useful.

As an example I have the configuration set for 3 as my usable width per product in listing is about 300px (not too uncommon). So my choice of 3 is fairly logical as this allows me to have 3 products side by side with a row header column.

What might be a more "usable" option could be to define the column width and have the browser calculate the number of comparable products based off browser width. As an example:

A visitor is using a 1920 screen with browser at full width (1866px for argument's sake). This allows for 5 products and the row header column.

Visitor 2 is using an HTC One Mini in landscape giving a browser width of 1280px. This would, therefore, allow for 3 products and the row header column.

With a definable row header column width this calculation could be further refined.

Visitor 3 is using an iPhone 4 in landscape giving a browser width of 960px. This would allow for 2 products.

Anything that would only provide space for 1 product would automatically disable the comparison tool.

As I say I have styled this myself but have had to disable the comparison tool below 900px (that is the smallest I can style the 3 product limit I have chosen). With the calculations being handled by the browser this could really provide a neat additional to your comparison tool.

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
8 years 9 months ago #229502

Hi,

It should be easy to disable the comparison system for low resolutions by just hiding the compare button on the listings for low resolutions:

@media (max-width:900px) {
.hikashop_compare_button { display: none; }
}

The problem with providing a generic solution is that the template, the modules and even the width of the images of the products will be different for different websites and thus it's hard to set a defined width upon which HikaShop should reduce the number of products allowed for the comparison.
Furthermore, HikaShop doesn't necessarily know if the width available on the comparison page will be the same than the width available on the products listing where the compare buttons are. For example, it's quite easy to display a filter module on the left side of the products listing, and not have it on the comparison page. But the comparison system on the products listing has not way of knowing that and thus can't guess the width available on the comparison page to calculate the number of products allowed.

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

  • Posts: 38
  • Thank you received: 0
8 years 9 months ago #229610

The css is the solution I'm using. The problem I have is that I know the acceptable widths of my columns (300px in my case) and I know the minimum width of my header row column (200px). This means that I know the amount of products that can be selected at any given resolution for the compare tool. The problem comes that it could easily accept 5 at the 1920 screen width and not be useful under 800px (rough for conversation sake).

My suggested solution involves admin input. I would simply enter my known values and an script would take care of the rest based on user resolution. This would allow your customers to implement the comparison tool in smaller screens providing more value for your product.

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
8 years 9 months ago #229626

Hi,

Thank you for your feedback.

I see what you mean. With the admin configuring that manually it would be possible yes.
For now, if you want to do that specifically for your website, and if you know a bit of javascript, you can edit the javascript code of the file "compare" of the view "product" via the menu Display>Views.

The following user(s) said Thank You: teamtmedia

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

  • Posts: 38
  • Thank you received: 0
8 years 9 months ago #229747

Up against this release right now but will take a look at that later. Cheers for the heads-up. If I do get round to it I will share my findings with you.

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

  • Posts: 96
  • Thank you received: 1
7 years 10 months ago #258297

Hi,

Is it normal that when I compare at least 3 products, I can't go to the right side of the page ?

Is it because the comparison page is not responsive ?

Here is the link : www.netweb3d.com/mauritiusproducts/fr/ca.../product/compare?cid []=2&cid[]=12&cid[]=40

Best regards.

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
7 years 10 months ago #258300

Hi,

Yes and no.
There are several ways you could have the whole comparison table display on small resolutions on your page:
- improve the custom CSS you have for your buttons and tables in order to use less space. For example, you should be able to easily achieve this: take.ms/fPuWo
- improve the CSS of the template to allow the display of a horizontal scrollbar. Right now, the CSS of the template prevents that and thus, when the content goes over the browser window horizontally, you can't access it.
- make the comparison table responsive with additional custom CSS. You could do that quite easily with a bit of CSS: www.w3schools.com/howto/howto_css_table_responsive.asp

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

  • Posts: 96
  • Thank you received: 1
7 years 10 months ago #258363

Hi,

I added <div style="overflow-x:auto;"> just before the table in product/compare, and I get a horizontal scroll bar.
That's fine. Thank's

But now, I try to reduce the width of the columns, but nothing works : in CSS or in view.

You'll see it in : netweb3d.com/mauritiusproducts/fr/catego.../product/compare?cid []=4&cid[]=19&cid[]=58

Thank's for your help.

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
7 years 10 months ago #258364

Hi,

You have added that CSS:

.hikashop_compare_page .hikashop_product_stock div#hikashop_add_wishlist a.hikashop_cart_button {
    margin-left: 200px;
    text-align: center;
    display: inline-block;
    width: 180px !important;
    height: 35px !important;
}
in www.netweb3d.com/mauritiusproducts/media...tom.css?t=1482768386
Remove the line:
margin-left: 200px;
and you'll see that it will already look a lot more smaller.

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

  • Posts: 96
  • Thank you received: 1
7 years 10 months ago #258406

Hi,

Ok, I didnt see this. It work well whithout it. Thank's.

And now, another thing I would wish to do in comparison tool, is to modify the Quantity field :

https://netweb3d.com/mauritiusproducts/fr/produits/product/compare?cid[]=2&cid[]=19&cid[]=34
As you have see, it's not the same than on the other pages with products, for exemple :

netweb3d.com/mauritiusproducts/fr/catego...gory/25-thes-maurice

How can I do to get the same quantity field (option Show select in background) ?

Best regards.

Last edit: 7 years 10 months ago by Jerome. Reason: fix link

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
7 years 10 months ago #258435

Hi,

The comparison system doesn't support that for now.
You would have to edit the file "compare" of the view "product" via the menu Display>Views and add such code:

if(!empty($this->row->product_quantity_layout) &&  $this->row->product_quantity_layout != 'inherit'){
						$qLayout = $this->row->product_quantity_layout;
					}else{
						$categoryQuantityLayout = '';
						if(!empty($this->row->categories) ) {
							foreach($this->row->categories as $category) {
								if(!empty($category->category_quantity_layout) && $this->quantityDisplayType->check($category->category_quantity_layout, $app->getTemplate())) {
									$categoryQuantityLayout = $category->category_quantity_layout;
									break;
								}
							}
						}
						if(!empty($categoryQuantityLayout) && $categoryQuantityLayout != 'inherit'){
							$qLayout = $categoryQuantityLayout;
						}else{
							$qLayout = $this->config->get('product_quantity_display','show_default');
						}
					}
					JRequest::setVar('quantitylayout',$qLayout);
before the code:
$this->setLayout('quantity');
					echo $this->loadTemplate();
in order to support that.

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

  • Posts: 96
  • Thank you received: 1
7 years 10 months ago #258460

Hi,

It works perfectly !

Thank you very much for your effective et quick support.

Best regards.

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

Time to create page: 0.100 seconds
Powered by Kunena Forum