Subversion-Projekte lars-tiefland.marine-sales.de

<div class="adressdaten">

    <!-- PayPalCheckout Rückgabe Rechnungskauf BEGIN -->

    {if $smarty.session.SHOP.paypalCheckout.return.error===true && $smarty.get.ratepay_error==true}

        <div>

            <div>Fehler beim Rechnungskauf. {$langstrings.PayPalCheckout.rechnungskauf_error_add}</div>

            <div>{$smarty.session.SHOP.paypalCheckout.return.msg}</div>

        </div>

    {/if}

    <!-- PayPalCheckout Rückgabe Rechnungskauf END -->

    {if $smarty.get.anfrage!=1 && $smarty.get.mode != "register"}

        <h4>    {$langstrings.buy.billing_address}</h4>

    {/if}

        <p>Bitte tragen Sie Ihre Adressdaten ein. Mit einem * gekennzeichnete Felder sind Pflichtfelder.</p>

        <div>

            {html_options name="Persdata[Anrede]" options=$anreden selected=$smarty.session.SHOP.buy.Persdata.Anrede}

            <span class="input_error_msg">Pflichtfeld</span>

        </div>

        <div class="addr_100">

            <div class="addr_50">

                <div class="placeholder">{$langstrings.buy.firstname} *</div>

                <input type="text" name="Persdata[Vorname]" class="text" value="{$old.Persdata.Vorname|default:$smarty.session.SHOP.buy.Persdata.Vorname}" maxlength="255" autocomplete="given-name" required>

                <span class="input_error_msg">Pflichtfeld</span>

                <input type="hidden" name="req[Vorname]" value="persdata">

            </div>

            <div class="addr_50">

                <div class="placeholder">{$langstrings.buy.name} *</div>

                <input name="Persdata[Nachname]" type="text" class="persdata" value="{$old.Persdata.Nachname|default:$smarty.session.SHOP.buy.Persdata.Nachname}" maxlength="255" autocomplete="family-name" required>

                <span class="input_error_msg">Pflichtfeld</span>

                <input type="hidden" name="req[Nachname]" value="persdata">

            </div>

        </div>

        <div>

            <div class="placeholder">{$langstrings.buy.company}</div>

            <input type="text" name="Persdata[Firma]" class="text" value="{$old.Persdata.Firma|default:$smarty.session.SHOP.buy.Persdata.Firma}" maxlength="255">

        </div>

        <div class="addr_100">

            <div class="addr_50">

                <div class="placeholder">{$langstrings.buy.street} *</div>

                <input type="text" name="Persdata[Strasse]" class="text" value="{$old.Persdata.Strasse|default:$smarty.session.SHOP.buy.Persdata.Strasse}" maxlength="31" autocomplete="street-address" required>

                <span class="input_error_msg">Pflichtfeld</span>

                <input type="hidden" name="req[Strasse]" value="persdata">

            </div>

            <div class="addr_50">

                <div class="placeholder">Hausnummer *</div>

                <input type="text" name="Persdata[Hausnummer]" class="text" value="{$old.Persdata.Hausnummer|default:$smarty.session.SHOP.buy.Persdata.Hausnummer}" maxlength="255" required />

                <span class="input_error_msg">Pflichtfeld</span>

                <input type="hidden" name="req[Hausnummer]" value="persdata">

            </div>

        </div>

        <div class="addr_100">

            <div class="addr_50">

                <div class="placeholder">{$langstrings.buy.postalcode} *</div>

                <input type="text" name="Persdata[PLZ]" id="plz" class="text" value="{$old.Persdata.PLZ|default:$smarty.session.SHOP.buy.Persdata.PLZ}" maxlength="20" autocomplete="postal-code" required />

                <span class="input_error_msg">Pflichtfeld</span>

                <input type="hidden" name="req[PLZ]" value="persdata">

            </div>

            <div class="addr_50">

                <div class="placeholder">{$langstrings.buy.city} *</div>

                <input type="text" name="Persdata[Ort]" id="ort" class="text" value="{$old.Persdata.Ort|default:$smarty.session.SHOP.buy.Persdata.Ort}" maxlength="255" autocomplete="address-level2" required />

                <span class="input_error_msg">Pflichtfeld</span>

                <input type="hidden" name="req[Ort]" value="persdata">

            </div>

        </div>

        <div>

            {html_options options=$Laender id="Land" name="Persdata[Land]" selected=$old.Persdata.Land|default:$smarty.session.SHOP.buy.Persdata.Land|default:$defaultLandID}

            <span class="input_error_msg">Pflichtfeld</span>

        </div>

        <div>

            <div class="placeholder">{$langstrings.buy.e_mail} *</div>

            <input type="email" name="Persdata[email]" class="text" value="{$old.Persdata.email|default:$smarty.session.SHOP.buy.Persdata.email}" autocomplete="email" required>

            <span class="input_error_msg">Pflichtfeld</span>

            <input type="hidden" name="req[email]" value="mail">

        </div>

        <div>

            <div class="placeholder">{$langstrings.buy.phone} *</div>

            <input type="text" name="Persdata[Telefon]" class="text" value="{$old.Persdata.Telefon|default:$smarty.session.SHOP.buy.Persdata.Telefon}" maxlength="31" autocomplete="tel" required>

            <span class="input_error_msg">Pflichtfeld</span>

            <input type="hidden" name="Persdata[ID]" value="{$smarty.session.SHOP.buy.Persdata.ID}">

            <input type="hidden" name="req[Telefon]" value="persdata">

        </div>

        <div>

            <div id="ustidnr_text">

               {$langstrings.buy.ustidnr_text|nl2br}

            </div>

            <div id="ustidnr_input" style="display:none;">

                <div class="placeholder">{$langstrings.buy.ustidnr}</div>

                <input type="text" name="Persdata[UStIdNr]" class="text" value="{$smarty.session.SHOP.buy.Persdata.UStIdNr}" maxlength="31">

            </div>

        </div>

    {if $ini.finanzierung.aktiv==1}

        <div>

            <div class="placeholder"> {$langstrings.buy.birthday}</div>

            {html_select_date field_array="Persdata[bday]" start_year=1900 end_year="-18" field_order="DMY" day_empty="Tag" month_empty="Monat" year_empty="Jahr" time=$smarty.session.SHOP.buy.Persdata.birthday day_value_format="%02d"}

            {if $versandInfo.versandart=="finanzierung"}

                <span class="input_error_msg">Pflichtfeld</span>

            {/if}

            {if $versandInfo.versandart=="finanzierung"}

                <input type="hidden" name="req[birthday]" value="date">

            {/if}

            {$langstrings.buy.birthday_explain}

        </div>

    {/if}

        <div id="AGBCheckboxWrapper" class="{if $old.AGB||$smarty.session.AGB=="gelesen"}checked{else}unchecked{/if}">

            <div class="checkbox">

                <input id="AGB" type="checkbox" class="checkbox" name="AGB" value="gelesen" {if $old.AGB||$smarty.session.AGB=="gelesen"}checked="checked"{/if} required="required">

                <span class="input_error_msg">Pflichtfeld</span>

                <input type="hidden" name="req[AGB]" value="text">

                <label for="AGB"> Ich akzeptiere die <a style="font-weight:bold;" href="/cms/agb" target="_blank">AGB.</a></label>

            </div>

        </div>

</div>

<style>

    #AGBCheckboxWrapper {

        display: flex;

        flex-direction: row;

        gap: 0.5%;

        padding: 2%;

        width: fit-content;

        border-radius:5px;

    }

    #AGBCheckboxWrapper > .checkbox {

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

        gap:8px;

    }

    #AGBCheckboxWrapper .checkbox span.input_error_msg {

        margin-top: 0;

        padding: 0;

    }

    #AGBCheckboxWrapper label  {

        min-width: max-content;

    }

    .unchecked {

        transition:all 200ms ease;

        background:rgba(226,6,50,.3);

    }

    .checked {

        transition:all 200ms ease;

        background:rgba(33,143,61,.3);

    }

</style>

<script>

    document.addEventListener('DOMContentLoaded', () => {

        // AGB toggle

        const checkboxEl = document.querySelector('#AGB');

        const wrapperEl = document.querySelector('#AGBCheckboxWrapper');

        checkboxEl.addEventListener('change', () => {

            wrapperEl.className = (checkboxEl.checked) ? 'checked' : 'unchecked';

        });

        wrapperEl.addEventListener('click', (e) => {

            const tag = e.target.nodeName.toLowerCase();

            if(tag !== 'a' && tag !== 'input' && tag !== 'label') {

                checkboxEl.checked = !checkboxEl.checked;

                wrapperEl.className = (checkboxEl.checked) ? 'checked' : 'unchecked';

            }

        });

        // Required

        const inputElements = document.querySelectorAll('input');

        for(const inputElement of inputElements) {

            const required = (inputElement.required);

            const errorMsg = inputElement.parentElement.querySelector('.input_error_msg');

            if(!errorMsg || inputElement.id === 'AGB' || inputElement.type === 'hidden') {

                continue;

            }

            if(inputElement.value.length > 0 || required === false) {

                errorMsg.style.opacity = '0';

            }

            if(required && (inputElement.value.length === 0 || inputElement.autocomplete === 'email')) {

                let valid = false;

                if(inputElement.autocomplete === 'email') {

                    valid = validateEmail(inputElement.value);

                }

                // inputElement.style.outline = (valid) ? 'unset' : 'red dashed 1px';

                errorMsg.style.opacity = (valid) ? '0' : '1';

            }

            if(required) {

                inputElement.addEventListener('blur', (e) => {

                    let valid = false;

                    const inputElement = e.target;

                    const errorMsg = e.target.parentElement.querySelector('.input_error_msg');

                    switch (inputElement.autocomplete) {

                        case 'email':

                            valid = validateEmail(inputElement.value);

                            break;

                        default:

                            valid = (inputElement.value.length > 0);

                            break;

                    }

                    inputElement.style.outline = (valid) ? 'unset' : 'red dashed 1px';

                    errorMsg.style.opacity = (valid) ? '0' : '1';

                });

            }

        }

    });

    function validateEmail(email) {

        {literal}

        const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        {/literal}

        return email.match(emailRegex);

    }

$( document ).ready(function() {

    {* // toggle checked status (CSS)

    $('#AGB').click( function() {

        var chk = $(this).parent().parent();

        let classname = chk.attr("class");

        if(classname=="checked") {

            chk.attr("class",'unchecked');

        }else {

            chk.attr("class",'checked');

        }

    }); *}

    let marginInputFields;

    $('#Land, #liefer_Land').change(function(){

        let land=$('#Land').val();

        if($('#Lieferadresse_f').prop("checked")==false)

        {

            land=$('#liefer_Land').val();

        }

        let c_url="/update_versand?Land="+land+"&liefer=1";

        console.log(c_url);

        $.get(c_url,function(pppVersand){

            $('#Versand').val(pppVersand);

        });

    })

    $( "#ustidnr_input" ).hide();

    $( "#ustidnr_text" ).hide();

    $('#Land').change(function(){

        let selected_country = $( "#Land" ).val();

        if (selected_country == 47) {

            $( "#ustidnr_input" ).hide();

            $( "#ustidnr_text" ).hide();

        } else {

            $( "#ustidnr_text" ).show();

            $( "#ustidnr_input" ).show();

        }

    });

    // placeholder anim

    $('.placeholder').click(function() {

        $(this).next().focus();

    });

    $('.adressdaten input[type=text], .adressdaten input[type=email], .adressdaten textarea').each(function() {

        let inpt = $(this).val();

        if (inpt.length > 0 && textAnimationData2D($(this)[0])) {

            const { placeholder: { rawHeight } } = textAnimationData2D($(this)[0]);

            $(this).prev().css({

                "margin-left": "0px",

                "margin-top": -rawHeight + "px",

                "color": "#000",

            });

        }

    });

    $('.adressdaten input[type=text], .adressdaten input[type=email], .adressdaten textarea').focus(function(){

        let inpt = $(this).val();

        if(inpt.length == 0 && textAnimationData2D($(this)[0])) {

            const { placeholder: { rawHeight } } = textAnimationData2D($(this)[0]);

            $(this).prev().css({

                "margin-left": "0px",

                "margin-top": -rawHeight + "px",

                "color": "#000",

            });

        }

    });

    $('.adressdaten input[type=text], .adressdaten input[type=email]').blur(function(){

        let inpt = $(this).val();

        if(inpt.length == 0 && textAnimationData2D($(this)[0])) {

            const { input:{ height: heightInput }, placeholder:{ height: heightPlaceholder } } = textAnimationData2D($(this)[0]);

            const margin = (heightInput - heightPlaceholder) / 2;

            $(this).prev().css({

                "margin-left": margin / 2 + "px",

                "margin-top": margin + "px",

                "color":"#8E8E8E",

            });

            marginInputFields = margin;

        }

    });

    {*

        INFO: Es kommt zu einem Problem mit der Animation

        wenn vorher kein anderes Feld mit der Animation angesprochen wird da marginInputFields sonst leer ist.

        Die Rückkehr animation funktioniert dann schlich nicht .

    *}

    $('.adressdaten textarea').blur(function(){

        let inpt = $(this).val();

        if(inpt.length == 0 && textAnimationData2D($(this)[0])) {

            const { input:{ height: heightInput }, placeholder:{ height: heightPlaceholder } } = textAnimationData2D($(this)[0]);

            $(this).prev().css({

                "margin-left": marginInputFields / 2 + "px",

                "margin-top": marginInputFields + "px",

                "color":"#8E8E8E",

            });

        }

    });

    function textAnimationData2D(inputElement, textSelector = '.placeholder') {

        if(!inputElement || !isDOM(inputElement)) return;

        const placeholder = inputElement.parentElement.querySelector(textSelector);

        if(!placeholder || !isDOM(placeholder)) return;

        const { height: inputHeight } = getElement2DData(inputElement);

        const { height: placeholderHeight, rawHeight: placeholderRawHeight } = getElement2DData(placeholder);

        return {

            input: {

                height: inputHeight,

            },

            placeholder: {

                height: placeholderHeight,

                rawHeight: placeholderRawHeight,

                ref: placeholder,

            },

        }

    }

    function getElement2DData(element) {

        if(!isDOM(element)) return;

        const style = getComputedStyle(element);

        const paddingX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);

        const paddingY = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);

        const borderX = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);

        const borderY = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);

        return {

            height: element.offsetHeight,

            width: element.offsetWidth,

            paddingX: paddingX,

            paddingY: paddingY,

            paddingLeft: parseFloat(style.paddingLeft),

            paddingRight: parseFloat(style.paddingRight),

            paddingTop: parseFloat(style.paddingTop),

            paddingBottom: parseFloat(style.paddingBottom),

            borderX: borderX,

            borderY: borderY,

            borderLeft: parseFloat(style.borderLeftWidth),

            borderRight: parseFloat(style.borderRightWidth),

            borderTop: parseFloat(style.borderTopWidth),

            borderBottom: parseFloat(style.borderBottomWidth),

            rawHeight: element.offsetHeight - paddingY - borderY,

            rawWidth: element.offsetWidth - paddingX - borderX,

            ref: {

                target: element,

                parent: element.parentElement

            }

        }

    }

    function isDOM(Obj) {

        return Obj instanceof Element;

    }

});

</script>