След като сте изтеглили и инсталирали компонент вижте нашите откъси, които са предоставени на компонента:
- addComparison - фрагмент добавите елемент към списък за сравнение
- таблицата за сравнение фрагмент дисплей - CompareList
- getComparison - cnippet за показване на връзки към сравнението на наличните стоки навсякъде
По този начин, ние започваме както обикновено с парчета. Ние правим добавянето парче за сравнение (addComparisonTpl):
Ако се вгледате внимателно, ще видите, че картата ще бъде различен от това, което е на сайта. Това се случва - няма нужда да се плаши. На следващо място, обадете addComparison фрагмент в шаблона за продукт:
Listid - тази страница ID, на която ще се покаже таблицата за сравнение, ние ще го създадем по-късно
Id - е идентификатор и продукт, който се добавя към сравнението
Гражданска отговорност - парче е О, ние сме създали малко по-рано
Парче в listProductTpl, gridProductTpl и lookedProductTpl повикване, както следва:
Сега трябва да създадете шаблон за нашия списък за сравнение (сравнение на стоката):
- vendor.name - име на производителя,
- цена - цена
- статия - статия
- option.memory - опция "Памет" (ние го е създал в един от уроците на миналото)
- option.cpucore - опция "Брой на жилата" (ние го е създал в един от уроците на миналото)
След това трябва да се създаде ресурс с даден модел. Не забравяйте да промените идентификатора в парчета listProductTpl, gridProductTpl и lookedProductTpl и шаблони за вашия продукт, ако е различен от 20.
Сравни продуктите Вие трябва да работят, проверете. И ние просто трябва да донесе позоваване на сравнението в заглавната част:
За тази цел създаването на парче (getComparisonTpl):
И предизвикателства getComparison фрагмент в заглавната част и парчета headerInner:
Ето, аз се изброят параметъра задам само на мобилен конфигурация. За да конфигурирате други конфигурации, бих напиши обвивка фрагмент за него. С това ние ще направим в заключителната част на курса.
Тук по принцип и всички. Може би единствените разходи за коригиране на стиловете на страницата за сравнение.
Оценете тази статия:
Свързани статии