Картинка "Смайл" при успешном оформлении заказа, как заменить? Есть решение

Подскажите пжл в каком файле можно заменить эту картинку на другую  , хочется что-то  повеселее сюда поставить)

Сам не смог найти где этот код прописан... 

 

7 ответов

  • 1
    replicant 7 февраля 2019 21:29 #

    Поглядите в шаблоне checkout.success.html

  • 1
    Дмитрий К 7 февраля 2019 21:58 #

    А где смайлик тут запрятан? 

    <style>
    .checkout-header { display: none; }
    </style>
    <div class="checkout-result success">
    <div class="welcome">
    <h1>[`Thank you!`]</h1>
    <p>[`We successfully accepted your order, and will contact you asap.`]<br />
    [`Your order number is `] <strong>{$order.id}</strong>.</p>
    </div>
    {if !empty($payment)}
    <div class="plugin">
    {$payment}
    </div>
    {/if}
    {if !empty($payment_success)}
    <span class="highlighted">[`Your payment has been successfully accepted. We will process your order and contact you shortly.`]</span>
    {/if}
    <p class="back">
    &larr; <a href="{$wa_app_url}">[`Back to the store`]</a>
    </p>
    <!-- plugin hook: 'frontend_checkout' -->
    {* @event frontend_checkout.%plugin_id% *}
    {foreach $frontend_checkout as $_}{$_}{/foreach}
    </div>

  • 2
    replicant 7 февраля 2019 22:18 # Решение

    Ну как где? В CSS конечно (в теме Дефолт это default.css). Класс .welcome этот смайл как раз и содержит как фоновое изображение. В шаблоне вы либо поменяйте класс на свой какой-нибудь, например .welcome2 и для него свои свойства задайте, либо поменяйте стандартному классу в css свойства на свои. Либо в лоб задайте для <div class=welcome style="свой бекграунд">.


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

    .welcome { text-align: center; background: url('img/welcome.png') no-repeat; background-position: top center; padding-top: 300px; background-size: 256px 256px; margin-bottom: 30px; }

    Пока "Инструменты разработчика" Ctrl+Shift+I в браузере для изучения html/css кода страниц не освоите, то так и будут возникать подобные вопросы. Рекомендую срочно.

  • 1
    Дмитрий К 7 февраля 2019 22:57 #

    replicant

    Большое спасибо за объяснение и рекомендации! 

    "Когда знаешь, все просто" ))

    Респект!

  • 1
    Дмитрий К 8 февраля 2019 16:14 #

    В обычной теме все получилось заменить. А вот в мобильной... как я понимаю там вообще не прописан класс для рисунка

    checkout.success.html

    <style>
    .checkout-header { display: none; }
    </style>
    <div class="checkout-result success">
    <h1>[`Thank you!`]</h1>
    <p>[`We successfully accepted your order, and will contact you asap.`]<br />
    [`Your order number is `] <strong>{$order.id}</strong>.</p>
    {if !empty($payment)}
    <div class="plugin">
    {$payment}
    </div>
    {/if}
    {if !empty($payment_success)}
    <span class="highlighted">[`Your payment has been successfully accepted. We will process your order and contact you shortly.`]</span>
    {/if}
    <p class="back">
    &larr; <a href="{$wa_app_url}">[`Back to the store`]</a>
    </p>
    <!-- plugin hook: 'frontend_checkout' -->
    {* @event frontend_checkout.%plugin_id% *}
    {foreach $frontend_checkout as $_}{$_}{/foreach}
    </div>

    в mobile.css есть такой фрагмент кода 


    .wa-welcome {
    text-align: center;
    padding-bottom: 0.5em;
    }
    .wa-welcome .wa-smiley {
    display: block;
    background: url("img/smiley.png") no-repeat;
    background-size: 256px 256px;
    width: 256px;
    height: 256px;
    margin: 0 auto 0.5em;
    }


    Т.е. для класса   wa-welcome есть определенная картинка 

    вот нашел ее ,она лежит по адресу 

    /wa-data/public/site/themes/mobile/img/smiley.png

    добавил код в файле  checkout.success.html

    <div class="checkout-result success">
    <div class="wa-welcome"></div>
    <h1>[`Thank you!`]</h1>
    <p>[`We successfully accepted your order, and will contact you asap.`]<br />
    [`Your order number is `] <strong>{$order.id}</strong>.</p>
    {if !empty($payment)}


    и ничего не появилось...

    понимаю что "чайник", но ведь почти получилось ? в чем ошибся?

    • +2
      replicant replicant 8 февраля 2019 16:59 #

      Да просто вместо

      <div class="wa-welcome"></div>

      введите в шаблон

      <img src="путь_к_вашему_новому_смайлу">

      и всё.

      Потому что вы неправильно применили вставку нужного div'a не обратив внимание на .wa-welcome .wa-smiley, а в вашем случае проще просто картинку через img поставить.

  • 1
    Дмитрий К 8 февраля 2019 17:12 #

    картинка тогда на весь экран - как говорится as is )

    а через классы бы все по феншую получилось ? где там подводный камень что не обрабатывается код этого класса ? 

    Класс обозначил <div class="wa-welcome"></div> 

    В CSS для него есть инструкция 

    .wa-welcome .wa-smiley {
    display: block;
    background: url("img/smiley.png") no-repeat;
    background-size: 256px 256px;
    width: 256px;
    height: 256px;
    margin: 0 auto 0.5em;
    }

    а не работает  ...

    может путь не тот прописан - 

    img/smiley.png

    он в краткой форме какой-то 

    • +2
      replicant replicant 8 февраля 2019 17:22 #

      Ну задайте размеры картинке <img src="/wa-data/public/site/themes/mobile/img/smiley.png" style="width:256px; height:256px">

      Если через классы, то вот так <div class="wa-welcome"><div class="wa-smiley"></div></div>

      И путь тут непричем. Он в обоих случаях правильный и короткий и полный.

  • 1
    Дмитрий К 8 февраля 2019 18:14 #

    <div class="wa-welcome"><div class="wa-smiley"></div></div>

    да вот так работает! 

    Вот оно решение!  

    Большое спасибо !

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

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