​Как добавить анимацию в виде колеса после нажатия кнопки "Перейти в корзину"

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

5 ответов

  • 1
    Distrupt 1 июня 2020 22:40 #

    Вот кусок кода из index.html

    + jquery-1.11.1.min.js

    {strip} {capture assign="_loading_template"} <div class="s-loading-section"> <div class="s-loading-content"> <i class="icon16 loading"></i> </div> </div> {/capture} {/strip} <script> ( function($) { var is_loading = false; $("#cart").on("click", function() { if (!is_loading) { is_loading = true; $("body").append({$_loading_template|json_encode}); } }); })(jQuery); </script>

    • +1
      Antonio Antonio 1 июня 2020 22:48 #

      Спасибо. Куда его там вставить лучше и как подключить jquery-1.11.1.min.js? 

    • +1
      Antonio Antonio 1 июня 2020 22:51 #

      jquery-1.11.1.min.js лучше скачать на сервер или ссылкой перед </head>?

  • 1
    Distrupt 1 июня 2020 22:58 #

    в дефолте так подключается, но может он в вашей темы уже подключен.

    <script type="text/javascript" src="{$wa_static_url}wa-content/js/jquery/jquery-1.11.1.min.js" ></script>

    еще гифку загрузки поместить в папку

    https://сайт/wa-data/public/site/themes/название-темы/img/loading16.gif

    еще css

    .s-loading-section { position: fixed; top: 0; left: 0; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; background: rgba(255,255,255,.5); z-index: 100; }
    .s-loading-section .s-loading-content { display: inline-block; }
    .icon16.loading { background-image: url('img/loading16.gif'); background-position: 0 0; background-size: 16px 16px; }
  • 1
    Antonio 1 июня 2020 23:31 #

    Не выходит. Может первый код не в index.html надо?

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите