ДРУЗЬЯ! На 5:06 примерно, лучше метод клика вешать не на всю карточку товара, а на фотографию только. Иначе будет даже при клике на Добавить в корзину роутинг менять. Возможно я перезалью видео с комментарием в этом месте.
Помогите, пожалуйста, с подключением GTM в приложение Vue. Нашел на npm vue-gtm, его почему-то советуют подключать в router/index.js. Сделал всё как описано в пакете для v.2, в package.json указал конкретно что "vue-gtm": "3.0.0-vue2". Сайт работает, но _Failed to load resource: the server responded with a status of 404 ()_ и не видно в консоли элементов, чтобы добавились нужные штуки в head и body. up: удалил пакет и вставил напрямую, по старинке в файле index.html - ошибка в console осталась та же
И наверное лучше бы было сделать гетер который по id возвращал бы товар из стора в компонент. Таким образом работа с данными и представлением была бы разделена
Согласен. Уроки рассчитаны на новичков и не хотел особо еще и запутывать с js методами работы с массивами. Можно и через filter, а можно и просто for of циклом.
очень. очень печально. если вы не собираетесь из текущего массива делать новый, то не мапайте. есть forEach, find и ряд других для этих случаев. прямо чувствуется подход разрабов реакта, которые кроме мапа ничего не знают. далее автор грубейшим образом нарушил dry, и этого я совсем не выдержал. зы. для получения данных по одному продукту нужно юзать геттеры, а не брать весь каталог и бегать по нему в компоненте. в общем, сплошной антипаттерн
Eugen Udalov мне нужно делать из массива новый, так как я работаю с геттером, который возвращает исходный массив товаров. Менять я его не могу, так как он служит для рендера всех товаров в каталоге, так что я его маплю в новый и показываю результат. Если вы про то, что я фильтрую геттер не в сторе, а в компоненте - а если нет гарантии, что в приложении нужно будет еще где то так же фильтровать исходный геттер, то зачем это делать в vuex? Store служит для работы с данными, которые будут использованы не в 1 компоненте. Поэтому я и работаю с этим геттером в компоненте, так как больше такая фильтрация нигде пока не используется. Как будет использоваться - перенесу в vuex этот метод. Далее. Я и так работаю с геттером. Если приложение инитится не как обычно, а со страницы отдельного товара мне в любом случае надо делать запрос к api. Другой вопрос, что не корректно было запрашивать ВСЕ товары, когда нужен только 1. Но api для получения 1 товара нет. Точнее я его не создал так как не предвидел:) записываю в real-time. В этом соглашусь и учту. Спасибо за советы!
@@gofrontend2220 что-то вы похоже не разобрались с vuex. в частности с геттерами. вы не фильтруете исходный массив, вы вытаскиваете из него нужный элемент. это можно и нужно делать в геттере, а не в компоненте. и в любом другом месте это так и будет работать. далее. вы не меняете и не получаете в мапе новый массив. вы мапой вытаскиваете элемент отдельный. причем таким себе способом
@@gofrontend2220 ну и наконец, если нужен инит, и нужно избежать нарушения dry, значит инит должен быть где в инициализации приложения. но не повторять одно и то же на разных роутах. я не знаю, где это происходит у вуя, я с ангуляр давно работаю, но наверняка есть более красивые варианты
Eugen Udalov такой способ получения товаров сделан ТОЛЬКО в случае, если первая открытая страница это карточка товара. Это и есть компонент с инитом. Этот урок был сделан для того что показать как класть и брать значения из урл, не более:) в случае если переход будет происходить из каталога, то я просто в роутер через params передам объект товара:) но еще раз говорю, целью было дать понимание как положить значение в урл через router.query, а потом забрать это значение где то еще. Я даже выпущу урок с рефакторингом. Поставим флаг, следящий за тем если инит происходит из карточки товара - тогда возьмем товар из урла. Если как положено - парамсом из каталога. Люди сами потом решат как им работать с данными. Я лишь показал как с урлом работать. Не более. Этот видео курс вообще далек от идеала best practice. Я просто хочу людям основы работы с данными, с api, router и vuex показать
для тех кто недоумевает почему в конце в корзину попадет продукт без количество или с nan то исправьте код в вычисляемом свойстве product page : let result = {} let vm = this this.PRODUCTS.map(function(item) { if (item.article === vm.$route.query.product) { result = item } }) //чтобы отображалось количество let productData = {...result, quantity: 1} return productData
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](http://i.ytimg.com/vi/5lBf-Fm4io4/mqdefault.jpg)
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](/img/tr.png)
![[ВАЖНО - Читай описание] BUTTON. Создание универсального и переиспользуемого компонента Vue](http://i.ytimg.com/vi/gUJFLFvVV-g/mqdefault.jpg)
![[ВАЖНО - Читай описание] Сравнение Vue3 composition API vs Vue2 optional API](http://i.ytimg.com/vi/SnveOCAASZ8/mqdefault.jpg)
ДРУЗЬЯ! На 5:06 примерно, лучше метод клика вешать не на всю карточку товара, а на фотографию только. Иначе будет даже при клике на Добавить в корзину роутинг менять. Возможно я перезалью видео с комментарием в этом месте.
@click.stop="addToCart"
Автору респект за проект
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
Обалденный урок!!!
А что будет если не передать query параметр в маршрут? Как это можно предусмотреть и редиректить клиента на главную страницу, например?
Помогите, пожалуйста, с подключением GTM в приложение Vue. Нашел на npm vue-gtm, его почему-то советуют подключать в router/index.js.
Сделал всё как описано в пакете для v.2, в package.json указал конкретно что "vue-gtm": "3.0.0-vue2". Сайт работает, но _Failed to load resource: the server responded with a status of 404 ()_ и не видно в консоли элементов, чтобы добавились нужные штуки в head и body.
up: удалил пакет и вставил напрямую, по старинке в файле index.html - ошибка в console осталась та же
почему если добавлять товар со страницы товара, то количество не показывается?
Спасибо, очн сильно помог
Для работы клика на компоненте я использую @click.native, а чтобы клик не распространялся на "add to cart" я бы сделал - @click.self
Антон, возвращайся на Ютуб - ты нам нужен
И наверное лучше бы было сделать гетер который по id возвращал бы товар из стора в компонент. Таким образом работа с данными и представлением была бы разделена
Ну если в проекции на полноценный проект и реальное API - то да
Можно в map стрелочную функцию делать, тогда контекст не будет теряться
Куда-то мои ответы пропадают. Можно и стрелкой
И вместо map на 11:39 метод find было бы правильнее использовать
Согласен. Уроки рассчитаны на новичков и не хотел особо еще и запутывать с js методами работы с массивами. Можно и через filter, а можно и просто for of циклом.
@@gofrontend2220 честно? если новичок запутается в методах работы с массивами, нечего ему пока что в вуе делать
очень. очень печально. если вы не собираетесь из текущего массива делать новый, то не мапайте. есть forEach, find и ряд других для этих случаев. прямо чувствуется подход разрабов реакта, которые кроме мапа ничего не знают. далее автор грубейшим образом нарушил dry, и этого я совсем не выдержал. зы. для получения данных по одному продукту нужно юзать геттеры, а не брать весь каталог и бегать по нему в компоненте. в общем, сплошной антипаттерн
Eugen Udalov мне нужно делать из массива новый, так как я работаю с геттером, который возвращает исходный массив товаров. Менять я его не могу, так как он служит для рендера всех товаров в каталоге, так что я его маплю в новый и показываю результат. Если вы про то, что я фильтрую геттер не в сторе, а в компоненте - а если нет гарантии, что в приложении нужно будет еще где то так же фильтровать исходный геттер, то зачем это делать в vuex? Store служит для работы с данными, которые будут использованы не в 1 компоненте. Поэтому я и работаю с этим геттером в компоненте, так как больше такая фильтрация нигде пока не используется. Как будет использоваться - перенесу в vuex этот метод. Далее. Я и так работаю с геттером. Если приложение инитится не как обычно, а со страницы отдельного товара мне в любом случае надо делать запрос к api. Другой вопрос, что не корректно было запрашивать ВСЕ товары, когда нужен только 1. Но api для получения 1 товара нет. Точнее я его не создал так как не предвидел:) записываю в real-time. В этом соглашусь и учту. Спасибо за советы!
@@gofrontend2220 что-то вы похоже не разобрались с vuex. в частности с геттерами. вы не фильтруете исходный массив, вы вытаскиваете из него нужный элемент. это можно и нужно делать в геттере, а не в компоненте. и в любом другом месте это так и будет работать. далее. вы не меняете и не получаете в мапе новый массив. вы мапой вытаскиваете элемент отдельный. причем таким себе способом
@@gofrontend2220 ну и наконец, если нужен инит, и нужно избежать нарушения dry, значит инит должен быть где в инициализации приложения. но не повторять одно и то же на разных роутах. я не знаю, где это происходит у вуя, я с ангуляр давно работаю, но наверняка есть более красивые варианты
Eugen Udalov такой способ получения товаров сделан ТОЛЬКО в случае, если первая открытая страница это карточка товара. Это и есть компонент с инитом. Этот урок был сделан для того что показать как класть и брать значения из урл, не более:) в случае если переход будет происходить из каталога, то я просто в роутер через params передам объект товара:) но еще раз говорю, целью было дать понимание как положить значение в урл через router.query, а потом забрать это значение где то еще. Я даже выпущу урок с рефакторингом. Поставим флаг, следящий за тем если инит происходит из карточки товара - тогда возьмем товар из урла. Если как положено - парамсом из каталога. Люди сами потом решат как им работать с данными. Я лишь показал как с урлом работать. Не более. Этот видео курс вообще далек от идеала best practice. Я просто хочу людям основы работы с данными, с api, router и vuex показать
@@ojgenn Критиковать всегда просто. Запишите свой ролик . С удовольствием посмотрю.
для тех кто недоумевает почему в конце в корзину попадет продукт без количество или с nan то исправьте код в вычисляемом свойстве product page :
let result = {}
let vm = this
this.PRODUCTS.map(function(item) {
if (item.article === vm.$route.query.product) {
result = item
}
})
//чтобы отображалось количество
let productData = {...result, quantity: 1}
return productData