Регистрация Вход

logotype

Стандартные ссылки

Редактировать блоки

Гайд

Корзина

Обратная связь

Блог

Личный кабинет

Сравнение

Каталоги

Если нужно скрыть верстку от клиента

if ($.cookie('dev')) {
  $('body').show()
}else{
  if (window.location.href.indexOf('dev=true') == -1) {
    $('body').remove();
  }
}

if (~window.location.href.indexOf('dev=true')) {
  $('body').show();
  $.cookie('dev', true, {
    path: '/'
  });
}

Переменные

project\scss_import\variables\

Цвета

Spider.css

Если $gutter-width-primary == 0. При уменьшении экрана к .container все равно добавляются паддинги.

.container
  .row
    .cell-4
    .cell-4
    .cell-4

cell-4

.row.is-stretch
  div
  div
  div
  div

is-stretch

.container
  .row.is-grid
    .cell-4
    .cell-4
    .cell-4

cell-4

Кнопки

project\bundles\css\base\buttons.scss

Links

В корзину (bttn)

В корзину (bttn-prim)

В корзину (bttn-second)

inputs

  <button class="bttn">В корзину (bttn)</button>

  <button class="bttn-prim">В корзину (bttn-prim)</button>

  <button class="bttn-second">В корзину (bttn-second)</button>

  <button class="bttn-transparent">Быстрая покупка 1 (bttn-transparent)</button>

  <button class="bttn-transparent-second">Быстрая покупка 1 (bttn-transparent-second)</button>

  <button class="bttn-fill">Быстрая покупка (bttn-fill)</button>

  <button class="bttn-fill-second">Быстрая покупка (bttn-fill-second)</button>

.page-title

project\bundles\css\base\page.scss

Заголовок страницы

<h1 class="page-title">Заголовок страницы</h1>
<h2 class="page-title">Заголовок страницы</h2>
<h3 class="page-title">Заголовок страницы</h3>
<div class="page-title">Заголовок страницы</div>
<span class="page-title">Заголовок страницы</span>

Уведомления

project\bundles\css\base\notice.scss

После настройки удалить из темы компонент style_guide!

Удобная настройка в одном компоненте

Развиваем проект обратной связью

Сообщаем о багах

<div class="notice is-warning">

  <p>

    После настройки удалить из темы компонент <strong>style_guide</strong>!

  </p>

</div>

<div class="notice is-success">

  <p>

    Удобная настройка в одном компоненте

  </p>

</div>

<div class="notice is-info">

  <p>

    Развиваем проект обратной связью

  </p>

</div>

<div class="notice is-error">

  <p>

    Сообщаем о багах

  </p>

</div>

Alertify

project\bundles\css\base\alertify.scss

  $('[data-alert-success]').click(function(event) {

    alertify.success('Товар добавлен в корзину', 10)

  });

  $('[data-alert-error]').click(function(event) {

    alertify.error('Ошибка при отправке формы', 10)

  });

  $('[data-alert-warning]').click(function(event) {

    alertify.warning('Товар удален', 10)

  });

  $('[data-alert-message]').click(function(event) {

    alertify.message('Все поля обязательны для заполнения', 10)

  });

pagination

project\bundles\css\base\pagination.scss

  <ul class="pagination">

    <li class="pagination-item is-current">

      <span class="pagination-link">

        1

      </span>

    </li>

    <li class="pagination-item">

      <a href="/collection/tolstovki?page=2" class="pagination-link">

        2

      </a>

    </li>

    <li class="pagination-item">

      <a href="/collection/tolstovki?page=3" class="pagination-link">

        3

      </a>

    </li>

    <li class="pagination-item">

      <a href="/collection/tolstovki?page=2" class="pagination-link">

        <i class="fa fa-angle-right"></i>

      </a>

    </li>

    <li class="pagination-item">

      <a href="/collection/tolstovki?page=3" class="pagination-link">

        <i class="fa fa-angle-double-right"></i>

      </a>

    </li>

  </ul>

breadcrumb

project\bundles\css\base\breadcrumb.scss

<div class="breadcrumb-wrapper">

  <ul class="breadcrumb">

    <li class="breadcrumb-item home">

      <a class="breadcrumb-link" title="Главная" href="#">Главная</a>

    </li>

    <li class="breadcrumb-item">

      <a class="breadcrumb-link" title="LOOKBOOK" href="#">Каталог 1</a>

    </li>

    <li class="breadcrumb-item">

      <span class="breadcrumb-link current-page">Вложенный каталог 1</span>

    </li>

  </ul>

</div>

Чекбокс

project\bundles\css\base\chkbx.scss

Инпут .chkbx стоит заворачивать в тег label.

Белый Белый
Красный
Синий

    <div>

          <label class="chkbx-label">
            <input class="chkbx" type="checkbox" value="11111" name="characteristics[]">
            <span class="chkbx-control"></span>
            <span>Белый</span>
          </label>

          <label class="chkbx-label">
            <input checked class="chkbx" type="checkbox" value="22222" name="characteristics[]">
            <span class="chkbx-control"></span>
            <span>
              Белый
              <br>
              Красный
              <br>
              Синий
            </span>
          </label>

        </div>
        <div>
          <p>
            <label>
              <input class="chkbx" type="checkbox" value="33333" name="characteristics[]">
              <span class="chkbx-control"></span>
            </label>

            <label>
              <input checked class="chkbx" type="checkbox" value="44444" name="characteristics[]">
              <span class="chkbx-control"></span>
            </label>

            <label>
              <input disabled class="chkbx" type="checkbox" value="55555" name="characteristics[]">
              <span class="chkbx-control"></span>
            </label>
          </p>
          <p>
            <input type="checkbox" value="66666" name="characteristics[]">
            <input checked type="checkbox" value="77777" name="characteristics[]">
            <input disabled type="checkbox" value="88888" name="characteristics[]">
          </p>
        </div>

Селекты

project\bundles\css\base\select.scss

<select class="slct" name="select">
 <option value="111">111</option>
 <option value="222">222</option>
 <option value="333">333</option>
</select>

inpt-group

project\bundles\css\base\input-group.scss

    <p>
      <form class="inpt-group">
        <input class="inpt-control inpt" type="text" name="city" value="" placeholder="Ввести свой город">
        <button type="submit" name="button" class="bttn-prim inpt-group-addon">
          Обновить
        </button>
      </form>
    </p>

    <p>
      <form class="inpt-group">
        <button type="submit" name="button" class="bttn-second inpt-group-addon">
          Подписаться
        </button>
        <input class="inpt-control inpt" type="email" name="email" value="" placeholder="Ввести свой email">
      </form>
    </p>

    <p>
      <form class="inpt-group">
        <a href="/search" class="bttn-prim inpt-group-addon">
          <i class="fa fa-search" aria-hidden="true"></i>
        </a>
        <input class="inpt-control inpt" type="text" name="q" value="" placeholder="Поиск">
        <button type="submit" name="button" class="bttn-prim inpt-group-addon">
          Найти
        </button>
      </form>
    </p>

Считалка

project\components\quantity\scss\quantity.scss

project\bundles\css\base\buttons.scss

+ -

    <div class="quantity is-product">
      <div class="quantity-controls">
        <button class="quantity-control bttn-count">
          -
        </button>

        <input class="quantity-input" type="text" name="quantity" value="1">

        <button class="quantity-control bttn-count">
          +
        </button>
      </div>
    </div>

Избанное

project\bundles\css\base\buttons.scss

<button class="bttn-favorite"></button>
<button class="bttn-favorite is-added"></button>

Кнопки сравнения

project\bundles\css\base\buttons.scss

Счетчик

<button class="bttn-compares is-icon" data-compares-trigger="{{ product.id }}">
  <i class="fa fa-exchange" aria-hidden="true"></i>
</button>
<button class="bttn-compares is-bg" data-compares-trigger="{{ product.id }}">
</button>

<button class="bttn-compares" data-compares-trigger="{{ product.id }}" data-compares-added="Удалить из сравнения" data-compares-not-added="Добавить в сравнение">
</button>

<button class="bttn-prim" data-compares-add="{{ product.id }}">
  Добавить
</button>

<button class="bttn-second" data-compares-remove="{{ product.id }}">
  Удалить
</button>

<div>
  Счетчик <span data-compares-counter></span>
</div>

рейтинг

project\bundles\css\base\star-rating.scss

<div class="star-rating-wrapper">
  <div class="star-rating">
    {% assign r = 5 %}
    {% for i in (1..5) %}
      <input name="review[rating]" id="star{{ r }}-{{ product.id }}" type="radio" name="reviewStars" class="star-radio"
             value="{{ r }}"/>
      <label title="{{ r }}" for="star{{ r }}-{{ product.id }}" class="star-label"></label>
      {% assign r = r | minus: 1 %}
    {% endfor %}
  </div>
</div>

<div class="star-rating-wrapper">
  <div class="star-rating">
    <span class="star-item"></span>
    <span class="star-item active"></span>
    <span class="star-item"></span>
    <span class="star-item"></span>
    <span class="star-item"></span>
  </div>
</div>

Мобильные панели

    <button type="button" class="bttn-fill" data-open-mobile-menu >
      Открыть панель слева
    </button>
    <div class="hide">
      <div class="mobile_menu">
        {% for collection in collections.all.subcollections limit: 5 %}
          <nav>
            <ul>
              <li>
                <a href="{{ collection.url }}">
                  {{ collection.title }}
                </a>
              </li>
            </ul>
          </nav>
        {% endfor %}
      </div>
    </div>

    <script type="text/javascript">
    $(document).on('click', '[data-open-mobile-menu]', function(event) {
      event.preventDefault();
      alertify.panel({
        target: '.mobile_menu',
        position: 'left'
      });
    });
    </script>

Инпуты

project\bundles\css\base\inputs.scss

<input class="inpt" type="text" value="text">

Изображения

\project\bundles\css\base\images.scss

is-square

is-rectangle

is-rounded

is-simple

is-wide

Изображение с модификатором is-cover

is-square

is-rectangle

is-rounded

is-simple

is-wide

<div class="image-container is-square">
  <img src="image.jpg">
</div>
<div class="image-container is-square is-cover">
  <img src="image.jpg">
</div>

Drop

item 1

item 1.1

item 1.2

.drop
  div
    | item 1
  .drop-target
    div
      | item 1.1
    div
      | item 1.2

Табы

dataTabs

Описание

Отзывы (7)

Имя

E-mail

Сообщение

Оценка

test

30.11.2016 09:52

test

30.11.2016 09:42

test

30.11.2016 09:41

test

30.11.2016 09:41

test

30.11.2016 09:40

test

30.11.2016 09:40

test

ПЕТЯ

14.10.2016 12:18

tertetetrert

Убежденность некоторых оппонентов позволяет оценить значение укрепления моральных ценностей. Лишь реплицированные с зарубежных источников, современные исследования лишь добавляют фракционных разногласий и обнародованы.

В своем стремлении улучшить пользовательский опыт мы упускаем, что действия представителей оппозиции формируют глобальную экономическую сеть и при этом - подвергнуты целой серии независимых исследований. Семантический разбор внешних противодействий прекрасно подходит для реализации стандартных подходов. Современные технологии достигли такого уровня, что высококачественный прототип будущего проекта требует от нас анализа позиций, занимаемых участниками в отношении поставленных задач. Принимая во внимание показатели успешности, социально-экономическое развитие обеспечивает актуальность системы обучения кадров, соответствующей насущным потребностям.

В целом, конечно, высокотехнологичная концепция общественного уклада обеспечивает широкому кругу (специалистов) участие в формировании вывода текущих активов. Также как высококачественный прототип будущего проекта представляет собой интересный эксперимент проверки форм воздействия. Повседневная практика показывает, что новая модель организационной деятельности предопределяет высокую востребованность укрепления моральных ценностей. Разнообразный и богатый опыт говорит нам, что постоянный количественный рост и сфера нашей активности требует от нас анализа распределения внутренних резервов и ресурсов. А еще базовые сценарии поведения пользователей, инициированные исключительно синтетически, ассоциативно распределены по отраслям. Значимость этих проблем настолько очевидна, что убежденность некоторых оппонентов позволяет оценить значение своевременного выполнения сверхзадачи.

Следует отметить, что понимание сути ресурсосберегающих технологий напрямую зависит от благоприятных перспектив. Задача организации, в особенности же внедрение современных методик позволяет выполнить важные задания по разработке распределения внутренних резервов и ресурсов. Сложно сказать, почему явные признаки победы институциализации могут быть подвергнуты целой серии независимых исследований. В рамках спецификации современных стандартов, активно развивающиеся страны третьего мира представляют собой не что иное, как квинтэссенцию победы маркетинга над разумом и должны быть представлены в исключительно положительном свете.

    <div class="js-tabs" data-tabs-container>
      <div>
        <button data-tab-anchor="1" type="button" data-tab-active>
          Первая вкладка
        </button>
        <button data-tab-anchor="2" type="button">
          Вторая вкладка
        </button>
      </div>

      <div>
        <div data-tab-target="1">
          Содержимое первой вкладки
        </div>
        <div data-tab-target="2">
          Содержимое второй вкладки
        </div>
      </div>
    </div>

    <script type="text/javascript">
    $(document).ready(function() {
      $('.js-tabs').dataTabs();
    });
    </script>

Нативные элементы

Инпуты

Заголовки

Header one

Header two

Header three

Header four

Header five

Header six

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Tables

Employee	Salary
Jane	$1	Because that’s all Steve Job’ needed for a salary.
John	$100K	For all the blogging he does.
Jane	$100M	Pictures are worth a thousand words, right? So Tom x 1,000.
Jane	$100B	With hair like that?! Enough said…

Definition Lists

Definition List Title: Definition list division.
Startup: A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork: Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live: I’ll let Bill O’Reilly will

Unordered Lists (Nested)

List item one
- List item one
  - List item one
  - List item two
  - List item three
  - List item four
- List item two
- List item three
- List item four
List item two
List item three
List item four

Ordered List (Nested)

List item one
1. List item one
  1. List item one
  2. List item two
  3. List item three
  4. List item four
2. List item two
3. List item three
4. List item four
List item two
List item three
List item four

HTML Tags

These supported tags come from the WordPress.com code .

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a .

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Acronym Tag

The acronym ftw stands for “for the win”.

Big Tag

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag

“Code is poetry.” – Automattic

Code Tag

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag

This tag will let you ~~strikeout text~~, but this tag is no longer supported in HTML5 (use the instead).

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarcely known tag emulates keyboard text, which is usually styled like the tag.

Preformatted Tag

This tag styles large blocks of code.

\n.post-title {
      margin: 0 0 5px;
      font-weight: bold;
      font-size: 38px;
      line-height: 1.2;
    }

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H₂O, which should push the “2″ down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC², which should lift the 2 up.

Teletype Tag

This rarely used tag emulates teletype text, which is usually styled like the tag.

Variable Tag

This allows you to denote variables.

Гайд

Установка

Заходим сюда https://bitbucket.org/insalesDesign/insales-template-builder/src

Скачиваем проект. Ссылка на скачивание

по классике устанавливаем пакеты nodejs через

npm i

Настройка

Собираем тему командой

gulp theme:deploy

Собранная тема лежит в \theme, её нужно заархивировать в zip и залить в магазин.
После загрузки берем id темы и настраиваем аплоадер.

Настройка аплоадера происходит тут gulpfile.js\config\uploader.json, внутри файла необходимо выставить "use": true

Запуск

Запускаем сборщик командой

gulp

Когда тема уже собрана, то повторное включение сборщика делаем через команду

gulp theme:watch

Контент из макета

Изображения и иконки кладем в /project/media/{создаем папки по смыслу по примеру папки icons}

Шрифты кладем в /project/fonts/{создаем папку с названием шрифта}

Шрифты предварительно конвертируем во все нужные форматы + генерим css через transfonter
Шрифт system можно оставить как шрифт который отображается до загрузки кастомных.

Переменные

Проставляем переменные в \project\scss_import\variables.variables.scss.

Типографика & UI

Настройка UI и типографики на сколько возможно перенесено в project\bundles\css\base,
html, body - настраиваются в \project\bundles\css\base\_layout.scss
Что где править описано в style_guide.liquid

После настройки базовых элементов представленых в компоненте style_guide, этот компонент нужно удалить, чтобы не было мусора.

Spider находится в C:\insales-template-builder-master\project\bundles\css\spider, там нужно настроить container в зависимости от макета.
Сгенерировать сетку со своими брейк поинтами

Компоненты

Каждый компонент лежит в отдельной папке внутри директории components.

Компонент может содержать:

/{Название сниппета}.liquid
/{Название js файла}.js
/scss/{название scss файла}
/plugins/{название плагина}/{файлы плагина}
/setup/{setup для компонента}.json

Мягкие игрушки

Игрушки Marvel

Игрушки Disney

Куклы Disney

Преимущества для каждого покупателя

У нас нет подделок! И никогда не будет

100% Гарантия качества

Бесплатная доставка по России при заказе от 3000 руб.

Эксклюзивный ассортимент

Мы стараемся держать низкие цены, всегда

Весь каталог

Лучшие предложения дня

Тойс бутик, это интернет магазин
премиальных детских игрушек и аксессуаров

Мы прочно занимаем первое место в Российском рунете по продаже премиальных детских игрушек*
Весь ассортимент поставляется нам из США и Европы и является эксклюзивным на отечественном рынке!

Больше всего мы дорожим репутацией и у нас никогда не будет подделок! Это наш принцип!

Товары представленные на сайте закупаются напрямую у производителей, что позволяет нам
удерживать комфортные цены — без переплат и многочисленных торговых наценок.
Все продукция выполнена из безопасных материалов, долговечна, отвечает высоким стандартам
качества и экологичности. Любое приобретение станет отличным подарком для ребенка или
подростка и позволит ему прикоснуться к волшебному миру любимых сказок, фильмов и комиксов.

Доставка осуществляется по всей России. Следите за различными предложениями и акциями,
делайте свой выбор и завершайте покупку через корзину. В рабочее время с 10 до 21
вы также можете позвонить нам по бесплатному телефону 8(800)6007288 или заказать звонок
менеджера. Они с радостью ответят на все вопросы, помогут определиться с различными
вариантами и примут заявку.

В интернет магазине Тойс-Бутик.ру Вы сможете купить настоящие игрушки и куклы Disney,
фигурки супергероев Марвел от Diamond select Toys и Marvel Legends,
рюкзаки и сумки Loungefly, школьные принадлежности, оригинальные кружки прямо из Диснейленда
и много еще интересного.

Приобретайте только лучшее для Ваших детишек!

Подарите детям детство!

С уважением, директор Toys-Boutique.ru Роман Глущенко

Развернуть

Подробнее

Отзывы наших покупателей

Татьяна Волошина

г. Санкт-Петербург

Самое главное, что все игрушки оригинальные, делаю покупку и уверена в качестве на 100%. На прошлой неделе получила уже третий заказ из магазина. Купила для племянника фигурку Магнето. Детализация на высшем уровне, ребенок в восторге!

05.09.2018

https://vk.com/id497057880

Екатерина Титова

г. Москва

Сервис в магазине всегда на высшем уровне. Покупаю в магазине куклы Дисней уже не первый раз и никогда никаких нареканий. По ценам могу сказать сразу, что тут намного дешевле, чем в других магазинах. Игрушки всегда качественные, без посторонних запахов. Покупала дочке и племяннице кукол, они в восторге. Ну вот ассортимент бы побольше, а в целом магазином очень довольна!

13.07.2018

https://vk.com/id494892661

Дарья Мочалкина

г. Сызрань

Заказывала здесь рюкзак для племянницы. Очень довольна покупкой. Качество отличное. Доставили быстро. Также хотелось бы отметить работу консультантов, очень помогли при оформлении заказа.

12.09.2018

https://vk.com/dashk448