Я создал код, но слайдер не отображается в недавно просмотренных продуктах.
Вот мой код -
Я скачал Slick JS и CSS по следующей ссылке http://kenwheeler.github.io/slick/
Тогда я сделал следующее -
Шаг 1 -
Скопировал slick.min.js и slick.js в
приложение / дизайн / интерфейс / _YOUR_VENDOR _ / _ YOUR_THEME_ / веб / JS /
Шаг 2 -
Создайте файл requirejs-config.js в
приложение / дизайн / интерфейс / _YOUR_VENDOR _ / _ YOUR_THEME_ / веб /
с помощью следующего кода в requirejs-config.js
var config = {
paths: {
slick: 'js/slick'
},
shim: {
slick: {
deps: ['jquery']
}
}
};
Шаг 3 -
Скопированы slick.less и slick-theme.less в
приложение / дизайн / интерфейс / _YOUR_VENDOR _ / _ YOUR_THEME_ / веб / CSS / источник /
Шаг 4 -
Очистить кеш и развернуть файлы
Шаг 5 -
Создано просмотрено_grid.phtml в
приложение / дизайн / интерфейс / _YOUR_VENDOR_ / YOUR_THEME / Magento_Reports / просмотр / интерфейс / шаблоны / виджет / просмотреть / содержание
со следующим кодом -
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<?php
/**
* @var $block \Magento\Reports\Block\Product\Viewed
*/
?>
<?php
if ($exist = ($block->getRecentlyViewedProducts() && $block->getRecentlyViewedProducts()->getSize())) {
$type = 'widget-viewed';
$mode = 'grid';
$type = $type . '-' . $mode;
$image = 'recently_viewed_products_grid_content_widget';
$title = __('Recently Viewed');
$items = $block->getRecentlyViewedProducts();
$showWishlist = true;
$showCompare = true;
$showCart = true;
$rating = 'short';
$description = ($mode == 'list') ? true : false;
}
?>
<?php if ($exist):?>
<div class="block widget block-viewed-products-<?= /* @escapeNotVerified */ $mode ?>">
<div class="block-title">
<strong role="heading" aria-level="2"><?= /* @escapeNotVerified */ $title ?></strong>
</div>
<div class="block-content">
<?= /* @escapeNotVerified */ '<!-- ' . $image . '-->' ?>
<div class="products-<?= /* @escapeNotVerified */ $mode ?> <?= /* @escapeNotVerified */ $mode ?>">
<ol class="product-items <?= /* @escapeNotVerified */ $type ?>">
<?php $iterator = 1; ?>
<?php foreach ($items as $_item): ?>
<?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>
<div class="product-item-info">
<a href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>" class="product-item-photo">
<?= $block->getImage($_item, $image)->toHtml() ?>
</a>
<div class="product-item-details">
<strong class="product-item-name">
<a title="<?= $block->escapeHtml($_item->getName()) ?>"
href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>" class="product-item-link">
<?= $block->escapeHtml($_item->getName()) ?>
</a>
</strong>
<?php /* @escapeNotVerified */ echo $block->getProductPriceHtml(
$_item,
\Magento\Catalog\Pricing\Price\FinalPrice::PRICE_CODE,
\Magento\Framework\Pricing\Render::ZONE_ITEM_LIST,
[
'price_id_suffix' => '-' . $type
]
) ?>
<?php if ($rating): ?>
<?= $block->getReviewsSummaryHtml($_item, $rating) ?>
<?php endif; ?>
<?php if ($showWishlist || $showCompare || $showCart): ?>
<div class="product-item-actions">
<?php if ($showCart): ?>
<div class="actions-primary">
<?php if ($_item->isSaleable()): ?>
<?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)): ?>
<button class="action tocart primary"
data-mage-init='{"redirectUrl": {"url": "<?= /* @escapeNotVerified */ $block->getAddToCartUrl($_item) ?>"}}'
type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
<span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
</button>
<?php else: ?>
<?php
$postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
$postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
?>
<button class="action tocart primary"
data-post='<?= /* @escapeNotVerified */ $postData ?>'
type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
<span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
</button>
<?php endif; ?>
<?php else: ?>
<?php if ($_item->getIsSalable()): ?>
<div class="stock available"><span><?= /* @escapeNotVerified */ __('In stock') ?></span></div>
<?php else: ?>
<div class="stock unavailable"><span><?= /* @escapeNotVerified */ __('Out of stock') ?></span></div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($showWishlist || $showCompare): ?>
<div class="actions-secondary" data-role="add-to-links">
<?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
<a href="#"
class="action towishlist" data-action="add-to-wishlist"
data-post='<?= /* @escapeNotVerified */ $block->getAddToWishlistParams($_item) ?>'
title="<?= /* @escapeNotVerified */ __('Add to Wish List') ?>">
<span><?= /* @escapeNotVerified */ __('Add to Wish List') ?></span>
</a>
<?php endif; ?>
<?php if ($block->getAddToCompareUrl() && $showCompare): ?>
<?php $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');?>
<a href="#" class="action tocompare"
data-post='<?= /* @escapeNotVerified */ $compareHelper->getPostDataParams($_item) ?>'
title="<?= /* @escapeNotVerified */ __('Add to Compare') ?>">
<span><?= /* @escapeNotVerified */ __('Add to Compare') ?></span>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?= ($iterator == count($items)+1) ? '</li>' : '' ?>
<?php endforeach ?>
</ol>
</div>
<?= $block->getPagerHtml() ?>
</div>
</div>
<script>
require([
'jquery',
'slick'
], function ($) {
jQuery(document).ready(function () {
jQuery(".widget-viewed").slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1280,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
});
</script>
<?php endif;?>
Шаг 6 -
Очистить кеш и снова развернуть файлы
Но слайдер все еще не отображается для недавно просмотренных продуктов в веб-интерфейсе
Пожалуйста, помогите мне исправить код или создать модуль для отображения недавно просмотренного продукта с помощью скользящего слайдера :)
Ответы:
Вам нужно исправить ваш шаг 2, как показано ниже: сохраняйте файл requirejs-config.js в корне вашей темы вместо веб-папки.
Создайте файл requirejs-config.js в
с помощью следующего кода в requirejs-config.js
Запустить
источник
Используйте код ниже:
источник
requirejs-config.js
должно быть как нижеисточник
Если кому-то еще нужно сделать это, вот что я сделал для Magento 2.3.2. Виджет «Недавно просмотренные» добавляется с помощью нокаута, который запускается после всех остальных javascript. Поэтому, чтобы нанести пятно, мне пришлось использовать пользовательскую привязку afterRender .
Как только я обнаружил, какой шаблон нокаута и viewmodel js недавно просматривал используемые продукты, это было довольно просто. Вот мой код:
копия
vendor/magento/module-catalog/view/base/web/js/product/list/listing.js
в свою тему какapp/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/js/product/list/listing.js
Убедитесь, что jquery / slick добавлен в верхнюю часть файла скрипта, например, так (предполагается, что вы уже добавили их в require-config.js):
Добавьте новую функцию так:
Теперь скопируйте шаблон HTML в вашу тему. Копировать
/vendor/magento/module-catalog/view/base/web/template/product/list/listing.html
вapp/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.html
Я добавил новый Div, но я не уверен, что вам нужно это сделать. Я добавил это:До последнего закрытия дел. Надеюсь, это поможет.
источник