💜
storelocator
  • Overview
  • Installation
    • Setup Module
    • Extension Version Update
  • Config and Usage
    • Module Configuration Admin Site
    • Add Filter Tag’s and Categories
    • Add Storelocator
    • List StoreLocator at frontend page
    • Location Details Page
    • Run cron job to import storelocator items
    • Use couponcode for Lof Followup email
    • Use couponcode for Newsletter
    • How to use on frontend
    • Video Tutorial
    • FAQ
      • How to custom layout xml and template?
      • How to add content over slide image?
      • How to setup sample profile?
  • Other Module Guides
    • Magento 2 Step Recommendation
Powered by GitBook
On this page
  1. Config and Usage
  2. FAQ

How to custom layout xml and template?

To override the module on your custom theme you should create the folder module in your custom theme folder as this:

app/design/frontend/[Vendor Theme]/[Theme Name]/Ves_ImageSlider

Then copy there files and folders in folder: app/code/Ves/ImageSlider/view/frontend/ Then paste into the folder “Ves_ImageSlider” on your custom theme folder.

1. Config layout xml

  • Edit the file “app/code/Ves/ImageSlider/view/frontend/layout/default.xml”

  • The content code of the file:

  • <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
	<head>
		<css src="Ves_ImageSlider::css/owl.carousel.min.css" />
		<css src="Ves_ImageSlider::css/animate.css" />
	</head>
	<body>
		<referenceContainer name="before.body.end">
			<block class="Magento\Framework\View\Element\Template" name="imageslider.js" template="Ves_ImageSlider::js.phtml" />
		</referenceContainer>
	</body>
</page>

  • The module are calling 2 css files:

  • <css src="Ves_ImageSlider::css/owl.carousel.min.css" />
<css src="Ves_ImageSlider::css/animate.css" />

If you want to remove there css files you just need add code in layout xml as this:

<remove src="Ves_ImageSlider::css/owl.carousel.min.css" />
<remove src="Ves_ImageSlider::css/animate.css" />

2. Custom template

  • Edit the file “app/code/Ves/ImageSlider/view/frontend/templates/widget/slides.phtml“

  • The file “app/code/Ves/ImageSlider/view/frontend/templates/js.phtml” to init owl carousel js to run image slider.

PreviousFAQNextHow to add content over slide image?

Last updated 2 years ago