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

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
https://tryboce.funnelish.com/BOCE-LandingPage#next-step

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