[Feature Request] Add progress bar to mini cart

[themew]

Would love an option to either toggle on/off or simply display the progress bar that appears in the shopping cart, in the mini cart.

Now that Paypal appears in the mini cart, many customers never see the shopping cart, so they won't see the progress bar displayed.

Thanks Christopher for such a great looking module.

[swissbull]

Hi,

There is an error with other currencies. For example with the CHF currency https://prnt.sc/nUja5DESsgOU

If the currencies have more than 1 character, there will be a problem.

[WhiteMage771]

Would love an option to either toggle on/off or simply display the progress bar that appears in the shopping cart, in the mini cart.

Now that Paypal appears in the mini cart, many customers never see the shopping cart, so they won't see the progress bar displayed.

Thanks Christopher for such a great looking module.

Definitely down for this. Been trying to figure out for a couple days now. Found a tutorial for one that didn't work. Love how this looks though.

[athercd]

Hi,

There is an error with other currencies. For example with the CHF currency https://prnt.sc/nUja5DESsgOU

If the currencies have more than 1 character, there will be a problem.

CSS File:

.freeship-progress {
    /* Existing CSS styles */

    .freeship-progress-bar-wrapper {
        /* Existing CSS styles */
        width: 100%; /* Change the width to occupy the full container */

        .freeship-progress-bar {
            /* Remove the fixed width, and add padding to prevent overlap */
            padding: 0 17px;
        }
    }
}

freeshipping_progress_bar.phtml :

<!-- Existing code -->
<div class="freeship-progress">
    <!-- Existing HTML code -->
    <div class="freeship-progress-bar-wrapper">
        <span class="min"><?= /* @noEscape */ $viewModel->getFormattedPrice(0, 0) ?></span>
        <div class="freeship-progress-bar">
            <div class="freeship-progress-bar-bg">
                <div class="freeship-progress-bar-fill freeship-progress-bar-progress"
                     style="width: <?= /* @noEscape */ $viewModel->getFreeShippingCompletionPercent() ?>%;
                     <?= /* @noEscape */ $background ?>">
                </div>
            </div>
        </div>
        <span class="max">
            <?= /* @noEscape */ $viewModel->getFormattedPrice($viewModel->getFreeShippingMinValue(), 0) ?>
        </span>
    </div>
    <!-- Existing HTML code -->
</div>
<!-- Existing PHP code -->

With these changes, the progress bar wrapper will now occupy the full width of its container, and the progress bar itself will have some padding to prevent overlap with the text. This should fix the issue when using currencies with three or more digits.

The changes made are as follows:

Inside the <div class="freeship-progress">, there is a <div class="freeship-progress-bar-wrapper"> element that wraps the progress bar and the related text.

In the <div class="freeship-progress-bar-wrapper">, the width has been changed from a fixed width to occupy the full container width using width: 100%;. This ensures that the progress bar and text will span the entire width of their parent container.

Inside the <div class="freeship-progress-bar">, the fixed width has been removed, and padding has been added with padding: 0 17px;. This padding provides some space around the progress bar, preventing overlap with the text.

[WhiteMage771]

@athercd
I am not 100% sure, but I don't think this actually works, unless I am missing something. The wrapper getting the 100% width works, but taking away the width from the progress bar makes it non-existent. The code you posted for the progress bar phtml looks the same as the original. I thought it had been working at first, but then I went to add another module and this happened. Thankfully just doing this on a local copy and not my live site.

[swissbull]

Hi,

That's what it looks like, unfortunately it's even worse than before, the currency is now below the number and it's still going over

https://prnt.sc/jWP2JZy2eyaT

Regards

[christophermallory]

@swissbull I have created a new issue based on the new issue you mentioned in this feature request. Please take a look at the issue here.

[christophermallory]

@themew and @WhiteMage771 I will add this to the roadmap, but I currently have no immediate plans of working on this feature until early 2024. I will keep the issue open until those changes are made. Feel free to create a PR if you progress on this feature and would like to contribute.

[themew]

@themew and @WhiteMage771 I will add this to the roadmap, but I currently have no immediate plans of working on this feature until early 2024. I will keep the issue open until those changes are made. Feel free to create a PR if you progress on this feature and would like to contribute.

@christophermallory Still super interested in adding this to the minicart as well, as so many customers checkout from the minicart rather than go to the physical cart. Love this progress bar!