Николай Ланец
22 февр. 2015 г., 4:56

Видеоурок Как натянуть верстку на ShopModxBox

Представляю вашему вниманию запись недавнего урока с одним учеником, с позволения которого запись и публикуется (за что ему большое спасибо!). К сожалению там не совсем все записалось, в честности не дописалось как мы делали двухуровневое меню, но в общих чертах этот процесс записан. И довольно подробно описано как мы верстку натягивали. В процессе все подробно комментировалось. Натягивали верстку на последнюю версию сборки ShopModxBox-2.6.0, так что рассматривается процесс именно интеграции расширяющего скина, а не копирование и доработка базового, так что видео должно быть полезным многим.
P.S. Записывалось в разрешении 1600+ точек, так что на меньших расширениях качество видео может быть серьезно хуже.
В Wayfinder шаблон для row, содержащего вложенный ul, называется parentRowTpl
Да, в курсе. Там просто не все записалось. Мы меню-то сделали, но запись вот прервалась на этом месте.
я с этим parentRowTpl уже третий день бьюсь… «не выходит каменный цветок у Данилы-мастера» обрадовался, думал видео поможет с трех и более уровневым меню справиться, и тут облом…
Ну, так звезды сложились… Завтра постараюсь выделить немного времени, сделать в сборке многоуровневое меню. Выложу результат.
Дай Бог вам здоровья и в ручки и в ножки и между ног немножко…
Спасибо. Здоровье никогда не лишнее.
Здравствуйте, Николай. Очень уважаю Ваше стремление быть хорошим специалистоми и помогать людям. Я часто посещаю Ваш сайт и мне он нравится и помогает в работе. Спасибо. Исправьте, пожалуйста, ошибку — слово «расширение» замените на «разрешение». Физические параметры видео и растровых изображений исчисляются разрешением (количеством пикселей либо точек на дюйм или сантиметр), а не расширением. Успехов Вам в бизнесе.
крутотень, всё понятно, всё знакомо) и сразу вопрос: как в modxSDK в редактировании документа открыть окно «найти и заменить»?
Два раза Ctrl+F. Это уже функционал редактора Ace, так что можете гуглить его манны. Там только прикол есть — пока не нажмешь хотя бы раз Найти (или Enter), Replace all не работает.
а как расширить вот это: у документа Каталог вызов сниппета
[[!smarty?tpl=`shop/catalog/list.tpl`]]
как здесь указать tpl из скина? можно конечно рядом другой создать, но должен же быть кошерный способ брать всё из скина?
Вам что именно надо расширить? [[!smarty?tpl=`shop/catalog/list.tpl`]] — это никак не расширить, это есть суть строка. А вот shop/catalog/list.tpl расширить можно, все тем же способом: в своем скине создавайте расширяющий шаблон shop/catalog/list.tpl и делайте в нем что хотите.
некоторые шаблоны не расширяются, сейчас вот пытаюсь shop/basket/overview/index.tpl скопировал содержимое в свой скин, но он почему-то не подключается… еще какие-то были, вспомню — напишу
Смотри внимательней, может названием ошибся. Еще не было такого шаблона, который не расширяется, я многие перепробовал (включая shop/basket/overview/index.tpl).
Простите за, может быть, глупый вопрос, но откуда берется вкладка PROJECT SHOP? не могу найти ее у себя.
Это в modxSDK выбирается проект. ?
Проект тянется со сборкой ShopModxBox. Можете свой проект создать.
Понятно, переустановил этот пакет и тогда появилась закладка, до этого рабочее поле было просто пустое Спасибо за ответ
В видео инструкции все понятно и просто, но только до момента формирования меню :) Нет ли такой инструкции по выводу каталога товаров, на пример? С каталогом товаров как то не все так однозначно. На данном этапе получилось вывести товары на страницу, но почему то только НОВИНКИ Если нет инструкции то может подскажите где копать?
Нет ли такой инструкции по выводу каталога товаров, на пример?
Нету. Копайте Wayfinder и Bootstrap.
На данном этапе получилось вывести товары на страницу, но почему то только НОВИНКИ
Смотрите какой процессор вызывается. web/catalog/products/getdata — это товары получает. web/catalog/products/hot/getdata — только новинки.
Bootstrap не использую
Смотрите какой процессор вызывается. web/catalog/products/getdata — это товары получает. web/catalog/products/hot/getdata — только новинки.
В том то и дело что процессор не HOT
{processor action="web/catalog/category/products/getdata" ns="modxsite" assign=result}
Всё, разобрался, брал категории вместо товаров
Этот процессор не категории получает, а товары по заданной категории.
{block name=content} {processor action="web/category/catalog/products/getdata" ns="modxsite" assign=result} {* Набиваем через единый шаблон листинга *} {include file="shop/catalog/list/fetch.tpl"} {/block}
Вот такой был блок, выводил только новинки теперь вот так
{block name=content} {processor action="web/catalog/products/getdata" ns="modxsite" assign=result} {* Набиваем через единый шаблон листинга *} {include file="shop/catalog/list/fetch.tpl"} {/block}
Выводит все товары, но в конце всеравно еще и новинки Пока не врублюсь что к чему
И второй вопрос а где цены хранятся для каждого товара, ТВ — нет, где тогда?
Коля, привет. Впервые использовал новую сборку. Я переношу сайт, на котором нет Bootstrap, поэтому layout.tpl переписал без {extends file='[main]layout.tpl'} В самом конце подгрузил laertify.js и app.js. В результате товары добавляются, но окошко alertify не выскакивает. В консоли ошибок нет. Что может быть? Там никаких тонкостей нет скрытых?
Саша, привет! Так алертифи требует наличия бутстрапа. Без него не будет выводиться. Бутстрап обязателен.
Разобрался. Дело не в бутстрапе, нетего в верстке. Я просто подключил JSы, а css нет (он у тебя через @include включается в основном css, в шаблоне не упоминается — поэтому и пропустил). Сейчас все работает: http://maa1977p.bget.ru
Странно… Я вроде как получал уведомления что он требует. А может это я от бутстрапа получал что требует jQuery. В любом случае, работает — ну и здорово :)
Вопрос по ценам так и остался открытым У меня нет закладки Данные товара, как ее получить?
Должен быть тип документа — Товар. joxi.ru/VrwoaO9Ib6pOrX
Конечно все так и есть это стандартная сборка я просто переименовал документы и все…
Киньте доступы в админку мне на почту, гляну что и как там.
У вас просто не хватает файлов: joxi.ru/8AnXDv9uX3ypmO Не знаю по какой причине их там нет, но их там нет. Обновил пакет modxSite и почему-то и файлы других пакетов появились там. Может что-то не так с настройками прав файлов.
Разобрался, меня смутила в видео фраза — При установке пакета могут быть ошибки, но это нормально… оказалось не нормально и ошибки были с доступами в директории и правами на запись в них, открыл права на запись все установилось и теперь все на месте
меня смутила в видео фраза — При установке пакета могут быть ошибки, но это нормально…
При этом я показывал какие именно ошибки нормально. Речь шла о MODX-ошибках уровня Debug и Warn. Невозможность записать файлы — это уже php-ошибки.
Да конечно, это моя вина
Мелочи. Заработало — и ладушки.
<div class="col-md-{12/$cols}"> <div class="row"> <div class="col-md-4"> {* Здесь нам не приходится проверять фото на наличие, так как это выполняется на уровне процессора. *} <a href="{$image}"> <img src="{$src}" title="{$object.pagetitle|@escape}" align="left" class="img-responsive"/> </a> </div> <div class="col-md-8"> {$smarty.block.parent} </div> </div> </div>
../products/list/layout.tpl — Шаблон для вывода карточки товара в списке
Почему и зачем, здесь только картинка, а все остальное берется из
{$smarty.block.parent}
и откуда это берется что то совсем здесь не понятно?!
И еще, научите как подгонять картинки, делать ресайз картинок, вчера объясняли, но видео не записалось, а я что то забыл, сори
{$params = [ "parent" => 163, "limit" => 4 ]}
где подсмотреть полный набор возможных параметров
и как вывести определенный документ, то есть не дочерние доки документа, а parent документ с определенным ID
где подсмотреть полный набор возможных параметров
в процессоре и его родителях
и как вывести определенный документ
{$params = [ 'where'=>['id'=>444], 'current'=>1 ]
where строится по правилам xpdo, параметр current вернет в object не массив, а единичный объект
класс спасибо тогда почему не выводит ничего такая конструкция
{block name=shipping} {$params = [ "where" => ["id" => 169], "current" => 1 ]} {processor action="web/resources/getdata" ns=modxsite params=$params assign=result} <span class="title1" id="anchor4">{$result.pagetitle}</span> <div class="box_descript"> <span class="title">{$result.longtitle}</span> {$result.content} </div> {/block}
хотя проверяю массив все верно — один документ тот что нужен… странно
туплю
$result.object.pagetitle
так работает
{* Здесь нам не приходится проверять фото на наличие, так как это выполняется на уровне процессора. *}
Наличие картинки можно проверить простым ифом
{if $image}
Почему и зачем, здесь только картинка, а все остальное берется из {$smarty.block.parent} и откуда это берется что то совсем здесь не понятно?!
Смотрите какой шаблон расширяет ваш этот указанный шаблон. Вот {$smarty.block.parent} — это блок из родительского шаблона. К примеру у вас есть шаблоны t1.tpl и t2.tpl. t2.tpl расширяет шаблон t1.tpl.
/* шаблон t1.tpl*/ {block name=some_block} <p>Я родительский блок</p> {/block}
/* шаблон t2.tpl, расширяющий шаблон t1.tpl*/ {extends "t1.tpl"} {block name=some_block} <p>А вот здесь будет выводиться содержимое родительского шаблона</p> {$smarty.block.parent} <p>Конец шаблона t2.tpl</p> {/block}
Результат при вызове шаблона t2.tpl:
<p>А вот здесь будет выводиться содержимое родительского шаблона</p> <p>Я родительский блок</p> <p>Конец шаблона t2.tpl</p>
где подсмотреть полный набор возможных параметров
Изучите внимательно этот топик, и не раз. Там ответы на многие вопросы.
туплю $result.object.pagetitle так работает
Да, так правильно.
Пример:
{$image = $object.image} {$thumb = $modx->runSnippet('phpThumbOf', [ "input" => $image, "options" => "&far=0&w=230&h=140" ])} <img src="{$thumb}" />
рекомендую подобные опыты ставить с использованием консоли — сразу результат видно весь :)
Как мне выбрать и подключить только те скрипты и стили которые требуются для магазина, корзины и убрать все лишнее, мне на пример не нужен бутстрап, личный кабинет, регистрация ну и еще кое что, посоветуйте
Бутстрап вы еще можете отключить (переопределить блок bootstrap). А вот скрипты отключать не имеет смысл, ибо не будет работать корзина и т.п. Остальное все в своих шаблонах правите.
Можно пару слов как настроить пагинацию.
просто не включай их :) чисто для магазина из js нужны только jquery, app.js и alertify (js и css) для информера. Остальное — на твое усмотрение.
{processor action="web/getdata" ns=modxsite assign=result} {include "common/pagination/pagination.tpl"}
Если результат процессора в другую переменную набиваете, то указывать явно надо в инклюде. Например:
{processor action="web/getdata" ns=modxsite assign=my_array} {include "common/pagination/pagination.tpl" result=$my_array}
Листы появились но не переключаются
при вызове процессора надо передавать параметр
'page'=>$smarty.get.page
спасибо заработало последний на сегодня вопрос как фильтровать товары по производителю на пример или цене тоже в двух словах что бы напомнить урок спасибо огромное заранее
по цене — процессор web/catalog/products/getdata указываешь параметр 'where'=>['Product.sm_price:<'=>4000] или 'where'=>['Product.sm_price:>'>=4000,'and:Product.sm_price:<'=>7000] и т.п.
по производителю по tv фильтровать надо — посмотри web/catalog/products/getdata будет что-то вроде
if($b=(int)$this->getProperty('brand')){ $c->innerJoin('modTemplateVarResource', 'brand', "brand.contentid = {$this->classKey}.id AND brand.tmplvarid = 13 AND brand.value={$brand}"); }
$brand — название производителя (у меня произодитель в tv с id=13)
Упс…
...AND brand.value={$brand}"
заменить на
...AND brand.value={$b}"
$b — у меня id производителя, но это на вкус
Не пойму почему запросы на добавление товара в корзину в базовом шаблоне и в моем оказались разные хотя форма сохранена как в базовом
форма
<form action="" method="post"> <input type="hidden" name="product_id" value="{$object.product_id}"/> <input type="hidden" name="action" value="add_product"/> <input type="hidden" name="quantity" value="1" /> <span class="goods_item_title">{$object.pagetitle}</span> <span class="goods_item_price">{$object.sm_price|number_format:0:".":" "} <span>руб.</span></span> <button class="goods_item_button btn btn-success" type="submit">ЗАКАЗАТЬ!</button> </form>
базовый —
test.ru/assets/components/basket/connectors/connector.php?action=products/add&product_id=20&quantity=1
мой —
test.ru/?action=add_product&product_id=16&quantity=1
соответственно ничего не добавляется в корзину
разобрался форма должна обязательно быть окружена дивом
<div data-smodx-productcls="listproduct"></div>
смотри внимательно оформление в html-верстке. особенно атрибуты class и data-shopmodx… — по ним js привязывается. Я тоже сперва напортачил с этим. У тебя скорее всего не ajax запрос получается, а обычный post — вот и подставляется путь из form action, а не из js.
Да, все верно, надо еще передавать GET-параметр с номером страницы.
'where'=>['Product.sm_price:>'>=4000,'and:Product.sm_price:<'=>7000]
Вот так кашерней:
'where' => ["Product.sm_price between 4000 and 7000"]
Знаю. Вчера на ходу пытался построить запрос — не вышло, а в rtfm рекомендовали двойное условие. Его и написал :)
Николай приветствую! Можно ли где-то помимо демо шаблона почитать про
атрибуты class и data-shopmodx
Приветствую! К сожалению нет. Но этих атрибутов не много и они локальные. Просто смотрите базовые шаблоны.
Шаблон menu.tpl добавляем шаблон для подпунктов и убираем data атрибут для открытие по клику.
{block menu_params} {$params = [ "parentRowTpl" => '@CODE <li[[+wf.id]] class="dropdown"> <a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]] class="dropdown-toggle">[[+wf.linktext]] <span class="caret"></span></a> [[+wf.wrapper]] </li>', "rowTpl" =>'@CODE <li class="dropdown"> <a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a> </li>', "outerClass" => 'nav navbar-nav', "innerClass" => 'dropdown-menu' ]} {/block}
assets/components/modxsite/templates/shopmodx/bundle/styles/styles.css Чтобы меню раскрывалось при наведении мыши в конец дописываем
.dropdown:hover > .dropdown-menu { display: block; }
Дальше сами думайте, по сути это уже допиливание bootstrap ройте в этом направлении, modx тут не причем.
Николай добрый день. Подскажите никак не могу понять, как вывести тв-параметр подобно
{$object.pagetitle}
Если данные получены через getdata-процессор, то {$object.tvs.tv_name.value} Сделайте вывод массива через {print_r($object, 1)} и смотрите что в нем есть.
Спасибо и еще моментик такой. При отправке обратной связи получаю в письме на почту табличку fullname email phone message captcha feedback_submit manager_mail_subject
Как настроить внешний вид обратного письма и в частности, Переименовать на русски и убрать часть лишних колонок к примеру captcha feedback_submit manager_mail_subject
Смотрите в процессоре какой смарти-шаблон инклюдится для отправки почты и правьте его или создавайте новый и его указывайте.
Добрый день, у меня почему то не подключаются мои стили.Причем бутсраповские шаблон видит.Вот head
{extends "[main]layout.tpl"} {block name=head} <head> {block name=meta} {* Заголовок специально в блок загнан, чтобы в разных шаблонах его можно было бы переопределить *} <title>{block name="title"}{$modx->resource->longtitle|default:$modx->resource->pagetitle} | {$site_name}{/block}</title> {snippet name="MetaX@MetaX"} {/block} {block name=bootstrap} {block name=bootstrap_meta} <meta name="viewport" content="width=device-width, initial-scale=1.0"> {/block} <!-- Latest compiled and minified CSS --> {block name=bootstrap_theme append} <link href="{$pre_template_url}css/bootstrap.min.css" rel="stylesheet"> {/block} {/block} {block name=shopmodx_scripts} {/block} {block name=fonts} {* fonts *} <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300&subset=latin,cyrillic' rel='stylesheet' type='text/css'> {* eof fonts *} {/block} {block name=style append} <link href="{$pre_template_url}css/styles.css" rel="stylesheet"> <link rel="stylesheet" href="{$pre_template_url}css/responsive.css"> {/block} {block name=headers}{/block} </head> {/block}
У нас в основном шаблоне нет блока style. Есть styles. Нельзя в переопределяющем шаблоне прописать свой контент и блоки не иначе как в имеющихся в родительском шаблоне блоках.
скажите пожалуйста, сейчас сборка ShopModXBox уже имеет все функции, чтобы на ней можно было делать полноценный сайты с каталогом товаров и фильтрами как это можно делать в minishop2 или для этого нужно быть уже более продвинутым программистом и знать ядро ModX? В минишоп2 можно было обходиться без php.
ShopModxBox по прежнему ориентируется на программистов. Так что если не хотите изучать пхп, то конечно же лучше не браться за нее. И к слову, если минишоп2 позволяет вам делать полноценные каталоги, почему вы не продолжаете делать их на нем, а спрашиваете про ShopModxBox? Просто интересно.
здравствуйте Николай. Постараюсь ответить доходчиво. На минишопе делаю каталоги, потому что минишоп показался мне доступным для понимания после первого знакомства с modx. По идее в нем меня все устраивает, поскольку пока не делаю магазинов с многотысячным ассортиментом и большим числом ТВ. В то же время слушал ваш обзор о сравнении ShopModXBox и ms2 и захотел склониться к выбору ShopModxBox, но поскольку в тот момент только знакомился с ModX получив первый заказ, мне было проще использовать ms2. У вас использовалось Smarty и была ориентировка на php программистов, а я не готов был так быстро во все вникнуть.
Сейчас же возникло желание повысить свой уровень и начать делать более быстрые и оптимизированные сайты используя навыки программиста. php то я знаю, просто не знал как его применить ранее изучая modx по обычным видео урокам про чанки и готовые снипеты. Тем более еще с вашим коллегой Львом Вербицким пересекаюсь в скайп чате и он тоже немало слов сказал в пользу ShopModXBox.
Надеюсь ваше дополнение окажется доступным для понимания среднечку в вебе и позволит создавать сайты, за которые не будет стыдно.
Спасибо за раскрытую позицию, вас понял. ОК, начните с простого, создайте свой скин по этому туториалу, попробуйте хотя как-то логику переопределить, и тогда уже для себя решите, понятно вам или нет, и подходит вам сборка или нет.

Добавить комментарий