Новая стилизация статей блога и категорий блога
This commit is contained in:
Konstantin
@@ -181,20 +181,29 @@ class ControllerBlogArticle extends Controller {
|
||||
$data['gstatus'] = (int)$article_info['gstatus'];
|
||||
$data['description'] = html_entity_decode($article_info['description'], ENT_QUOTES, 'UTF-8');
|
||||
|
||||
$this->load->model('tool/image');
|
||||
|
||||
if ($article_info['image']) {
|
||||
$data['thumb'] = $this->model_tool_image->resize($article_info['image'], 1200, 760);
|
||||
} else {
|
||||
$data['thumb'] = false;
|
||||
}
|
||||
|
||||
$data['date_added'] = date($this->language->get('date_format_short'), strtotime($article_info['date_added']));
|
||||
$data['viewed'] = (int)$article_info['viewed'];
|
||||
|
||||
$data['articles'] = array();
|
||||
|
||||
$data['button_more'] = $this->language->get('button_more');
|
||||
$data['text_views'] = $this->language->get('text_views');
|
||||
|
||||
$this->load->model('tool/image');
|
||||
|
||||
$results = $this->model_blog_article->getArticleRelated($this->request->get['article_id']);
|
||||
|
||||
foreach ($results as $result) {
|
||||
if ($result['image']) {
|
||||
$image = $this->model_tool_image->resize($result['image'], $this->config->get('configblog_image_related_width'), $this->config->get('configblog_image_related_height'));
|
||||
} else {
|
||||
$image = false;
|
||||
$image = $this->model_tool_image->resize('placeholder.png', $this->config->get('configblog_image_related_width'), $this->config->get('configblog_image_related_height'));
|
||||
}
|
||||
|
||||
if ($this->config->get('configblog_review_status')) {
|
||||
@@ -216,17 +225,25 @@ class ControllerBlogArticle extends Controller {
|
||||
);
|
||||
}
|
||||
|
||||
$this->load->model('tool/image');
|
||||
$data['products'] = array();
|
||||
|
||||
$results = $this->model_blog_article->getArticleRelatedProduct($this->request->get['article_id']);
|
||||
|
||||
foreach ($results as $result) {
|
||||
if ($result['image']) {
|
||||
$image = $this->model_tool_image->resize($result['image'], $this->config->get('configblog_image_related_width'), $this->config->get('configblog_image_related_height'));
|
||||
$image = $this->model_tool_image->resize($result['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_height'));
|
||||
} else {
|
||||
$image = false;
|
||||
$image = $this->model_tool_image->resize('placeholder.png', $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_height'));
|
||||
}
|
||||
|
||||
$product_images = $this->model_catalog_product->getProductImages($result['product_id']);
|
||||
|
||||
if ($product_images) {
|
||||
$additional_image = $this->model_tool_image->resize($product_images[0]['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_height'));
|
||||
} else {
|
||||
$additional_image = false;
|
||||
}
|
||||
|
||||
if ($this->customer->isLogged() || !$this->config->get('config_customer_price')) {
|
||||
$price = $this->currency->format($this->tax->calculate($result['price'], $result['tax_class_id'], $this->config->get('config_tax')), $this->session->data['currency']);
|
||||
} else {
|
||||
@@ -245,6 +262,12 @@ class ControllerBlogArticle extends Controller {
|
||||
$tax = false;
|
||||
}
|
||||
|
||||
$rent_prices = array_filter([$result['price'], $result['price_2']], function($price) {
|
||||
return (float)$price > 0;
|
||||
});
|
||||
|
||||
$min_price = $rent_prices ? min($rent_prices) : 0;
|
||||
|
||||
if ($this->config->get('configblog_review_status')) {
|
||||
$rating = (int)$result['rating'];
|
||||
} else {
|
||||
@@ -256,6 +279,13 @@ class ControllerBlogArticle extends Controller {
|
||||
$data['products'][] = array(
|
||||
'product_id' => $result['product_id'],
|
||||
'thumb' => $image,
|
||||
'additional_thumb' => $additional_image,
|
||||
'price_n' => $result['price'],
|
||||
'price_2' => $this->currency->format($this->tax->calculate($result['price_2'], $result['tax_class_id'], $this->config->get('config_tax')), $this->session->data['currency']),
|
||||
'price_2_n' => $result['price_2'],
|
||||
'price_3' => $this->currency->format($this->tax->calculate($result['price_3'], $result['tax_class_id'], $this->config->get('config_tax')), $this->session->data['currency']),
|
||||
'price_3_n' => $result['price_3'],
|
||||
'min_price' => $this->currency->format($this->tax->calculate($min_price, $result['tax_class_id'], $this->config->get('config_tax')), $this->session->data['currency']),
|
||||
'name' => $result['name'],
|
||||
'description' => utf8_substr(strip_tags(html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8')), 0, $this->config->get('configblog_article_description_length')) . '..',
|
||||
'price' => $price,
|
||||
|
||||
@@ -17,7 +17,7 @@ $_['text_views'] = 'Просмотров:';
|
||||
$_['button_more'] = 'подробнее';
|
||||
$_['text_tax'] = 'Без НДС:';
|
||||
$_['text_related'] = 'Похожие статьи';
|
||||
$_['text_related_product'] = 'Сопутствующие Товары';
|
||||
$_['text_related_product'] = 'Связанные платья';
|
||||
|
||||
// Entry
|
||||
$_['entry_name'] = 'Ваше Имя:';
|
||||
|
||||
@@ -837,3 +837,763 @@ section{
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-category-page {
|
||||
background: linear-gradient(180deg, #f8f6f5 0, #fff 520px);
|
||||
color: #14142b;
|
||||
}
|
||||
|
||||
.blog-category-hero {
|
||||
padding: 34px 0 64px;
|
||||
}
|
||||
|
||||
.blog-category-breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 0;
|
||||
margin: 0 0 34px;
|
||||
list-style: none;
|
||||
color: rgba(20, 20, 43, 0.58);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.blog-category-breadcrumb span {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.blog-category-breadcrumb a:hover {
|
||||
color: #14142b;
|
||||
}
|
||||
|
||||
.blog-category-hero__grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
|
||||
gap: clamp(32px, 6vw, 88px);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.blog-category-hero__grid--single {
|
||||
grid-template-columns: minmax(0, 780px);
|
||||
}
|
||||
|
||||
.blog-category-eyebrow {
|
||||
display: block;
|
||||
color: var(--color-dark-gray);
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.blog-category-hero h1 {
|
||||
max-width: 820px;
|
||||
margin: 14px 0 0;
|
||||
color: #14142b;
|
||||
font-size: clamp(42px, 5.8vw, 82px);
|
||||
font-weight: 400;
|
||||
line-height: 1.04;
|
||||
}
|
||||
|
||||
.blog-category-hero__copy p,
|
||||
.blog-category-hero__description {
|
||||
max-width: 700px;
|
||||
margin-top: 22px;
|
||||
color: rgba(20, 20, 43, 0.72);
|
||||
font-size: 18px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.blog-category-hero__description p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.blog-category-hero__image {
|
||||
position: relative;
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.blog-category-hero__image::before {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: -20px;
|
||||
left: -20px;
|
||||
border: 1px solid var(--color-secondary);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.blog-category-hero__image img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 380px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.blog-category-refine {
|
||||
padding: 25px 0;
|
||||
background: #f4efed;
|
||||
border-top: 1px solid rgba(216, 206, 203, 0.82);
|
||||
border-bottom: 1px solid rgba(216, 206, 203, 0.82);
|
||||
}
|
||||
|
||||
.blog-category-refine__head {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.blog-category-refine__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.blog-category-refine__item {
|
||||
display: inline-flex;
|
||||
padding: 10px 17px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(20, 20, 43, 0.11);
|
||||
color: #14142b;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.blog-category-refine__item:hover {
|
||||
background: #14142b;
|
||||
border-color: #14142b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.blog-category-content {
|
||||
padding: 72px 0 80px;
|
||||
}
|
||||
|
||||
.blog-category-heading {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.blog-category-heading h2,
|
||||
.blog-category-empty h2 {
|
||||
margin: 9px 0 0;
|
||||
color: #14142b;
|
||||
font-size: clamp(30px, 3vw, 44px);
|
||||
font-weight: 400;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.blog-category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 30px 20px;
|
||||
}
|
||||
|
||||
.blog-category-card {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(20, 20, 43, 0.1);
|
||||
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
|
||||
}
|
||||
|
||||
.blog-category-card:hover {
|
||||
border-color: rgba(20, 20, 43, 0.24);
|
||||
box-shadow: 0 20px 46px rgba(20, 20, 43, 0.09);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.blog-category-card__image {
|
||||
display: block;
|
||||
aspect-ratio: 1.2 / 1;
|
||||
overflow: hidden;
|
||||
background: #f1eeed;
|
||||
}
|
||||
|
||||
.blog-category-card__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.45s;
|
||||
}
|
||||
|
||||
.blog-category-card:hover .blog-category-card__image img {
|
||||
transform: scale(1.045);
|
||||
}
|
||||
|
||||
.blog-category-card__body {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
padding: 22px 22px 20px;
|
||||
}
|
||||
|
||||
.blog-category-card__meta {
|
||||
display: flex;
|
||||
min-height: 18px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
color: rgba(20, 20, 43, 0.56);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.35;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.blog-category-card__divider {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: var(--color-secondary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blog-category-card__views {
|
||||
display: inline-flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.blog-category-card__views svg {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.4;
|
||||
}
|
||||
|
||||
.blog-category-card h3 {
|
||||
margin: 14px 0 0;
|
||||
color: #14142b;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.blog-category-card h3 a:hover {
|
||||
color: var(--color-dark-gray);
|
||||
}
|
||||
|
||||
.blog-category-card p {
|
||||
margin: 13px 0 0;
|
||||
color: rgba(20, 20, 43, 0.68);
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.blog-category-card__footer {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 21px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.blog-category-card__link {
|
||||
display: inline-flex;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
color: #14142b;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.blog-category-card__link:hover {
|
||||
color: var(--color-dark-gray);
|
||||
}
|
||||
|
||||
.blog-category-card__link svg {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.blog-category-card__rating {
|
||||
display: flex;
|
||||
color: #b59b78;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.blog-category-card__rating .is-empty {
|
||||
color: #ded9d4;
|
||||
}
|
||||
|
||||
.blog-category-pagination {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 38px;
|
||||
}
|
||||
|
||||
.blog-category-pagination ul.pagination {
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blog-category-pagination .page-link {
|
||||
min-width: 42px;
|
||||
padding: 10px 13px;
|
||||
color: #14142b;
|
||||
text-align: center;
|
||||
border-color: rgba(20, 20, 43, 0.13);
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.blog-category-pagination .page-link:hover,
|
||||
.blog-category-pagination .active .page-link {
|
||||
background: #14142b;
|
||||
border-color: #14142b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.blog-category-pagination__results {
|
||||
color: rgba(20, 20, 43, 0.58);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.blog-category-empty {
|
||||
padding: 50px;
|
||||
background: #f8f6f5;
|
||||
border: 1px solid rgba(20, 20, 43, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.blog-category-empty .btn {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.blog-category-hero__grid {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
|
||||
gap: 42px;
|
||||
}
|
||||
|
||||
.blog-category-hero__image,
|
||||
.blog-category-hero__image img {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.blog-category-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.blog-category-hero {
|
||||
padding: 24px 0 42px;
|
||||
}
|
||||
|
||||
.blog-category-breadcrumb {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.blog-category-hero__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.blog-category-hero h1 {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.blog-category-hero__copy p,
|
||||
.blog-category-hero__description {
|
||||
margin-top: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.blog-category-hero__image {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.blog-category-hero__image,
|
||||
.blog-category-hero__image img {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.blog-category-hero__image::before {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
bottom: -12px;
|
||||
left: -12px;
|
||||
}
|
||||
|
||||
.blog-category-content {
|
||||
padding: 50px 0 56px;
|
||||
}
|
||||
|
||||
.blog-category-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.blog-category-card h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.blog-category-pagination {
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.blog-category-empty {
|
||||
padding: 34px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-article-page {
|
||||
background: #fff;
|
||||
color: #14142b;
|
||||
}
|
||||
|
||||
.blog-article-hero {
|
||||
padding: 34px 0 72px;
|
||||
background: linear-gradient(180deg, #f8f6f5 0, #fff 100%);
|
||||
}
|
||||
|
||||
.blog-article-hero__grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
|
||||
gap: clamp(36px, 6vw, 90px);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.blog-article-hero__grid--single {
|
||||
grid-template-columns: minmax(0, 920px);
|
||||
}
|
||||
|
||||
.blog-article-hero h1 {
|
||||
max-width: 760px;
|
||||
margin: 14px 0 0;
|
||||
color: #14142b;
|
||||
font-size: clamp(42px, 5.3vw, 76px);
|
||||
font-weight: 400;
|
||||
line-height: 1.06;
|
||||
}
|
||||
|
||||
.blog-article-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 11px;
|
||||
align-items: center;
|
||||
margin-top: 26px;
|
||||
color: rgba(20, 20, 43, 0.58);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1.35;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.blog-article-meta__divider {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: var(--color-secondary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blog-article-meta__views {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.blog-article-meta__views svg {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.4;
|
||||
}
|
||||
|
||||
.blog-article-meta__rating {
|
||||
display: flex;
|
||||
color: #b59b78;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.blog-article-meta__rating .is-empty {
|
||||
color: #ded9d4;
|
||||
}
|
||||
|
||||
.blog-article-hero__image {
|
||||
position: relative;
|
||||
min-height: 520px;
|
||||
}
|
||||
|
||||
.blog-article-hero__image::before {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: -20px;
|
||||
left: -20px;
|
||||
border: 1px solid var(--color-secondary);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.blog-article-hero__image img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 520px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.blog-article-content {
|
||||
padding: 82px 0;
|
||||
}
|
||||
|
||||
.blog-article-content__grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 790px) minmax(250px, 330px);
|
||||
gap: clamp(40px, 7vw, 108px);
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.blog-article-copy {
|
||||
color: rgba(20, 20, 43, 0.78);
|
||||
font-size: 18px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.blog-article-copy > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.blog-article-copy p {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.blog-article-copy h2,
|
||||
.blog-article-copy h3 {
|
||||
color: #14142b;
|
||||
font-weight: 400;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.blog-article-copy h2 {
|
||||
margin: 46px 0 17px;
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.blog-article-copy h3 {
|
||||
margin: 34px 0 14px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.blog-article-copy blockquote {
|
||||
padding: 24px 0 24px 26px;
|
||||
margin: 34px 0;
|
||||
color: #14142b;
|
||||
border-left: 2px solid var(--color-secondary);
|
||||
font-size: 22px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.blog-article-copy img {
|
||||
width: 100%;
|
||||
margin: 18px 0 28px;
|
||||
}
|
||||
|
||||
.blog-article-copy a {
|
||||
color: #14142b;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.blog-article-copy a:hover {
|
||||
color: var(--color-dark-gray);
|
||||
}
|
||||
|
||||
.blog-article-aside {
|
||||
position: sticky;
|
||||
top: 94px;
|
||||
padding: 28px;
|
||||
background: #f4efed;
|
||||
border: 1px solid rgba(216, 206, 203, 0.9);
|
||||
}
|
||||
|
||||
.blog-article-aside p {
|
||||
margin: 14px 0 0;
|
||||
color: rgba(20, 20, 43, 0.74);
|
||||
font-size: 16px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.blog-article-aside__link {
|
||||
display: inline-flex;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
margin-top: 22px;
|
||||
color: #14142b;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.13em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.blog-article-aside__link:hover {
|
||||
color: var(--color-dark-gray);
|
||||
}
|
||||
|
||||
.blog-article-aside__link svg {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.blog-article-downloads {
|
||||
max-width: 790px;
|
||||
padding-top: 24px;
|
||||
margin: 28px auto 0;
|
||||
border-top: 1px solid rgba(20, 20, 43, 0.12);
|
||||
}
|
||||
|
||||
.blog-article-downloads a {
|
||||
display: block;
|
||||
color: #14142b;
|
||||
}
|
||||
|
||||
.blog-article-downloads span {
|
||||
color: rgba(20, 20, 43, 0.58);
|
||||
}
|
||||
|
||||
.blog-article-section {
|
||||
padding: 76px 0 84px;
|
||||
}
|
||||
|
||||
.blog-article-section__head {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.blog-article-section__head h2 {
|
||||
margin: 9px 0 0;
|
||||
color: #14142b;
|
||||
font-size: clamp(30px, 3vw, 44px);
|
||||
font-weight: 400;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.blog-article-products {
|
||||
background: #f8f6f5;
|
||||
border-top: 1px solid rgba(216, 206, 203, 0.72);
|
||||
border-bottom: 1px solid rgba(216, 206, 203, 0.72);
|
||||
}
|
||||
|
||||
.blog-article-products .product-card {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.blog-article-products .product-card .images {
|
||||
aspect-ratio: 0.82 / 1;
|
||||
overflow: hidden;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.blog-article-products .product-card .images img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.blog-article-related__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.blog-article-hero__grid {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
|
||||
gap: 44px;
|
||||
}
|
||||
|
||||
.blog-article-hero__image,
|
||||
.blog-article-hero__image img {
|
||||
min-height: 430px;
|
||||
}
|
||||
|
||||
.blog-article-content__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.blog-article-aside {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.blog-article-related__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.blog-article-hero {
|
||||
padding: 24px 0 48px;
|
||||
}
|
||||
|
||||
.blog-article-hero__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.blog-article-hero h1 {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.blog-article-hero__image {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.blog-article-hero__image,
|
||||
.blog-article-hero__image img {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.blog-article-hero__image::before {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
bottom: -12px;
|
||||
left: -12px;
|
||||
}
|
||||
|
||||
.blog-article-content {
|
||||
padding: 54px 0;
|
||||
}
|
||||
|
||||
.blog-article-copy {
|
||||
font-size: 16px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.blog-article-copy h2 {
|
||||
margin-top: 38px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.blog-article-copy blockquote {
|
||||
padding: 20px 0 20px 18px;
|
||||
margin: 28px 0;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.blog-article-aside {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.blog-article-section {
|
||||
padding: 54px 0 60px;
|
||||
}
|
||||
|
||||
.blog-article-related__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,436 +1,131 @@
|
||||
{{ header }}
|
||||
{{ content_top }}
|
||||
<section class="section py-5">
|
||||
<main class="blog-article-page">
|
||||
<section class="blog-article-hero">
|
||||
<div class="container-fluid">
|
||||
<ul class="breadcrumb">
|
||||
<ul class="blog-category-breadcrumb">
|
||||
{% for key,breadcrumb in breadcrumbs %}
|
||||
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span class="mx-2">•</span>{% endif %}</li>
|
||||
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span>•</span>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="blog-article-hero__grid{% if not thumb %} blog-article-hero__grid--single{% endif %}">
|
||||
<div class="blog-article-hero__copy">
|
||||
<div class="blog-category-eyebrow">Журнал свадебного салона</div>
|
||||
<h1>{{ heading_title }}</h1>
|
||||
<div class="content">{{ description }}</div>
|
||||
<div class="blog-article-meta">
|
||||
<time>{{ date_added }}</time>
|
||||
<span class="blog-article-meta__divider"></span>
|
||||
<span class="blog-article-meta__views">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"></path>
|
||||
<circle cx="12" cy="12" r="2.5"></circle>
|
||||
</svg>
|
||||
{{ viewed }}
|
||||
</span>
|
||||
{% if review_status and rating %}
|
||||
<span class="blog-article-meta__rating" aria-label="Рейтинг: {{ rating }} из 5">
|
||||
{% for i in 1..5 %}<span class="{% if rating < i %}is-empty{% endif %}">★</span>{% endfor %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if thumb %}
|
||||
<div class="blog-article-hero__image">
|
||||
<img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="blog-article-content">
|
||||
<div class="container-fluid">
|
||||
<div class="blog-article-content__grid">
|
||||
<article class="blog-article-copy">
|
||||
{{ description }}
|
||||
</article>
|
||||
<aside class="blog-article-aside">
|
||||
<div class="blog-category-eyebrow">Dominik</div>
|
||||
<p>Примеряйте образы без спешки. Наши стилисты помогут найти платье, которое будет ощущаться именно вашим.</p>
|
||||
<a href="#" onclick="SendRequest(0);return false;" class="blog-article-aside__link">
|
||||
Записаться на примерку
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true">
|
||||
<path d="M0 6h16M11 1l5 5-5 5"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{% if download_status and downloads %}
|
||||
<div class="blog-article-downloads">
|
||||
{% for download in downloads %}
|
||||
<a href="{{ download.href }}">{{ download.name }} <span>{{ download.size }}</span></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if products %}
|
||||
<hr>
|
||||
<h3 class="mb-4">{{ text_related_product }}</h3>
|
||||
<section class="blog-article-section blog-article-products">
|
||||
<div class="container-fluid">
|
||||
<div class="blog-article-section__head">
|
||||
<span class="blog-category-eyebrow">Образы из статьи</span>
|
||||
<h2>{{ text_related_product }}</h2>
|
||||
</div>
|
||||
<div class="row g-3 product-items">
|
||||
{% for product in products %}
|
||||
<div class="col-6 col-lg-4">
|
||||
{% include 'dominik/template/common/product.twig' %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{ content_bottom }}
|
||||
{{ footer }}
|
||||
{#
|
||||
<div id="product-product" class="container">
|
||||
<ul class="breadcrumb">
|
||||
{% for breadcrumb in breadcrumbs %}
|
||||
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="row">{{ column_left }}
|
||||
{% if column_left and column_right %}
|
||||
{% set class = 'col-sm-6' %}
|
||||
{% elseif column_left or column_right %}
|
||||
{% set class = 'col-sm-9' %}
|
||||
{% else %}
|
||||
{% set class = 'col-sm-12' %}
|
||||
{% endif %}
|
||||
<div id="content" class="{{ class }}">{{ content_top }}
|
||||
<div class="row"> {% if column_left or column_right %}
|
||||
{% set class = 'col-sm-12' %}
|
||||
{% else %}
|
||||
{% set class = 'col-sm-12' %}
|
||||
{% endif %}
|
||||
<div class="{{ class }}"> {% if thumb or images %}
|
||||
<ul class="thumbnails">
|
||||
{% if thumb %}
|
||||
<li><a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
|
||||
{% endif %}
|
||||
{% if images %}
|
||||
{% for image in images %}
|
||||
<li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
<div class="content">
|
||||
<h1>{{ heading_title }}</h1>
|
||||
<div class="tab-pane active" id="tab-description">{{ description }}</div>
|
||||
{% if review_status %}
|
||||
<div class="rating">
|
||||
<p>{% for i in 1..5 %}
|
||||
{% if rating < i %}<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>{% else %}<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>{% endif %}
|
||||
{% endfor %}
|
||||
<a href="" onclick="gotoReview(); return false;">{{ reviews }}</a> / <a href="" onclick="gotoReviewWrite(); return false;">{{ text_write }}</a></p>
|
||||
<hr>
|
||||
<!-- AddThis Button BEGIN -->
|
||||
<div class="addthis_toolbox addthis_default_style" data-url="{{ share }}"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_pinterest_pinit"></a> <a class="addthis_counter addthis_pill_style"></a></div>
|
||||
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-515eeaf54693130e"></script>
|
||||
<!-- AddThis Button END -->
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if download_status %}
|
||||
<div class="blog-info">
|
||||
{% if downloads %}
|
||||
<br />
|
||||
{% for download in downloads %}
|
||||
<a href="{{ download.href }}" title=""><i class="fa fa-floppy-o"></i> {{ download.name }} {{ download.size }}</a><br>
|
||||
{% endfor %}
|
||||
<br />
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if products %}
|
||||
<h3>{{ text_related_product }}</h3>
|
||||
<div class="row"> {% set i = 0 %}
|
||||
{% for product in products %}
|
||||
{% if column_left and column_right %}
|
||||
{% set class = 'col-xs-8 col-sm-6' %}
|
||||
{% elseif column_left or column_right %}
|
||||
{% set class = 'col-xs-6 col-md-4' %}
|
||||
{% else %}
|
||||
{% set class = 'col-xs-6 col-sm-3' %}
|
||||
{% endif %}
|
||||
<div class="{{ class }}">
|
||||
<div class="product-thumb transition">
|
||||
<div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
|
||||
<div class="caption">
|
||||
<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
|
||||
<p>{{ product.description }}</p>
|
||||
{% if product.rating %}
|
||||
<div class="rating"> {% for j in 1..5 %}
|
||||
{% if product.rating < j %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span> {% endif %}
|
||||
{% endfor %} </div>
|
||||
{% endif %}
|
||||
{% if product.price %}
|
||||
<p class="price"> {% if not product.special %}
|
||||
{{ product.price }}
|
||||
{% else %} <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span> {% endif %}
|
||||
{% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %} </p>
|
||||
{% endif %} </div>
|
||||
<div class="button-group">
|
||||
<button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span> <i class="fa fa-shopping-cart"></i></button>
|
||||
<button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.article_id }}');"><i class="fa fa-heart"></i></button>
|
||||
<button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.article_id }}');"><i class="fa fa-exchange"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if column_left and column_right and (i + 1) % 2 == 0 %}
|
||||
<div class="clearfix visible-md visible-sm"></div>
|
||||
{% elseif column_left or column_right and (i + 1) % 3 == 0 %}
|
||||
<div class="clearfix visible-md"></div>
|
||||
{% elseif (i + 1) % 4 == 0 %}
|
||||
<div class="clearfix visible-md"></div>
|
||||
{% endif %}
|
||||
{% set i = i + 1 %}
|
||||
{% endfor %} </div>
|
||||
{% endif %}
|
||||
|
||||
{% if articles %}
|
||||
<h3>{{ text_related }}</h3>
|
||||
<div class="row"> {% set i = 0 %}
|
||||
<section class="blog-article-section blog-article-related">
|
||||
<div class="container-fluid">
|
||||
<div class="blog-article-section__head">
|
||||
<span class="blog-category-eyebrow">Читайте также</span>
|
||||
<h2>{{ text_related }}</h2>
|
||||
</div>
|
||||
<div class="blog-article-related__grid">
|
||||
{% for article in articles %}
|
||||
{% if column_left and column_right %}
|
||||
{% set class = 'col-xs-8 col-sm-6' %}
|
||||
{% elseif column_left or column_right %}
|
||||
{% set class = 'col-xs-6 col-md-4' %}
|
||||
{% else %}
|
||||
{% set class = 'col-xs-6 col-sm-3' %}
|
||||
{% endif %}
|
||||
<div class="{{ class }}">
|
||||
<div class="product-thumb transition">
|
||||
<div class="image"><a href="{{ article.href }}"><img src="{{ article.thumb }}" alt="{{ article.name }}" title="{{ article.name }}" class="img-responsive" /></a></div>
|
||||
<div class="caption">
|
||||
<h4><a href="{{ article.href }}">{{ article.name }}</a></h4>
|
||||
<article class="blog-category-card">
|
||||
<a href="{{ article.href }}" class="blog-category-card__image">
|
||||
<img src="{{ article.thumb }}" alt="{{ article.name }}" title="{{ article.name }}" loading="lazy" />
|
||||
</a>
|
||||
<div class="blog-category-card__body">
|
||||
<div class="blog-category-card__meta">
|
||||
<time>{{ article.date_added }}</time>
|
||||
<span class="blog-category-card__divider"></span>
|
||||
<span class="blog-category-card__views">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"></path>
|
||||
<circle cx="12" cy="12" r="2.5"></circle>
|
||||
</svg>
|
||||
{{ article.viewed }}
|
||||
</span>
|
||||
</div>
|
||||
<h3><a href="{{ article.href }}">{{ article.name }}</a></h3>
|
||||
<p>{{ article.description }}</p>
|
||||
{% if article.rating %}
|
||||
<div class="rating"> {% for j in 1..5 %}
|
||||
{% if article.rating < j %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span> {% endif %}
|
||||
{% endfor %} </div>
|
||||
<div class="blog-category-card__footer">
|
||||
<a href="{{ article.href }}" class="blog-category-card__link">
|
||||
{{ button_more }}
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true">
|
||||
<path d="M0 6h16M11 1l5 5-5 5"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button type="button" onclick="location.href = ('{{ article.href }}');"><span class="hidden-xs hidden-sm hidden-md">{{ button_more }}</span> <i class="fa fa-share"></i></button>
|
||||
<button type="button" data-toggle="tooltip" title="{{ article.date_added }}" "><i class="fa fa-clock-o"></i></button>
|
||||
<button type="button" data-toggle="tooltip" title="{{ text_views }} {{ article.viewed }}" "><i class="fa fa-eye"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if column_left and column_right and (i + 1) % 2 == 0 %}
|
||||
<div class="clearfix visible-md visible-sm"></div>
|
||||
{% elseif column_left or column_right and (i + 1) % 3 == 0 %}
|
||||
<div class="clearfix visible-md"></div>
|
||||
{% elseif (i + 1) % 4 == 0 %}
|
||||
<div class="clearfix visible-md"></div>
|
||||
{% endif %}
|
||||
{% set i = i + 1 %}
|
||||
{% endfor %} </div>
|
||||
{% endif %}
|
||||
|
||||
{% if review_status %}
|
||||
<div class="tab-pane" id="tab-review">
|
||||
<form class="form-horizontal" id="form-review">
|
||||
<div id="review"></div>
|
||||
<h2>{{ text_write }}</h2>
|
||||
{% if review_guest %}
|
||||
<div class="form-group required">
|
||||
<div class="col-sm-12">
|
||||
<label class="control-label" for="input-name">{{ entry_name }}</label>
|
||||
<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required">
|
||||
<div class="col-sm-12">
|
||||
<label class="control-label" for="input-review">{{ entry_review }}</label>
|
||||
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
|
||||
<div class="help-block">{{ text_note }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required">
|
||||
<div class="col-sm-12">
|
||||
<label class="control-label">{{ entry_rating }}</label>
|
||||
{{ entry_bad }}
|
||||
<input type="radio" name="rating" value="1" />
|
||||
|
||||
<input type="radio" name="rating" value="2" />
|
||||
|
||||
<input type="radio" name="rating" value="3" />
|
||||
|
||||
<input type="radio" name="rating" value="4" />
|
||||
|
||||
<input type="radio" name="rating" value="5" />
|
||||
{{ entry_good }}</div>
|
||||
</div>
|
||||
{{ captcha }}
|
||||
<div class="buttons clearfix">
|
||||
<div class="pull-right">
|
||||
<button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{{ text_login }}
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{ content_bottom }}</div>
|
||||
{{ column_right }}</div>
|
||||
</div>
|
||||
<script type="text/javascript"><!--
|
||||
$('#button-cart').on('click', function() {
|
||||
$.ajax({
|
||||
url: 'index.php?route=checkout/cart/add',
|
||||
type: 'post',
|
||||
data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
|
||||
dataType: 'json',
|
||||
beforeSend: function() {
|
||||
$('#button-cart').button('loading');
|
||||
},
|
||||
complete: function() {
|
||||
$('#button-cart').button('reset');
|
||||
},
|
||||
success: function(json) {
|
||||
$('.alert-dismissible, .text-danger').remove();
|
||||
$('.form-group').removeClass('has-error');
|
||||
|
||||
if (json['error']) {
|
||||
if (json['error']['option']) {
|
||||
for (i in json['error']['option']) {
|
||||
var element = $('#input-option' + i.replace('_', '-'));
|
||||
|
||||
if (element.parent().hasClass('input-group')) {
|
||||
element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
|
||||
} else {
|
||||
element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (json['error']['recurring']) {
|
||||
$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
|
||||
}
|
||||
|
||||
// Highlight any found errors
|
||||
$('.text-danger').parent().addClass('has-error');
|
||||
}
|
||||
|
||||
if (json['success']) {
|
||||
$('.breadcrumb').after('<div class="alert alert-success alert-dismissible">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
|
||||
|
||||
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
|
||||
|
||||
$('html, body').animate({ scrollTop: 0 }, 'slow');
|
||||
|
||||
$('#cart > ul').load('index.php?route=common/cart/info ul li');
|
||||
}
|
||||
},
|
||||
error: function(xhr, ajaxOptions, thrownError) {
|
||||
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
|
||||
}
|
||||
});
|
||||
});
|
||||
//--></script>
|
||||
<script type="text/javascript"><!--
|
||||
$('.date').datetimepicker({
|
||||
language: '{{ datepicker }}',
|
||||
pickTime: false
|
||||
});
|
||||
|
||||
$('.datetime').datetimepicker({
|
||||
language: '{{ datepicker }}',
|
||||
pickDate: true,
|
||||
pickTime: true
|
||||
});
|
||||
|
||||
$('.time').datetimepicker({
|
||||
language: '{{ datepicker }}',
|
||||
pickDate: false
|
||||
});
|
||||
|
||||
$('button[id^=\'button-upload\']').on('click', function() {
|
||||
var node = this;
|
||||
|
||||
$('#form-upload').remove();
|
||||
|
||||
$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');
|
||||
|
||||
$('#form-upload input[name=\'file\']').trigger('click');
|
||||
|
||||
if (typeof timer != 'undefined') {
|
||||
clearInterval(timer);
|
||||
}
|
||||
|
||||
timer = setInterval(function() {
|
||||
if ($('#form-upload input[name=\'file\']').val() != '') {
|
||||
clearInterval(timer);
|
||||
|
||||
$.ajax({
|
||||
url: 'index.php?route=tool/upload',
|
||||
type: 'post',
|
||||
dataType: 'json',
|
||||
data: new FormData($('#form-upload')[0]),
|
||||
cache: false,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
beforeSend: function() {
|
||||
$(node).button('loading');
|
||||
},
|
||||
complete: function() {
|
||||
$(node).button('reset');
|
||||
},
|
||||
success: function(json) {
|
||||
$('.text-danger').remove();
|
||||
|
||||
if (json['error']) {
|
||||
$(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
|
||||
}
|
||||
|
||||
if (json['success']) {
|
||||
alert(json['success']);
|
||||
|
||||
$(node).parent().find('input').val(json['code']);
|
||||
}
|
||||
},
|
||||
error: function(xhr, ajaxOptions, thrownError) {
|
||||
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
//--></script>
|
||||
<script type="text/javascript"><!--
|
||||
$('#review').delegate('.pagination a', 'click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
$('#review').fadeOut('slow');
|
||||
|
||||
$('#review').load(this.href);
|
||||
|
||||
$('#review').fadeIn('slow');
|
||||
});
|
||||
|
||||
$('#review').load('index.php?route=blog/article/review&article_id={{ article_id }}');
|
||||
|
||||
$('#button-review').on('click', function() {
|
||||
$.ajax({
|
||||
url: 'index.php?route=blog/article/write&article_id={{ article_id }}',
|
||||
type: 'post',
|
||||
dataType: 'json',
|
||||
data: $("#form-review").serialize(),
|
||||
beforeSend: function() {
|
||||
$('#button-review').button('loading');
|
||||
},
|
||||
complete: function() {
|
||||
$('#button-review').button('reset');
|
||||
},
|
||||
success: function(json) {
|
||||
$('.alert-dismissible').remove();
|
||||
|
||||
if (json['error']) {
|
||||
$('#review').after('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
|
||||
}
|
||||
|
||||
if (json['success']) {
|
||||
$('#review').after('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');
|
||||
|
||||
$('input[name=\'name\']').val('');
|
||||
$('textarea[name=\'text\']').val('');
|
||||
$('input[name=\'rating\']:checked').prop('checked', false);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
$('.thumbnails').magnificPopup({
|
||||
type:'image',
|
||||
delegate: 'a',
|
||||
gallery: {
|
||||
enabled: true
|
||||
}
|
||||
});
|
||||
});
|
||||
//--></script>
|
||||
<script type="text/javascript"><!--
|
||||
$(document).ready(function() {
|
||||
$('#description').find('a>img').each(function(){
|
||||
$(this).parent().addClass('gallery');
|
||||
});
|
||||
$('#description').magnificPopup({
|
||||
delegate: 'a.gallery',
|
||||
type: 'image',
|
||||
gallery: {
|
||||
enabled: true
|
||||
}
|
||||
});
|
||||
|
||||
gotoReview = function() {
|
||||
offset = $('#form-review').offset();
|
||||
$('html, body').animate({ scrollTop: offset.top-20 }, 'slow');
|
||||
}
|
||||
gotoReviewWrite = function() {
|
||||
offset = $('#form-review h2').offset();
|
||||
$('html, body').animate({ scrollTop: offset.top-20 }, 'slow');
|
||||
}
|
||||
|
||||
});
|
||||
--></script>
|
||||
|
||||
|
||||
#}
|
||||
</main>
|
||||
{{ content_bottom }}
|
||||
{{ footer }}
|
||||
|
||||
@@ -1,58 +1,100 @@
|
||||
{{ header }}
|
||||
{{ content_top }}
|
||||
<section class="section py-5">
|
||||
<main class="blog-category-page">
|
||||
<section class="blog-category-hero pb-0">
|
||||
<div class="container-fluid">
|
||||
<ul class="breadcrumb">
|
||||
<ul class="blog-category-breadcrumb">
|
||||
{% for key,breadcrumb in breadcrumbs %}
|
||||
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span class="mx-2">•</span>{% endif %}</li>
|
||||
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span>•</span>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="blog-category-hero__grid{% if not thumb %} blog-category-hero__grid--single{% endif %}">
|
||||
<div class="blog-category-hero__copy">
|
||||
<div class="blog-category-eyebrow">Журнал свадебного салона</div>
|
||||
<h1>{{ heading_title }}</h1>
|
||||
<div class="content">
|
||||
{% if thumb or description %}
|
||||
<div class="row">
|
||||
{% if thumb %}
|
||||
<div class="col-sm-2"><img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail" /></div>
|
||||
{% endif %}
|
||||
{% if description %}
|
||||
<div class="col-sm-10">{{ description }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<hr>
|
||||
{% endif %}
|
||||
{% if articles %}
|
||||
<div class="row g-3">
|
||||
{% for article in articles %}
|
||||
<div class="col-md-4 col-lg-3 col-sm-6">
|
||||
<div class="product-thumb">
|
||||
<div class="image"><a href="{{ article.href }}"><img src="{{ article.thumb }}" alt="{{ article.name }}" title="{{ article.name }}" class="img-responsive" /></a></div>
|
||||
<div class="caption">
|
||||
<h4><a href="{{ article.href }}">{{ article.name }}</a></h4>
|
||||
<p class="description">{{ article['description'] }}</p>
|
||||
{% if configblog_review_status %}
|
||||
{% if article.rating %}
|
||||
<div class="rating"> {% for i in 1..5 %}
|
||||
{% if article.rating < i %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>{% endif %}
|
||||
{% endfor %} </div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ article.href }}" class="btn btn-dark">{{ button_more }}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="blog-category-hero__description">{{ description }}</div>
|
||||
{% else %}
|
||||
|
||||
<p>{{ text_empty }}</p>
|
||||
<p>Идеи, советы и вдохновение для вашего особенного дня.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if thumb %}
|
||||
<div class="blog-category-hero__image">
|
||||
<img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if categories %}
|
||||
<section class="blog-category-refine">
|
||||
<div class="container-fluid">
|
||||
<div class="blog-category-refine__head">
|
||||
<span class="blog-category-eyebrow">{{ text_refine }}</span>
|
||||
</div>
|
||||
<div class="blog-category-refine__list">
|
||||
{% for category in categories %}
|
||||
<a href="{{ category.href }}" class="blog-category-refine__item">{{ category.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<section class="blog-category-content">
|
||||
<div class="container-fluid">
|
||||
{% if articles %}
|
||||
<div class="blog-category-grid">
|
||||
{% for article in articles %}
|
||||
<article class="blog-category-card">
|
||||
<a href="{{ article.href }}" class="blog-category-card__image">
|
||||
<img src="{{ article.thumb }}" alt="{{ article.name }}" title="{{ article.name }}" loading="lazy" />
|
||||
</a>
|
||||
<div class="blog-category-card__body">
|
||||
<div class="blog-category-card__meta">
|
||||
<time>{{ article.date_added }}</time>
|
||||
<span class="blog-category-card__divider"></span>
|
||||
<span class="blog-category-card__views">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"></path>
|
||||
<circle cx="12" cy="12" r="2.5"></circle>
|
||||
</svg>
|
||||
{{ article.viewed }}
|
||||
</span>
|
||||
</div>
|
||||
<h3><a href="{{ article.href }}">{{ article.name }}</a></h3>
|
||||
<p>{{ article.description }}</p>
|
||||
<div class="blog-category-card__footer">
|
||||
<a href="{{ article.href }}" class="blog-category-card__link">
|
||||
{{ button_more }}
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true">
|
||||
<path d="M0 6h16M11 1l5 5-5 5"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{% if configblog_review_status and article.rating %}
|
||||
<div class="blog-category-card__rating" aria-label="Рейтинг: {{ article.rating }} из 5">
|
||||
{% for i in 1..5 %}<span class="{% if article.rating < i %}is-empty{% endif %}">★</span>{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="blog-category-pagination">
|
||||
<div>{{ pagination }}</div>
|
||||
<div class="blog-category-pagination__results">{{ results }}</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="blog-category-empty">
|
||||
<div class="blog-category-eyebrow">Журнал свадебного салона</div>
|
||||
<h2>{{ text_empty }}</h2>
|
||||
<a href="{{ continue }}" class="btn btn-dark">{{ button_continue }}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ content_bottom }}
|
||||
{{ footer }}
|
||||
Reference in New Issue
Block a user