csináltam egy interaktív póló tervezőt a virtuemart override fáljában a default php-ben, van hozzá még egy másik php fájl is és egy js- fájl,
meg is jelenik szépen az adott terméknél ez. lehet testreszabni a pólót, megjelenik a póló képen interaktívan a felirat a kép stb.
Viszont itt jön a gond, hogy a kosárba rakás után nem jelenik meg a kosárban, tehát nem adja át a default fájl a kosárnak az értékeket.
Mi lenne szerintetek a legjobbmegoldás.
Itt a fájlom ani anúgy js-el szépen müködik.
<style>
.designer-layout {
display: flex;
gap: 40px;
justify-content: center;
align-items: flex-start;
margin-top: 30px;
flex-wrap: wrap;
}
.canvas-side {
flex: 1;
max-width: 420px;
}
.editor-side {
flex: 1;
max-width: 500px;
}
.shirt-designer-toolbar {
margin-bottom: 20px;
}
#initial-shirt-image {
display: none;
}
</style>
<div id="shirt-designer-container" class="shirt-designer-wrapper designer-layout">
<!-- 🎨 Bal oldalon: canvas -->
<div class="canvas-side">
<h3>🎨 Tervezd meg a saját pólódat!</h3>
<canvas id="shirt-canvas" width="400" height="400"></canvas>
<p><small>* A végleges nézet megjelenik itt.</small></p>
<!-- ⛳ Láthatatlan póló kép referenciának -->
<img id="initial-shirt-image" src="http://localhost/tesztoldal/images/polo-feher-front.png" alt="Póló alap" />
</div>
<!-- 🛠️ Jobb oldalon: szerkesztők -->
<div class="editor-side">
<div class="shirt-designer-toolbar">
<label for="custom-text">Szöveg:</label>
<input type="text" id="custom-text" placeholder="Írd be a saját szöveged...">
<label for="font-select">Betűtípus:</label>
<select id="font-select">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Georgia">Georgia</option>
<option value="Impact">Impact</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Verdana">Verdana</option>
<option value="Lobster">Lobster</option>
</select>
<label for="font-size">Méret:</label>
<input type="number" id="font-size" min="10" max="100" value="30">
<label for="font-color">Szín:</label>
<input type="color" id="font-color" value="#000000">
<label><input type="checkbox" id="bold"> Félkövér</label>
<label><input type="checkbox" id="italic"> Dőlt</label>
</div>
<div class="shirt-designer-toolbar">
<label for="custom-image">Saját kép feltöltése:</label>
<input type="file" id="custom-image" accept="image/*">
</div>
<div class="shirt-designer-toolbar">
<label for="emoji-select">Emoji:</label>
<select id="emoji-select">
<option value="😀">😀</option>
<option value="😎">😎</option>
<option value="🔥">🔥</option>
<option value="❤️">❤️</option>
<option value="🎮">🎮</option>
<option value="🏆">🏆</option>
<option value="🧠">🧠</option>
</select>
</div>
<div class="shirt-designer-toolbar">
<label for="shirt-side-select">Póló oldala:</label>
<select id="shirt-side-select">
<option value="front">Eleje</option>
<option value="back">Hátulja</option>
</select>
</div>
<div class="shirt-designer-toolbar">
<label for="shirt-color-select">Póló színe:</label>
<select id="shirt-color-select">
<option value="feher">Fehér</option>
<option value="fekete">Fekete</option>
<option value="piros">Piros</option>
<option value="kek">Kék</option>
<option value="zold">Zöld</option>
</select>
</div>
Témaindító
