• react

    React frontend with bootstrap and css

    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

  • symfony

    How to add custom css file in symfony

    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
  • javascript

    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>
  • javascript

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

  • MAGENTO2

    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’];} ?>

  • magento,  MAGENTO2

    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