Направите тему Схопифи помоћу Ликуид мотора

Током последњих неколико недеља градио сам тему Схопифи за Виевпорт Индустриес , компанију Еллиот Јаи Стоцкс и ја основали смо прошле године. Ми смо изабрали Схопифи из више разлога:

  1. Омогућава нам продају дигиталних и физичких производа
  2. Потпуно је хостован, што значи да нема сервера о којима бисте требали бринути
  3. Подржава бројне мрежне прелазе који се лепо интегришу са нашом банком
  4. Заснован је на теми, што значи да можемо лако поново да користимо ХТМЛ, ЦСС и ЈаваСцрипт наше постојеће веб локације

Схопифи користи механизам шаблона који се зове Течност за излаз података из ваше продавнице у ваше предлошке. Течност је можда један од састојака Схопифи теме коју раније нисте користили и може бити неупотребљива. Али добра вест је да заиста није тако тешко започети.

Ако сте икада користили Смарти , ЕРБ или Гранчица , оно што следи биће вам познато. Ако не, не брините: ствар је само у учењу неколико једноставних правила. Након што додате Ликуид вештине у свој алат за веб развој, моћи ћете да започнете изградњу тема за клијенте у кратком времену.

Датотеке и фасцикле тема

Теме Схопифи нису ништа више од одређеног броја датотека (ХТМЛ датотеке са екстензијом .ликуид, ЦСС, ЈС, слике итд.) И директоријуми. Теме могу изгледати и радити како год желите: заиста нема ограничења. Ево основне структуре теме:



  • средства
  • цонфиг
  • распореди
  • тема.течност
  • фрагменти
  • предлошци
  • 404.течност
  • чланак.течност
  • блог.ликуид
  • колица.течност
  • сакупљање.течност
  • индекс.течност
  • стр.течност
  • производ.течност
  • сеарцх.ликуид

Помоћу ових датотека можете да креирате најосновније теме. Наравно, вероватно бисте желели да додате неки ЦСС, ЈаваСцрипт и неколико слика. Ставили бисте их у директоријум средстава. (Вреди напоменути да вам тренутно нису дозвољене подмапе у фасцикли дела.)

Да бисте сазнали више о томе како теме функционишу и да бисте сазнали више о директоријумима цонфиг и сниппетс, препоручио бих читање Тема из огреботине и Подешавање тема на Вики-у Схопифи.

Алтернативно можете пријавите се за бесплатни партнерски програм , направите пробну радњу и прегледајте једну од многих бесплатних тема доступних у административном делу ваше пробне радње - само идите у уређивач тема који се налази у менију Теме.

Мапирање УРЛ-ова на предлошке

Схопифи теме раде мапирањем тренутне УРЛ адресе на одређени образац. На пример, ако гледамо производ који има следећу УРЛ адресу ...

хттп://ввв.унитедпикелворкерс.цом/продуцтс/индианаполис

... тада ће Схопифи знати да користи ваш производ.течност шаблон. Из тог разлога би за своје предлошке требало да користите само горе наведена имена датотека.

Поред тога што Схопифи зна који шаблон треба приказати у односу на тренутну УРЛ адресу, чини нам доступним и низ врло специфичних променљивих. Они су познати као „променљиве шаблона“ и омогућавају нам приказивање података у нашим предлошцима.

На пример, у нашем предлошку продуцт.ликуид имамо приступ тачно именованом производа променљива. То значи да у наш образац можемо унети име, опис, цену и доступност нашег производа. Користићемо комбинацију течности и променљивих шаблона да бисмо попунили наше предлошке подацима који се односе на наше производе.

Потпуну листу доступних променљивих шаблона посетите Марк Дунклеи'с Схопифи Цхеат Схеет .

Течност: основе

Ликуид је ту да нам олакша живот као дизајнера тема. Један од главних начина на који то чини је употреба распореда. Изгледи су идеални за укључивање уобичајених елемената странице, као што су заглавље, главна навигација, подножје итд.

У мојој горњој структури директоријума приметићете датотеку која се зове тема.течност у фасцикли распореда. Тхеме.ликуид можете замислити као наш главни образац. Сви наши други предлошци, као што је продуцт.ликуид, приказани су унутар овог главног предлошка. Ако желите, можете имати више изгледа, али подразумевани увек треба да се зове тхеме.ликуид.

Нисам видео датотеку тхеме.ликуид компаније Унитед Пикелворкерс, али можете да замислите да садржи ознаку за подручја наведена доле црвеном бојом.

Схопифи

Датотека тхеме.ликуид компаније Схопифи поставља саставне делове изгледа

Ево како би могао изгледати основни лаиоут тхеме.ликуид:

  1. < хтмл >
  2. < глава >
  3. {{цонтент_фор_хеадер}}
  4. < наслов > Наслов странице иде овденаслов >
  5. глава >
  6. < тело >
  7. {{цонтент_фор_лаиоут}}
  8. тело >
  9. хтмл >

Приметићете две фразе умотане у двоструке коврџаве заграде: {{цонтент_фор_хеадер}} и {{цонтент_фор_лаиоут}} . Ово су наши први примери течности у акцији.

Схопифи често користи {{цонтент_фор_хеадер}} за додавање одређених датотека у одељак документа: на пример, додавање кода за праћење. {{цонтент_фор_лаиоут}} ће се појавити садржај нашег шаблона мапираног УРЛ-ом. На пример, ако прегледамо страницу производа, наша датотека продуцт.ликуид ће заменити {{цонтент_фор_лаиоут}} у нашој датотеци изгледа.

најскупљи лаптоп на тржишту

Разумевање производа.течност

Сад кад смо прошли кроз основе распореда, време је да погледамо шаблон. Продавнице се тичу производа, па погледајмо их производ.течност .

Ево врло једноставног, али функционалног примера шаблона продуцт.ликуид.

  1. < х2 > {{продуцт.титле}}х2 >
  2. {{ Опис производа }}
  3. {% ако је продуцт.аваилабле%}
  4. < облик ацтион = '/ царт / адд' метход = 'пост'>
  5. < изаберите ид = 'продуцт-селецт' наме = 'ид'>
  6. {% за варијанту у продуцт.вариантс%}
  7. < опција валуе = '{{вариант.ид}}'> {{вариант.титле}} - {монеи}опција >
  8. {% ендфор%}
  9. изаберите >
  10. < улазни типе = 'субмит' наме = 'адд' валуе = 'Адд то царт' ид = 'пурцхасе' />
  11. облик >
  12. {% елсе%}
  13. < стр > Овај производ није доступанстр >
  14. {% ендиф%}

Овде је на делу низ кључних концепата Ликуид. Погледајмо их редом.

Оутпут

Први ред кода садржи фразу {{продуцт.титле}} . Када се прикаже, ово ће приказати наслов производа, који као што сада знате одређује УРЛ. У доњем примеру Унитед Пикелворкерс, наслов производа је једноставно „Индианаполис“.

Течност

Фраза Ликуид {{продуцт.титле}} на делу у продавници Унитед Пикелворкерс

Ликуид користи тачкасти формат синтаксе. У овом случају, {{продуцт.титле}} се изједначава са променљивом предлошка производа и њеним атрибутом наслова. Опис производа можемо дати на исти начин користећи {{ Опис производа }} .

То је у течном смислу познато као оутпут . Сав излаз означен је двоструким коврџастим заградама, како следи: {{ваш_излаз}}.

Логика

У следећем реду кода приметићете изјаву у завојној загради праћену са%: у овом случају, {% ако је продуцт.аваилабле%} . Ово је још један важан концепт у течности познат као логика . Даље, приметићете {% елсе%} и на крају изјаве {% ендиф%}.

Ово ако изјава омогућава нам да диктирамо шта ће наш шаблон приказивати на основу једног или више услова: у овом случају, да ли је наш производ доступан или не. То заправо каже: „ако је наш производ доступан, покажите информације које се односе на њега; у супротном прикажи поруку којом обавештаваш корисника да је нема на залихама “.

Све логичке изјаве у Ликуид-у користе ознаку процента коврџаве заграде, тј. {% Иф ...%}. Само не заборавите да на одговарајући начин затворите изјаве или ћете наићи на проблеме. На пример:

  1. {% ако је продуцт.аваилабле%}
  2. Прикажи дугме Додај у корпу овде
  3. {% елсе%}
  4. Прикажите поруку о томе када ће производ бити следећи пут доступан
  5. {% ендиф%}

Филтери

Течност нам омогућава да манипулишемо својим излазом на неколико начина. Једна од њих је употреба филтера. Садржај који уђе у филтер изаћи ће на други начин измењен на специфичан начин.

Гледајући горњи пример продуцт.ликуид, приметићете {вариант.прице} . Варијанта је термин који се користи за описивање варијације производа: на пример, различите боје и величине. Овде је занимљиво да помоћу филтера мењамо излазну цену - у овом случају, помоћу новчаног филтера. То ће резултирати додавањем симбола валуте продавнице на предњу страну цене.

Остали филтери укључују стрип_хтмл , који ће из датог дела текста уклонити све ХТМЛ ознаке и уцасе, што ће га претворити у велика слова.

Такође можете заједно да придружите филтере. На пример:

  1. {стрип_хтмл}

У овом случају, узимамо атрибут садржаја променљиве предлошка чланка и прослеђујемо га у филтер стрип_хтмл и на крају у филтер за скраћивање. Приметићете да нам скраћени филтер омогућава да одредимо колико дуго желимо да буде коначни излаз: у овом случају 20 знакова.

Филтери нам такође омогућавају брзи рад на креирању елемената скрипте и слике у предлошцима. Ево врло брзог начина коришћења филтера за излаз слике са придруженом алт ознаком:

  1. {имг_таг: 'Логотип сајта'}

Коришћење овог у нашој теми Схопифи резултираће приказом следећег имг елемента у нашем предлошку:

  1. < имг срц = '/ филес / схоп / иоур_схоп_нумбер / ассетс / лого.пнг' алт = 'Логотип сајта' />

Тхе УРЛ_активе филтер је веома користан јер враћа пуни пут до тренутне теме средства директоријум. Коришћење овог филтера омогућава вам да примените своју тему у више продавница и да не бринете о путањама.

Шта је следеће?

Надам се да вам је ових неколико примера показало да Ликуид није толико компликован. Наравно, можете учинити много више с тим, али савладавањем излаза, логике и филтера на добром сте путу да разумете већину онога што ће вам бити потребно за изградњу Схопифи теме.

Даљи ресурси и инспирација