Quantity Based Pricing combined with Variants

  • Posts: 2
  • Thank you received: 0
  • Hikashop Essential
1 week 5 days ago #371017

-- HikaShop version -- : 6.4.0
-- Joomla version -- : 5.4

Hi,

I am trying to set up differently priced product variants combined with quantity based pricing. I would like to have the following:

1. The variant being selected in a drop down menu
2. Buttons displaying different quantities, the relevant prices as well as the discounts. Upon clicking the buttons the quantity selector automatically updates to the specified quantity.
3. The main price below the product title to update based on the variant and quantity selected.

So while I get the two systems to function independently of each other, I don't manage to have them work together. Ie, when I load the page, quantity based pricing works based on the default variant. The price below the heading updates to the correct value as I click the quantity buttons (See Attachment Screenshot a -

).

As soon as I select a variant two problems arise: 1. all three prices associated with the different quantities of the selected variant show below the heading and 2. the prices displayed on the quantity buttons do not update. (See Attachment Screenshot b - )

Are there any suggestions on how to get this working?

Thanks,
Roland

Attachments:

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

  • Posts: 85393
  • Thank you received: 13962
  • MODERATOR
1 week 4 days ago #371018

Hi,

Without knowing the settings of your product / variants, the customization you made in the view override to get the quantity selector like this, and a link to the page with the issue so that we can analyze the situation, it will be hard to tell you exactly what you're missing.
Could you provide these ?

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

  • Posts: 2
  • Thank you received: 0
  • Hikashop Essential
1 week 4 days ago #371024

Hi Nicolas,

Thanks for your message. I am still running the site on local host so cannot send you a link unfortunately.

I have created the variants by setting the following:

1. Characteristics under Components -> Hikashop -> Products -> Products -> Characteristics
2. Specifications under the product tab under Components -> Hikashop -> Products -> my specific product (Langstroth Hive)
3. Variants under the variant tab under Components -> Hikashop -> Products -> my specific product (Langstroth Hive). Here I have set three prices for each variant giving each price a different minimum quantity.

The quantity based pricing I have done through changes to the show_default.php file. I have used ChatGPT for assistance as I am relatively new to programming. Apologies in advance for pasting such a long code. Here are the parts I have added to the file:

<h4 class="quantity-title">Quantity</h4>

<div class="bulk-row">

<?php
$base_price = 0;

if (!empty($this->element->prices[0])) {
    $base_price = $this->element->prices[0]->price_value_with_tax;
}

foreach ($this->element->prices as $price) {

    // Quantity
    $qty = $price->price_min_quantity ?: 1;

    // Price
    $value     = $price->price_value_with_tax;
    $formatted = $this->currencyHelper->format($value, $this->currency->currency_id);

    // Discount
    $save = 0;
    if ($base_price > 0) {
        $save = round((1 - ($value / $base_price)) * 100);
    }

    // Output
    echo '<div class="bulk-option" data-qty="' . $qty . '">';
        echo '<div class="bulk-qty">' . $qty . '<span class="unit"> pcs</span></div>';
        echo '<div class="bulk-price">' . $formatted . '</div>';

        if ($save > 0) {
            echo '<div class="bulk-save">' . $save . '% Discount</div>';
        }

    echo '</div>';
}
?>

</div>

<script>
document.querySelectorAll('.bulk-option').forEach(function(option) {

    option.addEventListener('click', function() {

        // === Quantity ===
        let qty = this.getAttribute('data-qty');
        let qtyInput = document.querySelector('input[name="quantity"]');

        if (qtyInput) {
            qtyInput.value = qty;
        }

        // === Price ===
        let price     = this.querySelector('.bulk-price').innerText;
        let mainPrice = document.querySelector('#hikashop_product_price_main');

        // === Discount ===
        let discount     = this.querySelector('.bulk-save');
        let discountText = discount ? discount.innerText : '';

        // === Update main price ===
        if (mainPrice) {
            if (discountText) {
                mainPrice.innerHTML = price + ' <span class="main-discount">' + discountText + '</span>';
            } else {
                mainPrice.innerHTML = price;
            }
        }

        // === Active state ===
        document.querySelectorAll('.bulk-option').forEach(function(o) {
            o.classList.remove('active');
        });

        this.classList.add('active');
    });

});


// === Version selection ===
document.querySelectorAll('.version-option').forEach(function(btn) {

    btn.addEventListener('click', function() {

        document.querySelectorAll('.version-option').forEach(function(o) {
            o.classList.remove('active');
        });

        this.classList.add('active');
    });

});
</script>
Hope this makes it clear? Please let me know if you need any other information.

Thanks

Last edit: 1 week 4 days ago by nicolas.

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

  • Posts: 85393
  • Thank you received: 13962
  • MODERATOR
1 week 4 days ago #371025

Hi,

This is a view override issue, not a core bug. Two things need to be adjusted in your customization:

1. Multiple prices showing after variant selection: Your code loops over $this->element->prices which, after a variant is selected, contains the prices of all variants. You need to check if a variant is selected and use its prices instead. For example:

$prices = $this->element->prices;
if(!empty($this->element->main)) {
    $prices = $this->element->main->prices;
}

Or better, listen to the variant selection and rebuild the buttons from the selected variant's prices via JavaScript.

2. Quantity buttons stop working after variant change: When a variant is selected, HikaShop refreshes parts of the page via AJAX, which replaces the DOM elements your event listeners were attached to. You need to re-initialize your click handlers after each variant change by listening to HikaShop's content change event:
window.Oby.registerAjax(['hkContentChanged'], function() {
    // Re-bind your bulk-option click handlers here
    document.querySelectorAll('.bulk-option').forEach(function(option) {
        option.addEventListener('click', function() {
            // ... your existing click handler code
        });
    });
});

This event fires each time a variant is selected and the page content is updated.

The following user(s) said Thank You: rolandpb

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

Time to create page: 0.306 seconds
Powered by Kunena Forum