Display the Variant as Individual Products

-- HikaShop version -- : 3.6.3
-- Joomla version -- : 3.5.8
-- PHP version -- : 5.4
-- Browser(s) name and version -- : all
-- Error-message(debug-mod must be tuned on) -- : n/a

Hello,

I would like to know if it is possible to display a variant of a product and its corresponding image/details within a product listing? For example, Zappos - a popular US online shoe store has:

Scenerio: Slipper A made by Brand A in five colors.

When you click on the product in red, you are brought to the product page and shown the detail picks and the option to select another color.

Hello,

Thank you for the idea! This is working as a "cheat" however there are two concerns:

1. I was planning to have the "add to basket" feature right on the products listing. I'm guessing this is not possible if we want to do this as the quantity for both won't update since they are not linked.

2. I want the variant to be pre-selected within the main product that I'm linking to with the canonical URL from the "fake product". Right now, there is no URL differential for each variant so I only have the option to link to the main product URL which then serves me the default variant for that product. This doesn't make much sense for a user. For this idea to work seamlessly, I would need a unique URL for each variant that I could link to from the "second clone product". This way when I click on the product in the listing, it will go to the "main product" and the correct variant would be selected.

Here's the screenshot:
Products Listing - Clone Product

HI
whe nwrite id does it mean cid ?

1) study demo product/variant
for a main product if we study the html code attach to one variant that has one characteristique and 2 values ( 7 and 8 "id")
--backend editor : from the tab we can discover the value and so the url

<tr class="row1" id="hikashop_product_variant_line_7">
      <!--style="cursor:pointer" onclick="return window.productMgr.editVariant(7);">-->

<tr class="row0">
	<td class="hikashop_cart_module_product_name_value hikashop_cart_value">
	 <a href="/index.php/en/buyproduc/product/7-">		
        <a href="index.php?option=com_hikashop&amp;ctrl=product&amp;task=show&amp;cid=7&amp;name=&amp;Itemid=473&amp;lang=en">

nicolas wrote:
2. There is a unique URL for each variant. That's what I was talking in my previous message:
enter the URL of the variant of your main product corresponding to the color of the product (you can get it from the checkout cart when you add the main product with that color selected to the cart).
That way, the different color products will show on the listings, and will redirect to that same product with the corresponding variant preselected and you'll still have the variants selector available.

I have done this on a site that is under development and all works fine as far as the listing is concerned.
www.halare-test.co.uk/shop/dresses - products SILK AND JERSEY TULIP DRESS

But the problem is that when you go to the product page via the dummy product, then the selection of other colours do not work. They work fine on the master product but not on the dummy product.

Would love to see display Variants as Individual Products and I am sure it would be very useful for many people.
We were looking at using Hikashop as a product order webapp but decided against it because for people placing their orders, if they have to go into each product to select the variant it would take too long (too many clicks). We tried setting up product listing table menu but if the product had a variant there was always the button "Choose Options". So even if it is too complicated to list variants as "single products", which was the original topic of the this thread, it would be great to be able to select the variant from the product layout listing and add to the cart/order without having to click into the product select the variant then use the back button to get back to the product layout listing again.

Perhaps we had missed something so comments welcome!

Hi James

It is possible to do what you are asking, as I have done on this site: www.haruka.co.uk/shop

There is a little work involved, but it works well IMO. It is a little easier for the site that you see, as the data is injected from their stock database which I worked on and wrote the routines to manage HikasShop.

The area to understand is the 'Canonical URL'. If you populate this, then this is what HikasHop will use as the address for your variant. So to use this:
1) you set up your main product as normal, with all the variants.
2) select one of the colours as the primary (default) variant.
3) create one product for every other colour that the product has (you only need the main image on these)
4) set the Canonical URL for these additional products to be the URL for the master product, adding them to the same categories

example: you have a shirt that comes in blue, green and white in sizes of S, M, L
Your main product will have 9 variants (blue S, blue M, blue L, green S, green M, green L, white S, white M, white L)
You select blue M as your default, and your product has the URL mydomain.com/shop/nice-shirt.
You create 2 additional product records (with only one image) which are nice-shirt-green (S, M, L) and nice-shirt-white (S, M, L). In the Canonical URL for both of these you put shop/nice-shirt.
and voila ... you should now have three products showing and all going to the main product when clicked.

There was an additional modification to make the product clicked to display instead of the default item, but I can not remember it off the top of my head. See if you can get on with the above and let me know if you want me to look up that bit of information.

You can also kill off the 'Choose Options' and select from the main page if you wish, by editing the product listing views (you will need a basic understanding of PHP). This is accessible from with Hikashop under 'Displays/Views'.

Good luck

Hi Esotechie,

thank you for your explanation. All is clear. However that is quite a lot of additional configuration if you have a few hundred products plus the different variants.

We will test you configuration and let you know how we get on.

Kind regards, James

Hi Nicolas,

selecting the variant directly on the product listing would make a fantastic product that so much better. I am sure lots of people would be interested in this functionality because it would make the creation of large orders so much easier and seriously reduce the amounts of clicks required.

We look forward to this improvement hopefully not too far in the future!!

Thanks,

Just wondered if there was any update on being able put an add to cart button when viewing products with varients in a category listing?

Thanks