TrovaProdotti

Informazioni sul progetto

Trovaprodotti
https://www.wm4pr.com/it/Home/Index/14900
Ambiente di test	http://test.wm4pr.com (altri dettagli)
Sistema di versionamento
Tipo	SVN
URL del trunk	https://svn.office.webmobili.it/svn/WM4/Trovaprodotti
URL base dei branch	https://svn.office.webmobili.it/svn/WM4/branches/

Trovaprodotti è l'attuale implementazione del progetto Trovaprodotti.

Checkout from SVN

Effettuare un checkout da https://svn.office.webmobili.it/svn/WM4/Trovaprodotti

• Creare un file TrovaProdotti\LocalMachineAppSettings.config
• inserire i valori cambiando i path

<?xml version="1.0"?>
<appSettings>
  <add key="immaginiPath" value="C:\Development\Webmobili\Risorse\Trovaprodotti\immagini" />
	<add key="ImageOptimizerPath" value="C:/ProgrammiPortable/ImageMagick-7.0.8-12-portable-Q16-x64/convert.exe" />
  <add key="xmlPath" value="C:\Development\Webmobili\Risorse\Trovaprodotti\XML" />
  <add key="errorsLogFile" value="C:\Development\Webmobili\Risorse\Trovaprodotti\ErrorsLog.txt" />
  <add key="settimaneConfigXml" value="C:\Development\Webmobili\Risorse\SettimaneArredamento\SettimaneArredamento.xml" />
</appSettings>

ImageOptimizerPath: è un collegamento al programma che ottimizza le immagini uploadate. Qui il sito per scaricarlo ImageMagik

• Aprire il progetto con Visual Studio
• Clean Solution
• Rebuild Solution
• Chiudere il progetto
• Entrare nella cartella generata .vs ed aprire con un editor il file .vs\TrovaProdotti\config\applicationhost.config con lo scopo di aggiungere la seconda riga virtualDirectory con il giusto path

<site name="TrovaProdotti" id="2">
  <application path="/" applicationPool="Clr4IntegratedAppPool">
    <virtualDirectory path="/" physicalPath="P:\TrovaProdotti\TrovaProdotti" />
	<virtualDirectory path="/Content/immagini/rivenditori" physicalPath="C:\Development\Webmobili\Risorse\Trovaprodotti\immagini\rivenditori" />
  </application>
  <bindings>
    <binding protocol="https" bindingInformation="*:44304:localhost" />
    <binding protocol="http" bindingInformation="*:56389:localhost" />
  </bindings>
</site>

Embedding di Trovaprodotti

Viene mandato un codice di embed di Trovaprodotti che il rivenditore deve inserire nel sito.
La best practice prevede che lo script venga inserito nel tag head e che l'iframe venga inserito dove stabilito dal rivenditore.

Esempio di inserimento
Codice javascript

<script type="text/javascript" src="https://www.wm4pr.com/Scripts/iframeresizable_client.min.js" async="async"></script>

Codice Iframe

<iframe id="tppIframe" style="background-color:transparent; width:100%; height:3000px; border:none; margin:0; max-width:none;" src="https://www.wm4pr.com/it/ResultAmbient/Shop_15909_Ambient_5/Page_1" allowtransparency="true" frameborder="0" loading="lazy"></iframe>

Wix

I siti che girano sulla piattaforma Wix sono ostici e non permettono il semplice inserimento di codice.

Inserire lo script TP

guida ufficiale
Dalla tendina advanced selezionare l'aggiunta di CustomCode e inserire lo script nell'HEAD

Inserire l'Iframe TP

esempio
Creare un file javascript dentro al folder customElements che vada a generare l'HTML dell'iframe.
Ecco un esempio funzionante:

const createIframe = (id, src) => {
  const iframe = document.createElement('iframe');
  iframe.src = src;
  iframe.id = id;
  iframe.width = '200';
  iframe.style.backgroundColor = 'transparent';
  iframe.style.width = '100%';
  iframe.style.height = '900px';
  iframe.style.border = 'none';
  iframe.style.margin = '0px 0px 0px 0px';
  iframe.style.maxWidth = 'none';
  iframe.setAttribute("allowtransparency", "true");
  iframe.setAttribute("frameborder", "0");
  iframe.setAttribute("loading", "lazy");
  return iframe;
}

class TpIframe extends HTMLElement {
  connectedCallback() {
   this.appendChild(createIframe('tppIframe', 'https://www.wm4pr.com/it/Home/Index/109771'));
  }
}
customElements.define('tp-iframe', TpIframe);

Adding the custom element

• Click Add Elements on the left side of the Editor.
• Click Embed Code.
• Click the Custom Element to add it to your page.
• Specificare il file javascript appena creato
• Nei tag inserire il nome che è stato dato dalla define(), in questo caso tp-iframe
• Una volta creato l'elemento c'è la voce attributi, creare l'attributo id con il valore tppIframe
• Inserire l'elemento con il drag and drop, salvare e pubblicare.