Weblium Sites Integration

Кастомная интеграция для блоков и сайтов на Weblium

Как добавить интеграцию к определённому блоку или странице?

Для того, что бы привязать код к определенному блоку на сайте, необходимо:

  1. Узнать ID блока. Найти его можно заглянув в Google Dev Tools (Inspect Mode) - тут
  2. Добавить в CSS данную строку, в соотвествии с ID блока, который был найден:
 #cover ~ section элемент_в_блоке {
   изменения
   }

~ section отвечает за переход в контент блока, соотвественно возможность редактировать все, что находится в нём. В случае с header и footer, это будет соответственно ~ header и ~ footer. Что значит ~ - читать здесь

Для того, что бы привязать код к определенной странице, необходимо:

  1. Узнать ID страницы. Найти его можно заглянув в Google Dev Tools (Inspect Mode) - тут
  2. Добавить в CSS данную строку, в соотвествии с ID страницы, который был найден.
 #page-home элемент {
   изменения
   }

Логика ID страницы состоит в #page-$slug$. То есть, ID страницы всегда будет состоять из #page- и URL страницы.

Добавление GeoPlugin для подмены номеров на сайте относительно региона пользователя

  1. На странице создается Extra Block. Во вкладку JS добавляем код
const telMap = {
	RU: {
		string: ' +7 (495) 204-15-09',
		number: '+74952041509'
	},
	UA: {
		string: '+38 (044) 207-39-55',
		number: '+380442073955'
	},
	BY: {
		string: ' +7 (495) 204-15-09',
		number: '+74952041509'
	},
	KZ: {
		string: '+7 (727) 350-76-33',
		number: '+77273507633'
	},
	EE: {
		string: '+372 884-00-64',
		number: '+3728840064'
	},
	LV: {
		string: '+372 884-00-64',
		number: '+3728840064'
	},
	LT: {
		string: '+372 884-00-64',
		number: '+3728840064'
	},
	GE: {
		string: '+38 (044) 207-39-55',
		number: '+380442073955'
	},
	rest: {
		string: '+372 884-00-64 ',
		number: '+3728840064'
	},
}
const setTel = (code) => {
	if (Object.keys(telMap).includes(code)) {
		document.querySelector('#header ~ header a[class*="header__button__"] span span:nth-child(2)').innerHTML = telMap[code].string
		document.querySelector('#header ~ header a[class*="header__button__"]').setAttribute('href', `tel:${telMap[code].number}`)
		return
	}
	document.querySelector('#header ~ header a[class*="header__button__"] span span:nth-child(2)').innerHTML = telMap.rest.string
	document.querySelector('#header ~ header a[class*="header__button__"]').setAttribute('href', `tel:${telMap.rest.number}`)
}
fetch('https://api.ipgeolocation.io/ipgeo?apiKey=731931cff73f4eaaaea4d6773bbc0298').then(result => result.json().then(({
	country_code2
}) => setTel(country_code2)))
  1. В конце данного кода есть путь по которому обращается этот скрипт, то есть на что он будет применятся. Будь то кнопка или номер телефона где-то на странице.
#header ~ header a[class*="header__button__"]

  1. В самом начале кода находится массив стран с их ISO номерами (желательно использовать первый вариант, то есть RU, UA, BY и т.д.).

    String отвечает за номер в том виде в котором он будет отображаться на странице.
    Number отвечает за ссылку, которая прописывается в виде tel:+380... (без использования скобок, дефисов и прочего)
    rest используется для обозначения дефолтного номера, который будет работать для тех стран, что не указаны в скрипте.

	rest: {
		string: '+372 884-00-64',
		number: '+3728840064'
	},
  1. Заменяем номера и страны, в которых он будет отображаться на нужные и сохраняем изменения, не забывая про rest. Привязываем все значения к нужным елементам и паблишим сайт. 👍 Пример рабочего кода находится в кнопке в шапке сайта.

Массовое скачивание ресурсов с сайта с помощью скрипта

  1. Установить Ruby на свое устройство (Windows, Mac). Ссылка на установку
  2. Создать себе файл index.rb и в него вставить данный скрипт.
require 'json'
require 'rest-client'
require "open-uri"


$login = '’
$password = ''
$host = 'https://weblium.com'
$website_id = '5b5089fd1b27c5002389fbea'


def auth_data
    JSON.parse(RestClient::Request.execute(url: "#{$host}/api/v0.1.0/auth/login",
                                           method: :post,
                                           headers: { content_type: 'application/json' },
                                           payload: { username: $login , password: $password },
                                           verify_ssl: false))
end

def get_resource_list
    JSON.parse(RestClient::Request.execute(url: "#{$host}/api/website/#{$website_id}/resource",
    method: :get,                              
    headers: {
      content_type: 'application/json',
      Authorization: "Bearer #{auth_data['token']}",
      params: {
        skip: '0',
        limit: '200',
        "filter[storage]": 'gcs'
      }
    },
    verify_ssl: false
    ))
end

def download_image(url, output_name)
  open(url) do |f|
    File.open(output_name, 'wb') do |file|
      file.puts f.read
    end
  end
  # `curl '#{url}' > #{output_name}`
end

  get_resource_list['data'].each do |resource|
    puts resource
    download_image("https:#{resource['url']}", "#{resource['name']}.#{resource['mimeType'].gsub('image/','')}")
  end

  1. В полях login и passoword ввести данные своего аккаунта на Weblium, который имеет админские права (доступ в Backoffice).

  2. В поле website_id ввести ID сайта. Найти его можно в ссылке сайта в Backoffice. Пример 5ba0f621f5c8650025ddfed5 - ID сайта

  3. Сохранить файл. Открыть терминал и в терминале указать путь к файлу. Если он находится на рабочем столе, то cd Desktop.

  4. После того, как путь указан верно, в терминале запустить скрипт командой ruby index.rb.

    Стоит учесть, что скрипт грузит файлы туда, где он находится. То есть желательно создать какую-то папку, куда вставить данный скрипт и соотвественно путь к файлу будет немного другой. Code example GIF

Кнопка скролла наверх (Scroll to Top Button)

Как добавить кнопку для обратного скролла наверх на сайте?

  1. Добавить кнопку в HTML раздел сайта. Вариантов несколько. Либо в Before </body>, либо через Extra Block
<div class="scroll__top__button" title="Back to top" style="opacity: 1;">➤</div>
  1. Добавить стили для кнопки. Стилизировать можно как угодно, но в данном случае используется самый обыкновенный пример.
.scroll__top__button {
    width: 40px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    cursor: pointer;
    opacity:0;
    transition: all 0.4s ease-in;
    transform: rotate(270deg);
    position: fixed;
    bottom: 50px;
    right: 0;
    background-color: #fafafa;
    color: #2468B3;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
}

.scroll__top__button:hover {
    background-color: #2468B3;
    color: #fff;
}
  1. Добавить скрипт для инициализации и работоспособности кнопки.
jQuery(document).ready(function() {
	jQuery(window).scroll(function() {
		if (jQuery(this).scrollTop() > 600) {
			jQuery('.scroll__top__button').css('opacity', '1');
		} else {
			jQuery('.scroll__top__button').css('opacity', '0');
		}
	});
	jQuery('.scroll__top__button').click(function() {
		jQuery('body,html').animate({
			scrollTop: 0
		}, 1800);
		return false;
	});
});
  1. Так как данный скрипт использует jQuery библиотеку, стоит подгрузить её в корень сайта.
    В <head> вставляем данный код <script src=" https://ajax.googleapis.com/ajax /libs/jquery/2.2.4/ jquery.min.js"></script>

Пример работы кнопки здесь. Scroll to Top Button Example

Стоит учесть, что если вы хотите вставить кнопку через Extra Block, то HTML, CSS и jQuery код стоит вставлять именно разделы блока. Если же через общую интеграцию на сайте, то
HTML - Before </body>
CSS - CSS
jQuery - Before </body>

Не забываем обернуть код в нужные тэги (<script></script>)

Draftium плашка, предупреждающая о сборе Cookies

Как добавить плашку на сайт о сборе Cookies?

  1. Создаем в топе страницы блок wireframe-series-6-cta. Задаем ему минимальные отступы (padding) сверху и снизу. Убираем галочку block description и в block title прописываем We use cookies to impove browsing experience on our site. By continuing to use the site, you agree to our Cookie Policy. Меняем размер шрифта до оптимального по отношению к дизайну сайта и красим. Кнопку подписываем OK 😃.
  2. Добавляем скрипт. В before </body> вставляем код:
<script>
window.onload = function() {
  var block = document.querySelector("[data-block-name='wireframe-series-6-cta']");
  var btn = document.querySelector("[data-block-name='wireframe-series-6-cta'] .w-btns-group__item");
  var showCookiePolicy = getCookie('agreementState') === 'agreed' ? false : true;
  if (showCookiePolicy === true) {
    console.log('first paint' + getCookie('agreementState'))
    block.style.display = 'block';
  } else {
    console.log('first paint' + getCookie('agreementState'))
    block.style.display = 'none';
  }
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    setCookie('agreementState', 'agreed');
    showCookiePolicy = false;
    if (!showCookiePolicy) {
      console.log('click repaint' + getCookie('agreementState'))
      block.style.display = 'none';
    }
  });
  function getCookie(name) {
    var value = '; ' + document.cookie;
    var parts = value.split('; ' + name + '=');
    if (parts.length == 2) return parts.pop().split(';').shift();
  }
  function setCookie(name,value,days) {
    var expires = '';
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days*24*60*60*1000));
      expires = '; expires=' + date.toUTCString();
    }
    document.cookie = name + '=' + (value || '')  + expires + '; path=/';
  }
}
</script>
  1. Добавляем CSS-стили для блока wireframe-series-6-cta. В интеграцию в раздел CSS добавляем код:
[data-block-name='wireframe-series-6-cta'] {
 display: none;
}
  1. После добавления плашки открываем наш сайт и заходим в Google Chrome Console. В консоли при первом посещении сайта будет написано first paintundefined. После этого жмем ОК на нашей плашке и в консоли появляется текст click repaintagreed. В дальнейшем при посещении нашей страницы в консоли будет отображатся first paintagreed.

FullPageScroll. Блочный скрол.

  1. Подключаем библиотеки. В <head> вставляем:

    • CDN Jquery

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    • FullPageScroll Script

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.4/jquery.fullPage.js"></script>

    • FullPageScroll Styles

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.4/jquery.fullPage.css" />

  2. Закидываем наш скрипт в before <body>. Отключаем на мобильной версии блочную прокрутку.

<script>

var window_size = $(window).width();
  if (window_size >= 768) {
    $(document).ready(function() {
    $('#page-home').fullpage({
      scrollBar: 	false,
      navigation: true,
      scrollingSpeed: 700,
    });
});
 	var blocks = document.querySelectorAll('.w-blocks-group-wrapper');
	for (var i = 0; i < blocks.length; i++) {
  	blocks[i].classList.add('section');
	}
 }
  
</script>
  1. Параметры
scrollBar: false,
navigation: true,
scrollingSpeed: 700,

можно менять в зависимости от ситуации. scrollBar - полоса прокрутки, navigation - навигационные точки в правой части экрана, scrollingSpeed - скорость прокрутки страницы.

  1. ВАЖНО!: стоит учитывать что блочный скрол подходит не для всех сайтов. Т.к. все блоки на страницы автоматически становятся на всю высоту экрана. На мобильной версии блочный скрол отключен.

Video Popup

  1. Подключаем необходимые библиотеки:

Jquery

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

MagnificPopup - CSS

<link rel="stylesheet" href="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">

MagnificPopup - JS

<script src="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>

  1. Создаем embed блок. В него добавляем код:
$(document).ready(function () {
  $('ДОБАВЛЯЕМ ПУТЬ К НАШЕЙ КНОПКЕ/ССЫЛКЕ').magnificPopup({
    items: {
           src: 'ДОБАВЛЯЕМ ССЫЛКУ НА ВИДЕО ИЗ YOUTUBE'
       },
    type: 'iframe',
    iframe: {
              markup: '<div class="mfp-iframe-scaler">'+
                      '<div class="mfp-close"></div>'+
                      '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                      '</div>', 
          patterns: {
              youtube: {
                    index: 'youtube.com/', 
                    id: 'v=', 
                    src: '//www.youtube.com/embed/%id%?autoplay=1' 
                  }
               },
               srcAction: 'iframe_src', 
       }
  });
});

Пример пути к КНОПКЕ/ССЫЛКЕ #other ~ section div a:nth-child(1)

  1. Пользуемся! 😃