Email: admin@artfurniture.com
+79456 - 88-76-345
Dining Room
SALE
Strive Shoulder Pack
Описание
4100
р.
4900
р.
Dual Handle Cardio Ball
3200
р.
4440
р.
Rival Field Messenger
5910
р.
6740
р.
Joust Duffle Bag
4830
р.
5700
р.
More products
Tell us your name, email and major preferences
You can choose a rate which would be comfortable for you
And you will be happy ever after with our super amazing product
Thank you for your chosing. We will wait you. Come again soon.

Как добавить таблицу, лэйбл, вторую кнопку и блок последовательность покупки блок ST300 в Tilda

Как выполнили данный пример:

Основа примера это блок магазина ST300
Этапы покупки сделали через блок Этапы►HW302
Остальное добавили через код
Пример не работает с каталогом
1. Создали блок ST300 и наполнили его контентом
2. Создали блок HW302 и наполнили его контентом
Добавили код 1 - Этапы на страницу в блок Другое►Т123
#rec68205726 - заменили на свой ID блока с этапами HW302
3. Добавили вторую кнопку в карточку , вставив код 2 - Вторая кнопка
В коде изменили стили на нужные нам и прописали свою ссылку и надпись:
href="#"
Control Price - ссылка

4. Добавили метку HIT и ярлычок на фото товара. вставив код 3 - Label
Изменили надпись метки на HIT
<div class="slabel">HIT</div>

5. Добавили таблицу в описание товара , вставив код 4 - Таблица

6. Добавили фото платёжных систем в карточку товара, вставив код 5 - Pay
Прописали путь до своей картинки https://clck.ru/ESZgz

Все коды были вставлены в блок Другое►Т123
1
Этапы

<!-- Настройки блока HW302  -->
<style>
/*Стили для блока HW302*/
    [data-record-type="549"]{
    border-radius: 30px;
    box-shadow: 0px 3px 8px 0px #bda87f;     }
</style>
<script>
//Добавляем блок HW302 в карточку товара    
    $('#rec68205726').appendTo('.t754__product-full');
</script>
2
Вторая кнопка

<!-- Добавляем вторую кнопку в карточку товара -->
<style>
/*Стили для второй кнопки*/
  .secbtn{
     color: #BDA87F !important;
     border:1px solid #BDA87F;
     margin-left: 10px;
    }
    .secbtn:hover{
     color: #ffffff !important;
    } 
    @media screen and (max-width: 670px){
    .secbtn{
     margin-left: 0px;
    }}
</style>

<script>
//Добавляем вторую кнопку...
     $(".t754__btn-wrapper").append('<a href="#" class="t754__btn t-btn t-btn_sm secbtn "><table style="width:100%; height:100%;"><tbody><tr><td>Control price</td></tr></tbody></table></a>');
</script>
3
Label

<!-- Добавляем треугольник и надпись HIT  -->
<div class="triangle"></div>
<div class="slabel">HIT</div>
<style>
/*Стили для треугольника HIT*/   
 .triangle {
    width: 0;
    height: 0;
    border-top: 130px solid #bda87f;
    border-right: 130px solid transparent;
    position: absolute;
    top: 0px;
    z-index: 9;
}
/*Стили для надписи HIT*/
.slabel {
    position: absolute;
    z-index: 99;
    top: 22px;
    color: #ffffff;
    font-family: Roboto;
    font-size: 34px;
    left: 17px;
    transform: rotate(-45deg);
}
</style>
<script>
//Переносим треугольник и надпись в карточку товара
     $(' .triangle , .slabel').appendTo('.t754 .t-slds');
</script>
4
Таблица

<!-- Добавляем таблицу с параметрами товара  -->
<table class="tabprod">
  <tbody><tr>
    <td>Color</td>
    <td>RAL 67890</td>
  </tr>
  <tr>
    <td>Weight</td>
    <td>12 kg</td>
  </tr>
  <tr>
    <td>Material</td>
    <td>М/L</td>
  </tr>
</tbody></table>

<style>
/*Стили для таблицы*/
    table.tabprod {
    margin-top: 15px;
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
    text-align: center;
}
/*Стили для ячеек в таблице*/
   table.tabprod td {
    border: 1px solid #bda87f45;
    padding: 6px;
} 
</style>

<script>
//Переносим таблицу в карточку товара
     $('.t754__descr span:even').empty().append($('.tabprod'));

</script>
5
Pay

<!-- Добавляем фото платёжных систем -->
<style>
/*Стиль для фото платёжных сиситем*/
   .paysistem {
       width: 75%;
       transition: all 0.5s linear;
   }
/*Стиль для фото платёжных сиситем при наведении*/   
   .paysistem:hover {
   filter: brightness(1.3);
}
 
</style>

<script>
//Добавляем фото платёжных систем...
     $(".t754__col_right").append('<img src="https://clck.ru/ESZgz" class="paysistem t-img" imgfield="img">');

</script>
Color RAL 67890
Weight 12 kg
Material М/L
HIT
Made on
Tilda