-
React frontend with bootstrap and css
Steps to import bootstrap
- npm install bootstrap
- src/index.js add the code
import ‘bootstrap/dist/css/bootstrap.css’;
- in index.js
import ‘./index.css’;
Inline style
<h2 style={{borderWidth:’3px’;borderColor:’#333′}}>sample</h2>
Sample index.js with bootstrap
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import 'bootstrap/dist/css/bootstrap.css'; function ServiceList(){ return ( <div className="row"> <h1> Data Based Services</h1> <Service /> <Service /> <Service /> <Service /> </div> ); } const Service=()=>{ return ( <div className="col-sm-3"><Image ></Image> <Title /> <Eb /> </div> ); }; const Image= ()=>{ return <img alt='' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiSEiPuY8hANyZMO0UOUWdck8v5dObYgql0dgWQdka4A&s" /> }; const Title= ()=>{ return <h3>Data Analyst</h3> }; const Eb = () =>{ return <button style={{color:'pink',borderWidth:'3px'}}>Enquire </button> }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<ServiceList />);
to install react and start :
npx create-react-app demo
cd demo
npm start
-
How to add custom css file in symfony
- check for node installed or not [node -v] if not install it.
- composer require symfony/webpack-encore-bundle
- npm install webpack-notifier
- composer require symfony/asset
- create a file in public/style/style.css
- call the css file in base.html.twig file with code as follow
{% block stylesheets %} <link rel="stylesheet" href="{{ asset('style/style.css') }}" > {% endblock %}
- npm run dev
-
Symfony registration form Error
The controller for URI “/register” is not callable: Environment variable not found: “MAILER_DSN”.
Go to .env file
MAILER_DSN=gmail://xxxxxxxx@gmail.com:mdp@localhost MAILER_URL=gmail://xxxxxxxx@gmail.com:mdp@localhost
-
Install symfony in xampp
C:\xampp\htdocs>composer create-project symfony/website-skeleton lee_example
start the server for project
C:\xampp\htdocs\lee_example>php -S 127.0.0.1:8000 -t public
-
magento 2 how to check if module is enabled or disabled in phtml file
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$moduleManager = $objectManager->get(‘\Magento\Framework\Module\Manager’);
$xme = $moduleManager->isEnabled(‘Sparsh_AutoRelatedProducts’);
if( $xme==1){
echo “module enable”;
}
-
Jquery code : to match element’s value from its id and show text based on that to other element
<script> jQuery(document).ready(function(){ var xle; xle= jQuery("#coupon_code").val(); if(xle>"FREENEXT") { jQuery("#msg").html('Express Delivery'); jQuery("#msg").css('color','#000'); } }); </script>
-
limit Input text box charecters ,enter only 10 characters at max
<script> var keycount =0; jQuery(document).on('keydown', 'input.product-custom-option', function(ev) { var c = ev.which; // console.log(c); if(c==8) { keycount--; } else{ keycount++; // console.log(keycount); } if(keycount>10) { return false; } }); </script> <input type="text" class="product-custom-option" />
OPtion 2
function ohmyfun() { var xdata=''; var lee = document.getElementsByClassName("product-custom-option")[0].id; console.log(lee); document.getElementsByClassName("product-custom-option")[0].addEventListener("keydown", getleecount); } function getleecount() { var lee_id = document.getElementsByClassName("product-custom-option")[0].id; var xle= document.getElementById(lee_id).value; console.log(xle.length); if(xle.length==9){ xdata = document.getElementById(lee_id).value; console.log(xdata); document.getElementById(lee_id).value=xdata; } else if(xle.length>9){ console.log(xdata); document.getElementById(lee_id).value=xdata; } } </script>
-
Get the attribute value in product page programatically
in Magento_Catalog / template /product/ make a phtml file .
write the below code
$_product = $block->getProduct(); $pi = $_product->getData('giftwrap'); // giftwrap is attribute name if($pi==1){ echo "show image";}
Magento_Catalog/layout /catalog_product_view.xml
<block name="catalog.mygifrwrap" template="Magento_Catalog::product/giftwrap.phtml" class="Magento\Catalog\Block\Product\View"/>
-
Get the product count by attribute(swatches) in filter option in magento 2
\Magento\Swatches\Block\LayeredNavigation\RenderLayered::getOptionViewData
return [
‘label’ => $swatchOption->getLabel(),
‘link’ => $linkToOption,
‘custom_style’ => $customStyle,
‘count’ => $filterItem->getCount()
];
Magento/Swatches/view/frontend/templates/product/layered/renderer.phtml
<?php foreach ($swatchData[‘options’] as $option => $label): ?>
<?php if(isset($label[‘count’])) {echo $label[‘count’];} ?>
-
Get product price and currency symbol in phtml page magento2 from product id
$objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $priceHelper = $objectManager->create('Magento\Framework\Pricing\Helper\Data'); $b= 1234; $productd = $objectManager->get('Magento\Catalog\Model\Product')->load($b); $regularPrice= $productd->getPrice(); $specialPrice = $productd->getFinalPrice(); <?php echo $priceHelper->currency($specialPrice, true, false) ?> // code for currency with special price