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

9 ответов

• популярные
• новые

• 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 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 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>

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

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

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

  ответить