Variants on product listing page

  • Posts: 45
  • Thank you received: 3
4 years 1 month ago #329657

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.24
-- PHP version -- : 7.4

I know it was asked before, but for example this solution is 9 years old
www.hikashop.com/forum/4-how-to/10827-di...product-listing.html

So I dare to ask again:
How could I create an override with variants table showing in product listing?
The dev page is protected, so I'd give you the credentials in a private message if you need it.

Basically we have products with 2 characteristics, so 4 variants, and the client would like a listing with all products displaying their variants, so returning customers can easily order their favourite products on one page.

I tried manually setting these up by creating and loading an override of the variant table shown in the detail page, as there are the variant_id's in the product row of the listing, but I get a bit stuck with the hikashop classes and the display of the variants. Maybe because there is JS / AJAX in use?

I know PHP OOP / Joomla very well as a developer, but before I read through every single hikashop code there is, I'd be greatful for some hints, specially on the classes and methods to use.

Thanks in advance!
Terry

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

  • Posts: 83404
  • Thank you received: 13497
  • MODERATOR
4 years 3 weeks ago #329660

Hi,

There is no option to do that.
However, if you're a developer it's possible.
First, the code to handle the variant selection display on the product page is in the file components/com_hikashop/views/product/tmpl/show_block_characteristic.php
Note that the ids and the system bases itself on the fact that there is only one such selector on the page. So since you'll need several of them there, you'll have to adapt the javascript and the HTML there when you copy it to the listing.
Also, that file uses the characteristics and variants data already loaded for the product in the show function of the components/com_hikashop/views/product/view.html.php file.
That data is not loaded on the listing, so you'll have to modify the code easier in the listing function of the view.html.php or directly in the view to load that extra data for each product.
That's our main issue to add that capability on listings since it means loading a lot of extra data on the listings, which would likely hit the memory_limit of hostings with a small limit.
If you check the javascript in the show_block_characteristic.php file, you can see that there is no ajax. However, what it does is that in the components/com_hikashop/views/product/tmpl/show.php file, the HTML of all the variants is added to the page as hidden divs, and in the show_default.php file, the HTML of the default variant is added to the page. Then, when you select another variant, the javascript replace the HTML of the default variant with the hidden HTML for that variant.
This allows the system to display the price / stock / image / description etc for each variant on the product page as you can see here:
demo.hikashop.com/index.php/en/hikashop/...with-characteristics

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

  • Posts: 45
  • Thank you received: 3
4 years 3 weeks ago #329669

Thank you lots for all the info. Part of it I have already found, the show.php and show_block_characteristics.php I am already trying to "abuse", but as you say, the data is limited in the listings. I do see the issue with loading time though.

The link you posted shows characteristics as dropdowns. I actually have variants as a table, which seems to be a slightly easier thing - every combination of the characteristics is displayed as one variant. Do we talk about different things here?

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

  • Posts: 45
  • Thank you received: 3
4 years 3 weeks ago #329673

Yes, I managed!
Here are my steps (roughly) in case someone has the same question:

1) created a custom variant listing as override derived from "show_block_characteristic.php" which I load into my listing layout

2) to that new variant listing I added these lines:

$productClass = hikashop_get('class.product');
$productClass->loadProductVariants($this->row);
$productClass->generateVariantData($this->row);

$this->row->product_quantity_layout = 'show_regrouped';

3) created a new custom override for price, as the price layout needs to show the variant price (maybe there's a better way, but this was the easiest. I created a temporary var in the product called $this->row->currentVariant with the variant in it, so I could adapt the price with one little change

4) created a new custom override fro addToCart, as that needed the same type of adaptions as the price, as well as a separate custom JS object called instead of hikashop.addToCart.

5) created a hikashop_custom.js with only an adapted version of the addToCart function. A few lines had to be adapted for the container class mainly.

It's not quite an add-on to sell but it works for this client. Thanks for your help, as far as I can see, the ticket can be closed.

Last edit: 4 years 3 weeks ago by bytekultur.
The following user(s) said Thank You: 3by400, Mohamed Thelji

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

Time to create page: 0.061 seconds
Powered by Kunena Forum