Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 05.11.2019, 18:21
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 19

Сообщение от laimas Посмотреть сообщение
А зачем эта операция при нажатии на кнопку?

У вас в комнате по умолчанию свет выключен, следующий щелчок по выключателю зажжет его, следующий выключит и т.д. Вы же не станете рассуждать - "выключен свет, ага, значит если щелкну, то выключится" и наоборот. Так и с этой кнопкой.

да Вы правы, только если дома свет зажечь, то свет горит и не потушится пока я его не выключу (ну или не отключат свет), а у кнопки при обновлении страницы сбрасывается цвет. Вы правы нужно проверять

Если (такой id уже есть в корзине) тогда
выводим красную кнопку данному id
конецЕсли

только почему то и так не срабатывает, все равно сбрасывается
Ответить с цитированием
  #22 (permalink)  
Старый 05.11.2019, 18:57
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<button class="product__add-to-cart-button" data-sb-id-or-vendor-code="0032pz" data-sb-product-size="32" data-sb-product-name="Пицца «Ветчина и грибы»" data-sb-product-price="320" data-sb-product-quantity="1" data-sb-product-img="smartbasket/img/pizza.png">
<i class="fas fa-cart-plus"></i> <span data-sb-id-button="0032pz">Добавить в корзину</span>
</button>

Зачем у span data-sb-id-button если ID товара определено у кнопки data-sb-id-or-vendor-code, что в общем то удобнее получать как при добавлении/удалении товара, так и при поиске кнопки? То есть, при щелчке по кнопке это:

productsArr[sbId] ? $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину') : $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину');


и вот это

for (let key in productsArr) {
                    for (let value in productsArr[key]) {
                        if (value === 'sbQuantity') {
                            getQuantity += +productsArr[key][value];
                        }
                    }
                }


это какой то бред. Если addToBasketButton, это и есть кнопка, о чем говорит let sbId = $(this).attr("data-sb-id-or-vendor-code"); // ID товара, хотя по человечески это должно быть:

let sbId =  $(this).data("sb-id-or-vendor-code")
//либо
let sbId =  this.dataset.sbIdOrVendorCode


то спрашивается нахрена нужен цикл for (let key in productsArr) ... если известен конкретный товар и один, который может добавляться только при первом щелчке по кнопке, ибо после него кнопка уже выполняет операцию удаления товара, должна выполнять коли кодом это прописано?

Последний раз редактировалось laimas, 05.11.2019 в 19:00.
Ответить с цитированием
  #23 (permalink)  
Старый 05.11.2019, 19:04
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 19

Сообщение от laimas Посмотреть сообщение

то спрашивается нахрена нужен цикл for (let key in productsArr) ...?

согласен цикл не нужен, я его убрал, по поводу data-sb-id-or-vendor-code="001" тоже переписал как Вы сказали спасибо Вам огромное, а по поводу кнопки как лучше сделать?

Последний раз редактировалось sty-wolf, 05.11.2019 в 19:11.
Ответить с цитированием
  #24 (permalink)  
Старый 05.11.2019, 19:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от sty-wolf
а по поводу кнопки как лучше сделать?
Объясняю/предлагаю/советую последний раз.

<style>
.product__add-to-cart-button {
    padding: 10px 20px;
    border: none;
    background-color: #6FBBFC;
}

.product__add-to-cart-button span:after {
    content: 'Добавить в корзину';
}

.product__add-to-cart-button.button-active {
    background-color: #FE6C6C;
}

.product__add-to-cart-button.button-active span:after {
    content: 'Удалить из корзины';
}
</style>

<button class="product__add-to-cart-button" 
        data-sb-id-or-vendor-code="0032pz" 
        data-sb-product-size="32" 
        data-sb-product-name="Пицца «Ветчина и грибы»" 
        data-sb-product-price="320" 
        data-sb-product-quantity="1" 
        data-sb-product-img="smartbasket/img/pizza.png">
    <i class="fas fa-cart-plus"></i> <span></span>
</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('button.product__add-to-cart-button').click(function() {
    var bt = $(this), id = bt.data('sb-id-or-vendor-code');
    if(bt.hasClass('button-active')) {
        //удаление товара с ID из корзины
        //и цикла для этого не требуется 
        console.log('del '+id)
    } else {
        //добавление товара с ID в корзину
        //и цикла для этого не требуется
        console.log('add '+id)     
    }
    
    bt.toggleClass('button-active'); //изменение состояния кнопки 
});
</script>

* атрибуты кнопки в столбик, это тут для компактности, на реальной странице мусорить табуляций и переводами не стоит.

Также посредством CSS можно описать и смену иконки кнопки. А количеством товара в корзине должно заниматься поле, например типа number.

А при загрузке страницы в цикле товаров корзины выполнять
$('button[data-sb-id-or-vendor-code="'+id+'"]').addClass('button-active'); //где id идентификатор товара

Последний раз редактировалось laimas, 05.11.2019 в 20:27.
Ответить с цитированием
  #25 (permalink)  
Старый 05.11.2019, 19:57
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от sty-wolf
только если дома свет зажечь, то свет горит и не потушится пока я его не выключу
Вы не понимаете сути действия. В цифровой электронике существуют устройство называемое триггером. Это устройство с двумя устойчивыми состояниями на выходе, переключить которое можно подачей сигнала на его вход. Выключатель света в вашей комнате тоже можно назвать триггером - выключатель его это вход, а его контакты, это выход. Щелкнули - состояние включено, свет горит, щелчок - состояние выключено, свет погашен и т.д.

А попробуйте этим выключателем трижды включить свет, не выключая его, после чего только можно его будет выключить. Получится? Конечно нет, для таких случаев требуется счетный триггер, который будет запоминать (накапливать) состояния и после определенного количества (количества сигналов на входе, тактов) выключит свет.

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

Последний раз редактировалось laimas, 05.11.2019 в 20:24.
Ответить с цитированием
  #26 (permalink)  
Старый 05.11.2019, 23:56
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 19

Цитата:
А при загрузке страницы в цикле товаров корзины выполнять
$('button[data-sb-id-or-vendor-code="'+id+'"]').addClass('button-active'); //где id идентификатор товара
нужно прописать в цикле добавления товаров?

Цитата:
//удаление товара с ID из корзины
//и цикла для этого не требуется
а тут прописать метод удаления?

Последний раз редактировалось sty-wolf, 06.11.2019 в 02:21.
Ответить с цитированием
  #27 (permalink)  
Старый 06.11.2019, 02:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от sty-wolf
нужно прописать в цикле добавления товаров?
Зачем?

Сообщение от sty-wolf
а тут прописать метод удаления?
Все что требуется из операций, то и пишите. Если добавление, значит обращение к методу/функции (не знаю что там у вас) добавления, позвоните Кате и пригласите ее в кино и т.д. и т.п. А если удаление, значит обращение к методу/функции (не знаю что там у вас) удаления, позвонить Кате и извиниться, пригласить в кино Свету и т.д. и т.п.

Я не знаю что и как у вас в полном объеме, да и вникать в это и некогда, и не охота. Поэтому, из того что пишу, вам нужна только суть, а далее вы уже по этой "дорожной карте" применяя свои методы/функции, свои элементы в верстке и их селекторы/атрибуты выполняйте это же самое.

Сохраните это у себя и запустите, пощелкайте добавление/обновление/удаление товаров с обновлением страницы. Все работает? Что в сути самой работы непонятного? В примере все очень просто, нет нагромождения лишних элементов и их атрибутов/классов. Самые необходимые операции и все. Это как раз для того, чтобы и была понятна суть механизма. Облепите ее своими наворотами и все.

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
h3 {
    margin-top: 0;
}
li {
    display: inline-block;
    list-style: none;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 5px;
}
.btn {
    width: 100%;
    padding: 10px 20px;
    border: none;
    background-color: #6FBBFC;
    margin-top: 15px;
    cursor: pointer;
}
.btn span:after {
    content: 'Добавить в корзину';
}
.btn.add {
    background-color: #FE6C6C;
}
.btn.add span:after {
    content: 'Удалить из корзины';
}
.to-cart:after {
    content: 'В корзину:';
}
.to-cart.add:after {
    content: 'В корзине:';
    color: #C70404;
}
</style>
<script type="text/javascript">
//страница с товарами, получаем сразу корзину
var cart = localStorage.cart && JSON.parse(localStorage.cart) || {};
//добавляем товар
function add(id, name, n) {
    cart[id] = {name: name, count: n};
    mem();     
}
//обновляем товар
function upd(id, n) {
    cart[id].count = n;
    mem();     
}
//удаляем товар
function del(id) {
    delete cart[id];
    mem();     
}    
//изменения корзины сохраняем
function mem() {
    console.log(cart);
    localStorage.cart = JSON.stringify(cart);
}

$(function() {
    //добавление/удаление товара
    $('#products').on('click', 'button', function() {
        //все что потребуется для дольнейших операций    
        var bt = $(this), 
            id = bt.data('id'), 
            p = bt.closest('li'), 
            v = p.find('input');
            
        if(bt.hasClass('add')) {
            //удаление товара с ID из корзины
            del(id);
            v.val(v.attr('min')); //сбросить значение поля количества до мин. значения
            //и прочие сопутствующие операции
        } else {
            //добавление товара с ID в корзину
            add(id, p.find('h3').text(), +v.val());
            //и прочие сопутствующие операции    
        }
     
        bt.add(v.prev()).toggleClass('add'); //изменение состояния кнопки, и метки поля количества
    
    }).on('change', 'input', function() { //изменение количества товара в корзине
        var id = this.dataset.id;
        if(!cart[id]) return;
        upd(id, this.valueAsNumber);
        //и прочие сопутствующие операции
    });
    //отметить товары в корзине при загрузке страницы
    Object.keys(cart).forEach((id) => {
        $('button[data-id='+id+']').addClass('add').closest('li').find('label').addClass('add').next().val(cart[id].count)
    });     
});
</script>
</head>
<body>
<ul id="products">
    <li>
        <h3>Портвейн</h3>
        <div>
            <label class="to-cart"></label> <input data-id="15" type="number" min="1" max="3" value="1" autocomplete="off" /> бутылей
        </div>
        <button class="btn" data-id="15"><span></span></button>       
    </li>
    <li>
        <h3>Кагор</h3>
        <div>
            <label class="to-cart"></label> <input data-id="215" type="number" min="1" max="5" value="1" autocomplete="off" /> бутылей
        </div>
        <button class="btn" data-id="215"><span></span></button>       
    </li>
    <li>
        <h3>Коньяк</h3>
        <div>
            <label class="to-cart"></label> <input data-id="67" type="number" min="1" max="1" value="1" autocomplete="off" /> бутылей
        </div>
        <button class="btn" data-id="67"><span></span></button>       
    </li>
    <li>
        <h3>Самогон</h3>
        <div>
            <label class="to-cart"></label> <input data-id="13" type="number" min="1" max="100" value="1" autocomplete="off" /> литров
        </div>
        <button class="btn" data-id="13"><span></span></button>       
    </li>
</ul>
</body>
</html>

Последний раз редактировалось laimas, 06.11.2019 в 12:01.
Ответить с цитированием
  #28 (permalink)  
Старый 07.11.2019, 01:05
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 19

laimas,
спасибо Вам
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Toggle эффект блока с кнопкой "Читать дальше". С меня "+" subbziro Общие вопросы Javascript 10 28.12.2016 01:43
проблема со scroll Chrome Элементы интерфейса 2 21.10.2013 14:46
Вывести изображение после ввода URL без перезагрузки страницы Delfiniys Элементы интерфейса 5 18.10.2013 11:41
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 16:34
Отследить клик по дочернему объекту AllanZ jQuery 3 05.09.2012 12:38