When you created a new webshop it required to have an NT popup because the site needs to be tested before granting access to the public users. (to Show NT popup Anonymous Authentication need to be Disabled).
When we want to add a new webshop to Live, we do not directly bind the website URL to exist Live Web site (as we do in Beta sites). we create the new webshop separately.
1.Authentication
2. Current Live Website
3.Newly created web site for With NT Popup
because IIS only provides one Authentication configuration (NT Popup) per site. (it does not support multiple NT Popup even we bind to different hostnames for one web site)
if the current shop is already on Live, Then its Anonymous Authentication is Enabled (NT popup is been disabled ).
As a solution for this, we create a new Webshop on IIS (ChampionPowerCALive) and set it's NT popup Enabled. to enable the NT Popup, we set as following (Image: 3.Newly created web site for With NT Popup)
Anonymous Authentication - Disable
Basic Auth - Enabled.
4. Add new licenses to the Live environment.
add to bin folder/ backup old and
Task service folder.
5. Select new SSL certificate
right click your Live site > site Binding > Edit > SSL certificate > select the correct / new license file.
if the certificate not installed correctly, it will show as following
6. Run the script and add new web store to live > restart a pool
7. Need to change the app pool of the newly created site
for this example, we set "ChampionPowerCALive" to the Original Live site app pool.
web site ChampionPowerLive and ChampionPowerCALive both use ChampionPowerLive app pool
else it will get an error on the new webshop.
8. Then go to the new webshop and the popup need to be displayed.
9.Bind after testing
after testing, we don't need an additional webshop with NT popup,
then add domain url of additional shop to live bindings
if You recive run time error
add domain default shop
created ticket for New SSL Certificate for Champion Power Equipment.
React hook can not create inside if codition it will give Error
TotalCounter.js
importReact, { useEffect } from"react";
exportdefaultfunctionTotalCount({ value }) {
if (value !== 0) {
useEffect(() => {
document.title = "Item in basket: " + value;
});
}
return<h1> The totalcount is {value}</h1>;
}
on App.js
return<TotalCount/>;
it will give following error
./src/hooks/TotalCounter.js Line 5:5: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks
correct way is following use condition inside the useEffect
importReact, { useEffect } from"react";
exportdefaultfunctionTotalCount({ value }) {
useEffect(() => {
if (value !== 0) {
document.title = "Item in basket: " + value;
}
});
return<h1> The totalcount is {value}</h1>;
}
Then title only update for value != 0
eg : value = 0 // not show title on page
eg: value =5 // show on Title.
You can write Effects inside the functions to,
when create funtions always set name as :useDocumentTitle
TotalCounter.js
importReact, { useEffect } from"react";
exportdefaultfunctionTotalCount({ value }) {
useDocumentTitle("Item in basket:- " + value);
return<h1> The totalcount is {value}</h1>;
}
functionuseDocumentTitle(title) {
useEffect(() => {
document.title = title;
});
}
End of React hooks video
React list and keyshttps://web.microsoftstream.com/video/893c1c4f-5f1d-4f7a-baba-bfbee546dbfb
Event Handles optimization
Basket.js
importReact, { useState } from"react";
importFancyButtonfrom"./FancyButton";
exportdefaultfunctionBasket() {
const [totalCount, setTotalCount] = useState(0);
consthandleChange = (e) => {
if (e.target.value === "i") setTotalCount(totalCount + 1);
elsesetTotalCount(totalCount - 1);
};
const [color, setColor] = useState("red");
consthandleColorToggle = () => {
if (color === "red") setColor("green");
elsesetColor("red");
};
return (
<>
<h1style={{ color }}>Total count is {totalCount}</h1>
