Skip to content

Instantly share code, notes, and snippets.

@cristianstan

cristianstan/custom.js

Created March 11, 2022 13:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cristianstan/4076637e2bc70ad6a1f03352268a85c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cristianstan/4076637e2bc70ad6a1f03352268a85c9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cristianstan created this gist Mar 11, 2022.
    55 changes: 55 additions & 0 deletions custom.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    /*LOGIN MODAL */
    var ModalEffects = (function() {
    function init_modal() {

    var overlay = document.querySelector( '.modeltheme-overlay' );
    var overlay_inner = document.querySelector( '.modeltheme-overlay-inner' );
    var modal_holder = document.querySelector( '.modeltheme-modal-holder' );
    var html = document.querySelector( 'html' );

    [].slice.call( document.querySelectorAll( '.modeltheme-trigger' ) ).forEach( function( el, i ) {

    var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
    close = modal.querySelector( '.modeltheme-close' );

    function removeModal( hasPerspective ) {
    classie.remove( modal, 'modeltheme-show' );
    classie.remove( modal_holder, 'modeltheme-show' );
    classie.remove( html, 'modal-open' );

    if( hasPerspective ) {
    classie.remove( document.documentElement, 'modeltheme-perspective' );
    }
    }

    function removeModalHandler() {
    removeModal( classie.has( el, 'modeltheme-setperspective' ) );
    }

    el.addEventListener( 'click', function( ev ) {
    classie.add( modal, 'modeltheme-show' );
    classie.add( modal_holder, 'modeltheme-show' );
    classie.add( html, 'modal-open' );
    overlay.removeEventListener( 'click', removeModalHandler );
    overlay.addEventListener( 'click', removeModalHandler );

    overlay_inner.removeEventListener( 'click', removeModalHandler );
    overlay_inner.addEventListener( 'click', removeModalHandler );

    if( classie.has( el, 'modeltheme-setperspective' ) ) {
    setTimeout( function() {
    classie.add( document.documentElement, 'modeltheme-perspective' );
    }, 25 );
    }
    });

    } );

    }

    if (!jQuery("body").hasClass("login-register-page")) {
    init_modal();
    }

    })();

    30 changes: 30 additions & 0 deletions functions.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    <?php

    if (!function_exists('numismatico_account_login_lightbox')) {
    function numismatico_account_login_lightbox(){
    if ( class_exists( 'WooCommerce' ) ) {
    if (!is_user_logged_in() && !is_account_page()) {
    ?>
    <div class="modeltheme-modal-holder">
    <div class="modeltheme-overlay-inner"></div>
    <div class="modeltheme-modal-container">
    <div class="modeltheme-modal" id="modal-log-in">
    <div class="modeltheme-content" id="login-modal-content">
    <h3 class="relative text-center">
    <?php echo esc_html__('Access Your Account', 'numismatico'); ?>
    </h3>
    <div class="modal-content row">
    <div class="col-md-12">
    <?php wc_get_template_part('myaccount/form-login'); ?>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <?php
    }
    }
    }
    add_action('numismatico_after_body_open_tag', 'numismatico_account_login_lightbox');
    }
    6 changes: 6 additions & 0 deletions header.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <?php
    /**
    * Login/Register popup hooked
    */
    do_action('numismatico_after_body_open_tag');
    ?>
    112 changes: 112 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,112 @@


    /*-----------------------------*/
    /*POPUP LOGIN*/
    .modeltheme-modal-holder.modeltheme-show, .modeltheme-show ~ .modeltheme-overlay {
    opacity: 1;
    visibility: visible;
    overflow: hidden auto;
    }
    .modeltheme-modal-holder {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    visibility: hidden;
    opacity: 0;
    outline: none !important;
    -webkit-backface-visibility: hidden;
    }
    .modeltheme-show {
    visibility: visible;
    }

    .modeltheme-content .modeltheme-close {
    cursor: pointer;
    padding: 25px;
    right: 0;
    opacity: 0.8;
    top: 0;
    }
    .modeltheme-content .modeltheme-close:hover {
    opacity: 1;
    }
    .modal-header .close {
    color: #fff;
    opacity: 1;
    font-size: 30px;
    }
    .modeltheme-overlay-inner {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    }
    .modeltheme-modal-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: table;
    padding: 30px;
    box-sizing: border-box;
    }
    .modeltheme-show {
    visibility: visible;
    }
    .modeltheme-modal {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    }
    .modeltheme-content#login-modal-content, .modeltheme-content#signup-modal-content {
    border-radius: 15px;
    }
    .modeltheme-modal.modeltheme-show * {
    opacity: 1;
    visibility: visible;
    }
    .modeltheme-modal .modal-content{
    border-radius: 0;
    }
    .modeltheme-modal .modeltheme-content {
    max-width: 900px;
    margin: 0 auto;
    z-index: 12;
    position: relative;
    }
    .modeltheme-modal * {
    opacity: 0;
    visibility: hidden;
    }
    .modeltheme-content {
    color: #3F3F3F;
    background: #FFFFFF;
    position: relative;
    margin: 0 auto;
    }
    .modeltheme-content#login-modal-content h3, .modeltheme-content#signup-modal-content h3 {
    background: #222;
    border-radius: 5px 5px 0px 0px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 25px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    }
    .modeltheme-modal .modeltheme-content > div {
    padding: 10px 15px 20px!important;
    }
    #login-modal-content h2 {
    font-size: 25px;
    font-weight: bold;
    color: #000;
    }
    124 changes: 124 additions & 0 deletions woocommerce myaccount form-login.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,124 @@
    <?php
    /**
    * Login Form
    *
    * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php.
    *
    * HOWEVER, on occasion WooCommerce will need to update template files and you
    * (the theme developer) will need to copy the new files to your theme to
    * maintain compatibility. We try to do this as little as possible, but it does
    * happen. When this occurs the version of the template file will be bumped and
    * the readme will list any important changes.
    *
    * @see https://docs.woocommerce.com/document/template-structure/
    * @package WooCommerce\Templates
    * @version 4.1.0
    */

    if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
    }

    if (!is_product()) {
    do_action( 'woocommerce_before_customer_login_form' );
    }
    ?>

    <?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

    <div class="u-columns col2-set angro-set-login row" id="customer_login">

    <div class="u-column1 col-1 col-md-6">

    <?php endif; ?>

    <h2><?php esc_html_e( 'Login', 'angro' ); ?></h2>

    <form id="login" class="woocommerce-form woocommerce-form-login login" method="post">

    <?php do_action( 'woocommerce_login_form_start' ); ?>
    <p class="status"></p>

    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="username"><?php esc_html_e( 'Username or email address', 'angro' ); ?>&nbsp;<span class="required">*</span></label>
    <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
    </p>
    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="password"><?php esc_html_e( 'Password', 'angro' ); ?>&nbsp;<span class="required">*</span></label>
    <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password" />
    </p>

    <?php do_action( 'woocommerce_login_form' ); ?>

    <p class="form-row">
    <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme">
    <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" /> <span><?php esc_html_e( 'Remember me', 'angro' ); ?></span>
    </label>
    <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
    <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'angro' ); ?>"><?php esc_html_e( 'Log in', 'angro' ); ?></button>
    </p>
    <p class="woocommerce-LostPassword lost_password">
    <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'angro' ); ?></a>
    </p>

    <?php do_action( 'woocommerce_login_form_end' ); ?>
    <?php wp_nonce_field( 'ajax-register-nonce', 'security' ); ?>
    </form>

    <?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

    </div>

    <div class="u-column2 col-2 col-md-6">

    <h2><?php esc_html_e( 'Register', 'angro' ); ?></h2>

    <form id="register" method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> >

    <?php do_action( 'woocommerce_register_form_start' ); ?>
    <p class="status"></p>

    <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>

    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="reg_username"><?php esc_html_e( 'Username', 'angro' ); ?>&nbsp;<span class="required">*</span></label>
    <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
    </p>

    <?php endif; ?>

    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="reg_email"><?php esc_html_e( 'Email address', 'angro' ); ?>&nbsp;<span class="required">*</span></label>
    <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
    </p>

    <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>

    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="reg_password"><?php esc_html_e( 'Password', 'angro' ); ?>&nbsp;<span class="required">*</span></label>
    <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />
    </p>

    <?php else : ?>

    <p><?php esc_html_e( 'A password will be sent to your email address.', 'angro' ); ?></p>

    <?php endif; ?>

    <?php do_action( 'woocommerce_register_form' ); ?>

    <p class="woocommerce-form-row form-row">
    <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>
    <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'angro' ); ?>"><?php esc_html_e( 'Register', 'angro' ); ?></button>
    </p>

    <?php do_action( 'woocommerce_register_form_end' ); ?>

    </form>

    </div>

    </div>
    <?php endif; ?>

    <?php do_action( 'woocommerce_after_customer_login_form' ); ?>