Lisäkuvia opencart-luokissa. Tuotekuvat Opencartissa. OpenCart - Jatkamme myymälämme perustamista Osa 2
Kuvat ovat lisäkuvia tuotesivulla. Kuvien määrä on rajoittamaton
Kuvat ovat lisäkuvia tuotesivulla. Kuvien määrää ei ole rajoitettu, mutta on suositeltavaa lisätä kohtuullisissa rajoissa vakiomalliin, koska klo suuria määriä Kuvaukset, ominaisuudet, suositellut tuotteet ja arvostelut sisältävät välilehdet siirretään alas.
Kuten käytännössä kävi ilmi, tietyn kokoisten suurten ponnahduskuvien asettaminen ja luominen on täysin hankalaa, koska... Monissa kaupoissa on sekä suuria että pieniä tuotekuvia. Kokoa määritettäessä iso valokuva tuote, esimerkiksi 800x600, 800x400 kokoisissa kuvissa on valkoisia raitoja ja pienikokoiset kuvat ovat suurennettuja ja rakeisia, mikä on virheellistä ja rumaa.
Jos sivustolla on joukossaan eri kokoja ja kuvan suunta, suosittelen, että alkuperäinen valokuva avautuu. Tee tämä avaamalla tiedosto catalog/controller/product.php ja etsi rivi
$this->data["popup"] = $this->model_tool_image->resize($product_info["image"], $this->config->get("config_image_popup_width"), $this->config->get ("config_image_popup_height");
Korvaamme sen
$this->data["popup"] = "/image/".$product_info["image"];
Vastaavasti poistamme staattisen koon lisäkuvista. Tälle riville
"popup" => $this->model_tool_image->resize($result["image"], $this->config->get("config_image_popup_width"), $this->config->get("config_image_popup_height")) ,
Korvata
"popup" => "/image/".$result["image"],
Näiden muutosten jälkeen, kun napsautat tuotekuvaa, alkuperäinen valokuva alkuperäisissä mittasuhteissa näkyy ponnahdusikkunassa. Tämä menetelmä hyvä, jos käytät fancyboxia tai tavallista värilaatikkoa, koska se muuttaa automaattisesti kuvan ikkunan kokoa ja sopii suhteessa selaimen mittoihin, jos kuva on liian suuri. Normaalin colorbox-menetelmän haittana on, että jos kuva on suurempi kuin selainikkunan koko, se ylittää kehyksen ja näkyviin tulee vierityspalkkeja. Joten on parempi käyttää fancyboxia.
Kommentit:Lähettää
Victor 30.5.2015 kerro minulle, kuvani ei avaudu kelluvassa värilaatikossa, vaan erillinen sivu nurkassa... tämä ei ole hyvä, kuinka korjata se? Vastaussivusto 30.5.2015Ilmeisesti värilaatikko ei toimi tai on kytketty väärin. Katso lähde tuotesivulla sen tulee sisältää seuraavat rivit:
Sivulla pitäisi olla myös kutsu colorboxiin:
Jos jokin näistä koodeista puuttuu, sinun on selvitettävä se, katsottava mallia ja yhdistettävä komentosarjat.
PikahakuKentän kuvaus ja selitys tunnisteiden toiminnasta Opencartissa
Opencart-paikkakenttä - kuvaus kuinka se näytetään tuotekortissa
Avovaunun mitat (pituus x leveys x korkeus)
Kuva on tuotteen käyntikortti. Haluan kiinnittää tähän asiaan erityistä huomiota, koska... Kaikki tietävät, että ihmiset tervehtivät heidän vaatteitaan, tämä koskee myös tavaroita.
Opencartilla on mahdollisuus myydä suoraan laatikosta digitaaliset tavarat: kirjat, musiikki, esseet ja muut tiedostot.
Opencartin pituusyksikkö on suunniteltu valitsemaan leveyden ja korkeuden pituusyksikkö, nämä parametrit on asetettu yllä syöttökentissä.
Opencartin suunnittelu (kaavio) on tarkoitettu linkittämään moduuleja ja sivuja, sekä tieto- että kategoria-, tuote- ja järjestelmäsivuja (yhteystiedot, sivukartta jne.).
Käsikirjoituksen jakaminen helppo poistaa kaikille tarpeettomia kuvia poistetut tuotteet
Tiedämme sen hakurobotteja rakastan tekstiä sivuilla. Muista kuitenkin tekstejä julkaistaessa, onko tämä sivu tarkoitettu sellaiselle tekstille
Pieni esimerkki siitä, kuinka voit automaattisesti rullata kuvauksen sisältöä, kun napsautat otsikkoa
Arvostelu fondy-maksuyhdyskäytävästä, jonka avulla voit verkkomaksu sivustolla kaikista tavaroista tai palveluista
Kuinka optimoida verkkosivusto google sivu nopeus - yleiskatsaus Googlen palvelun päätoiminnoista sivun latausnopeuden tarkistamiseen
Et tarvitse paljon koodia mukautettujen tietojen näyttämiseen. Hakeminen riittää oikea lähestymistapa ja pari riviä koodia. Luemme artikkelista.
Kuinka "onnekas" koin UMI CMS:n, erityisesti tiedonsiirron puolelta, ja miksi tunnen silti oloni huonovointiseksi kuullessani sanan UMI
Hei kaikki!
Tänään jatkamme myymälän perustamista openCartiin, emmekä kosketa suurta osaa kaupan asetuksista, vaan melko monimutkaista ja erittäin tärkeää, kuvista vastaavaa. Tarkemmin sanottuna kaikkien sivustolla olevien kuvien koot. Lisäksi asetamme otsikkokuvan (logon) ja niin sanotun faviconin, joka muuten on .png-muodossa. Tiedän, että se on hieman epätavallista, mutta se on totta.
Joten johdannon päätyttyä siirrytään aiheeseen. Olemme jo määrittäneet myymälämme "Yleinen, Esittely", Lokalisointi, Asetukset-välilehdillä ja päässeet "Kuvat"-välilehteen.
Kuvat
Ensimmäiseksi meitä pyydetään valitsemaan kaksi pääkuvaa, sivuston logo, jota käytetään sivuston otsikossa ja myös postikirjeet sivustoltasi. (Kun käyttäjä tilaa jotain tai tämä on jonkinlainen kirje hallinnolta, sisään vakiomalli Tämä kirje sisältää vain tämän kuvan). Se näyttää tältä:
Joten sinulla on mahdollisuus valita täysin mikä tahansa kuva mukautetussa muodossa, joka on ymmärrettävä CMS:llemme (näitä ovat png, JPEG, JPG, GIF). On suositeltavaa, että kuvasi koko on 228x68, mutta tämä ei ole niin tärkeää, varsinkin jos suunnittelussasi on suurempi otsikko.
Toinen kuva on favicon. Lisäksi muoto ei ole us.icolle tuttu, vaan vain .png-muodossa. Kuvan tulee olla kooltaan 16 x 16 pikseliä, mikä on todellisuudessa sivulla ilmoitettu (vaikka, kuten käytäntö on osoittanut, myös muita kokoja voidaan lisätä faviconiin haluttaessa).
Olemme ladaneet ja valinneet tarvittavat kuvat, nyt meitä tarjotaan kuvien kokojen säätämiseen.
Kuvakoot
Luokkaluettelon kuvakoko on sen kuvan koko, joka näkyy luokissa (kerron myöhemmin kuinka nämä kuvat lisätään), oletuskoko on 80x80 pikseliä, joka näyttää tältä:
Koko iso kuva tuote - tuotesivun pääkuvan koko.
Tuotekuvan ponnahdusikkunan koko - openCartilla on tämä vaihtoehto - kun napsautat tuotekuvaa, se ponnahtaa esiin ja hyväksyy suurempi koko, jotta vierailijat voivat tarkastella tuotetta tarkemmin ja paremmin (luulen, että kaikki tietävät tämän ominaisuuden JQueryssa). Joten tässä ikkunassa ilmoitamme tämän ponnahduskuvan koon.
Kuvan koko tuoteluettelossa - luettelossa näkyvien tuotekuvien koko (luokissa, valmistajissa jne.). Aiemmin näytin missä kategoriakuvat sijaitsevat, siellä näet myös kuvan tuotelistasta (sijaitsee alla, on myös kokoa 80x80).
Lisätuotekuvien koko - alla olevien kuvien koko pääkuva tuotteita, jotka olemme muuten jo perustaneet. Oletuskoko on 74x74, joka näyttää tältä:
Samankaltaisten tuotteiden kuvakoko - Luulen, että kaikki tietävät, mikä se on, joten en kerro sinulle paljon. Samankaltaisten tuotteiden kuvat (yleensä saman kategorian tuotteet) näkyvät tuotteen sivun alalaidassa.
Vertailuluettelon kuvan koko - Onneksi opencart mahdollistaa muun muassa tuotteiden vertailun. Kaikki tietävät, mitä se on vertaillessaan ominaisuuksia, malleja jne. Kaikki näyttää tältä:
Kuvan koko muistiinpanoluettelossa - oc tarjoaa ominaisuuden nimeltä "muistiinpanot". Jokaisella rekisteröityneellä käyttäjällä on mahdollisuus lisätä tuote "muistiinpanoihin". Tämä tehtiin niin, että tuote pysyi käyttäjän näkyvissä, ja jos jotain tapahtui, hän voisi nopeasti palata siihen. Joten sisään Tämä alue Ilmoitamme tuotekuvan koon tässä "huomautusluettelossa".
Ostoskorissa olevien tavaroiden kuvien koko - kun käyttäjä on selannut sivustoa ja löytänyt tarvitsemansa tavarat, lisännyt ne ostoskoriin ja sitten hän päätti maksaa kaikesta. Menee ostoskoriin ja näkee luettelon tilatuista tuotteista kuvineen näistä tuotteista. Tässä osiossa ilmoitamme tuoteluettelossa näiden samojen kuvien koot, jotka oletuksena ovat 80x80 pikseliä. Kaikki muuten näyttää tältä:
Siinäpä siis tällä kertaa. Kiitos kaikille huomiosta, lukekaa pienet ohjeeni useammin!
Kuten jo tiedämme, ja niille, jotka eivät tiedä, tiedotetaan nyt :) alkaen opencart-versiot 2.2* ilmestyi CMS:ssä uusi tyyppi"image"-asetukset, joiden avulla voit lisätä kuvan jokaiseen vaihtoehtoon. Ja äskettäin minulta kysyttiin kysymys - "Kuinka varmistaa, että valittaessa vaihtoehto tämän tyyppistä, tuotekuva korvattiin vaihtoehdon kuvalla?" Pitkään miettimättä aloin etsiä Googlesta, mutta yllätyksekseni en löytänyt mitään vastaavaa. Tästä syystä minun piti tehdä kaikki itse. Siitä tämä artikkeli tulee käsittelemään.
Ensimmäinen asia on lisätä uusi vaihtoehto, jonka tyyppi on "image". Siirry sivustosi hallinnolliseen osaan "Katalogi"/"Asetukset"-osiossa ja napsauta "Lisää".
Täytä kaikki kentät ja lisää kuva jokaiselle vaihtoehdolle (kuva 1.)
Kuten näemme, sivulla tuli mahdolliseksi valita vaihtoehtomme ja jokaisen arvon vieressä näytettiin aiemmin lisäämämme kuva. Se on varsin kätevää. Esimerkiksi jokainen vaihtoehto on eri värinen tuote ja siten ostaja näkee esimerkiksi miltä tuote tulee näyttämään valitsemassaan värissä. Mutta on yksi haittapuoli: vaihtoehdon vieressä oleva kuva on liian pieni.
Varmistetaan, että kun vaihtoehto valitaan, päätuotteen kuva korvataan vaihtoehdon kuvalla.
Luo tiedosto option.php kansiossa site_root_folder/catalog/model/module/ option.php
tekstillä:
2. Luo rekisterinpitäjä, joka käsittelee kaikki tiedot
Luo tiedosto option.php kansiossa root_folder_site/catalog/controller/module/ option.php
ja lisää koodi sinne:
3. Kirjoitamme skriptin, joka korvaa kuvan, kun napsautat vaihtoehtoa
Mennään kansioon root_folder_site/catalog/view/theme/folder ja teemasi/template/product/product.tpl
Etsimme koodia:
ja lisää sen eteen:
$(.form-group label img").click(function())( option_id = (parseInt($(this).prev().attr("nimi").replace(/[^0-9]* / g, ""),10)); option_val_id =$(this).prev().val();
$.ajax(( url:"index.php?route=module/smoption/GetImage", tyyppi: "post", data: "option_id="+option_id+"&option_val_id="+option_val_id, dataType: "json", menestys: function(json)( popup = json.popup; thumb = json.thumb; $(".thumbnails .thumbnail").first().attr("href",popup) $(".thumbnails img").first( ).attr("src",peukalo) ) )); ));Sitten tallennamme tiedoston. Siinä kaikki. Nyt, jos teit kaiken oikein, kun napsautat vaihtoehtokuvaa, päätuotteen kuva korvataan vaihtoehdon kuvalla.
