Okay
  Public Ticket #3778240
html integration
Open

Comments

  •  1
    jamil davod abdi started the conversation

    I have meade a checkbox custom to our webbsite which means if a customer want to make bloodtest they need to book it first. how do or can i connect this to amelia for the payment. 

    My question is it possible for customer to choose checkbox for bloodtest and one they click on book it shows the total pris in Amelia for booking time and payment? 

    6925599539.png
  •  1,596
    Marko replied

    Hello there,

    Thank you for reaching out to us.

    No, as far as we can see you have created this outside Amelia so the price can not be added to Amelia. What you can do is you can create extras in Amelia so that they can choose extra there and also you can set it as mandatory and then the price can be added to appointment.

    2784271486.png

     

    Hope this helps.

    Should you have any further inquiries, we kindly request that you open separate tickets for each question and we will gladly help you there.

    We wish you all the best and hope you have a wonderful day ahead.  

    Kind Regards, 

    Marko Davidovic [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, floor plans, choropleth maps, and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1
    jamil davod abdi replied

    i have tried everything still not working, will send you my hmtl kode and some pictures please help. 


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Blodtester</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 20px;
            }
            .grid-container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }
            .test-item {
                border: 1px solid #ddd;
                border-radius: 5px;
                padding: 15px;
                background: #f9f9f9;
            }
            .test-item h3 {
                margin: 0;
                font-size: 18px;
            }
            .test-item .price {
                color: blue;
                font-weight: bold;
            }
            .summary, .selected-tests {
                margin-top: 20px;
                font-size: 18px;
                font-weight: bold;
            }
            .summary span {
                color: blue;
            }
            .booking-section {
                margin-top: 40px;
                padding: 15px;
                border: 1px solid #ddd;
                border-radius: 5px;
                background: #f9f9f9;
            }
            textarea {
                border: 1px solid #ccc;
                border-radius: 5px;
                padding: 10px;
            }
        </style>
    </head>
    <body>

        <h1>Blodtester</h1>
        <div class="grid-container">
            <!-- Dynamiskt skapade tester -->
        </div>

        <!-- Summering -->
        <div class="summary">Totalt: AED <span id="totalPrice">0</span></div>
        <div class="selected-tests">Valda tester: <span id="selectedTests">Inga valda tester</span></div>

        <!-- Amelia-bokning -->
        <div class="booking-section">
            <h2>Boka dina tester</h2>
            <p>Valda tester och priser skickas till Amelia:</p>
            <textarea id="bookingSummary" readonly style="width: 100%; height: 100px; margin-bottom: 15px;"></textarea>
           


                <input type="hidden" id="ameliaData" name="bookingData">
                <button type="button" onclick="sendToAmelia()">Boka nu</button>
            </form>
        </div>

        <script>
            // Testdata
            const tests = [
                { name: "Cortisol", price: 72 },
                { name: "Vitamin B12", price: 110 },
                { name: "Cholesterol Profile", price: 66 },
                { name: "Fasting Glucose", price: 28 },
                { name: "Fasting Insulin", price: 83 },
                { name: "Total Testosterone", price: 72 },
                { name: "Free Testosterone", price: 94 },
                { name: "Estradiol", price: 61 },
                { name: "Lutenizing Hormone (LH)", price: 61 },
                { name: "DHEA-S", price: 110 },
                { name: "Thyroid Stimulating Hormone (TSH)", price: 61 },
                { name: "Aspartate Aminotransferase (AST)", price: 25 },
                { name: "Progesterone", price: 61 },
                { name: "Prolactin", price: 55 },
                { name: "Total Iron Binding Capacity (TIBC)", price: 66 },
                { name: "Folic Acid", price: 83 },
                { name: "Follicle Stimulating Hormone (FSH)", price: 61 },
                { name: "Free T4", price: 61 },
                { name: "Free T3", price: 61 },
                { name: "Iron (Fe)", price: 50 },
                { name: "Ferritin in Serum", price: 66 },
                { name: "Homocysteine", price: 110 },
            ];

            const container = document.querySelector('.grid-container');

            // Dynamiskt skapa tester
            tests.forEach(test => {
                const testItem = document.createElement('div');
                testItem.classList.add('test-item');
                testItem.innerHTML = `
                    <h3>${test.name} <span class="price">AED ${test.price}</span></h3>
                    <input type="checkbox" class="test-checkbox" aria-label="Välj ${test.name}" data-price="${test.price}" data-name="${test.name}"> Välj detta test
                `;
                container.appendChild(testItem);
            });

            // Hantera val och summering
            const totalPriceEl = document.getElementById('totalPrice');
            const selectedTestsEl = document.getElementById('selectedTests');
            const bookingSummaryEl = document.getElementById('bookingSummary');
            const checkboxes = document.querySelectorAll('.test-checkbox');

            let totalPrice = 0;
            let selectedTests = [];

            container.addEventListener('change', e => {
                if (e.target.classList.contains('test-checkbox')) {
                    const checkbox = e.target;
                    const price = parseFloat(checkbox.dataset.price);
                    const name = checkbox.dataset.name;

                    if (checkbox.checked) {
                        totalPrice += price;
                        selectedTests.push(name);
                    } else {
                        totalPrice -= price;
                        selectedTests = selectedTests.filter(test => test !== name);
                    }

                    // Uppdatera summeringen
                    totalPriceEl.textContent = totalPrice.toFixed(2);
                    selectedTestsEl.textContent = selectedTests.length > 0 ? selectedTests.join(', ') : 'Inga valda tester';

                    // Uppdatera bokningssammanfattningen
                    bookingSummaryEl.value = `Valda tester: ${selectedTests.join(', ')}\nTotalt pris: AED ${totalPrice.toFixed(2)}`;
                }
            });

            // Skicka till Amelia
            function sendToAmelia() {
                if (selectedTests.length === 0) {
                    alert('Vänligen välj minst ett test innan du bokar.');
                    return;
                }

                const formData = {
                    tests: selectedTests,
                    totalPrice: totalPrice
                };

                document.getElementById('ameliaData').value = JSON.stringify(formData);
                document.getElementById('ameliaForm').submit();
            }
        </script>
    </body>
    </html>



    4239573590.png

    Attached files:  Skärmklippqqq.PNG

  •  1,550
    Uroš replied

    Hello Jamil,

    I have tested it out and it worked just fine.

    1704602754.png

    Can you please let me know what the issue is and I will assist you with it?

    Looking forward to to your reply.

    Kind Regards, 

    Uros Jovanovic
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables