Product category page, Add to Cart and Variants

  • Posts: 36
  • Thank you received: 4
  • Hikamarket Frontedition Hikashop Business
15 hours 37 minutes ago #369580

-- HikaShop version -- : 6.1.1
-- Joomla version -- : 5.4.1
-- PHP version -- : 8.3
-- Browser(s) name and version -- : Firefox

I have price ranges (variants) for many products. How can the selection field for product variants and the "Add to Cart" button be also displayed directly on the product category page for such products with variants? Currently, users always have to click on the product with Variants first and select the Variant on the Productpage before they can add it to the cart. Surely there's a more user-friendly way to do this.

Thanks in Advance.

Last edit: 15 hours 26 minutes ago by spike252.

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

  • Posts: 36
  • Thank you received: 4
  • Hikamarket Frontedition Hikashop Business
12 hours 45 minutes ago #369590

I just discovered in the forum that this isn't possible, or only via the pop-up. That's a shame.

I've enabled the pop-up. However, the quantity selection field is laid out differently than on the product page. How can I make the quantity field look the same in the pop-up as it does on the product details page?

Attachments:

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

  • Posts: 84734
  • Thank you received: 13800
  • MODERATOR
11 hours 25 minutes ago #369582

Hi,

You can edit your menu item via the Joomla menu manager and under the "Products options" tab, you can set the "Popup mode" setting to "popup only" and then activate the "Add to cart" setting. This way, you'll get a "choose options" button on the listing. When the customer clicks on it, he will get a popup where he can select the variant before clicking on the add to cart button, all the while remaining on the listing page.

Regarding the quantity selection field, I checked your website and apparently the issue is with your Joomla template.
Your template's file are located in the folder templates/yootheme/
In a Joomla template, the main file is the index.php file in that folder which generates the layout for the pages.
Also, there is a component.php file next to it which is used to display the pages inside popups.
If I look at the CSS code applied on the quantity selection field on the normal product page, the CSS comes from the file templates/yootheme/css/theme.9.css of your template. But if I look at the CSS code applied on the quantity selection field in the popup, the CSS comes from the file /media/templates/site/cassiopeia/css/template.min.css
What this probably means is that your Joomla template is missing the component.php file in its folder. In that case, Joomla will default back to Cassiopeia's (Joomla's default template on the frontend) component.php file and that explains why the CSS code from the template is missing.
The solution is to add the missing component.php (or if it is present to fix its code) based on Cassiopeia's component.php file but add the template's CSS file to its header so that the CSS of the template can properly apply to popups.

Last edit: 9 hours 42 minutes ago by nicolas.

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

  • Posts: 36
  • Thank you received: 4
  • Hikamarket Frontedition Hikashop Business
7 hours 20 minutes ago #369602

Thanks but i don´t understand. component.php is located in the template folder. I don't understand why the pop-up uses a different CSS reference than the product details page. Isn't the problem with Hikashop?

I also don't understand why the product variants in the category view can't simply be displayed in the same way as on the product page.

<?php

defined('_JEXEC') or die;

use Joomla\CMS\Factory;

if (version_compare(JVERSION, '4.0', '>')) {

    $this->template = 'cassiopeia';

    $joomla = Factory::getApplication();
    $joomla->setTemplate((object) ['template' => $this->template, 'inheritable' => true]);

    $wa = $this->getWebAssetManager();
    $wa->getRegistry()->addTemplateRegistryFile($this->template, $joomla->getClientId());

    include JPATH_THEMES . "/{$this->template}/component.php";
    return;

}

$this->addStyleSheet("{$this->baseurl}/media/jui/css/bootstrap.min.css");
$this->addStyleSheet("{$this->baseurl}/media/jui/css/bootstrap-extended.css");
$this->addStyleSheet("{$this->baseurl}/media/jui/css/bootstrap-responsive.css");

?>
<!DOCTYPE HTML>
<html lang="<?= $this->language ?>" dir="<?= $this->direction ?>">
    <head>
        <meta charset="<?= $this->getCharset() ?>">
        <jdoc:include type="head" />
    </head>
    <body class="contentpane">
        <jdoc:include type="message" />
        <jdoc:include type="component" />
    </body>
</html>

Last edit: 6 hours 32 minutes ago by nicolas.

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

  • Posts: 84734
  • Thank you received: 13800
  • MODERATOR
4 hours 24 minutes ago #369605

Hi,

HikaShop is a component on your website. HikaShop displays its HTML and it comes with some CSS. However, it tries to use as less CSS as possible so that the CSS of the template can customize the HTML elements of HikaShop the same way as other elements on the website.
The dropdown for the quantity input field has the generic CSS of the template added to it on your product page.
However, your template is not adding its own CSS file for popup pages.
And that's why the dropdown looks different. But the problem is not in HikaShop.
If you had another extension with dropdowns on normal pages and dropdowns in popups, you would get the same issue.

If you switch to the default template of Joomla, you'll see that the quantity input field displays the same on the product page and in the popup.

The best would be to contact your template provider in order to report the issue. I don't know how your template is made and thus I'm not sure of the exact way to fix the problem in it. Plus, if you change the files of your template, you'll potentially lose the changes next time you update the template. So ideally, the template provider should publish an update with the fix.

If that is really not possible, you can always add a line like this:
$this->addStyleSheet("{$this->baseurl}/templates/yootheme/css/theme.9.css");
after the line:
use Joomla\CMS\Factory;
in templates/yootheme/component.php but your template provider might recommend another solution.

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

Time to create page: 0.065 seconds
Powered by Kunena Forum