HOSTCMS v.6
КАРТОЧКА ТОВАРА
Информационный блок в карточке товара
Добавляем в карточку товара блок с призывом задать вопрос
1. В XSL шаблон вывода карточки товара в нужном месте размещаем данный код:
<div class="ask-question">
<div class="d-flex justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="40px" height="40px">
<path style="fill:#ccc" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm32 352c0 17.6-14.4 32-32 32H293.3l-8.5 6.4L192 460v-76H64c-17.6 0-32-14.4-32-32V64c0-17.6 14.4-32 32-32h384c17.6 0 32 14.4 32 32v288zm-224-88c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm-8.5-24h17c4.2 0 7.7-3.3 8-7.5l7-112c.3-4.6-3.4-8.5-8-8.5h-31c-4.6 0-8.3 3.9-8 8.5l7 112c.3 4.2 3.8 7.5 8 7.5z"></path>
</svg>
<span class="ps-3 fs-4 fw-bold title">Есть вопросы?</span>
</div>
<div class="text">
Если у вас есть вопросы по товару, то задавайте их и мы вам с радостью ответим.
</div>
<div class="last">
<button type="button" id="questionModalOpen" data-bs-toggle="modal" data-bs-target="#questionModal" class="btn btn-transparent">Задать вопрос о товаре</button>
</div>
</div>
2. В макет добавляем код загрузки формы (в примере код формы с отправкой уведомления Пользователю). Форма будет в модальном окне. Нажатие на кнопку "Задать вопрос" вызовет открытие формы.
<?php
// ФОРМА ЗАЯВКИ
$oForm = Core_Entity::factory('Form', 1);
$Form_Controller_Show = new Form_Controller_Show($oForm);
if (!is_null(Core_Array::getPost($oForm->button_name)))
{
$Form_Controller_Show
->values($_POST + $_FILES)
// 0 - html, 1- plain text
->mailType(0)
->mailXsl(
Core_Entity::factory('Xsl')->getByName('ПисьмоКураторуФормыВФорматеHTML')
)
->mailFromFieldName('euronasos19@gmail.com')
->process();
// Отправляем письмо-подтверждение пользователю
$Form_Controller_Show1 = clone $Form_Controller_Show;
$sEmail = Core_Array::get($Form_Controller_Show1->values, 'email'); // здесь указать название поля input для email в форме
if (Core_Valid::email($sEmail)){
ob_start();
$Form_Controller_Show1
->xsl(
Core_Entity::factory('Xsl')->getByName('ПисьмоПодтверждениеПользователюФормыВФорматеHTML')
)
->show();
$sMailText = ob_get_clean();
if (mb_strpos($sMailText, 'ERROR TRUE') === FALSE){
$subject = 'На сайте site.ru Вами была заполнена форма Заявки';// Тему письма отредактировать
$oCore_Mail = Core_Mail::instance()
->to($sEmail)
->from('info@site.ru')
->subject($subject)
->message(trim($sMailText))
->contentType('text/html')
->header('X-HostCMS-Reason', 'Form');
$oCore_Mail->send();
}
}
}
$Form_Controller_Show
->xsl(
Core_Entity::factory('Xsl')->getByName('ОтобразитьФормуЗаявкиВМодальномОкне')
)
->show();
?>
XSL . ФормаЗаявкиВМодальномОкне
<!ENTITY labelModalTitle1 "Благодарим вас за заявку!">
<!ENTITY labelModalTitle2 "Заявка получена.">
<!ENTITY labelSuccessText "Мы свяжемся с вами в ближайшее время">
<!ENTITY labelSuccessText2 "Наш менеджер ответит на все ваши вопросы">
<!ENTITY labelERROR "ОШИБКА!">
<!ENTITY labelTextErrorId0 "Вы неправильно ввели код подтверждения отправки формы!">
<!ENTITY labelTextErrorId1 "Заполните все обязательные поля!">
<!ENTITY labelTextErrorId2 "С момента отправки последней формы прошло слишком мало времени!">
<!ENTITY labelTextError1 "Это поле пустое">
<!ENTITY labelTextError2 "E-mail должен иметь вид name@domain.com">
<!ENTITY labelText1 "Обязательное поле">
<!ENTITY labelCheckNumber1 "Проверочный код">
<!ENTITY labelCheckNumber2 "показать другой код">
Стили CSS
/******************************/
.ask-question {
padding:20px;
background-color: #f0f0f0;
max-width:450px;
text-align: center;
}
.ask-question > div:not(.last) {
margin-bottom:15px;
}
background:
border:
color: #212529;
/******************************/
Калькулятор в карточке товара для делимых продуктов
// Материалы в карточке товара
ob_start();
if (Core::moduleIsActive('informationsystem'))
{
$Informationsystem_Controller_Show = new Informationsystem_Controller_Show(Core_Entity::factory('Informationsystem', 32));
$Informationsystem_Controller_Show->xsl(Core_Entity::factory('Xsl')->getByName('МатериалыВКарточкеТовараСайт2'))
->groupsMode('none')
->itemsForbiddenTags(array('text', 'description'))
->cache(FALSE)
->group(FALSE)
->itemsPropertiesList(FALSE)
//->itemsProperties(array(129))
->itemsProperties(TRUE)
->limit(20)
//->votes(TRUE)
->show();
}
$Shop_Controller_Show->addEntity(
Core::factory('Core_Xml_Entity')
->name('kratnost')->value(ob_get_clean())
);
//
В итоге, получим в XML данные о Материалах.
В XSL карточки товара добавляем код нашего калькулятора, а в макет код jquery, который будет у нас отслеживать изменения в полях и селекторе и производить расчёт.
XSL
JavaScript / jQuery
МИКРОРАЗМЕТКА В КАРТОЧКЕ ТОВАРА (для HostCMS)
<!-- Путь к группе -->
<div class="d-none d-sm-block breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
<xsl:if test="$group = 0">
<span typeof="v:Breadcrumb">
<a title="{/shop/name}" href="{/shop/url}" hostcms:id="{/shop/@id}" hostcms:field="name" hostcms:entity="shop" property="v:title" rel="v:url">
<xsl:value-of disable-output-escaping="yes" select="/shop/name"/>
</a>
</span>
</xsl:if>
<xsl:apply-templates select="/shop//shop_group[@id=$group]" mode="breadCrumbs"/>
<!-- Если модификация, выводим в пути родительский товар -->
<xsl:if test="shop_item/node()">
<i class="fa fa-angle-right"></i>
<span typeof="v:Breadcrumb">
<a title="{shop_item/name}" href="{shop_item/url}" property="v:title" rel="v:url">
<xsl:value-of disable-output-escaping="yes" select="shop_item/name"/>
</a>
</span>
</xsl:if>
<i class="fa fa-angle-right"></i>
<span typeof="v:Breadcrumb">
<a href="{url}" hostcms:id="{@id}" hostcms:field="name" hostcms:entity="shop_item" property="v:title" rel="v:url"><xsl:value-of disable-output-escaping="yes" select="name"/></a>
</span>
</div>
<!-- Шаблон выводит рекурсивно ссылки на группы магазина -->
<xsl:template match="shop_group" mode="breadCrumbs">
<xsl:param name="parent_id" select="parent_id"/>
<!-- Получаем ID родительской группы и записываем в переменную $group -->
<xsl:param name="group" select="/shop/shop_group"/>
<xsl:apply-templates select="//shop_group[@id=$parent_id]" mode="breadCrumbs"/>
<xsl:if test="parent_id=0">
<span typeof="v:Breadcrumb">
<a title="{/shop/name}" href="{/shop/url}" hostcms:id="{/shop/@id}" hostcms:field="name" hostcms:entity="shop" class="root" property="v:title" rel="v:url">
<xsl:value-of select="/shop/name"/>
</a>
</span>
</xsl:if>
<i class="fa fa-angle-right"></i>
<span typeof="v:Breadcrumb">
<a title="{name}" href="{url}" hostcms:id="{@id}" hostcms:field="name" hostcms:entity="shop_group" property="v:title" rel="v:url">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
</span>
</xsl:template>
Микроразметка карточки товара
<div itemscope="itemscope" itemtype="http://schema.org/Product">
<!-- Название товара -->
<h1><span itemprop="name"><xsl:value-of select="name"/></span></h1>
<!-- Изображение для товара, если есть -->
<xsl:if test="image_small != ''">
<div id="gallery" class="photo">
<a href="{dir}{image_large}" ><img src="{dir}{image_small}" alt="" itemprop="image"/></a>
</div>
<ul class="margin-top-10">
<li><a href="{dir}{image_large}"><img src="{dir}{image_small}" alt="" height="100"/></a></li>
<xsl:for-each select="property_value[tag_name='xml_foto'][file !='']">
<li><a href="{../dir}{file}"><img src="{../dir}{file_small}" height="100" itemprop="image"/></a></li>
</xsl:for-each>
</ul>
</xsl:if>
<!-- Цена товара -->
<xsl:if test="price != 0">
<div class="price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<span itemprop="price" content="{price}"><xsl:value-of select="format-number(price, '### ##0', 'my')"/></span><xsl:text> </xsl:text>
<span itemprop="priceCurrency" content="RUB"><xsl:value-of select="currency"/></span>
<!-- Если цена со скидкой - выводим ее -->
<xsl:if test="discount != 0">
<p class="item-old-price">
<xsl:value-of select="format-number(price + discount, '### ##0', 'my')"/><xsl:text> </xsl:text><xsl:value-of select="currency" />
</p>
</xsl:if>
</div>
</xsl:if>
<!-- Описание товара -->
<xsl:if test="description != ''">
<div itemprop="description"><xsl:value-of disable-output-escaping="yes" select="description" /></div>
</xsl:if>
</div>
<div itemscope itemtype="http://schema.org/Product">
<img src="/img/img.jpg" itemprop="image">
<div itemprop="name"><strong>товар</strong></div>
<div itemprop="description">Какое-то описание</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">25356</span> <span itemprop="priceCurrency">RUB</span>
</div>
</div>
Плавающий блок с призывом добавить товар в Избранное (на Bootstrap)
В XSL шаблон карточки товара над иконкой Избранного добавляем код:
<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show alert-info-modal" role="alert">
<small>Понравился товар? Добавьте его в избранное</small>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
</div>
Блок будет показываться с небольшой задержкой. Для этого используем возможности CSS3
@keyframes showDiv {
0%,
94% {
opacity: 0;
}
95% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
Для кода использованы стили alert фреймворка Bootstrap 5
Закрывается блок нажатием на крестик.

Стили CSS
.alert-wrapper {
display: flex;
justify-content: center;
width: 100%;
}
.alert-info-modal {
background-color: #ff8100;
border: 0;
color: #fff;
position: absolute;
bottom: 95%;
left: 50%;
min-width: 280px;
padding: 10px 15px;
animation: showDiv 3s forwards;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.alert-info-modal:before {
border-width: 0.4rem 0.4rem 0;
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
border-top-color: #ff8100;
top: 100%;
left: 0px;
transform: translate(50px,0px);
}
.alert-info-modal:after {
margin-top: -1px;
transform: rotate(45deg);
}
@keyframes showDiv {
0%,
94% {
opacity: 0;
}
95% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}