J'ai créé un code mais le curseur n'apparaît pas dans les produits récemment consultés.
Voici mon code -
J'ai téléchargé slick js et css à partir du lien suivant http://kenwheeler.github.io/slick/
Ensuite, j'ai fait ce qui suit -
Étape 1 -
Slick.min.js et slick.js copiés dans
app / design / frontend / _YOUR_VENDOR _ / _ YOUR_THEME_ / web / js /
Étape 2 -
Créez le fichier requirejs-config.js dans
app / design / frontend / _YOUR_VENDOR _ / _ YOUR_THEME_ / web /
avec le code suivant dans requirejs-config.js
var config = {
paths: {
slick: 'js/slick'
},
shim: {
slick: {
deps: ['jquery']
}
}
};Étape 3 -
Copié slick.less et slick-theme.less dans
app / design / frontend / _YOUR_VENDOR _ / _ YOUR_THEME_ / web / css / source /
Étape 4 -
Vider le cache et déployer des fichiers
Étape 5 -
Créé view_grid.phtml dans
app / design / frontend / _YOUR_VENDOR_ / YOUR_THEME / Magento_Reports / view / frontend / templates / widget / seen / content
avec le code suivant -
<?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;?>Étape 6 -
Vider le cache et déployer à nouveau les fichiers
Mais le curseur n'apparaît toujours pas pour les produits récemment consultés en frontend
S'il vous plaît, aidez-moi à corriger le code ou à créer un module pour afficher le produit récemment consulté avec slick slider :)
Réponses:
Vous devez corriger votre étape 2 comme ci-dessous, Conservez le fichier requirejs-config.js à la racine de votre thème au lieu du dossier Web.
Créez le fichier requirejs-config.js dans
avec le code suivant dans requirejs-config.js
Courir
la source
Utilisez le code ci-dessous:
la source
requirejs-config.jsdevrait être comme ci-dessousla source
Au cas où quelqu'un d'autre aurait besoin de le faire, voici ce que j'ai fait pour Magento 2.3.2. Le widget récemment consulté est ajouté via knockout, qui se déclenche après tous les autres javascript. Donc, pour appliquer le slick, j'ai dû utiliser la liaison personnalisée "afterRender" .
Une fois que j'ai trouvé le modèle de désactivation et le modèle de vue que js avait récemment consultés, les produits étaient assez simples. Voici mon code:
Copiez
vendor/magento/module-catalog/view/base/web/js/product/list/listing.jssur votre thème commeapp/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/js/product/list/listing.jsAssurez-vous que jquery / slick est ajouté en haut du fichier de script, comme ceci (cela suppose que vous les avez déjà ajoutés à require-config.js):
Ajoutez une nouvelle fonction comme ceci:
Copiez maintenant le modèle HTML à élimination directe dans votre thème. Copier
/vendor/magento/module-catalog/view/base/web/template/product/list/listing.htmldansapp/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.htmlJ'ai ajouté une nouvelle Div, mais je ne suis pas sûr que vous ayez besoin de le faire. J'ai ajouté ceci:Avant la dernière div de clôture. J'espère que cela pourra aider.
la source