Need custom code

1

IMG_20240713_125853
IMG_20240713_1258531080×322 11.5 KB

Hi anyone can please let me know the custom code for this?

2

Could you explain what this is for?

3

This is the counter in check out page for counting the products you needed
https://lumelia-de.com/products/designer-lamp?_atid=NogxexAOuGsYMGQKdASCTGRA16t373
This is the link for this you just tap on go to lamp button and the next page is check out there will you see that counter i think in the 3rd or 4th section

4

Thank you @Awais_Shabbir for sharing the link. Actually, for that, we have a built-in function. You do not need custom code. From Product List element you could change the Selection Type to Multi-Quantity.

5


Hi thank you but i want this i share you video you can check out this

6

Where do you want that? Is this a landing page or a checkout page?

7

Hi this is checkout page

8

hi @Awais_Shabbir

you can use the following code

<div class="gf_product-quantity gf_pq-stretch">
    <a class="gf_product-quantity-minus" style="width: 65px"><span class="gf_product-icon-minus">—</span></a>
    <input type="text" id="quantity-input" name="quantity" value="1" class="gf_pq_qty" data-sharkid="__0">
    <a class="gf_product-quantity-plus" style="width: 65px"><span class="gf_product-icon-plus">+</span></a>
</div>
<style>
select.pl-qty {
    display: none;
}
.gf_product-quantity.gf_pq-stretch {
    height: 52px !important;
    line-height: 52px !important;
    border-radius: 30px !important;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-color: #dddcdc;
    width: 100%;
    max-width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 18px;
}
a.gf_product-quantity-minus, a.gf_product-quantity-plus {
    cursor: pointer;
}
input#quantity-input {
    width: calc(100% - 130px) !important;
    max-width: calc(100% - 130px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: center;
    font-size: 18px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const selectElement = document.querySelector('.pl-qty');
    const inputElement = document.getElementById('quantity-input');
    const minusButton = document.querySelector('.gf_product-quantity-minus');
    const plusButton = document.querySelector('.gf_product-quantity-plus');

    // Update the input and select elements
    function updateQuantity(newQuantity) {
        if (newQuantity < 0 || newQuantity > 10) return;

        inputElement.value = newQuantity;
        selectElement.value = newQuantity;

        // Manually trigger change event for select element
        const event = new Event('change');
        selectElement.dispatchEvent(event);
    }

    // Add event listeners to the plus and minus buttons
    minusButton.addEventListener('click', function () {
        const currentQuantity = parseInt(inputElement.value);
        updateQuantity(currentQuantity - 1);
    });

    plusButton.addEventListener('click', function () {
        const currentQuantity = parseInt(inputElement.value);
        updateQuantity(currentQuantity + 1);
    });

    // Add event listener to the input element
    inputElement.addEventListener('change', function () {
        let newQuantity = parseInt(inputElement.value);
        if (isNaN(newQuantity) || newQuantity < 0) {
            newQuantity = 0;
        } else if (newQuantity > 10) {
            newQuantity = 10;
        }
        updateQuantity(newQuantity);
    });

    // Add event listener to the select element
    selectElement.addEventListener('change', function () {
        inputElement.value = selectElement.value;
    });
});
</script>
1 Like
9


Hi one last question how these multiple pictures are moving like an animation what should be the code for this?

10

could you share the page url?

11

Hi @anwerashif this is the url of the page

12

hey @Awais_Shabbir

that is called marquee animation. you could add container element with as many boxes as you need for each image and write the following CSS for the parent container.

parent {
    position: relative;
    height: 150px;
    display: flex;
    overflow-x: hidden;
    align-items: center;
}
child_parent {
    animation: marquee 350s linear infinite;
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    display: flex;
    align-items: center;
    gap: 0px;
}
@keyframes marquee {
     0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-25%);
    }   
}
1 Like
13

its not working. Do you have any tutorial?

14

Hi @Rashed_Khan :waving_hand:

Thanks for following up!

To help you better, could you please share a link to the live or preview page where you’ve added the marquee animation code? That way, I can inspect the layout and identify what might be going wrong.

In the meantime, here’s a quick checklist to ensure the animation works properly:

  1. :white_check_mark: Make sure the class names used in the HTML match the ones in the CSS. For example, if you use .parent and .child_parent in the CSS, the same class names should be in your HTML.
  2. :white_check_mark: Ensure the container has enough content (like images or elements) to scroll across.
  3. :white_check_mark: Wrap your custom code inside <style> and <script> tags properly, and place them inside Funnelish’s Custom Code section.

If you have a video reference or design you’re trying to replicate, feel free to share that too!

Happy to guide you step by step once I can see your current setup.