Saya telah membuat kode tetapi slider tidak muncul di produk yang baru dilihat.
Ini kode saya -
Saya telah mengunduh sls js dan css dari tautan berikut http://kenwheeler.github.io/slick/
Maka saya telah melakukan yang berikut -
Langkah 1 -
Salinan slick.min.js dan slick.js di
aplikasi / desain / antarmuka / _YOUR_VENDOR _ / _ YOUR_THEME_ / web / js /
Langkah 2 -
Buat file requirejs-config.js di
aplikasi / desain / antarmuka / _YOUR_VENDOR _ / _ YOUR_THEME_ / web /
dengan kode berikut di requireejs-config.js
var config = {
paths: {
slick: 'js/slick'
},
shim: {
slick: {
deps: ['jquery']
}
}
};
Langkah 3 -
Salinan slick.less dan slick-theme.less in
aplikasi / desain / antarmuka / _YOUR_VENDOR _ / _ YOUR_THEME_ / web / css / sumber /
Langkah 4 -
Bersihkan cache dan gunakan file
Langkah 5 -
Dibuat viewed_grid.phtml di
aplikasi / desain / antarmuka / _YOUR_VENDOR_ / YOUR_THEME / Magento_Reports / view / frontend / template / widget / dilihat / konten
dengan kode berikut -
<?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;?>
Langkah 6 -
Bersihkan cache dan gunakan kembali file
Tetapi slider masih tidak muncul untuk produk yang baru dilihat di frontend
Tolong bantu saya memperbaiki kode atau membuat modul untuk menampilkan produk yang baru saja dilihat dengan bilah geser :)
Jawaban:
Anda perlu memperbaiki langkah 2 Anda seperti di bawah ini, Simpan file yang diperlukan-config.js di root tema Anda alih-alih folder web.
Buat file requirejs-config.js di
dengan kode berikut di requireejs-config.js
Lari
sumber
Gunakan kode di bawah ini:
sumber
requirejs-config.jsharus seperti di bawah inisumber
Memetikan orang lain perlu melakukan ini, inilah yang saya lakukan untuk Magento 2.3.2. Widget yang Baru Dilihat akan ditambahkan melalui sistem gugur, yang muncul setelah semua javascript lainnya. Jadi untuk menerapkan slick saya harus menggunakan "afterRender" custom binding .
Setelah saya menemukan yang knockout template dan viewmodel js baru-baru ini dilihat produk yang digunakan itu cukup mudah. Ini kode saya:
Salin
vendor/magento/module-catalog/view/base/web/js/product/list/listing.jske tema Anda sepertiapp/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/js/product/list/listing.jsPastikan jquery / slick ditambahkan ke bagian atas file skrip, seperti itu (ini dengan asumsi Anda sudah menambahkannya ke memerlukan-config.js):
Tambahkan fungsi baru seperti:
Sekarang salin templat HTML KO ke tema Anda. Salin
/vendor/magento/module-catalog/view/base/web/template/product/list/listing.htmlkeapp/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.htmlsaya menambahkan Div baru, tapi saya tidak yakin Anda perlu melakukan itu. Saya menambahkan ini:Sebelum div penutupan terakhir. Semoga itu bisa membantu.
sumber