PHP, WORDPRESS, MAGENTO, JOOMLA

Thursday, 18 May 2023

Laravel

What is Composer
---------------------------------------------------------------

https://getcomposer.org/

go to cmd type-> composer -V (to check composer installed or not)

go to cmd type-> composer self-update

go to cmd type-> composer self-update --rollback(to reinstall old version)

Composer ek aisa software hai jo web development ke liye use hota hai. Ye ek dependency management tool hai jo PHP programming language ke projects mein use hota hai. Composer ke through aap third-party libraries ko manage kar sakte hain, jaise ki frameworks, packages, aur plugins.

Composer, PHP mein project dependencies ko track karta hai aur unhe manage karne mein madad karta hai. Iske dwara aap kisi bhi library ko apne project mein easily add, update, aur remove kar sakte hain. Ye ek command-line tool hai, jise aap apne project directory mein run karke use kar sakte hain.

Composer, "composer.json" file aur "composer.lock" file ke saath kaam karta hai. "composer.json" file mein aap apne project ke dependencies, version constraints, aur autoloading rules specify kar sakte hain. "composer.lock" file mein exact versions aur dependencies ki information hoti hai, jo ek consistent development environment create karne mein help karti hai.

Composer, PHP community mein bahut popular hai aur widely used development tool hai. Ye ek powerful aur flexible way hai PHP projects ke dependencies ko manage karne ka. Iske through aap apne project ke liye required libraries ko easily install kar sakte hain aur dependency conflicts ko resolve kar sakte hain.

How to install Laravel

Step 1- Install XAMPP

Step 2- Composer

Step 3- open command line and type => composer global require laravel/installer

Create a new Laravel application enter project name

Step 4- go to xampp->htdocs folder => and type cmd in path and press enter

Step 5- laravel new folder_name(laravelfirstapp)

Step 6- laravel installed finally -> type cd laravelfirstapp

Step 7- type cls (clear screen)

Step 8- type ->php artisan serve (load project in port http://127.0.0.1:8000)

Thursday, 9 March 2023

Java Script ES6

//use of var keyword-> variable scope globally

console.log(name);

var name="lalit";

name="abc";

console.log(name);

name="test";

console.log(name);

//use of let keyword-> variable scope within the block

//console.log(name);

let name="lalit";

name="abc";

console.log(name);

name="test";

console.log(name);

//use of const keyword-> variable can not possible reassign

//console.log(name);

const name="lalit";

console.log(name);

name="test";

console.log(name);

*********************************************

//Function Declaration ES5

function greet(name) {

return "Hello" + " " + name;

}

console.log(greet("lalit"));

//Function Declaration ES6 (Arrow Function)

const greet= (name) => {

return "Hello There" + " " + name;

};

console.log(greet("Lalit"));

const greet= name => { //put code here };

//Function Declaration Multiple Parameter ES6 (Arrow Function)

const greet= (name,age) => {

return "Hello There" + " " + name + " " + age;

};

console.log(greet("Lalit",30));

//Function Declaration Single Parameter ES6 (Arrow Function)

const Sqr = num => {

return num*num;

};

console.log(Sqr(6));

or write this

const Sqr = num => num*num;

console.log(Sqr(6));

*******************************

//this Keyword with Arrow Function

//ES5

const person = {

test(){

console.log(this);

};

person.test();

--------------------------------------------------------------------------

const person = {

test(){

var self = this;

setTimeout( function(){

console.log(self);

}, 2000);

};

person.test();

ES6

const person = {

test(){

//var self = this;

setTimeout(() => {

console.log(this);

}, 2000);

};

person.test();

*******************************

//Template Literals

-ES5

var name = "lalit";

console.log("welcome to" + " " + name + " ! Have a nice day");

-ES6 -> use tiled symbol and ${varname}

const name1 = "lalit";

console.log(`welcome to ${name1} ! Have a nice day`);

//Print Multiline string in JS

-ES5

//var name = "lalit";

//var res = "Welcome \n to "+name;

//console.log(res);

-ES6

const name = "lalit";

const res = `welcome to Blue

world mandhana

${name}`;

console.log(res);

*************************************************

Objects Destructing in

-ES5

var details = {

name: "lalit",

contact: "1238899",

email: "abc@gmail.com"

}

var name = details.name;

var contact = details.contact;

var email = details.email;

console.log(name);

console.log(contact);

console.log(email);

-ES6

let detailsNew = {

name1: "lalit",

contact1: "1238899",

email1: "abc@gmail.com"

}

const {name1:company_name,contact1,email1} = detailsNew;

console.log(company_name);

console.log(contact);

console.log(email);

************************************

//Array Destructing in

-ES5

var arr = ["A1","A2","A3","A4"]

var v1 = arr[0];

var v2 = arr[1];

var v3 = arr[2];

var v4 = arr[3];

console.log(v1);

console.log(v2);

console.log(v3);

console.log(v4);

-ES6

var arres6 = ["B1","B2","B3","B4"];

let [var1,var2,var3,var4] = arres6;

console.log(var1);

console.log(var2);

console.log(var3);

console.log(var4);

************************************

Spread Operator

//const oldArray = [1,2,3,4,5];

//const newArray = ["A","B","C",...oldArray,6,7,8,9,10];

//console.log(newArray);

Rest Operator with limited same as parameter value

const sum = (a,b,c,d) => a+b+c+d;

console.log(sum(1,2,3,4));

//console.log(sum(1,2,3,4,5,6,7)); not handle more than parameter(4) value

Rest operator with infinite value

const sum = (...numbers) => {

let total = 0;

numbers.forEach((n) => {

total += n;

});

console.log(total);

}

sum(1,2,3,4,5,6,7,8)

************************************

//Array Map Method

const courses = ["PHP", "ReactJS", "AngularJS", "JavaScript"];

const newCourses = courses.map((c) => {

return `<li> ${c} </li>`;

});

console.log(courses);

console.log(newCourses);

--------------------------

const series = [1,2,3,4,5,6,7,8,9,10];

const num = 5;

const table = series.map((s) => s*num );

console.log(table);

************************************

-------

Friday, 3 February 2023

English Speaking

create an image in mind and speak in English use present Indefinite, Past Indefinite (2nd form), present continuous (4th form)

1- Use Go

-----------------------------------

I go to Market.

I got to School.

I got to Hospital.

I go to Jim.

I go to Zoo.

2- Use eat(have)

-----------------------------------

I have Breakfast daily.

I have my lunch with my family.

I have dinner with friends.

3- Use Play

-----------------------------------

I play footbaal daily.

I play cricket.

I play Ludo.

I play Online Games.

I play Outer Games

4- Use Watch (kisi ko observe kerke dekhna)

----------------------------------------------

I Watch youtube video.

I watch movies.

I watch News.

5- Use See (achanak se dekhna)

----------------------------------------------

I saw beautiful girl.

I saw beautiful building.

6- Use Look at (eyes ko direction dena)

----------------------------------------------

look at this beautiful girl.

look at this beautiful building.

look at this car.

7- Use Read (kya-2 cheese hai padne wali- Nowels, Magzines)

-------------------------------------------------------

I read Nowels

I read Magzines

I read Newspapers

I read Indian Express Newspaper

**************************************

How to remove scrollbar bottom border in any section

==============================================

50 English Phrases https://www.youtube.com/watch?v=BS9Tfg1On1A

All Tenses in English Grammar https://www.youtube.com/watch?v=67TgyZQaig4

**********************************************

Basic Spoken English course 2023 (5 day course)

----------------------------------------------------

https://www.youtube.com/watch?v=UfXaMhJ9r2o

**********************************************************

Thursday, 2 February 2023

React JS

How to Convert any HTML website to React JS

---------------------------------------------------------------

https://www.youtube.com/watch?v=NSyCRfUzMb0

https://www.youtube.com/playlist?list=PLXIf5ibIbJuz_e3m6M2WMKrLUFIY2y23A

When (start) Create first React JS program need to install some software

1- node js download & install (nodejs.org)

2- Visual studio editor download & install

3- set location where want to create project eg-> D drive:/ -> Create folder->reactsample (go to under folder and press shift + right click mouse= open powershell windo here)-> selecting path-> and just write cmd and press enter

4- and write react app creation type command->npx create-react-app firstapp

5- selecting path-> and just write cmd and press enter-> type command->code space dot(code .)-> then open all project folders & files in visual studio

6- now go to terminal-> new terminal and type here-> npm start -> now start development server -> default url localhost:3000

7- now go to FirstApp->src->App.js and edit code after the logo to check code is working

8- go PowerShell type->go to project folder-> cd my-app(folder name)

go PowerShell run project->npm start

go run the project using vs code-> view-> Terminal

Local - http://localhost:3000

On Your Network - http://192.168.1.10:3000

Points covered :

- Download Html website template

- Create React application from create-react-app

- Add all folders from html website template to react project

- Add Html code into reactjs app

- Correct all comments , Images , In put fields , Hr , Br tags.

- Finally run the reactjs app.

***************************************************************

React First demo App (How to Setup ReactJS Project using CDN Links)

------------------------------------

<!DOCTYPE html>

<html>

<head>

<title>React Demo</title>

</head>

<body>

class App extends React.Component {

render() {

return (

<div>

<h1> Hello React JS Demo</h1>

</div>

);

}

ReactDOM.render(<App />, document.getElementById("root"));

</script>

</body>

</html>

*****************************************************

REACT TRANING

https://onedrive.live.com/redir?resid=288165385EEB6B14%21131&authkey=%21AL98gGTAABIAWnI&page=View&wd=target%28React.one%7C6be36bff-da06-4846-943f-b37ed1804c7e%2FReact%20Notes%7C512a80bf-da2f-466b-bf60-b955f483e32f%2F%29&wdorigin=NavigationUrl

******************************************

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. Web Components aims to solve such problems — it consists of three main technologies 1. Custom elements- A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface. 2. Shadow DOM- A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document. 3. HTML templates The template and slot elements enable you to write markup templates that are not displayed on the rendered page. These can then be reused multiple times as the basis of a custom element's structure.

-------------------------------------------------------------------------------

Create New React Component

------------------------------

Step 1- Go to project folder -> my-firstapp-> src

Step 2- under src folder create Lalit.js component same as App.js

-----lalit.js-------

import './App.css';

function Lalit() {

return (

<h1>React Heading lalit </h1>

<p>React testing description</p>

</header>

</div>

);

}

export default Lalit;

-------------------------------------

Step 3- go to index.js and import component

import Lalit from './Lalit';

and call component syntax

********************************************

Sunday, 25 December 2022

WIX

Learning Wix Platform

- Create Account (wix.com)

- Benefits Wix -> fast speed, easily edit no required coding

- Create your website Using ADI (Artificial Design Interface)

- Create your website with the Editor (Mostly Used)

- Go to wix editor-> media-> upload media->add logo

- Go to wix editor-> media-> upload media->add banner

- Add Elements -> text, image, button, menu, video, socials icons ..etc

****************************************

How to make URL and SEO

https://www.youtube.com/watch?v=H-DgyD_rTyo

Step-1->

1- Go to Wix Editor-> Site-> My dashboard

2- Click on contacts-> Marketing & SEO-> Get found on google -> Get Started

3- What’s your business or brand name? -> Binary Web Solutions-> next

4- Click on online

5- Which keywords do you want to use in your checklist? (enter keywords rank your website -> Enter 3 important keywort eg. Binary Technical blog)

Step-2-> Settings-> Website Settings-> Enter site name -> Set fav icon-> set social links-> Click on save.

Step-3-> On Page SEO

1- Go to Wix Editor-> click on pages & menus->

2- Site Menu-> Click on 3 dots-> SEO basics-> Enter Site title, url, Des etc...

Meta title-> No. 1 Wbsite creating service in Mumbai | Binary Web Solutions

Meta title-> put related content (Limit 50 char to 300 char)

All Images put alt tag

Go to google webmaster tool & bing webmaster-> and verify website-> copy and put code in Wix dashboard-> Setting seo-> paste and generate site map

3- Important Mandatory Notice-> 1 <H1> tag include in website home page and set keyword is must

Step-4-> Create Backlinks and do Off Page SEO

********************************************

How to Change or Update URL

Site Menu-> Click on 3 dots-> SEO basics-> Enter Site title, url, Des etc...

1- Go to Wix Editor-> Site-> My dashboard

2- Click on my site-> Go to MySites->

2- Go to Site Actions -> Rename Site-> Enter Site Name and put url-> Save

****************************************

Online booking system

Make new website for restaurant And start RND for booking system

https://www.youtube.com/watch?v=Gv09QQxcmXU

https://www.youtube.com/watch?v=-bcKCI-4Asw

1- Business Info => Go to dashboard-> Settings-> Business Info->enter business name, short description, and select category

enter email id, phone no, on location-> Put address, time 24 hours

2- Connect Payment => Go to dashboard-> Settings-> Accept Payments

3- Setup Online Ordering => Go to dashboard->Restaurants->orders->show here all order details-> Click on Setting->here put pickup, delivery

Online booking system Apps

Go to add apps-> Wix app market -Add apps

1- Wix Restaurants Menu

2- Wix Restaurants Order

3- Wix Table Reservations

****************************************

Starting with Wix Velo Code

---------------------------

Create a Database

1- Goto Content Manager -> Collection-> New collection

Enter collection name-> User Profile

How to create custom Wix forms

---------------------------

https://www.youtube.com/watch?v=CObN26-1qKU

https://www.youtube.com/watch?v=xdH8YdCfGnE

1- Goto wix editor-> add elements-> input-> add text input, upload button (add file), rich text(text box), button(Text & Icon button)

2- and connect all field to database

3- Goto content manager-> main-> Add Content Elements-> Form dataset

For Frontend

4- Goto content manager-> collections-> user profiles-> add blank dynamic page

********************************************************************************

How to create custom tabs in Wix

-------------------------------

1- Goto wix editor-> box-> multi-state box-> take ist box

2- click on manage states-> create duplicate state

3- go to velo code-> give id every box-> click properties & events-> give same id & different state id

4- add 3 buttons (out of multi-state box)-> put unique id

5- put velo code

https://support.wix.com/en/article/velo-tutorial-working-with-multi-state-boxes-and-code

$w.onReady(function () {

$w("#aboutbtn").onClick(() => {

$w('#demostatebox').changeState("aboutState");

} );

$w("#joinbtn").onClick(() => {

$w('#demostatebox').changeState("joinState");

} );

$w("#contactbtn").onClick(() => {

$w('#demostatebox').changeState("contactState");

} );

});

********************************************************************************

How to rotate infinite any image or text on WIX or Wix Animation

------------------------------------------------

https://www.editorx.com/infiniterotation

// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction

import wixAnimations from 'wix-animations';

const infinity_rotation_timeline = wixAnimations.timeline({ repeat: -1 });

$w.onReady(function (){

initRotationAnimation();

});

function initRotationAnimation() {

const element_to_rotate =

$w('#handBgId');

infinity_rotation_timeline.add(element_to_rotate, {

rotate: 360,

duration: 40000,

easing: 'easeLinear'

}).play();

}

**********************************************

Wix Training

-----------------------------------

https://wix.zoom.us/rec/share/Gbxa7SKkuBAnsac63Ch5giW25p8S55AORiv74F0FzovP5O1jjn66f4aSwEnbXpVg.zhoLkVuxlY-u5TBz

Passcode: m6Yuse!N-99

**********************************************

How to hide and show image on wix

-----------------------------------------

$w.onReady(function () {

$w('#hideButton').onClick((event) => {

$w('#image').hide();

})

$w('#showButton').onClick((event) => {

$w('#image').show();

})

});

******************************************

How to add and remove border on click on button

---------------------------------------------------

1- first declare variable on top of $w.onReady function

const btnActiveBorderColor = "#F4A336";

const btnActiveBorderWidth = "5px";

const btnBorderColor = "#ffffff";

const btnBorderWidth = "0px";

2- second put button click selector id under onReady function

$w.onReady(function (){

$w("#clientID1").onClick((event) => {

$w('#myClientBox').changeState("myClientState1");

$w("#clientID1").style.borderColor = btnActiveBorderColor;

$w("#clientID1").style.borderWidth = btnActiveBorderWidth;

//$w("#clientID1").style.borderRadius = "10px";

//$w("#clientID1").style.borderColor = "#F4A336";

$w("#clientID2").style.borderColor = btnBorderColor;

$w("#clientID2").style.borderWidth = btnBorderWidth;

$w("#clientID3").style.borderColor = btnBorderColor;

$w("#clientID3").style.borderWidth = btnBorderWidth;

} );

$w("#clientID2").onClick(() => {

$w('#myClientBox').changeState("myClientState2");

$w("#clientID2").style.borderColor = btnActiveBorderColor;

$w("#clientID2").style.borderWidth = btnActiveBorderWidth;

$w("#clientID1").style.borderColor = btnBorderColor;

$w("#clientID1").style.borderWidth = btnBorderWidth;

$w("#clientID3").style.borderColor = btnBorderColor;

$w("#clientID3").style.borderWidth = btnBorderWidth;

} );

$w("#clientID3").onClick(() => {

$w('#myClientBox').changeState("myClientState3");

$w("#clientID3").style.borderColor = btnActiveBorderColor;

$w("#clientID3").style.borderWidth = btnActiveBorderWidth;

$w("#clientID1").style.borderColor = btnBorderColor;

$w("#clientID1").style.borderWidth = btnBorderWidth;

$w("#clientID2").style.borderColor = btnBorderColor;

$w("#clientID2").style.borderWidth = btnBorderWidth;

} );

});

*************************************************

How can add dynamic services

https://www.youtube.com/watch?v=qTmtvJRdO9c

How can add dynamic pricing table

-------------------------------------

add app -> wix pricing plan

https://www.youtube.com/watch?v=-WWN_jVtcVY

*************************************************

Creating Objects, Dynamic page, Preset dynamic page

----------------------------------------------

1- Go to content manager-> create collection (Our Team)

2- And in collection create field Name(Title), description, team member image and insert data

3- Go to page add blank repeater -> and connect to database

4- Go to content manager-> and click on dataset-> go tp page and drag dataset which section dynamic, and click dataset manage content here and use setting to add limit

Dynamic page-> https://www.youtube.com/watch?v=XdCCeKbniag&t=600s

Changing Fonts in Wix Theme Manager- whole website

https://www.youtube.com/watch?v=aRrFEcaUwLM

https://www.youtube.com/watch?v=7tzVHPl6JqE

add more fields in form

https://support.wix.com/en/article/wix-bookings-request-adding-different-types-of-fields-to-the-wix-booking-form

*************************************************

Create components and dynamic any title and description

-------------------------------------------

1- create collection and insert data

2- go to page create deatasetand connect titlr in collection title, description in collection description

*************************************************************************

How To Add Custom Element or Web Components on wix

---------------------------------------------------

Custom Elements in Velo with three.js

https://www.youtube.com/watch?v=a9gqQDByleU&t=896s

HTml component

https://www.wix.com/velo/example/hello-html-component

Web Components consist of custom element and shadow DOM.

https://www.youtube.com/watch?v=tkQRQ8jBgnM&t=137s

How to create custom component

https://support.wix.com/en/article/velo-example-coding-a-more-robust-custom-element

https://developer.mozilla.org/en-US/docs/Web/API/Web_components

1- goto packages and search three.js instaal it

2- Goto Editor -> Click add elements-> embed code-> custom elements

3- Width-> 648 px, height->480px -> set this standard size

4- go to choose source -> select velo-> select three.js or create a new

5- goto public & backend

6- custom element rename it pink-three-cubejs

7- change tag name-> pink-three-cubejs

9- add text(paragraph) in page-> change text-> clicked: 0 times

10- and change text box id in-> clickTextbox

11- and change custom element id is canvas

12- and put code in page.js under on $w.onReady(function(){

//put code here

}

---------------------

Web component= Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated

away from the rest of your code — and utilize them in your web apps.. it consist of 3 main technologies

1- custom element: A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.

2- shadow DOM:A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.

3- Html Template: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.

-------------------------------------

*******************************************

Here is the sample code provided in the basic example:

pink-three-cubejs.js

--------------------

import * as THREE from 'three';
let render, camera, scene, cube, animationRequestId; 

const init = () => {
    scene = new THREE.Scene();

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(0, 4, 2);
    directionalLight.position.set(0, -4, 2);
    scene.add(directionalLight);
    scene.add(directionalLight2)
    
    cube = new createCube(0xFFC0CB, {x: 0, y: 0, z: 0})
    cube.rotation.x += 0.5
    scene.add(cube);

    const fov = 60;
    const aspect = 640/480;
    const near = 0.1;
    const far = 100;
    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(0,0,5);

    render = new THREE.WebGLRenderer( { antialias: true } );
    render.setSize(640, 480);
    render.render(scene,camera);

    animateCube(cube);
    return render.domElement;

}

const createCube = (hexColor,position) => {
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshPhongMaterial({color: hexColor})

    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(position.x,position.y,position.z)

    return cube;
}

const animateCube = () => {
    animationRequestId = requestAnimationFrame(animateCube);
    cube.rotation.x += 0.01;
    cube.rotation.z += 0.01;
    render.render(scene,camera);
}

class PinkThreeJS extends HTMLElement {
    constructor(){
        super();
    }

    connectedCallback(){
        this.appendChild(init());
        this.addEventListener('click', () => {
            this.dispatchEvent(new CustomEvent('clickedCanvas'));
        })
    }
    attributeChangedCallback(name, oldValue, newValue) {
        if(name === 'animation'){
            cancelAnimationFrame(animationRequestId);
        }
    }
    static get observedAttributes(){
        return ['animation'];
    }
}

customElements.define('pink-threejs-cube', PinkThreeJS);
*************************************************************************************
Now we define the actual custom element class. 
The myLogoDisplay class is the class of the custom element, which we'll use when registering the custom element.
We use standard constructor() and super() functions to create an instance of the element.
connectedCallback() is a lifecycle callback function that is triggered automatically when the element is connected. When the custom element is able to start rendering on the site, the two parts of our logo image can be displayed, with the help of the createImg() function.
Our last step is to register the custom element class with the customElements.define(name, class) method.
Once registered, new custom elements can be used in your site.
The first parameter, pink-threejs-cube, maps to the tag name, which we'll soon define in the Wix Editor.
The second parameter, PinkThreeJS, is the class name of the custom element.
customElements.define('my-logo-display', myLogoDisplay);

************************************************************
//App HTML page includes JS
<html>
<body>
<h2>HEADING</h2>
<p id="divid"></p>
 
<script>
var car_name = ["Mazda", "Volvo", "Nissan", "Ford", "Skoda", "Audi"];
var string = "";
var i;
for (i = 0; i < car_name.length; i++) {
string += car_name[i] + "<br>";
}
document.getElementById("divid").innerHTML = string;
</script>
 
</body>
</html>
**************************************

Saturday, 7 May 2022

Ajax

Ajax Syntax

---------------------------------------- ajax.php------------------------------------------------------------

<a href="javascript:void(0)" onclick="click_here()"> click Here </a>

function click_here(){

//alert('ajax');

jQuery.ajax({

url:'get.php',

type:'post',

success:function(result){

alert(result);

}

});

}

</script>

<hr>

function click_here(){

var num1 = jQuery("#num1").val();

jQuery.ajax({

url:'get.php',

type:'post',

data:'num1='+num1,

success:function(result){

alert(result);

} });

}

</script>

---------------------------get.php-------------------------

<?php

//echo"Hello";

// print_r($_POST);

echo $_POST["num1"]+20;

-----------------------------------types_ajax.php---------------------------

<a href="javascript:void(0)" onclick="click_here()"> click Here </a>

hit1();

hit2();

function hit1(){

jQuery.ajax({

url:'get1.php',

type:'post',

async:false,

success:function(result){

//alert(result);

console.log(result);

}

});

}

function hit2(){

jQuery.ajax({

url:'get2.php',

type:'post',

success:function(result){

// alert(result);

console.log(result);

} });

}

</script>

-----------------------------get1.php-----------------------

<?php

sleep(5);

echo"get1";

------------------------------------get2.php---------------------------

<?php

echo"get2";

===================================================================

Tuesday, 24 November 2020

SHOPIFY

STEPS

-------------------------------------------------------------------------------------------

Hanan https://www.youtube.com/watch?v=HM5dSZi4nXk&list=PLozpfQW4uw23CKlyE8D_YMX0KDjHdf0T6&index=3

https://www.shopify.com/partners/shopify-cheat-sheet

https://www.yahoobaba.net/

edit code, theme liquid

https://store.xyz.in/adminID - abc Password - 123

(1) Online Store -> Themes->oct 2020->action-> Only Preview (not publish)

(2) Online Store -> Themes->oct 2020->action-> Edit Code (go to code part)

(3) Go to Assets->Add a new asset-> mobile_custom.css

and call this on head

<head>

{% include 'booster-seo' %}

</head>

(4) Go to Section -> create-> mobile-nav-top.liquid

and call this under head section

=====================================================================

ADD INCLUDE CUSTOM SECTION CSS, JS

steps to add a custom section - https://www.tech-prastish.com/blog/how-to-create-custom-sections-in-shopify/

Call JS

Call CSS

or <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}" type="text/css">

**************************************

How to run Shopify in local

==============================================

1- Install Powershell

2- Install Chocolatey

3- Install Themekit

4- Intall V S code editor

5- Go Terminal-> New Terminal

6- type command -> theme download

7- after then -> theme watch

**********************************************

ADD COMMENT

{% comment %}

code put here

{% endcomment %}

======================================================================

How to find Shopify actual theme name

-------------------------------------------

https://www.youtube.com/watch?v=64CHt6d-DQg

1- Go to inspect website and goto view source

2- and Search => "boomerang"

3- find theme name => window.BOOMR.themeName = "Canopy";

2nd method but not give correct name

------------------------------------------

1- Go to inspect website and goto view source

2- and Search => "shopify.theme"

3- find theme name => window.BOOMR.themeName = "Canopy";

4- Shopify.theme = {"name":"Cross","id":8285892,"theme_store_id":null,"role":"main"};

**********************************************************

How to create a new page in Shopify

Step 1- go to live theme and create template (customize_quiz_steps=page.customize_quiz_steps)

and call under this css, js

Step 2- page.customize_quiz_steps

{% include 'customized-ashirwaad-atta-select' %}

</div>

Step 3- create snippet

Step 4- Click on pages-> add new-> put page name-> and select template

=========================================================================

How to set any prouct Quantity Min 4 or 2 in shopify

---------------------------------------------------

Step 1- First Create tag Go to Live theme ->Go products->Go Collections->Create Collection

Enter Title->Min Quantity Four, Collection type->Automated, Products must match:All condition

Product tag is equal to (product category name->Dining Chairs)

Step 2- Select tag(Min Quantity Two) which product as you want(Crown Dining Chair)

Step 3- Put This code in product-template.liquid (call tag name using if condition)

{% if product.tags contains 'Min Quantity Four' %}

{% else %}

{% endif %}

</div>

and show message using this

{% if product.tags contains 'Min Quantity Four' %}

<div class="min_orderf">Minimum Order Quantity is 4.</div>

{% endif %}

Step 4- Add This JS in app.js ot theme.js page

$('document').ready(function () {

$('.qty-group .minus').on('click', function(){

var qty = parseInt($(this).parent('.qty-group').find('.quantity-input').val());

//alert(qty);

if($(this).hasClass('plus')) {

qty++;

}else {

if(qty == '4') {

return false;

//qty--;

}

qty = (isNaN(qty))?1:qty;

$(this).parent('.qty-group').find('.quantity-input').val(qty);

});

Step 5- Add this code in Cart Page

{% if item.product.tags contains 'Min Quantity Four' %}

{% else %}

{% endif %}

</div>

and show message using this

{% if item.product.tags contains 'Min Quantity Four' %}

<div class="min_orderf">Minimum Order Quantity is 4.</div>

{% endif %}

=======================================

Mutiple Min Quantity Condition

--------------------------pdp page-------------------------------------

{% if product.tags contains 'Min Quantity Four' %}

{% elsif product.tags contains 'Min Quantity Two' %}

{% else %}

{% endif %}

{% comment %}

{% endcomment %}

</div>

{% if product.tags contains 'Min Quantity Four' %}

<p class="qtity-text">Minimum Order Quantity is 4.</p>

{% elsif product.tags contains 'Min Quantity Two' %}

<p class="qtity-text">Minimum Order Quantity is 2.</p>

{% endif %}

--------------------cart page--------------------------------------------------

{% if item.product.tags contains 'Min Quantity Four' %}

{% elsif item.product.tags contains 'Min Quantity Two' %}

{% else %}

{% endif %}

----------------------theme.js-------------------------------------------------------------------

$('document').ready(function () {

$('.qty-group .minus').on('click', function(){

var qty = parseInt($(this).parent('.qty-group').find('.quantity-input').val());

var minqty = $('#idminquantity').val();

if($(this).hasClass('plus')) {

qty++;

}else {

if(qty == minqty && minqty!=0) {

return false;

//qty--;

}

qty = (isNaN(qty))?1:qty;

$(this).parent('.qty-group').find('.quantity-input').val(qty);

});

==========================================================

Change multiple variant images according to the selected color

------------------------------------------------------------

{% for media in product.media %}

{% case media.media_type %}

{% when 'image' %}

</a>

</div>

{% endfor %}

--------------------------------------------

$(document).on('change','#product-selectors-option-1',function () {

$('.altitem').css('display', 'none');

var color= $(this).val();

color= color.toLowerCase();

//alert(color);

//$('.filter-'+color).css('display','block');

});

</script>

or using Visibility in place of Display

$(document).on('change','#product-selectors-option-1',function () {

$('.altitem').css('visibility', 'hidden');

var color= $(this).val();

color= color.toLowerCase();

//alert(color);

$('.filter-'+color).css('visibility','visible');

});

========================================================================

Shopify Development

===================================================================

https://www.youtube.com/watch?v=TlgHl-F-crg&list=PLOTfR5AmSOWBTgr6aprfjZWjiYXqkFrU1

Step 1- First create Account https://partners.shopify.com/

Step 2- Go to Store & create Store()

Step 3- Fill store Details Name, URL, Address, City, Zip Code, password, Purpose->Client

Step 4- After than Click on online store

Step 5- Click on Online store -> Themes-> Customize (manage logo, Announcement)

Step 6- Access in Locally -> first intall Shopify Theme Kit-> https://shopify.dev/apps/tools, https://shopify.dev/themes/tools/theme-kit/getting-started

Step 7- What is liquid? https://shopify.github.io/liquid/ | https://www.shopify.in/partners/shopify-cheat-sheet

Ans- Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.

Liquid uses a combination of (objects, tags, and filters) inside template files to display dynamic content.

(a) Objects

Objects contain the content that Liquid displays on a page. Objects and variables are displayed when enclosed in double curly braces: {{ and }}.

Input

Output = Introduction

(b) Tags

Tags create the logic and control flow for templates. The curly brace percentage delimiters {% and %} and the text that they surround do not produce any visible output when the template is rendered. This lets you assign variables and create conditions or loops without showing any of the Liquid logic on the page.

Input-

{% if user %}

Hello {{ user.name }}!

{% endif %}

Output = Hello Adam!

Tags can be categorized into various types:

b1.1- Control flow

b1.2-Iteration

b1.3- Template

b1.4- Variable assignment

Filters change the output of a Liquid object or variable. They are used within double curly braces {{ }} and variable assignment, and are separated by a pipe character |.

Input

Output

/my/fancy/url.html

Multiple filters can be used on one output, and are applied from left to right.

Input

Output

Hello Adam!

***************************************************************

---------------------------------------------------------------------------------------------

Step 1- How to create template in shopify

(page.abc-pratice.liquid)

Step 2- call sections in under template

{% section 'abc-pratice' %}

{% section 'image-text-custom' %}

Step 3- Put Content under 'abc-pratice' Section

{{ section.settings.custom_image_1 | img_url: '2048x' | img_tag }}

</div>

<h1 class="section-large-heading">Heading</h1>

<p class="discription">Lorem ipsum is placeholder text commonly used...</p>

</div>

</section>

{% schema %}

{

"name": "Image",

"settings": [

{

"type": "image_picker",

"id": "custom_image_1",

"label": "Image"

}

"presets": [

{

"name": "Image",

"category": "Content"

}

]

}

{% endschema %}

{% stylesheet %}

{% endstylesheet %}

{% javascript %}

{% endjavascript %}

Step 4- How to add Dynamic Image In Block

Put Where place you want to display:-

{{ section.settings.custom_image_1 | img_url: '2048x' | img_tag }}

Create Schema:-

"name": "Image",

"settings": [

{

"type": "image_picker",

"id": "custom_image_1",

"label": "Image"

}

============================================================================ HOW TO CREATE, theme, Index, Snippets, SECTION IN SHOPIFY

1- theme.liquid

{% comment %}

{% endcomment %}

2- index.liquid

3- Call Section in theme.liquid

{% section 'header' %}

{% section 'footer' %}

4- IF else condition

{%- if request.page_type contains 'customers/' -%}

{%- endif -%}

5- How to create snippets (best-rateing.liquid)

-----------------------------------

<h2>We Provide The Sweetest Dreams!</h2>

<p class="one-line-decsription-new">For a good night’s sleep, pick the best rated mattresses.</p>

</div>

<a href="https://doctordreams.com/apps/s/review"> <p><img data-srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-02.png?v=1623410816"

alt="google" itemprop="logo" class="lazyload"

data-sizes="auto" srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-02.png?v=1623410816"></p>

<p class="star-svg">{% include 'star-svg'%}</p>

<p class="review-number">250+ Reviews</p></a>

</div>

<a href="https://doctordreams.com/apps/s/review"> <p> <img data-srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-01.png?v=1623410816"

alt="doctor-dream" itemprop="logo" class="lazyload"

data-sizes="auto" srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-01.png?v=1623410816"></p>

<p class="star-svg">{% include 'star-svg'%}</p>

<p class="review-number">400+ Reviews</p> </a>

</div>

<a href="https://doctordreams.com/apps/s/review"> <p> <img data-srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-03.png?v=1623410816"

alt="facebook" itemprop="logo" class="lazyload facebook-logo"

data-sizes="auto" srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-03.png?v=1623410816"></p>

<p class="star-svg">{% include 'star-svg'%}</p>

<p class="review-number">300+ Reviews</p></a>

</div>

</section>

-------------------------------

6- Snippets call in home-slideshow.liquid section using include function

{% include 'best-rateing' %}

{% include 'Banner-combo-image' %}

7- (home-slideshow.liquid) Section

{% if section.settings.title != blank %}

h12jnArtiivn

{% render 'multilang' with section.settings.title %}

</h2>

</div>

{% endif %}

</div>

{% comment %}

</ul>

{% endcomment %}

</div>

</div>

</div>

</section>

<style>

#section-{{section.id}}{

margin-top: {{ section.settings.space_on }}px;

margin-bottom: {{ section.settings.space_below }}px;

position: relative;

z-index: 1;

}

.video-ds .play-icon-ds {

position: absolute;

top: calc(50% - 10px);

align-items: center;

left: calc(50% - 10px);

}

.video-ds {

position: relative;

}

.video-ds .play-icon-ds div {

background-color: #ffffff;

border-radius: 20px;

width: 40px;

height: 40px;

display: flex;

justify-content: center;

align-items: center;

box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%);

}

</style>

{% schema %}

{

"name": "Customer Google Reviews",

"class": "homepage-reviews-sections",

"settings": [

{

"type": "range",

"id": "space_on",

"label": "Space on",

"min": 0,

"max": 100,

"step": 1,

"default": 20

{

"type": "range",

"id": "space_below",

"label": "Space below",

"min": 0,

"max": 100,

"step": 1,

"default": 25

{

"type": "text",

"id": "title",

"label": "Title",

"default": "Customer Reviews"

{

"type": "select",

"id": "title_style",

"label": "Title Style:",

"options": [

{

"value": "style_1",

"label": "Style 1"

{

"value": "style_2",

"label": "Style 2"

}

"default": "style_1"

{

"type": "select",

"id": "per_row",

"label": "Customer review per row",

"options": [

{

"value": "1",

"label": "1"

{

"value": "2",

"label": "2"

{

"value": "3",

"label": "3"

{

"value": "4",

"label": "4"

{

"value": "5",

"label": "5"

}

"default": "3"

}

"blocks": [

{

"type": "Review",

"name": "Review",

"settings": [

{

"type" : "image_picker",

"id" : "reviews_image",

"label" : "Select Image"

{

"type" : "text",

"id" : "reviews_heading",

"label" : "Heading",

"default" : "Awesome..."

{

"type": "select",

"id": "rating",

"label": "Rating",

"options": [

{ "value": "star0", "label": "0 star" },

{ "value": "star1", "label": "1 star" },

{ "value": "star2", "label": "2 star" },

{ "value": "star3", "label": "3 star" },

{ "value": "star4", "label": "4 star" },

{ "value": "star5", "label": "5 star" }

"default": "star5"

{

"type" : "text",

"id" : "reviews_purchased_text",

"label" : "Purchased text",

"default" : "Purchased:"

{

"type" : "text",

"id" : "reviews_title",

"label" : "Title",

"default" : "Title"

{

"type" : "url",

"id" : "reviews_link",

"label" : "Link"

{

"type": "textarea",

"id": "body_review",

"label": "Content of Review",

"default": "Nam tempus turpis at metus scelerisque placerat nulla deumantos delo sollicitudin delos felis. Pellentesque diam dolor an elementum et lobortis at mollis ut risus. Curabitur semper sagittis mi condimentum..."

{

"type" : "text",

"id" : "name",

"label" : "Customer Name",

"default" : "Customer Name"

{

"type" : "text",

"id" : "date_review",

"label" : "Date",

"default" : "Wednesday, Jan 26, 2019"

}

]

}

"presets": [

{

"name": "Customer Google Reviews",

"category": "Reviews"

}

]

}

{% endschema %}

$('body').on('click', '.show_model_review', function() {

$("#youtube-preview-name").text("");

$("#youtube-preview-src").attr('src',"");

$("#youtube-preview-name").text($(this).data('review_title'));

$("#youtube-preview-src").attr('src',$(this).data('review_src'));

$("#myModal").modal('show');

});

$('body').on('hidden.bs.modal', '#myModal', function() {

$("#youtube-preview-name").text("");

$("#youtube-preview-src").attr('src',"");

});

$('document').ready(function(){

$.ajax({

url: 'https://middleware.doctordreams.com/api/review/filter/dynamic',

type: 'get',

success: function(resp){

if(resp.success == true){

$('#filter_add').html(resp.filter_html);

}

error:function(){

console.log('error');

}

});

$.ajax({

url: 'https://middleware.doctordreams.com/api/get/review/data1',

type: 'POST',

success: function(resp){

console.log("arti",resp)

if(resp.success == true){

$('.review_html1').html(resp.review_small_data);

slickSlider();

}

error:function(){

console.log('error');

}

});

function slickSlider(){

// slick slider

$('.multiple-items').slick({

infinite: true,

slidesToShow: 4,

slidesToScroll: 1,

dots: false,

prevArrow: '<button class="slide-arrow prev-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="40.163" height="46.18" viewBox="0 0 40.163 46.18"><defs><style>.a{fill:#083f88;}</style></defs><path class="as" d="M22.75,0,45.5,39.375H0Z" transform="matrix(-0.017, 1, -1, -0.017, 40.163, 0.687)"/></svg></button>',

nextArrow: '<button class="slide-arrow next-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="40.163" height="46.18" viewBox="0 0 40.163 46.18"><defs><style>.a{fill:#083f88;}</style></defs><path class="as" d="M22.75,0,45.5,39.375H0Z" transform="matrix(-0.017, 1, -1, -0.017, 40.163, 0.687)"/></svg></button>',

responsive: [

{

breakpoint: 992,

settings: {

slidesToShow: 3,

slidesToScroll: 1

}

{

breakpoint: 600,

settings: {

slidesToShow: 2,

slidesToScroll: 1

}

{

breakpoint: 400,

settings: {

slidesToShow: 1,

slidesToScroll: 1

}

]

});

}

});

</script>

---------------------------------------------------------------

How to call Dynamic Heading, Description, Image, Link in Blocks

----------------------------------------------------

<h2> {{ section.settings.fproduct_text_title }} </h2>

<div>{{ section.settings.fproduct_text_body }}</div>

------------------------------------------------

{%for block in section.blocks %}

</a>

</div>

{% endfor %}

{% schema %}

{

"name": "Family products",

"settings": [

{

"id": "fproduct_text_title",

"type": "text",

"label": "heading",

"default": "title"

{

"id": "fproduct_text_body",

"type": "richtext",

"label": "Add custom text below",

"default": "<p>Add your text here</p>"

}

"blocks": [

{

"type": "image_picker",

"name": "fproduct_image",

"settings": [

{

"id": "fproduct_image",

"type": "image_picker",

"label": "Select image"

{

"id": "link",

"type": "url",

"label": "Image link"

}

]

}

"presets": [

{

"name": "Family products section",

"category": "fproduct_image"

}

]

}

{% endschema %}

--------------------call image in section------------------------

<div>

</div>

{% if section.settings.fproduct_image %}

{% endif %}

{

"id": "fproduct_image",

"type": "image_picker",

"label": "Select image"

}

=====================================================================================================

Custom color swatches Shopify

-----------------------------------------------------

(Snippets-> product-swatch.liquid)

https://www.nilkamalfurniture.com/products/nilkamal-rowan-shoe-cabinet-rack-walnut?variant=39651984015449

https://www.youtube.com/watch?v=UM-CLntvR5Q

https://community.shopify.com/c/shopify-design/product-pages-add-color-swatches-to-products/td-p/616427

Change image url

https://stackoverflow.com/questions/61315571/how-do-i-display-the-variant-image-when-the-color-swatch-of-a-variant-is-hovered

references-

https://shopwithcaa.com/collections/luggage-sets/products/swiss-gear-tyax-3-piece-expandable-hardside-luggage-set-online-only?variant=39558787203123

https://landmarkxcite.com/products/studiowest-lipbar-creme-lipstick-cbr-04

iPhone Menu

---------------------------------------

Nilkamal Furniture - 10 day 10 deals - 15/01/22

https://tympanus.net/Development/ResponsiveMultiLevelMenu/index3.html

https://www.homecentre.in/in/en/c/livingroom-sofas-sofasets

https://app.lambdatest.com/console/realtime

ajaxify cart msg

-----------------------------------------

https://community.shopify.com/c/shopify-design/product-pages-stay-on-the-product-page-after-adding-products-to/m-p/616440

https://www.youtube.com/watch?v=8_DA_cgOZq0

===============================================================================================================

vertical menu (How to add multlevel (4,5,6..etc) menu) using shopify handle (main menu(home,about,contact)->next->start home always)

=======================================================================================================

{% for link in linklists[vertical-menu].links %}

{% if linklists[link.handle] == empty %}

<li><a href="{{ link.url }}" class="top_link {% if link.active %}active{% endif %}" data-dropdown-rel="{{ link.handle }}">{{ link.title }}</a></li>

{% else %}

<li class="sublink"><a data-no-instant href="{{ link.url }}" class="dropdown_link--vertical {% if link.active %}active{% endif %}" data-dropdown-rel="{{ link.handle }}" data-click-count="0">{{ link.title }} <span class="icon-down-arrow"></span></a>

{% for link in linklists[link.handle].links %}

{% if linklists[link.handle] == empty %}

<li><a href="{{ link.url }}">{{ link.title }}</a></li>

{% else %}

<li class="sublink newvermenu-sublink"><a data-no-instant href="{{ link.url }}" data-click-count="0">{{ link.title }} <span class="right icon-down-arrow"></span></a>

{% for link in linklists[link.handle].links %}

{% if linklists[link.handle] == empty %}

<li><a href="{{ link.url }}" >{{ link.title }}</a></li>

{% else %}

<li class="sublink"><a data-no-instant href="{{ link.url }}" data-click-count="0" class="lioneactivea">{{ link.title }} <span class="right icon-down-arrow"></span></a>

{% for link in linklists[link.handle].links %}

{% if linklists[link.handle] == empty %}

<li><a href="{{ link.url }}" >{{ link.title }}</a></li>

{% else %}

<li class="sublink"><a data-no-instant href="{{ link.url }}" data-click-count="0" class="litwoactivea">{{ link.title }} <span class="right icon-down-arrow"></span></a>

{% for link in linklists[link.handle].links %}

{% if linklists[link.handle] == empty %}

<li><a href="{{ link.url }}" >{{ link.title }}</a></li>

{% else %}

<li class="sublink"><a data-no-instant href="{{ link.url }}" data-click-count="0" class="lithreeactivea">{{ link.title }} <span class="right icon-down-arrow"></span></a>

{% for link in linklists[link.handle].links %}

<li><a href="{{ link.url }}" >{{ link.title }}</a></li>

{% endfor %}

</ul> </li>

{% endif %}

{% endfor %}

</ul>

</li>

{% endif %}

{% endfor %}

</ul>

</li>

{% endif %}

{% endfor %}

</ul>

</li>

{% endif %}

{% endfor %}

</ul>

</li>

{% endif %}

{% endfor %}

</div>

$(document).ready(function() {

if ($(this).hasClass("vertical-menu--align-right")) {

setTimeout(function () {

$(".vertical-menu .vertical-menu_submenu .vertical-menu_sub-submenu").removeClass("vertical-menu--align-right");

}, 10);

}

});

$('.vertical-menu_submenu ul').addClass(function(){

return "level-"+$(this).parents('ul').length;

});

$(".level4custommenu li:first-child a").addClass("lifouractivea ");

</script>

========================================================

tags according to page url

{% if product.handle contains 'at-home-gift-card' %}

{% for v in product.variants %}

<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>

{% endfor %}

</select>

</div>

{% endif %}

=======================================================

Add 3D in PDP page using url handle if tag

-----------------------------------------------

{% if product.handle contains 'nilkamal-double-pillow-top-bonnell-spring-mattress' %}

<h3>Know Your Mattress</h3>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="textLayerNum"></span>Knitted Fabric

</h4>

Premium quality knitting creates a super smooth and comfortable outer fabric.

</div>

<span class="textLayerNum"></span>PU Foam Quilt & Soft Wadding

</h4>

Soft fabric, supportive foam, and thick cushioning combine to provide ultimate relaxing comfort.

</div>

<span class="textLayerNum"></span>Pure PU Foam

</h4>

Supportive and relaxing, foam supports your spine and muscles as you sleep.

</div>

<span class="textLayerNum"></span>Cotton Felt

</h4>

Lightweight cotton fabric provides excellent padding and comfort.

</div>

<span class="textLayerNum"></span>Nylon Mesh

</h4>

Durable fabric that wicks away moisture and improves breathability.

</div>

<span class="textLayerNum"></span>Bonnell Springs

</h4>

Bouncy, pressure-absorbing springs encourage elevation and support.

</div>

<span class="textLayerNum"></span>Nylon Mesh

</h4>

Durable fabric that wicks away moisture and improves breathability.

</div>

<span class="textLayerNum"></span>Cotton Felt

</h4>

Lightweight cotton fabric provides excellent padding and comfort.

</div>

<span class="textLayerNum"></span>Pure PU Foam

</h4>

Supportive and relaxing, foam supports your spine and muscles as you sleep.

</div>

<span class="textLayerNum"></span>PU Foam Quilt & Soft Wadding

</h4>

Soft fabric, supportive foam, and thick cushioning combine to provide ultimate relaxing comfort.

</div>

{% endif %}

--------------------------------------------------------

$('.img-numLayering,.layerDescAccordian').click(function(){

var fav=$(this).data("layer");

$(".layerDescAccordian").removeClass('active');

$(".img-numLayering").removeClass('active');

// $("[data-layer='"+ fav +"']").addClass('img-numLayering active');

$("[data-layer='"+ fav +"']").addClass('active');

//$('.img-numLayering[data-layer="'+fav+'"]').addClass('active');

});

</script>

<style>

.layerDescAccordian-body {

display: none;

}

.layerDescAccordian.active .layerDescAccordian-body {

display: block;

color: #404041;

font-family: 'gothamRounded-medium';

font-size: 16px;

}

.layerDescAccordian {

cursor: pointer;

margin-bottom: 15px;

}

.layerDescAccordian.active i.fa.fa-caret-down {

display: none;

}

.layerDescAccordian i.fa.fa-caret-up {

display: none;

}

i.fa.fa-caret-down, i.fa.fa-caret-up {

float: right;

}

.layerDescAccordian.active i.fa.fa-caret-up {

display: block;

}

</style>

--------------------------------------------------------------

.number-3d-layer span{

background-color: orange;

padding: 10px 17px;

color: #fff;

border-radius: 50%;

}

.number-3d-layer{

text-align: center;

position: absolute;

right: 29%;

margin-top: 40px;

}

.image-3d-layer{

max-width: 80%;

}

.imgLayeringWrap {

padding: 0 0;

left: -200px;

position: relative;

width: 780px;

}

.imgLayering {

position: absolute;

}

.img-numLayering:nth-child(1) {

top: 0px;

z-index: 8;

}

.img-numLayering {

position: relative;

}

.img-numLayering.active .layerImgWrap {

cursor: pointer;

transform: scale(1.02);

}

.img-numLayering .layerImgWrap {

transform: scale(1);

transition: opacity 1s ease,transform 1s ease;

}

.img-numLayering .layerNum {

margin-top: -54px;

}

.img-numLayering .layerNum {

right: 80px;

}

.img-numLayering .layerNum {

position: relative;

right: 80px;

float: right;

z-index: 20;

height: 0;

margin-top: -42px;

width: 30px;

}

.img-numLayering.active .layerNum::before {

width: 280px;

}

.layerNum::before {

content: '';

width: 0;

border-bottom: solid 1px #023e88;

position: absolute;

z-index: 1;

right: 100%;

top: 15px;

display: none;

position: relative;

left: 0;

transition: width 1s ease;

display: block;

}

.img-numLayering .layerNum span::before, .img-numLayering .layerNum span::after {

display: block;

box-shadow: transparent 0 0 0.1875rem 0.1875rem;

width: 3rem;

height: 3rem;

margin-left: -0.5rem;

margin-top: -0.5rem;

content: "";

border: 4px double transparent;

border-radius: 100%;

position: absolute;

opacity:0.2;

}

.img-numLayering.active .layerNum span::after {

animation-name: borderEff2;

}

.img-numLayering:hover .layerNum span::before, .img-numLayering:hover .layerNum span::after, .img-numLayering.active.layerNum span::before, .img-numLayering.active .layerNum span::after {

box-shadow: #023e88 0 0 0.1875rem 0.1875rem;

border-color: #023e88;

animation-duration: 2s;

animation-iteration-count: infinite;

animation-timing-function: ease-out;

animation-name: borderEff1;

}

.img-numLayering .layerNum span::before, .img-numLayering .layerNum span::after {

display: block;

box-shadow: transparent 0 0 0.1875rem 0.1875rem;

width: 3rem;

height: 3rem;

margin-left: -0.5rem;

margin-top: -0.5rem;

content: "";

border: 4px double transparent;

border-radius: 100%;

position: absolute;

}

.img-numLayering.active .layerNum span {

cursor: pointer;

background: #0093dd;

color: #fff;

}

.img-numLayering .layerNum span {

width: 2rem;

height: 2rem;

z-index: 1;

line-height: 35px;

background: #fff;

color: #023e88;

text-align: center;

display: grid;

vertical-align: bottom;

border-radius: 100%;

transition: background 0.4s ease,color 0.4s ease;

position: relative;

}

.img-numLayering .layerNum {

position: relative;

right: 80px;

float: right;

z-index: 20;

height: 0;

margin-top: -32px;

width: 30px;

}

.img-numLayering:nth-child(2) {

top: -512px;

z-index: 7;

left: -300px;

}

.img-numLayering:nth-child(3) {

top: -468px;

z-index: 6;

left: -59px;

}

.img-numLayering:nth-child(4) {

top: -406px;

z-index: 5;

left: -300px;

}

.img-numLayering:nth-child(5) {

top: -406px;

z-index: 4;

left: -63px;

}

.img-numLayering:nth-child(6) {

top: -354px;

z-index: 3;

left: -158px

}

.img-numLayering:nth-child(7) {

top: -297px;

z-index: 2;

left: -317px

}

.img-numLayering:nth-child(8) {

top: -333px;

z-index: 1;

left: -48px;

}

.img-numLayering:nth-child(9) {

top: -235px;

z-index: 1;

left: -313px;

}

.img-numLayering:nth-child(10) {

top: -248px;

z-index: 1;

left: -48px;

}

.img-numLayering:nth-child(11) {

top: -134px;

z-index: 1;

left: -314px

}

.layerDescAccordianWrap {

max-width: 555px;

margin-top: 0;

top: 0;

padding-bottom: 70px;

background: #fff;

z-index: 20;

padding-left: 10px;

}

.wrapper-header-bt {

z-index: 999 !important;

}

h4.layerDescAccordian-head {

margin-bottom: 0px;

color: #0093dd;

font-size: 22px;

text-transform: capitalize;

}

@media only screen and (max-width: 540px){

.imgLayeringWrap {

padding: 15px 15px 0px;

}

@media only screen and (max-width: 767px){

.imgLayeringWrap {

left: 0px;

width: 100%;

display: grid;

max-width: 540px;

margin: auto;

padding: 25px 25px 0px;

}

@media only screen and (max-width: 540px){

.img-numLayering:nth-child(2) {

top: -233px!important;

left: -76px;

}

@media only screen and (max-width: 540px){

.img-numLayering:nth-child(1) {

top: 0px;

}

@media only screen and (max-width: 450px){

.img-numLayering:nth-child(3) {

top: -208px!important;

left: 0;

}

.img-numLayering:nth-child(4) {

top: -178px!important;

left: -75px;

}

.img-numLayering:nth-child(5) {

top: -184px!important;

left: -167px;

}

.img-numLayering:nth-child(6) {

top: -163px!important;

left: 15px;

}

.img-numLayering:nth-child(7) {

top: -145px!important;

left: -77px;

}

.img-numLayering:nth-child(8) {

top: -142px!important;

left: -21px;

}

.img-numLayering:nth-child(9) {

top: -143px!important;

left: -193px;

}

.img-numLayering:nth-child(10) {

top: -80px!important;

left: -86px;}

.img-numLayering:nth-child(11) {

top: -102px!important;

left: 26px;}}

@media only screen and (max-width: 540px){

.layerDescWrap .layerDescAccordianWrap {

padding: 13px 24px 30px;

}

@media only screen and (max-width: 767px){

.layerDescWrap .layerDescAccordianWrap {

max-width: none;

z-index: -1;

position: relative;

margin-top: -7px;

margin-bottom: 26px;

padding: 8px 24px 12px;

background: rgb(243, 249, 249);}

.header-bottom { z-index: 999 !important;}

.layerNum::before {border-bottom: none;}

.layerDescAccordianWrap{padding-bottom: 0px;}

.img-numLayering.active .layerNum span::after, .img-numLayering.active.layerNum span::before, .img-numLayering:hover .layerNum span::after, .img-numLayering:hover .layerNum span::before {

box-shadow: #023e88 0 0 0.1875rem 0.1875rem;

border-color: #023e88;

animation-duration: 2s;

animation-iteration-count: infinite;

animation-timing-function: ease-out;

animation-name: borderEff1;

}

.layerDescAccordian {

display: none;

}

.layerDescAccordian.active {

display: block;

}

.threed-title h3{

font-size: 44px;

font-weight: 400;

line-height: 60px;

margin-bottom: 30px;

display: inline-block;

color: #0093dd;

text-align: center;

margin-top: 30px;

text-transform: capitalize;

}

.threed-title {

text-align: center;

}

.svgclr {

fill: white !important;

}

.wishdot {

position: absolute;

right: -4px;

top: -6px;

min-width: 14px;

min-height: 18px;

text-align: center;

padding: 2px 0 0 1px;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

z-index: 2;

background-color: #1e1e1e;

color: #ffffff;}

.awrap {

position: relative;

}

@media only screen and (max-width: 540px){

.img-numLayering:nth-child(1) {

top: 0px !important;

}

body#buy-plus-orthopaedic-mattress-online-doctor-dreams .img-numLayering:nth-child(1) {

top: 0px;}

}

.imgcls {

min-height: inherit;

object-fit: unset;

width: 425px;

height: 300px;

max-height: 100%;}

body#buy-nilkamal-flora-double-pillow-top-bonnell-spring-mattress-online .imgLayeringWrap { left: -69px;}

.imgLayering img {width: 90% !important;}

@media only screen and (max-width: 767px){

body#buy-nilkamal-flora-double-pillow-top-bonnell-spring-mattress-online .imgLayeringWrap {

left: 0px;

}

.imgLayering img {width: 100%!important;}

.imgLayering {position: relative;top: 0%; margin-bottom: -40px;}}

=======================================================================

Learn Practical Liquid

------------------------------------------page.demo.liquid------------------------

<h1>Liquid {{ page.title }} </h1>

</div>

{% assign my_variable = "This is my variable" %}

{% comment %} Print variable here {% endcomment %}

{% capture about_me %}

I am Lalit and {{ my_variable }}.

{% endcapture %}

<div> {{ about_me }} </div>

<br>

{% assign num1 = 20 %}

{% assign num2 = 40 %}

Addition = {{ num1 | plus: num2 }}

<br>

Subtraction = {{ num2 | minus: num1 }}

<br>

Multiplication = {{ num1 | times: num2 }}

<br>

Division = {{ num2 | divided_by: num1 }}

<br>

{% if num2 > num1 %}

Greater than number is {{ num2 }}

{% else %}

Greater than number is {{ num1 }}

{% endif %}

{% assign color = "blue" %}

{% case color %}

{% when "red" %}

Color is {{ color }}

{% when "blue" %}

Color is {{ color }}

{% when "green" %}

Color is {{ color }}

{% else %}

None of the above

{% endcase %}

{% for i in (1..5) %}

The number is : {{ i }} <br>

{% endfor %}

<br>

<div> {{ page.title }} </div>

<div> {{ page.content }} </div>

<div> Handle = {{ page.handle }} </div>

<br>

{% if page.handle contains 'demo' %}

Hi this is a demo.

{% endif %}

{% section 'demo_text' %}

</div>

-------------------------------------------Create Section (demo_text.liquid)-------------------------------------

{% if section.settings.enable_heading %}

<h4 class="custom_heading" style="text-align: {{ section.settings.text_position }}"> {{ section.settings.text_id }} </h4>

{% endif %}

{% if section.settings.myimage %}

{% endif %}

<hr>

{% for block in section.blocks %}

{% if block.settings.enable_gallery_img %}

{% endif %}

</div>

{% endfor %}

</div>

{% schema %}

{

"name": "Demo page text",

"settings": [

{

"type": "text",

"id": "text_id",

"label": "Enter text",

"default": "Section Heading is here"

{

"type": "checkbox",

"id": "enable_heading",

"label": "Enter your text",

"default": true

{

"type": "select",

"id": "text_position",

"label": "Position your text",

"options": [

{"value": "left", "label": "Left" },

{"value": "center", "label": "Center" },

{"value": "right", "label": "Right" }

"default": "left"

{

"type": "image_picker",

"id": "myimage",

"label": "Select image"

}

"blocks": [

{

"type": "gallery",

"name": "gallery",

"settings": [

{

"type": "checkbox",

"id": "enable_gallery_img",

"label": "Enable Gallery Image",

"default": true

{

"type": "image_picker",

"id": "gallery_image",

"label": "Gallery image"

}

]

}

"presets": [

{

"name": "My Custom Text",

"category": "text",

"blocks": [

{

"type": "gallery"

}

]

}

]

}

{% endschema %}

{% stylesheet %}

{% endstylesheet %}

{% javascript %}

{% endjavascript %}

==========================================

How to find product quantity

--------------------------------------------------------------------------------

https://speed-ecom.com/how-to-show-inventory-quantity-on-the-product-page-on-shopify/

<style>

.sd-items-count p { color:#ff2200; font-size:15px; padding:7px 0; margin:0; }

.sd-items-count img { float:left; width:20px !important;height:auto !important;margin:0 7px 0 0; padding:0; }

</style>

{% assign product_qty = 0 %}

{% for variant in product.variants %}

{% if variant.inventory_quantity > 0 %}

{% assign product_qty = product_qty | plus: variant.inventory_quantity %}

{% endif %}

{% endfor %}

{% if product_qty > 0 %}

lalit

<p>There are <span class="sd-count"><strong>{{ product_qty }}</strong></span> units left in stock.</p>

</div>

{% endif %}

==============================================

config.yml

-------------------

development:

password: 323d305aed20e3d

theme_id: "123418711897"

store: nilkamalfurniture123.myshopify.com

========================================

After Registration Form Success Message

---------------------------------------

{% form 'create_customer' %}

{%- if customer -%}

Thank you for registering an account.

</p>

{%- endif -%}

{%- if form.posted_successfully? -%}

<p>Thank you for registering an account.</p>

{%- endif -%}

</div>

</div>

</div>

</div>

</div>

{% if section.settings.text %}

{% endif %}

{% comment %}

<label for="customer[accepts_marketing]">{{ 'customer.register.accepts_marketing' | t }}</label>

</div>

{% endcomment %}

<!-- <p class="right" style="padding-top: 8px;">

</p> -->

</div>

{% endform %}

https://community.shopify.com/c/technical-q-a/registration-form-success-message/td-p/647841

*********************************************************************

How to remove sold out product from related (similar) products in shopify

------------------------------------------------------------------

{% assign product_qty = 0 %}

{% for variant in product.variants %}

{% if variant.inventory_quantity > 0 %}

{% assign product_qty = product_qty | plus: variant.inventory_quantity %}

{% endif %}

{% endfor %}

{% if product_qty > 0 %}

// code put here

{% endif %}

*********************************************************************

How to add form Pop Up in Shopify Home page

---------------------------------------------------

1- add this line after <body> tag

2- add this before </body> tag

<h1>{{ 'customer.register.title' | t }}</h1>

</div>

{% form 'create_customer' %}

{%- if customer -%}

Thank you for registering an account.

</p>

{%- else -%}

<label for="first_name">First name(*)</label>

</div>

</div>

<label for="mobile_no">Mobile(*)</label>

</div>

<label for="email">Email id(*)</label>

</div>

<label for="password">Password(*)</label>

</div>

<!-- <p class="right" style="padding-top: 8px;">

</p> -->

</div>

{%- endif -%}

{% endform %}

</div>

</div>

$(document).ready(function(){

if (window.location.href === "https://www.nilkamalfurniture.com/?_ab=0&_fd=0&_sc=1") {

window.addEventListener("load", function(){

setTimeout(

function open(event){

document.querySelector(".popuponload").style.display = "block";

document.querySelector(".popup_overlay_new").style.display = "block";

2000

)

});

document.querySelector("#close").addEventListener("click", function(){

document.querySelector(".popuponload").style.display = "none";

$('body').removeClass('register_popup');

$("#popup_overlay_new").hide();

});

$(".popuponload").click(function(e){

e.stopPropagation();

});

$(document).ready(function(){

$('body').addClass('register_popup');

});

$(document).click(function(){

$(".popuponload").hide();

$('body').removeClass('register_popup');

$("#popup_overlay_new").hide();

});

}

});

</script>

3- add this css

.popuponload input#email {

height: unset !important;

padding: 10px 24px !important;

}

.popuponload .input-group label {

position: absolute;

background-color: transparent;

padding: 10px 24px;

line-height: 24px;

top: 0;

left: 0;

bottom: 0;

color: #898989;

cursor: text;

}

@media only screen and (max-width:767px) {

.popuponload input[type=text], .popuponload input[type=password], .popuponload input[type=email], .popuponload input[type=search], .popuponload input[type=url], .popuponload input[type=tel], .popuponload input[type=number], .popuponload input[type=date], .popuponload input[type=month], .popuponload input[type=week], .popuponload input[type=time], .popuponload input[type=range], .popuponload input[type=color], .popuponload select, .popuponload textarea {

height: 31px;

min-height: 31px;

margin: 0 0 9px;

}

.popuponload {

width: 100% !important;

}

.reg-modal-left {

width: 46% !important;

min-height: 357px !important;

}

.reg-modal-left img {

width: 100% !important;

}

.reg-modal-right {

width: 54% !important;

}

.popuponload input#email {

min-height: 35px;

height: 35px;

border: unset !important;

max-width: 100%;

}

.popuponload p {

margin: 0 0 7px 0 !important;

font-family: 'Poppins' !important;

}

.reg-modal-right-wrap {

min-height: 356px !important;

}

.popuponload .reg-modal-right h1 {

font-size: 17px;

padding-top: 7px;

margin-bottom: 0px;

margin-right: 10%;

}

.popuponload .input-group input {

padding: 5px 24px !important;

}

.popuponload .input-group {

margin: 12px 0 !important;

}

.popuponload .input-group label {

padding: 6px 24px;

}

.popuponload input#email {

padding: 6px 24px !important;

}

.popuponload button {

right: 13px !important;

margin: -8px 0 13px auto !important;

}

.popuponload #create-customer {

padding: 0 10px !important;

}

.popuponload label {

font-size: 11px;

}

.popuponload input[type=text], .popuponload input[type=password], .popuponload input[type=email], .popuponload input[type=number] {

font-size: 12px !important;

}

.popuponload input.action_button[type=submit] {

min-height: 28px;

height: 37px;

}

.popuponload form {

margin-bottom: 10px;

}

@media only screen and (max-width: 380px) {

.popuponload .reg-modal-right h1 {

font-size: 15px;

margin-bottom: 0px;

}

.popuponload{

background-color: #f7f7f7;

width: 700px;

position: fixed;

transform: translate(-50%,-50%);

left: 50%;

top: 50%;

font-family: "Poppins",sans-serif;

display: none;

text-align: center;

z-index: 903;

}

.popuponload button{

display: block;

margin: 0 0 20px auto;

background-color: transparent;

font-size: 45px;

color: #000;

width: 40px;

height: 40px;

border: none;

outline: none;

cursor: pointer;

font-weight: normal !important;

position: absolute;

z-index: 1;

right: 20px;

}

.popuponload h2{

margin-top: -20px;

}

.popuponload p{

font-size: 14px;

text-align: justify;

margin: 20px 0;

line-height: 25px;

font-family: 'Poppins' !important;

}

.popuponload .popup-body {

padding: 0;

display: flex;

}

.reg-modal-left {

display: inline-block;

width: 300px;

float: left;

min-height: 512px;

}

.reg-modal-right {

display: inline-block;

width: 400px;

float: left;

position: relative;

}

.reg-modal-right-wrap {

min-height: 366px;

box-sizing: border-box;

}

.reg-modal-right-bottom-wrap {

text-align: center;

padding: 20px 50px;

box-sizing: border-box;

}

.popuponload #create-customer {

padding: 0 27px;

}

.popuponload .register-box {

width: 100% !important;

background: #fff;

}

.popuponload .input-group {

position: relative;

border: 2px solid #bbbbbb;

border-radius: 8px;

margin: 24px 0;

}

.popuponload .input-group input {

padding: 10px 24px;

border: none;

background-color: transparent;

width: 100%;

color: #363636;

font-size: 16px;

line-height: 24px;

}

.input-group:hover,

.input-group:focus-within {

border-color: #0093dd;

}

.input-group input:focus,

.input-group:hover input {

color: #0093dd;

}

.popuponload .input-group:hover label {

color: #0093dd;

}

.input-group:focus-within label,

.input-group input:not(:placeholder-shown) ~ label {

padding: 0px 8px;

background-color: #ffffff;

top: -12px;

left: 16px;

bottom: auto;

color: #363636;

}

.popuponload input[type=text], .popuponload input[type=password], .popuponload input[type=email], .popuponload input[type=number] {

height: unset;

min-height: unset;

margin: unset;

border-color: unset !important;

font-size: 14px !important;

}

.popuponload input[type=text]:active, .popuponload input[type=password]:active, .popuponload input[type=email]:active, .popuponload input[type=number]:active {

border: none;

}

.popuponload input[type=text]:focus, .popuponload input[type=password]:focus, .popuponload input[type=email]:focus, .popuponload input[type=number]:focus {

border: none;

}

.reg_success_msg {

color: red;

}

.register_popup {

overflow:hidden;

}

.popup_overlay_new {

z-index: 902;

background-color: #555;

opacity: .3;

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

display: none;

-webkit-transition: background .3s ease-out;

-moz-transition: background .3s ease-out;

-o-transition: background .3s ease-out;

transition: background .3s ease-out;

}

*********************************************************************

How to add assign variable in shopify

------------------------------------------------------------------

{%- liquid

assign title_t = 'customer.register.page_title' | t

assign first_name_t = 'customer.register.first_name' | t

assign last_name_t = 'customer.register.last_name' | t

assign email_t = 'customer.register.email' | t

assign password_t = 'customer.register.password' | t

assign submit_t = 'customer.register.submit' | t

assign login_t = 'customer.register.login' | t

-%}

*********************************************************************

How to Assign variable in shopify

------------------------

{% assign abc = 1 %}

and call

{% increment abc %}

-----------------------

How to Get Image URL in Shopify {#guide-to-get-image-url}

https://blog.avada.io/shopify/devdocs/how-to-get-image-url-in-shopify.html

-------------------------------------------

*****************************************

How to Get Gallery Image in Shopify

--------------------------------

{% for media in product.media %}

{% assign i = 1 %}

</div>

{% endfor %}

**********************************

How to Set Limit In for loop in Shopify ------------------------------------------ {% assign pcd = 1 %} {% assign varpci = 0 %} {%- if product.media.size > 0 -%} {% for media in product.media limit:4 %} {% assign varpci = varpci | plus: 1 %} <div class="column1 photo-collage__image photo-collage__image--{% increment pcd %}"> <img src="{{ media | img_url: '1024x' }}" style="width:100%" onclick="openModal();currentSlide({{ varpci }})" class="hover-shadow cursor"> </div> {% endfor %} {%- endif -%} *************************************************************

How to add Dynamic Class in body in Shopify (theme.liquid) ------------------------------------------------------------- <body class="gradient template--{{ template | split: '.' | first | remove: '_' | replace: '/', '--' }} page--{{ page_title | handle }}"> **************************************************************************************

Social Share custom Button in Shopify -------------------------------------------- {% capture current_url %}{% if social-buttons == 'article' %}{{ shop.url }}{{ article.url }}{% else %}{{ canonical_url }}{% endif %}{% endcapture %} {% capture buttons %} <div class="social_buttons"> {% capture title %}{% if social-buttons == 'article' %}{{ article.title | truncate: 30 | url_escape }}{% else %}{{ product.title | truncate: 30 | url_escape }}{% endif %}{% endcapture %} {% capture shop_name %}{{ shop.name | url_param_escape }}{% endcapture %} {% capture twitter_name %}{{ settings.twitter_link | split: 'twitter.com/' | last }}{% endcapture %} {% if social-buttons == 'article' %} <span class="text" style="display:none;">Share it</span> {% endif %} <div class="share-btn facebook"> <a target="_blank" class="icon-facebook-share" title="{{ 'layout.social_sharing.facebook_title' | t }}" href="https://www.facebook.com/sharer/sharer.php?u={{ current_url }}"></a> </div> <div class="share-btn twitter"> <a target="_blank" class="icon-twitter-share" title="{{ 'layout.social_sharing.twitter_title' | t }}" href="https://twitter.com/intent/tweet?text={{ title | replace: '&','%26' }}&url={{ current_url }}{%- if twitter_name != blank -%}&via={{ twitter_name }}{%- endif -%}"></a> </div> <div class="share-btn whatsapp"> <a target="_blank" class="icon-whatsapp-share" title="{{ 'layout.social_sharing.twitter_title' | t }}" href="https://wa.me/?text=I'm%20viewing%20this%20product%20{{ current_url }}"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="21px" height="21px" viewBox="0 0 455.731 455.731" style="enable-background:new 0 0 455.731 455.731;" xml:space="preserve"> <g> <rect x="0" y="0" style="fill:#1BD741;" width="455.731" height="455.731"/> <g> <path style="fill:#FFFFFF;" d="M68.494,387.41l22.323-79.284c-14.355-24.387-21.913-52.134-21.913-80.638 c0-87.765,71.402-159.167,159.167-159.167s159.166,71.402,159.166,159.167c0,87.765-71.401,159.167-159.166,159.167 c-27.347,0-54.125-7-77.814-20.292L68.494,387.41z M154.437,337.406l4.872,2.975c20.654,12.609,44.432,19.274,68.762,19.274 c72.877,0,132.166-59.29,132.166-132.167S300.948,95.321,228.071,95.321S95.904,154.611,95.904,227.488 c0,25.393,7.217,50.052,20.869,71.311l3.281,5.109l-12.855,45.658L154.437,337.406z"/> <path style="fill:#FFFFFF;" d="M183.359,153.407l-10.328-0.563c-3.244-0.177-6.426,0.907-8.878,3.037 c-5.007,4.348-13.013,12.754-15.472,23.708c-3.667,16.333,2,36.333,16.667,56.333c14.667,20,42,52,90.333,65.667 c15.575,4.404,27.827,1.435,37.28-4.612c7.487-4.789,12.648-12.476,14.508-21.166l1.649-7.702c0.524-2.448-0.719-4.932-2.993-5.98 l-34.905-16.089c-2.266-1.044-4.953-0.384-6.477,1.591l-13.703,17.764c-1.035,1.342-2.807,1.874-4.407,1.312 c-9.384-3.298-40.818-16.463-58.066-49.687c-0.748-1.441-0.562-3.19,0.499-4.419l13.096-15.15 c1.338-1.547,1.676-3.722,0.872-5.602l-15.046-35.201C187.187,154.774,185.392,153.518,183.359,153.407z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg> </a> </div> {% comment %} <div class="share-btn google"> <a target="_blank" class="icon-gplus-share" title="{{ 'layout.social_sharing.google_plus_title' | t }}" href="https://plus.google.com/share?url={{ current_url }}"></a> </div> <div class="share-btn mail"> <a href="mailto:?subject={{ 'layout.social_sharing.email_subject' | t: title: title }}&body={{ 'layout.social_sharing.email_message' | t: title: title, name: shop_name }}%0D%0A%0D%0A{{ current_url }}" target="_blank" class="icon-mail-share" title="{{ 'layout.social_sharing.email_title' | t }}"></a> </div> {% endcomment %} </div> {% endcapture %} {% if social-buttons == 'article' and section.settings.display_social_buttons %} <div class="share_article"> {{ buttons }} </div> {% elsif social-buttons == 'product' and section.settings.display_social_buttons %} {{ buttons }} {% endif %} ***********************************************************************

How to add Custom related products in Shopify ------------------------------------------- https://websensepro.com/blog/how-to-add-custom-related-products-to-your-product-page-shopify/ ******************************************************************************

How to add Custom metafield and show in Shopify --------------------------------------------------------------------------

elsif product.metafields.c_f.how_to_use

assign has_tab = true

assign content = product.metafields.c_f.how_to_use

elsif product.metafields.c_f.ingredients

assign has_tab = true

assign content = product.metafields.c_f.ingredients

***********************************************************************

How to Create Custom Section and show in Shopify --------------------------------------------------------------------------

https://www.youtube.com/watch?v=SpasffauAcE

new-testimonials.liquid

<h1>My First Custom Section</h1> {% schema %} { "name": "New Testimonial Design", "settings": [], "presets": [ { "name":"New Testimonial" } ] } {% endschema %} {% stylesheet %} {% endstylesheet %} {% javascript %} {% endjavascript %}

***********************************************************************

How to Become a Shopify Developer in 2023

---------------------------------------------------

https://www.ecommercethesis.com/how-to-become-a-shopify-developer/

***********************************************************************

Hanan https://www.youtube.com/watch?v=HM5dSZi4nXk&list=PLozpfQW4uw23CKlyE8D_YMX0KDjHdf0T6&index=3

https://www.shopify.com/partners/shopify-cheat-sheet

https://www.yahoobaba.net/

Thursday, 18 May 2023

Laravel

Thursday, 9 March 2023

Java Script ES6

Friday, 3 February 2023

English Speaking

Thursday, 2 February 2023

React JS

Sunday, 25 December 2022

WIX

Saturday, 7 May 2022

Ajax

Tuesday, 24 November 2020

SHOPIFY

{{ 'customer_area.js' | asset_url | script_tag }}

How to call Dynamic Heading, Description, Image, Link in Blocks