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. ...


11

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: ...


5

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 ...


5

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

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

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


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.


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

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

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

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

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.


1

After debugging for a day I had find out below solution. For Owl Crousel js issue i followed below steps for my module, Step1 : Added js below path, Vendorname/Modulename/view/frontend/web/js/owl.carousel.js Step2: In my custom file I have called js like this, where my files resides at below path, Vendorname/Modulename/view/frontend/templates/product/...


1

It's a caching problem. Let Magento generate the files the first time and then you'll be fine. It isn't anything to worry about as long as it works afterwards. Whoever hits the page the first time will have that problem, but it will not happen for everyone the first time... you just need to generate it and it won't happen at all. Try it in another browser ...


1

id attribute is missing for your <ul> tag it should be like below <ul id= "slides"> <li>....</li> ... ... ... </ul>


1

According to OwlCarousel documentation, you should change itemsCustom option values. itemsCustom : [ [SCREEN_WIDTH, NO_OF_ITEMS] ] Here, you should change NO_OF_ITEMS according to SCREEN_WIDTH. As per you code, I can suggest you to change it like: itemsCustom: [[0, 1], [320, 1], [480, 2], [768, 3], [992, 2], [1280, 5]] Note here, I have changed ...


1

add the item amount to your code for example after lazyload:true, items: 5, also check this line: itemsCustom: [[0, 1], [320, 1], [480, 2], [768, 3], [992, 2], [1280, 4]] for example when the width is 1280px -> show 4 items, if width is 992px -> show 2 items .....


1

First define js lib in requirejs-config.js var config = { "shim": { "owlcarousel": [ 'jquery' ] }, "paths": { "owlcarousel": "Vendor_Module/js/owlcarousel/owl.carousel.min" } }; Then in place you want to call carousel, place js script below <script type="text/javascript"> //<![CDATA[ require(...


1

Use owl carousel slider Add below code in homepage {{block type="core/template" name="homepage-slide" template="yourtemplate/yourtemplate.phtml"}} Your below code to template yourtemplate/yourtemplate.phtml: <div id="owl-demo"> <?php i=1; foreach($collection as $child){ ?> <?php if($i == 0 || $i%3 == 0) { ?> <div ...


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