Здравствуйте всем! Есть страница товаров в виде списка. Хочу к каждому товару добавить чекбокс для добавления в корзину. Нажатие на чекбокс добавляет товар в корзину и делает чекбокс активным. Повторное нажатие на чекбокс удаляет товар из корзины и делает чекбокс неактивным. Все это должно происходить без перезагрузки страницы. Помогите пожалуйста это реализовать. Хотя бы какими то краткими набросками кода
https://ru.vuejs.org/v2/guide/ (английская версия более актуальна) https://lodash.com/docs/4.17.5 - набор разных полезных плюшек Если захотите углубиться, то нужно будет ещё разобраться с webpack и установить nodejs. Vue, как показано в примере может работать и так, но webpack удобен для сборки проекта, после него на выходе получится один js-файл и один css-файл, при чем все будет собрано в кучу, минифицировано и готово к работе. В довесок есть ещё babel, который умеет переделывать js для старых браузеров, sass, с которым css становится проще и логичнее, всё это интегрируется в webpack, работает незаметно и налету. Можете так же ознакомиться с nuxtjs, с помощью которого можно делать полноценные SPA или даже обычные сайты, т.к. он умеет рисовать страничку на сервере и отдавать уже в готовом виде (поисковиками индексируется нормально). Короче, тема обширна, по началу вас могут одолевать вопросы типа "тут столько всего, как в этом разобраться" и "зачем это нужно", но как только разберетесь, поймете что это в разы удобнее и быстрее, да и толковых разработчиков умеющих во всё это чуть меньше чем хотелось бы. Дерзайте ))
Преуменьшаешь ты сильно .... там две очень обширные темы по фронту и енду, даже сделать так же как ты в примере не просто, я кое-как осваиваю маленькую библу джиквыри
*экскурс в старые добрые времена * Только сильно не увлекайся. jQuery появилась в те смутные времена, когда api отличалось от браузера к браузеру и вообще было не слишком удобно. Чувак привел всё к единому стандарту, добавил кучу полезностей и в целом все было круто, но появился целый класс jquery-программистов, которые на чистом js действительно не способны ничего написать ) Сейчас же многие jquery-фичи уже вполне реализованы нативно (.querySelector() умеет выбирать по DOM`у почти так же), некоторые лучше (axios предоставляет единый интерфейс для http-запросов как на клиенте, так и на сервере), совместимость со стандартами решается babel`ем и т.д.. Короче, знать полезно, т.к. хрен когда эта ваша джиквыри помрет, но приучать себя к нему не надо, он как php, не слезешь потом ) А вообще, тут всё не так страшно как кажется. Последние стандарты js действительно удобны и значительно улучшили язык, sass с его миксинами, переменными и прочими плюшками делает css намного мощнее и гибче, главное правильно приготовить вебпак и бонусом у тебя ещё и live reload будет, отрисовывая каждое изменение сразу в браузере, а когда надо - соберет всё, приведет к браузерному js/css, минифицирует и сложит в пару файликов. Тут просто важно понять, что фронт перерос View из MVC и стал полноценным таким приложением ))
Не знаю правильно это или нет, но что бы вывести все товары из БД, я изменил часть кода в вашем примере примерно так: Код (Text): items: [<? foreach ($products as $prod) { ?> {name: '<?=$prod['model']?>',id: '<?=$prod['id']?>', total: 6, price: <?=$prod['price']?>, amount: 0},<?}?>], И нашел функцию для чекбокса, которая отправляет айдишник товара для добавления или удаления из БД при нажатии на чекбокс Код (Text): $('.cid').change(function(){ if(this.checked) { var cid = $(this).attr("cid"); $.ajax({ type: "POST", url: "/test.php", data: "cid="+cid, dataType: "html", cache: false, success: function(data) { return false; } }); } else{ var kid = $(this).attr("cid"); $.ajax({ type: "POST", url: "/test.php", data: "kid="+kid, dataType: "html", cache: false, success: function(data) { return false; } }); } }); Все хорошо работает, но опять же не знаю, может быть это можно было сделать как то более грамотно, без использования jquery или ajax. Осталась 1 проблема: нужно что бы при перезагрузке страницы выбранные чекбоксы оставались выбранными. Если я правильно понимаю, то нужно проверить какие товары добавлены в БД, и сделать выделенными соответствующие чекбоксы. Но как это сделать не совсем понимаю. Подскажите пожалуйста. И еще вопрос, как вообще средствами Vue.js сделать чекбокс выделенным по умолчанию?
Ох, чувак, тут в двух словах не объяснишь )) Вот пример: https://jsfiddle.net/j6gsvg4d/ А вообще, почитай доку: https://ru.vuejs.org/v2/guide/#Декларативный-рендеринг https://ru.vuejs.org/v2/guide/forms.html#Чекбоксы
не, localstorage я взял потому, что поднимать для примера серверное api - это как то перебор )) А вообще, суть примера в том, что как раз с DOM плясать и не надо. Шаблон - декларативен на основе данных, меняешь их - меняется отображение.
Да понятно что так что этак гемор C пхп и куками все намного проще, да и связаться с сервером через аякс ничего особо поднимать не надо
Cделал все, что хотел, еще раз спасибо! Единственный минус, это то, что не работает в Internet explorer =(