custo popup


<script>

$(document).ready(function () {
   
$('.js-store').on('tStoreRendered', '.js-store-grid-cont', function(){
    
    $('.js-product.t-store__card a').each(function () {
        $(this).attr('href', '#popup:course');
        $(this).off('click')
        
    });
});


let promocodeBlk = `
    <div class="prcode-wrapper t-text">
        <div class="prcode-text"></div>
        <div class="prcode-btn"></div>
    </div>
`;   

$('.uc-popup-blk .t390__descr').after(promocodeBlk);

let promocodeFooter = `
    <div class="prcode-footer-wrapper  t-text">
        <div class="prcode-footer-label third-label">Реклама ООО «Скиллстар»</div>
    </div>
`;  


$('.uc-popup-blk .t390__btn-wrapper').after(promocodeFooter);

let closeIcon = `<div class="close-popup">`;


$('.uc-popup-blk .t390__uptitle').before(closeIcon);


$(document).on('click','a[href="#popup:course"]',function(event){ 

    let btn = $(this);
    let card = btn.closest('.js-product');
    
    let prName = card.find('.js-store-prod-name').text();
    let prSku = card.find('.js-store-prod-sku').text();
    let link = card.attr('data-product-url');
    let percent = card.find('.t-store__card__mark').text();
    
    if(percent==''){
        percent=10;
    }else{
        percent = percent.replace(/[^0-9]/g, '');
    };

    $('.uc-popup-blk .t-heading').text(prName);
    $('.uc-popup-blk .t390__btn_first').attr('href', link);
    $('.uc-popup-blk .prcode-text').text(prSku);
    
    $('.uc-popup-blk .t390__descr span').text('Скопируйте промокод на -'+percent+'% и введите на сайте');
    
});


$(document).on('click','div.close-popup',function(event){ 
    $('.uc-popup-blk .t-popup__block-close-button')[0].click()
});


$(document).on('click','.prcode-btn',function(event){ 
    $('.uc-popup-blk .prcode-text').addClass('invert');
    setTimeout(function(){
        $('.uc-popup-blk .prcode-text').removeClass('invert');    
    }, 750);
    
    let copyquote = $('.uc-popup-blk .prcode-text').text();
    if ( copyquote.trim().length > 0) {copyFunction(copyquote)};    
    
});



function copyFunction(copy) {
    var textArea = document.createElement("textarea");
	textArea.value = copy;
	textArea.style.position = "fixed";  
	document.body.appendChild(textArea);
	textArea.focus();textArea.select();document.execCommand('copy');
	document.body.removeChild(textArea);
};


    
});


</script>

<style>

.t-store__card__mark-wrapper {
    display: none;
}


.prcode-footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
}


.uc-popup-blk .t390__uptitle.t-uptitle span {
    background-image: url(https://static.tildacdn.com/tild3537-3736-4839-a639-316161383064/Skillstar.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent !important;
}

.prcode-footer-label.first-label, .prcode-footer-label.second-label {
    font-size: 10px;
    margin-right: 10px;
    background-color: #B1B6C0;
    border-radius: 3px;
    padding: 5px 10px;
    color: #5d56ab;
    font-weight: 400;
    display: flex;
    align-items: center;
}

.uc-popup-blk a.t390__btn {
    width: 100%;
}

.uc-popup-blk .t390__descr {
    margin-top: 7px;
}


.prcode-footer-label.third-label {
    font-weight: 400;
    margin-top: 6px;
    font-size: 10px;
    color: #B1B6C0;
    text-align: center;
    width: 100%;
}

.uc-popup-blk .t-popup__container {
    border-radius: 10px;
}


.uc-popup-blk .t390__btn.t390__btn_first {
    margin-left: 0;
}

.prcode-footer-label.second-label:before {
    content: "";
    background-image: url(https://static.tildacdn.com/tild6430-6633-4336-b238-393837323261/Star_1_1.svg);
    width: 12px;
    height: 12px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 3px;
}

.prcode-btn {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #F0F1F3;
    background-image: url(https://static.tildacdn.com/tild3436-6561-4638-b133-383061636134/Layer_2.svg);
    background-size: 32%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.uc-popup-blk .t390__btn-wrapper {
    margin-top: 6px;
}

.prcode-text {
    height: 48px;
    border-radius: 10px;
    border: 1px solid #DBDEE5;
    margin-right: 5px;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 17px;
    background-color: #fff;
}

.prcode-text.invert {
    /*filter: invert(1);*/
    background-color: #F0F1F3;
}


.prcode-wrapper {
    margin-top: 14px;
    display: flex;
}


.prcode-btn:hover {
    background-color: #BFFB50;
}  


.uc-popup-blk .close-popup {
    width: 40px;
    height: 40px;
    background-image: url(https://static.tildacdn.com/tild6635-3764-4539-b962-653066643136/close_111152.svg);
    position: absolute;
    right: 10px;
    top: 10px;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}

.uc-popup-blk .t-popup__close.t-popup__block-close {
    opacity: 0;
}


@media screen and (max-width:640px){
.uc-popup-blk .close-popup{
    width:30px;
    height:30px;
}


.prcode-footer-label.first-label, .prcode-footer-label.second-label {
    font-size: 10px;
    margin-right: 5px;
    padding: 3px 7px;

}

.prcode-footer-wrapper {
    margin-top: 10px;
}

.prcode-footer-label.third-label {
    font-size: 12px;
}
   
.uc-popup-blk .t390__title{
    font-size: 17px !important;
    margin-top:20px;
}
.uc-popup-blk .t390__uptitle div{
    font-size: 24px !important;
}

.uc-popup-blk .t390__descr div{
    font-size: 12px !important;
    margin-bottom:30px;
} 
   
    
}



</style>


<script>
$( document ).ready(function() {

function prodComplete(){
//При загрузке товаров
let tistore = setInterval(function() {
    setTimeout(function(){
        if (  $('.t-store__prod-snippet__container').length>0 ){
            clearInterval(tistore) 
            setTimeout(function(){
                addBtnToProduct();
           }, 200); 
        };
    }, 600);
    
}, 100);   
};
prodComplete();


function addBtnToProduct(){

    $('.popup-present').remove();
    
    let btnPresent = `
        <a href="#" class="popup-present t-btn t-btn_sm">
        <div class="present-btn">
            <div class="icon-btn"></div>
            <div class="text-btn">Заказать в WhatsApp</div>
        </div>
        </a>
    `;
    
    $('.t-store__prod-popup__btn-wrapper').append(btnPresent);
    
    
    let addBtnLink = "https://api.whatsapp.com/send?phone=79646269966&text=Здравствуйте!%20Хочу%20сделать%20заказ%20с сайта HappyPipl.ru.%20 Товар -%20";

    addBtnLink += document.title; addBtnLink += "  "; addBtnLink += document.location.href;

    $('.popup-present').attr('href', addBtnLink);
    

    
};

   
});
</script>


<style>
a.popup-present {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border: 1px solid #000;
    color: #000 !important;
    border-radius: 30px;
    

}

.t-store__prod-popup__btn-wrapper {
    display: flex;
    flex-wrap: wrap;
}


a.t-store__prod-popup__btn {
    margin-right: 10px;
}



.icon-btn {
    background-image: url(https://static.tildacdn.com/tild3232-3337-4237-b632-323537396536/whatsapp_icon-iconsc.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.present-btn {
    display: flex;
    align-items: center;
}




@media screen and (max-width: 480px){

.t-store__prod-popup__btn-wrapper {
    flex-direction: column;
}

a.t-store__prod-popup__btn {
     margin-right: 0px; 
     margin-bottom: 10px; 
}


a.popup-present {
    width: 100%;
}

}



</style>

Html code will be here

Our Best Works

It is not sufficient to see and to know the beauty of a piece. We must feel it and be affected by it.

Carlos Lott

Graphic design is the process of visual communication and problem-solving

Lucy Good

Information architecture is the art and science of structuring and organizing information

Ask for price

Eva Stark

It is a form of solution-based thinking with the intent of producing a constructive future result

Ask for price

Max Holden

Information architecture is the art and science of structuring and organizing information

Julia Bush

It is a form of solution-based thinking with the intent of producing a constructive future result

Ask for price

Nick Scheerbart

Graphic design is the process of visual communication and problem-solving

Ask for price

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Октябрь

01

Квест «Леди Баг и Супер-Кот спешат на помощь» в Joki Joya Парк Хаус — 7 октября Парк: Парк Хаус
Танцевальный баттл с Барби и Кеном в Joki Joya РИО — 7 октября Парк: РИО
Микромагия от Дяди Фестера в Joki Joya Охта Молл — 7 октября Парк: Охта Молл

Synthia Smyth

Editor-in-chief at Pixels

We were just building stuff 'cause we thought it was cool. I do remember having these specific conversations with my friends where we thought, you know, someone is gonna build this. Someone is gonna build something that makes it so that people can stay connected with their friends and their family. The product helped us to develop new directions in or brand strategy, to attract new customers and buyers. We started 3 years ago and got the top in Business One rating system. A great honour! Let us be honest, we could try to get same result attracting third-party specialists, but we had best luck to be in a boat with Elestory team!

Workshop Schedule

April, 14 - 18

Monday, April 14

09:00 - Registration
11:00 - Introduction lecture
12:30 - Lunch
16:00 - Time managing workshop
19:00 - Round table, Hall 2

Tuesday, April 15

09:00 - Introduction lecture
11:00 - New media workshop
12:30 - Lunch
16:00 - Advanced writing workshop
19:00 - Barbecue party