Hot answers tagged

13

Display Products on Homepage in Magento 2 Another way to make the homepage attractive, though, is to show the best products on the homepage of your store. It is the best way to get the attention of the users towards your products which increases the chances of more sales. So, today you are going to learn how to display products on the homepage of Magento 2. ...


12

You have to created one requirejs-config.js file inside your theme like, First Add owlcarousel.js file inside, app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js Add your css inside, app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css call css inside your tempalte file using, <link rel="stylesheet" type="text/css" href="...


8

first you need to put slider at, Step1 themename/themename/Magento_Theme/web/js/owl.carousel.js Step2 Do mapping for the file in themename/themename/Magento_Theme/requirejs-config.js /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ var config = { map: { '*': { owlcarouselslider: ...


6

You can configure slider in view.xml file. It located in /theme_folder/etc/view.xml. There you can write vars for gallery. For luma theme it looks like this <vars module="Magento_Catalog"> <!-- Gallery and magnifier theme settings. Start --> <var name="gallery"> <var name="nav">thumbs</var> <!-- Gallery ...


6

Firstly you need to put your js in app/code/vendor/module/frontend/web/js Secondly you need to put your requirejs-config.js in app/code/vendor/module/frontend You dont need to mention .js extension at last. Also you need to write Vendor_Modulename while calling js in requirejs-config.js Just pass file name only. Try below code : var config = { ...


4

If you want to add owl carousel in Magento 2 way, you should follow these steps. Copy owl.carousel.js to app/design/frontend/<vendor_name>/<theme_name>/web/js/owl-carousel/. Add your requirejs module app/design/frontend/<vendor_name>/<theme_name>/web/js/carousel.js. define([ 'jquery', 'owlCarousel' ], function($) { ...


4

I got solution for my requirement, I did it in below way: open below file: app/design/frontend/[your_package]/[your_theme]/template/catalog/layer/view.phtml update it according to my file: <?php /** * Category layered navigation * * @see Mage_Catalog_Block_Layer_View */ $current_catId = Mage::registry('current_category'); if ($current_catId > 0)...


4

You can create a '_module.less' file and then call your less files in it. Add your 'slick.less' and 'slick-theme.less' file under the following directory app/code/Vendor/Module/view/frontend/web/css/source Now create '_module.less' file as given below app/code/Vendor/Module/view/frontend/web/css/source/_module.less @import 'slick.less'; @import 'slick-...


4

In your custom theme add: app\design\frontend\CustomVendor\theme-custom\Magento_Catalog\layout\catalog_product_view.xml In this file we are going to tell Magento to move the reviews block as follows: <?xml version="1.0"?> <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:...


3

Change Resource to ResourceModel namespace Mycompany\Bannerslider\Model\ResourceModel\Banner; class Collection extends \Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection { public function __construct() { $this->_init('Mycompany\Bannerslider\Model\Banner', 'Mycompany\Bannerslider\Model\ResourceModel\Banner'...


3

You must create the view.xml file on your theme app/design/frontend/VendorPackage/Theme/etc/view.xml <?xml version="1.0"?> <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <vars module="Magento_Catalog"> <var name="gallery"> &...


3

Go to skin/frontend/rwd/default/js/slideshow.js and replace code with this: $j(document).ready(function () { // ============================================== // UI Pattern - Slideshow // ============================================== $j('.slideshow-container .slideshow') .cycle({ slides: '> li', pager: '....


3

create a static block (CMS > Static Blocks) that contains your slider Create a new widget instance (CMS > Widgets) and select your theme Add Layout Update for page "Home Page" and reference "Page Header" (this is a container within the page header, below the main navigation) Select static block from (1) in "Widget Options": Save. Clean cache.


3

I assume that you are using a custom theme name Vendor_customtheme You can follow the below steps to implement OwlCarousel Slider for Related Product in the product detail page. Note: Below example describe OwlCarousel implementation for Related Products in the product detail page. You need to update app/design/frontend/Vendor/customtheme/Magento_Theme/...


3

The pwa studio project is moving quickly, and so there are a lot of changes that might not work in a couple of version down the line, but here is a way to add in a slider to the home page. After installing the project you can add any slider you like, but i'll be using React Slick. You can do that by moving into the venia folder and doing a install: cd ...


3

That's due to calling init twice This works without error: $(".slickslider").not('.slick-initialized').slick()


3

You can follow this link magento 2.2.2 - How to transfer the product thumbnail to the left side Modify your theme view.xml file <vars module="Magento_Catalog"> <var name="gallery"> <var name="navdir">vertical</var> <!-- Sliding direction of thumbnails (horizontal/vertical) --> </var> ...


2

Make sure you have selected the base, small and thumbnail options for your product image as shown below. The Magento logo in grey is a placeholder for a product with no images selected.


2

You need refactor your module from Magento2 1.0.0 to Magento2 2.0.0. It included many change, i can list something in the following: You find and replace all namespace have contain Resource to ResourceModel Change name Resource folder to ResourceModel in Yourcompany/YourModule/Model Change all format(xsd) of .xml file in etc folder. Change Observer/Event(if ...


2

Yes, this can be done mostly in the CMS. For the carousel you need some kind of JavaScript library, like OWL Carousel, if your theme doesn't already come with a slider widget. See this question about how to integrate it. Then, you can use widgets to insert product images/links inside the single elements of the carousel.


2

ElasticSuite extension: https://github.com/Smile-SA/elasticsuite adds possibility to create numeric attributes, and filter them using sliders in layered navigation.


2

You can achieve this with the help of this free extension https://www.weltpixel.com/owl-carousel-and-slider.html You can create banner slider for Homepage and product sliders for any page You can create slider for following types : New Products Best Sell Products Sell Products Recently Viewed Products Related Products Upsell Products Cross-sell Products ...


2

Running commands to register and install a module is a must (compulsory), you cannot skip it. If you do not have access to ssh, you can try using php's system function to do the job. Make a file with a secure name (so anyone else cannot hit it) at magento's root and paste following code in it; <?php echo system("php bin/magento setup:upgrade"); ?> ...


2

You need to correct your step 2 make as below, Keep requirejs-config.js file in root of your theme instead of web folder. Create requirejs-config.js file in app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/ with the following code in requirejs-config.js var config = { paths: { slick: 'js/slick' }, shim: { slick: { ...


2

Your installed Ves Extension is not compatible with magento 2.3, hence you should upgrade it to latest version. Magento older versions has tinymce 3 and its js file was defined as tinymce in requirejs-config.js file, but in Magento 2.3 have used latest tinymce version and defined with as tinymce4 in requirejs-config.js file. so you have to change defined ...


2

Since you need specific to luma theme, My suggestion that you do it in module leve. Add requirejs-config.js file in app/code/Vendor/Module/view/frontend/requirejs-config.js add owlcarousel js entry: var config = { paths: { 'myowl': 'Vendor_Module/js/owl.carousel' }, shim: { 'myowl': { deps: ['jquery'] }, } }; then add your owl js file ...


2

Your js/jquery.elastislide not recognizing jquery means you have not assigned shim that will create your js dependency to jquery in requirejs-config.js Your code should look like in requirejs-config.js : var config = { map: { '*': { 'elastislide': 'js/jquery.elastislide' } }, shim: { 'js/jquery.elastislide': [...


2

There is no core price slider functionality in Magento, you have to customize the functionality or you can use this module https://www.magesolution.com/magento2-layered-navigation.html Or if are using any premium theme then maybe the theme has the price slider functionality.


2

Try with this below code inside foreach in that file : <?php /* @escapeNotVerified */ echo $_item->getResource()->getAttribute('subname')->getFrontend()->getValue($_item); ?>


1

The other 2 answers are excellent, and I have copied elements of both, but I was occasionally finding issues with error messages "$ is not a function" and "Cannot read property 'fn' of undefined". Also I wanted a method centred on the content pages. So this combined method might help somebody Copy owl.carousel.js into app/design/frontend/vendorname/...


Only top voted, non community-wiki answers of a minimum length are eligible