Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Magento для дызайнераў: Частка 5

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Magento for Designers.
Magento for Designers: Part 4
Magento for Designers: Part 6

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Magento ўзрушаюча магутная платформа электроннай камерцыі. У гэтым міні-серыяле, мы даведаемся, як пачаць працу з платформай, пазнаючы тэрміналогіі, наладжваючы краму і ўсе звязаныя з ім аспекты яго і, нарэшце, даведацца, як наладзіць яго, каб зрабіць нашу ўласнымі.

У пятай часткі, мы будзем будаваць адну з асноўных поглядаў нашай крамы - інфармацыйны прадукт старонкі. Узбуджаныя? Давайце пачнем!


поўная серыя


Хуткі Recap

У апошняй частцы, мы заклалі аснову для тэмы, ствараючы паўтараюцца часткі тэмы і, па сутнасці, якія вызначаюць агульную кампаноўку тэмы.

Мы таксама ўзялі практычны погляд на тое, як тематизации ў Magento працуе, праходзячы праз як будуецца макет, як працуюць блокі і як розныя часткі галаваломкі падыходзяць разам.


Што мы будуем сёння?

Сёння мы будзем будаваць індывідуальны выгляд прадукту старонкі. Гэтак жа, як і раней, зыходныя файлы, як пярэдні канец і задні канец, ўключаны. Вы можаце выкарыстоўваць яго, каб убачыць, як выглядае старонка, але за межамі гэтага, тэма павінна выглядаць зламаная так, вы ведаеце, мы не закранулі астатніх поглядаў яшчэ. Таму, пакуль мы будуем астатнія, імкнуцца не выходзіць на вуліцу з нашай пясочніцы.


Мэты на старонцы

Наша мэта для гэтай канкрэтнай старонкі з'яўляецца адносна просты. Мы хочам, каб старонкі без празмернасцяў, што робіць толькі прадметы першай неабходнасці. Такім чынам, я намаляваў кароткі спіс элементаў, якія я думаю, што гэта неабходна:

  • Загаловак прадукту: Даволі відавочна,
  • Магчымасць паказаць малюнак прадукту
  • Хуткі і поўны агляд
  • Наяўнасць і кошт прадукту і, нарэшце,
  • Кнопку Дадаць у кошык, каб змясціць яго ў кошык

Вось і ўсё. Я хачу, каб захаваць яго як мага больш простым і, такім чынам, вырашыў не больш чым зрабіць гэта. Пасля таго, як вы даведаліся агульныя прынцыпы, не саромейцеся дадаваць столькі выдасканаленай функцыі, як гэта магчыма.


Basic Look

Старонка ў асноўным павінна выглядаць так:


Крок 1 - HTML,

Спачатку мы паглядзім на HTML для толькі змястоўнай часткі. Я мяркую, што вы даволі свабодна ў HTML і CSS, так што я буду паказваць на даволі важныя часткі.

Перш за ўсё, звярніце ўвагу, што я абгарнуў малюнак прадукта з DIV, каб зрабіць яго прасцей дадаваць новыя функцыі ў будучыні. Выкажам здагадку, вы хочаце хутка дадаць подпіс да выявы ў будучыні, такім чынам, дазволіць нам дадаць гэта нашмат хутчэй.

У нас ёсць яшчэ адзін Div элемент, што ўтрымлівае даступнасць і інфармацыя аб цэнах, а таксама дадатак да кнопкі кошыка. Мы будзем гэта навесці бляск з невялікай колькасцю CSS3 ў трохі.

Астатняя частка HTML вельмі простая. Назва знаходзіцца ў раздзеле h1, а асобныя загалоўкі раздзелаў займаюць h2. Кароткі агляд укладзены ў пункце а поўны агляд займае DIV.Мы можам перайсці да фармавалай часткі ў цяперашні час.

Мы можам перайсці да фармавалай часткі ў цяперашні час.


Крок 2 - CSS

Нічога асаблівага тут. Вельмі просты CSS для размяшчэння элементаў у пазіцыі.

Я таксама выкарыстоўваў трохі CSS3, каб зрабіць кнопкі трохі лепш на выгляд.


Крок 3 - Стварэнне нашага catalog.xml файла

Як я ўжо казаў у папярэдняй часткі, кожны модуль атрымлівае свой уласны файл XML, каб дыктаваць, якія пункты ўключаць і агульнае размяшчэнне старонкі. На старонцы мы будуем сёння абапіраецца на файл з імем catalog.xml, каб вызначыць яго змест і структуру.

Гэты файл павінен знаходзіцца ў тэчцы макета таму давайце створым файл XML і яго імя каталога.

Поўны файл на сённяшні дзень выглядае так. Я растлумачу кожны біт па частках ніжэй.

Ігнаруйце зыходныя XML і версію макета аб'явы. Яны не маюць значэння для нас. Яны не маюць значэння для нас.

Па-першае, мы дазваляем сістэме ведаць, што мы маем намер змяніць выгляд прадукту частка сістэмы. Гэта адбываецца таму, што catalog.xml знаходзіцца макет для шэрагу іншых поглядаў і таму вельмі важна, што мы паказваем, які выгляд мы маем намер змяніць.

Цяпер мы гаворым Magento, каб загрузіць файл 1column.phtml ў якасці асноўнага галоўнага шаблону для гэтага пункту гледжання. Гэта адбываецца таму, што кожны асобны выгляд можа выкарыстоўваць наканаваных структуру. Напрыклад, ваша хатняя старонка можа выкарыстоўваць вельмі складаныя прыстасаваныя структуры, старонка прадукту двайны калонкі і старонку пошуку аднаго макета слупка.

Калі не пазначана іншае, ён будзе загрузіць шаблон па змаўчанні, указаную ў page.xml. Так як мы выкарыстоўваем яго для ўсяго астатняга, гэтая частка з'яўляецца залішняй, але калі вы змяняеце гэты шаблон для асабістага выкарыстання, рэдагаванне імя файла нашмат прасцей, чым даданне кавалкі XML у файл макет.

А зараз мы сутыкаемся з адной з niftier частак Magento. Так, мы можам кінуць усё з нашага пункту гледжання канкрэтнай CSS у адзін гіганцкі файл CSS, але мы не пячорныя, мы? Крыкі некалькіх запытаў HTTP у баку, гэты метад дазваляе нам аптымізаваць наш CSS лепш.

Па-першае, мы набываем спасылку на галаўной часткі файла, а затым ўставіць нашу старонку канкрэтнага зместу ў ім. Тут я уставіўшы файл з імем product.css, які змяшчае ўсе старонкі канкрэтных CSS мы глядзелі на вышэй.

Звярніце ўвагу, што вы не абмежаваныя ў CSS. У тым ліку JS і іншых актываў магчыма таксама.

Цяпер мы просім Magento выкарыстоўваць пэўны шаблон для часткі змесціва старонкі

Гэты блок вызначае ўсе асобныя блокі ўнутры асноўнага змесціва блока. Па сутнасці, мы выкарыстоўваем індывідуальныя шаблоны для адлюстравання прадукту выявы, агляд і апісанне, наяўнасць / кошт і, нарэшце, дадаць у кошык функцыянальнасці.

І з гэтым, наш файл базы catalog.xml завершана.


Крок 4 - Стварэнне нашага галоўнага шаблону

Добра, зараз, калі мы вызначылі наш макет мы можам перайсці да стварэння catalog/product/view.phtml файла, які мы, паказаны ў якасці асноўнага шаблону для часткі кантэнту ў XML раней.

Гэты файл трохі адрозніваецца ад шаблону шкілета, які мы стварылі ў апошняй частцы, таму што мы будзем дадаваць некаторыя невялікія рэчы адразу замест таго, каб ісці па шляху шаблону, каб пазбегнуць ўздуцці разам з кропельку API выклікаў, каб дапамагчы нам.

Калі ўзяць хуткі погляд, вы заўважыце, што мы робім шэраг getChildHtml патрабуе, каб набыць гэты кантэнт блокаў. Яны працуюць гэтак жа, як, як чакалася, і ўтрыманне гэтых утрыманняў будуць пакрытыя крыху пазней ніжэй.

На дадзены момант, мы не павінны ведаць, што гэта значыць. З пунктам гледжання непрафесіяналам, хоць, па сутнасці, мы просім Magento для захоўвання інфармацыі канкрэтнага прадукту, каб мы маглі апрацаваць яго, а затым адлюстроўваць яго на гэтай старонцы.

Тут мы выкарыстоўваем адзін з метадаў API Magento, каб дынамічна генераваць URL формы неабходна апублікаваць ст.

Мы выкарыстоўваем іншую метадзе Magento, каб атрымаць назва прадукту непасрэдна.

І зноў, так як кароткі агляд будзе проста прапановай ці два, я аддаю перавагу імпартаваць яго наўпрост, а з дапамогай шаблону. Мы выкарыстоўваем тую ж самую функцыю, якую мы выкарыстоўвалі, каб атрымаць тытул.


Крок 5 - Стварэнне шаблонаў для нашых блокаў

З усімі асноўныя часткі зроблены, мы можам засяродзіцца на асобных блоках ў цяперашні час. Цяпер, калі мы ўжо мелі справу з гэтым пры пабудове асноўнага шаблону, гэта павінна быць нашмат прасцей.

Мы будзем вырашаць кожны ў парадку іх з'яўлення ў кодзе:

прэстыж прадукцыі

getChildHtml('media') карты непасрэдна ў catalog/product/view/media.phtml. Наш файл выглядае так:

Некаторыя простыя PHP-код. Мы выкарыстоўваем дапаможныя метады для атрымання малюнка прадукту, а затым вынесці яго на экране.

Наяўнасць / Цана

getChildHtml('product_type_data') карты непасрэдна ў catalog/product/view/type/simple.phtml. Наш файл выглядае так:

Спачатку праверце, ці даступны або няма, а затым выводзіць неабходны HTML элемент. Атрымліваючы цану прадукту простага спосабу званок!

Дадаць у кошык

getChildHtml('addtocart') карты непасрэдна ў каталогу catalog/product/view/addtocart.phtml. Наш файл выглядае так:

Як лагічна, мы правяраем, ці з'яўляецца элемент на продаж перад высновай мы шуканы HTML. Гэта простая кнопка, як гэта відавочна.

Апісанне Прадукта

getChildHtml('description') карты непасрэдна ў catalog/product/view/description.phtml. Наш файл выглядае так:

Падобна таму, як мы ўключылі кароткі агляд, мы выкарыстоўваем убудаваныя метады Magento, каб атрымаць неабходную інфармацыю. Мы правяраем на існаванне апісанні, перш чым мы зрабіць яго.

У выпадку, калі вам цікава, я, як правіла, як правіла, ўключаюць у сябе апісанне асобна з дапамогай шаблонаў у асноўным таму, што ў шаблонах вытворчасці вы амаль заўсёды будзеце пасля працэсіі апісанне ў некаторым родзе. У тых выпадках, гэта лягчэй падзяліць гэтую логіку прэч на свой уласны шаблон. Кароткі агляд, з другога боку, як правіла, вельмі малы і, такім чынам, уключаны непасрэдна.


Што мы будзем будаваць у наступнай частцы

.. гэта цалкам залежыць ад вас. Ёсць цэлы шэраг відаў, якія вы маглі б распрацаваць, але гэта даволі саманадзейна мяне, каб выбраць адзін. Такім чынам, я прашу вас, чытач, прапанаваць від на пакрыццё ў наступнай частцы праз каментар у раздзеле каментароў ніжэй. Не забудзьцеся сказаць мне што, каб пакрыць далей!


апошняе словаІ

мы зрабілі гэта! Сёння мы стварылі першае прадстаўленне нашай карыстацкага Magento тэмы, від прадукцыі разам з якія выглядаюць як Magento дазваляе нам дадаваць старонак канкрэтных актывы і змест. Спадзяюся, гэта было карысна для вас, і вы знайшлі яго цікавым. Бо гэта даволі новая тэма для многіх чытачоў, я буду ўважліва сачыць за падзел каментары так перазвон там, калі ў вас узніклі якія-небудзь сумневы.

Пытанні? Добрыя рэчы, каб сказаць? Крытыцызму? Хіт падзелу каментароў і пакінуць мне каментар. Шчаслівы кадавання!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.