• react

    React frontend with bootstrap and css

    / July 29, 2022 / 0 Comments

    Steps to import bootstrap

    1. npm install bootstrap
    2. 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

    read more
  • symfony

    How to add custom css file in symfony

    / July 20, 2022 / 0 Comments
    1. check for node installed or not [node -v] if not install it.
    2. composer require symfony/webpack-encore-bundle
    3. npm install webpack-notifier
    4. composer require symfony/asset
    5. create a file in public/style/style.css
    6. 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
    read more
  • javascript

    limit Input text box charecters ,enter only 10 characters at max

    / December 17, 2021 / 0 Comments 
    <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>
    read more
  • javascript

    Get the attribute value in product page programatically

    / November 17, 2021 / 0 Comments

    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"/>

    read more
  • MAGENTO2

    Get the product count by attribute(swatches) in filter option in magento 2

    / November 17, 2021 / 0 Comments
     \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’];} ?>

    read more
  • magento,  MAGENTO2

    Get product price and currency symbol in phtml page magento2 from product id

    / October 26, 2021 / 0 Comments 
    $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

    read more