Mimante/Mimante/Examples/10€ Idea Shopping +10P - Bidoo_files/variants_control.js.download

const { createApp } = Vue;

let container = window.innerWidth > 576 ? "#appVariants" : "#appVariantsMobile";

createApp({
    data() {
        return {
            showElement:  false,
            title: "",
            content: "",
            variants: []
        }
    },
    mounted(){
        let idProduct = document.querySelector('body').getAttribute('data-idProduct');
        fetch('/ajax/get_variants.php?' + new URLSearchParams({
            product: idProduct
        })).then((response) => response.json())
            .then((data) => {

                this.showElement = !!Object.keys(data).length && data.isvalid === true && data.products.length > 0;
                this.title = data.title_detail;
                this.variants = data.products;
            });

    }

}).mount(container);


createApp({
    data() {
        return {
            showElement: false,
            title: "",
            showErrorMsg: false,
            errorMsg: "",
            variants: [],
            btnClassLists: ['.pay-btn','.btn-blue-proceed','.pay-with-a-card', '.btn-green'],
            choose: "",
            chooseId: null,
            defaultText: "",
            showDropdown: false

        }
    },
    created(){
        this.disablePayButton();
    },
    mounted(e) {

        this.addListenerPayButton();
        let data = JSON.parse(atob(document.querySelector('#variantsModule').getAttribute('data-content')));

        this.showElement = this.setupApp(data);
        this.title = data.title_checkout;
        this.defaultText = data.label_option_selectbox_default;
        this.variants = data.products;

        this.errorMsg = data.label_error_msg_selectbox;


    },
    methods: {
        setupApp(data){

            if(data.isvalid === false){
                this.activePayButton();
                return false;
            }

            if(data.isvalid && data.products.length === 0){
                this.activePayButton();
                return false;
            }

            if(data.isvalid === true){
                this.disablePayButton();
                return !!Object.keys(data).length && data.products.length;
            }

        },
        selectVariant(e){
            this.chooseId  = e.target.querySelector('.variant-id').textContent;
            this.choose  = e.target.querySelector('.variant-name').textContent;
            this.defaultText = "";
            this.hideDropdown();
            this.hideError();
            this.removeListenerPayButton();
            this.activePayButton();
        },
        chooseVariant(){
            this.hideError();
            this.hideDropdown();
        },
        hideDropdown(){
            this.showDropdown = !this.showDropdown;
        },
        activePayButton(){
            this.btnClassLists.forEach((element) => {
                document.querySelector(element).classList.remove('disabled');
            });
        },
        disablePayButton(){
            this.btnClassLists.forEach((element) => {
                document.querySelector(element).classList.add('disabled');
            });
        },
        addListenerPayButton(){
            this.btnClassLists.forEach((element) => {
                document.querySelector(element).addEventListener('click', (e) => {
                    if(document.querySelector(element).classList.contains('disabled')){
                        e.preventDefault();
                        this.showError();
                    }
                });
            });
        },
        removeListenerPayButton(){
            this.btnClassLists.forEach((element) => {
                document.querySelector(element).removeEventListener('click', () => {});
            });
        },
        showError(){
            document.querySelector('.variantSelected').classList.add('error');
            window.scrollTo({ top: 0, behavior: 'smooth' });
            this.showErrorMsg = true;
        },
        hideError(){
            document.querySelector('.variantSelected').classList.remove('error');
            this.showErrorMsg = false;
        }

    }

}).mount('#appVariantsCheckout');