Выводим с помощью jquery таблицу google на сайте html. Так же выводим в каждую из строк кнопки «заказать» и количество заказываемого товара. При клике на Заказать данные товара передаются в форму
//гугл таблица
(function(){
$(document).ready(function() {
var spreadsheetId = '15ANDI4sefQRdTvDRlPvU40EvawopDl9-RRLIEXl--90';
var apiKey = 'AIzaSyC4y5DdcaVqJ_NXKnMw4TyjnhSi3ONEeeU';
var range = 'A:J';
var endpoint = 'https://sheets.googleapis.com/v4/spreadsheets/' + spreadsheetId + '/values/' + range + '?key=' + apiKey;
$.get(endpoint, function(response) {
var values = response.values;
// Создаем таблицу в блоке .table-google
var table = '<div class="table-google">';
for (var i = 0; i < values.length; i++) {
var row = values[i];
table += '<div class="table-item flex_block">';
for (var j = 0; j < row.length; j++) {
table += '<div class="item"><span>' + row[j] + '</span></div>';
}
table +=
'<div class="btn-block">' +
'<div class="quantity_inner">' +
'<button class="bt_minus">-</button>' +
'<input type="text" class="quantity" value="1">' +
'<button class="bt_plus">+</button>' +
'</div>' +
'<a class="btn-mini btn-modal-product-table">Order</a>' +
'</div>' +
'</div>';
table += '</div>';
}
table += '</div>';
$('.table-google').html(table);
});
//форма в гугл таблице
$(document).on('click', '.btn-modal-product-table', function() {
//открыть форму
$(".modal-smg_boby").fadeOut(300);
$("#modal-smg-product-table").fadeIn(300);
//передать значение наименования товара в форму
var tableItem = $(this).closest('.table-item');
var itemData = tableItem.find('.item span').map(function() {
return $(this).text();
}).get().join(',');
$('#form-modal-product-table input[name="itemData"]').val(itemData);
//передать значение кол-ва товара в форму
var quantityValue = $(this).siblings('.quantity_inner').find('.quantity').val();
$('#form-modal-product-table input[name="itemColvo"]').val(quantityValue);
return false;
});
//форма в гугл таблице
// Убавляем кол-во по клику
$(document).on('click', '.quantity_inner .bt_minus', function() {
let $input = $(this).parent().find('.quantity');
let count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
});
// Прибавляем кол-во по клику
$(document).on('click', '.quantity_inner .bt_plus', function() {
let $input = $(this).parent().find('.quantity');
let count = parseInt($input.val()) + 1;
count = count > parseInt($input.data('max-count')) ? parseInt($input.data('max-count')) : count;
$input.val(parseInt(count));
});
// Убираем все лишнее и невозможное при изменении поля
$(document).on('change keyup input click', '.quantity_inner .quantity', function() {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9]/g, '');
}
if (this.value == '') {
this.value = 1;
}
});
});
})();
//гугл таблица
//форма и верстка
<section class="page-content page-tab-price">
<div class="container">
<div class="info-tab-price">
<div class="info-tab-price-cont clearfix">
<div class="text">
<ul>
<li>All the goods that we do not have can be brought to order</li>
<li>Prices are indicated without delivery, the cost of delivery is negotiated with the manager</li>
</ul>
<a class="btn btn-modal" href="#">Contact the manager</a>
</div>
<div class="btn-block">
<a class="btn-sertificat" href="https://test3.danilsmg.ru/wp-content/uploads/2023/07/Certificate-COC_CRT_Alvi-BelSp.o.o_010923-1.pdf" target="_blank">
<div class="title-bold">Forest Stewardship Council International</div>
<span class="descr"><p>Certificate Code: SCS-COC-009593 <br>Trademark License Code: FSC-C18522</p></span>
</a>
</div>
</div>
</div>
<div class="table-google"></div>
</div>
</section>
<div class="modal-smg_boby" id="modal-smg-product-table">
<div class="modal-smg_boby-content">
<div class="modal-smg">
<div class="modal-smg_container">
<div class="close--modal-smg"></div>
<form id="form-modal-product-table" class="form-modal">
<div class="title-modal">Заказать звонок</div>
<div class="descr-modal">Оставьте контакты и мы Вам перезвоним</div>
<input type="text" name="name" placeholder="Имя">
<input type="text" name="phone" placeholder="Ваш телефон*" required>
<label class="polit-form">
<input name="polit" type="checkbox" checked="checked" required>
<span class="checkmark">Я ознакомился с <a href="/privacy-policy/" target="_blank">политикой конфиденциальности</a></span>
</label>
<button class="btn">Отправить заявку</button>
<input type="hidden" name="formData" value="Заказали обратный звонок с сайта <?php echo get_home_url(); ?>">
<input type="hidden" name="itemData" value="">
<input type="hidden" name="itemColvo" value="">
</form>
</div>
</div>
<div class="close-smg_boby"></div>
</div>
</div>
//форма и верстка
Выводим такую же таблицу, но с корзиной
less
.table-google{
.table-item{
padding-top: 15px;
padding-bottom: 15px;
border-bottom: @border;
transition: 0.5s all;
align-items: center;
&:hover{
background: @bg;
}
&:first-child{
color: @text-gray;
align-items: flex-start;
&:hover{
background: transparent;
}
.btn-block{
display: none;
}
}
.item{
box-sizing: border-box;
span{
display: inline-block;
position: relative;
top: -2px;
}
&:nth-child(1){
width: 50px;
color: @text-gray;
}
&:nth-child(2){
width: 8%;
}
&:nth-child(3){
width: 10%;
}
&:nth-child(4){
width: 8%;
}
&:nth-child(5){
width: 9%;
}
&:nth-child(6){
width: 12%;
}
&:nth-child(7){
width: 10%;
}
&:nth-child(8){
width: 8%;
}
&:nth-child(9){
width: 10%;
font-weight: 500;
}
&:nth-child(10){
// width: calc(~'15% - 50px');
width: calc(~'25% - 248px');
font-weight: 500;
}
}
.quantity_inner{
position: relative;
display: inline-block;
margin-right: 5px;
button{
width: 36px;
height: 36px;
line-height: 35px;
background: @bg;
text-align: center;
outline: none;
border: none;
padding: 0;
position: absolute;
border-radius: 50%;
top: 1px;
transition: 0.3s all;
&:hover{
background: @text;
color: @w;
}
}
.bt_minus{
left: 1px;
}
.bt_plus{
right: 1px;
}
.quantity{
width: 120px;
font-size: 12px;
padding: 9px 38px;
padding-bottom: 12px;
border-radius: 20px;
transition: 0.5s all;
box-sizing: border-box;
text-align: center;
border: @border;
outline: none;
transition: 0.3s all;
box-sizing: border-box;
&:focus{
border-color: @color-1;
}
}
}
.btn-mini{
text-decoration: none;
background: @text;
color: @w;
&:hover{
background: @color-1;
}
}
}
}